diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx index e8a87df..5c64bd8 100644 --- a/src/pages/profile/index.tsx +++ b/src/pages/profile/index.tsx @@ -44,7 +44,7 @@ const Profile = () => { }); useEffect(() => { const trackId = query.get("trackId"); - + if (trackId) { toast.promise(mutation.mutateAsync({ trackId }), { loading: "درحال تایید درگاه پرداخت...", @@ -68,12 +68,12 @@ const Profile = () => { } }, []); - const {data,isLoading,isFetching,error} = useQuery({ - queryKey:["profile",mutation], - queryFn:()=>{ - return axios.get('/profile'); - } - }) + const { data, isLoading, isFetching, error } = useQuery({ + queryKey: ["profile", mutation], + queryFn: () => { + return axios.get("/profile"); + }, + }); return ( <> {!mutation.isPending && ( @@ -85,8 +85,19 @@ const Profile = () => { /> )}
- - + +
); diff --git a/src/pages/profile/section/ProductConfigList.tsx b/src/pages/profile/section/ProductConfigList.tsx index 25d9ab3..6ac758b 100644 --- a/src/pages/profile/section/ProductConfigList.tsx +++ b/src/pages/profile/section/ProductConfigList.tsx @@ -66,6 +66,8 @@ const ProductConfigList = ({ textCopy={item.url} maxTraffic={item.max_traffic} traffic={item.traffic} + type={item.type} + categoryId={item.category_id} /> ); diff --git a/src/pages/profile/section/components/ConfigItem.tsx b/src/pages/profile/section/components/ConfigItem.tsx index 07a9f53..59be119 100644 --- a/src/pages/profile/section/components/ConfigItem.tsx +++ b/src/pages/profile/section/components/ConfigItem.tsx @@ -2,11 +2,13 @@ import { IoCopy } from "react-icons/io5"; import Button from "../../../../components/button"; import { ConfigItemProps } from "../../../../types/props"; import ModalConfigDetails from "./ModalConfigDetails"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import Dropdown, { DropdownItem } from "../../../../components/dropdown"; import ProgressSpace from "../../../../components/progressSpace"; import toast from "react-hot-toast"; import { useNavigate } from "react-router-dom"; +import { useDispatch } from "react-redux"; +import { setCategoryId } from "../../../../redux/slices/categoryId"; const ConfigItem = ({ dateBuy, @@ -16,22 +18,45 @@ const ConfigItem = ({ textCopy, maxTraffic, traffic, + type, + categoryId, }: ConfigItemProps) => { const [isOpen, setIsOpen] = useState(false); const [isOpenDropDown, setIsOpenDropDown] = useState(false); + const dispatch = useDispatch(); const navigate = useNavigate(); const handleToggle = () => { setIsOpenDropDown(!isOpen); }; + const [copyText, setCopyText] = useState(""); const copyToClipboard = async (textToCopy: string) => { try { await navigator.clipboard.writeText(textToCopy); toast.success("متن با موفقیت کپی شد!"); } catch (err) { - toast.error(`Failed to copy: , ${err}`); + try { + await navigator.clipboard.writeText(copyText); + toast.success("متن با موفقیت کپی شد!"); + } catch (err) { + toast.error(`Failed to copy: , ${err}`); + } } }; + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + + useEffect(() => { + if (type === "gaming" && textCopy) { + const [user, pass] = textCopy.split(","); + setUsername(user); + setPassword(pass); + } else { + setUsername(""); + setPassword(""); + } + }, [textCopy]); + return ( <>
{isDisabled && ( @@ -70,16 +99,49 @@ const ConfigItem = ({ {configName}
- + {type === "gaming" ? ( + <> + + + + ) : ( + + )} diff --git a/src/pages/profile/section/components/ModalConfigDetails.tsx b/src/pages/profile/section/components/ModalConfigDetails.tsx index 77c1521..d64d34c 100644 --- a/src/pages/profile/section/components/ModalConfigDetails.tsx +++ b/src/pages/profile/section/components/ModalConfigDetails.tsx @@ -1,4 +1,4 @@ -import { Dispatch, SetStateAction } from "react"; +import { Dispatch, SetStateAction, useState } from "react"; import MuiModal from "../../../../common/modal"; import Button from "../../../../components/button"; import { IoCopy } from "react-icons/io5"; @@ -6,6 +6,8 @@ import Alert from "../../../../components/alert/Alert"; import ProgressSpace from "../../../../components/progressSpace"; import toast from "react-hot-toast"; import { useNavigate } from "react-router-dom"; +import { useDispatch } from "react-redux"; +import { setCategoryId } from "../../../../redux/slices/categoryId"; const ModalConfigDetails = ({ isOpen, @@ -16,7 +18,11 @@ const ModalConfigDetails = ({ isShowTraffic, textCopy, maxTraffic, - traffic + traffic, + type, + username, + password, + categoryId, }: { isOpen: boolean; setIsOpen: Dispatch>; @@ -27,17 +33,27 @@ const ModalConfigDetails = ({ textCopy: string; maxTraffic: number | "unlimited"; traffic: number; + type: string; + username: string; + password: string; + categoryId: number; }) => { - const navigate = useNavigate() + const navigate = useNavigate(); + const dispatch = useDispatch(); + const [copyText, setCopyText] = useState(""); const copyToClipboard = async (textToCopy: string) => { try { await navigator.clipboard.writeText(textToCopy); toast.success("متن با موفقیت کپی شد!"); } catch (err) { - toast.error(`Failed to copy: , ${err}`); + try { + await navigator.clipboard.writeText(copyText); + toast.success("متن با موفقیت کپی شد!"); + } catch (err) { + toast.error(`Failed to copy: , ${err}`); + } } }; - return ( تاریخ خرید : {dateBuy} -
+
{isDisabled ? ( -
-
) : ( <> - - + + + ) : ( + + )} + diff --git a/src/pages/shop/section/bestQuality/BestQuality.tsx b/src/pages/shop/section/bestQuality/BestQuality.tsx index 9928d12..52d65d0 100644 --- a/src/pages/shop/section/bestQuality/BestQuality.tsx +++ b/src/pages/shop/section/bestQuality/BestQuality.tsx @@ -2,19 +2,19 @@ import PulsatingCircle from "../../../../components/pulsatingCircle"; const BestQuality = () => { return ( -
+
-

+

به عنوان{" "} - + اولین و بهترین {" "} ارائه دهنده{" "}

-

+

مفتخریم که در خدمت شما باشیم

diff --git a/src/pages/shop/section/fastSell/FastSell.tsx b/src/pages/shop/section/fastSell/FastSell.tsx index be1e3cd..983a099 100644 --- a/src/pages/shop/section/fastSell/FastSell.tsx +++ b/src/pages/shop/section/fastSell/FastSell.tsx @@ -4,8 +4,8 @@ import Typewriter from "../../../../components/typeWriter"; const FastSell = () => { return ( -
-
+
+
diff --git a/src/pages/shop/section/intro/Intro.tsx b/src/pages/shop/section/intro/Intro.tsx index 53bda0f..f85c59c 100644 --- a/src/pages/shop/section/intro/Intro.tsx +++ b/src/pages/shop/section/intro/Intro.tsx @@ -5,10 +5,10 @@ import SmoothScrollLink from "../../../../components/scrollLink"; const Intro = () => { return ( -
+

- بزرگترین فروشگاه + بزرگترین فروشگاه کاهش پینگ در ایران diff --git a/src/pages/shop/section/nowSell/NowSell.tsx b/src/pages/shop/section/nowSell/NowSell.tsx index 1424f8a..2dec480 100644 --- a/src/pages/shop/section/nowSell/NowSell.tsx +++ b/src/pages/shop/section/nowSell/NowSell.tsx @@ -2,7 +2,7 @@ import Content from "./components/Content"; const NowSell = () => { return ( -
+
diff --git a/src/pages/shop/section/productList/ProductList.tsx b/src/pages/shop/section/productList/ProductList.tsx index 5e35ceb..694768e 100644 --- a/src/pages/shop/section/productList/ProductList.tsx +++ b/src/pages/shop/section/productList/ProductList.tsx @@ -1,11 +1,14 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; import ButtonList from "./components/ButtonList"; import ListAllProduct from "./components/ListAllProduct"; import { useQuery } from "@tanstack/react-query"; import useAxios from "../../../../hooks/useAxios"; +import { RootState } from "../../../../redux/store"; +import { useSelector } from "react-redux"; const ProductList = () => { - const [activeId, setActiveId] = useState(1); + const { id } = useSelector((state: RootState) => state.configIdState); + const [activeId, setActiveId] = useState(3); const axios = useAxios(); const { data, error, isLoading, isFetching } = useQuery({ queryKey: ["categories"], @@ -13,12 +16,15 @@ const ProductList = () => { return axios.get("/home/categories"); }, }); + useEffect(() => { + if (id !== "") setActiveId(Number(id)); + }, [id]); + return (

- برای انتخاب سرویس مورد نظر کلیک کنید تا براتون نمایش داده - شود + برای انتخاب سرویس مورد نظر کلیک کنید تا براتون نمایش داده شود

= ({ }) => { if (isLoading || isFetching) { return ( -
+
{Array(3) .fill(null) .map((_, i) => ( - ) : ( )}
diff --git a/src/pages/shop/section/productList/components/ModalBuy.tsx b/src/pages/shop/section/productList/components/ModalBuy.tsx index fb10a5d..509b997 100644 --- a/src/pages/shop/section/productList/components/ModalBuy.tsx +++ b/src/pages/shop/section/productList/components/ModalBuy.tsx @@ -159,6 +159,7 @@ const ModalBuy = ({ isOpen, setIsOpen, configId }: ModalBuyProps) => { setIsOpenModal={setIsOpen} submitText="خرید" submitOnClick={submitHandler} + disabled={isLoading || isFetching} nameService={ isLoading || isFetching ? "درحال بارگذاری..." @@ -211,7 +212,7 @@ const ModalBuy = ({ isOpen, setIsOpen, configId }: ModalBuyProps) => { )}

-

+

در صورت نداشتن کد تخفیف پرداخت رو بزنید

{ - const axios = useAxios() - const {data,error,isLoading,isFetching} = useQuery({ - queryKey:["categoryLearning"], - queryFn:()=>{ - return axios.get('/home/category/learning') - } - }) - const [activeTutorial, setActiveTutorial] = useState(1); + const axios = useAxios(); + const { data, error, isLoading, isFetching } = useQuery({ + queryKey: ["categoryLearning"], + queryFn: () => { + return axios.get("/home/category/learning"); + }, + }); + const { id } = useSelector((state: RootState) => state.categoryIdState); + + const [activeTutorial, setActiveTutorial] = useState(2); + + useEffect(() => { + if (id !== 0) setActiveTutorial(id); + }, [id]); + useEffect(() => {}, []); return (

آموزش

@@ -27,7 +36,10 @@ const Tutorials = () => { error={error} setActiveTutorial={setActiveTutorial} /> - +
); }; diff --git a/src/pages/tutorial/section/components/Leran.tsx b/src/pages/tutorial/section/components/Leran.tsx index a048b2e..fb969a2 100644 --- a/src/pages/tutorial/section/components/Leran.tsx +++ b/src/pages/tutorial/section/components/Leran.tsx @@ -6,6 +6,19 @@ import { MdErrorOutline } from "react-icons/md"; import Button from "../../../../components/button"; import { saveAs } from "file-saver"; +const getMediaType = (url: string) => { + const extension = url.split(".").pop()?.toLowerCase(); + if (extension) { + if (["jpg", "jpeg", "png", "gif"].includes(extension)) { + return "image"; + } + if (["mp4", "webm", "ogg"].includes(extension)) { + return "video"; + } + } + return "unknown"; +}; + const Learn = ({ activeTutorial }: LearnProps) => { const axios = useAxios(); const { data, isLoading, isFetching, error } = useQuery({ @@ -86,14 +99,31 @@ const Learn = ({ activeTutorial }: LearnProps) => { {i.title}
- {i.medias.map((media, index) => ( - images - ))} + {i.medias.map((media, index) => { + const mediaType = getMediaType(media); + return ( +
+ {mediaType === "image" ? ( + media + ) : mediaType === "video" ? ( +
+ ); + })}
) diff --git a/src/pages/tutorial/section/components/ListTutorial.tsx b/src/pages/tutorial/section/components/ListTutorial.tsx index 198a9ec..cff1855 100644 --- a/src/pages/tutorial/section/components/ListTutorial.tsx +++ b/src/pages/tutorial/section/components/ListTutorial.tsx @@ -13,16 +13,16 @@ const ListTutorials = ({ }: ListTutorialsProps) => { if (isLoading || isFetching) { return ( -
+
{Array(3) .fill(null) .map((_, i) => (
diff --git a/src/redux/slices/categoryId.ts b/src/redux/slices/categoryId.ts new file mode 100644 index 0000000..bab6eb6 --- /dev/null +++ b/src/redux/slices/categoryId.ts @@ -0,0 +1,23 @@ +import { createSlice, PayloadAction } from "@reduxjs/toolkit"; + +interface categoryIdState { + id: number; +} + +const initialState: categoryIdState = { + id: 0, +}; + +const categoryIdSlice = createSlice({ + name: "categoryId", + initialState, + reducers: { + setCategoryId: (state, action: PayloadAction) => { + state.id = action.payload; + }, + }, +}); + +export const { setCategoryId } = categoryIdSlice.actions; + +export default categoryIdSlice.reducer; diff --git a/src/routes/PrivateRoute.tsx b/src/routes/PrivateRoute.tsx index b2f5f84..09bdc3f 100644 --- a/src/routes/PrivateRoute.tsx +++ b/src/routes/PrivateRoute.tsx @@ -1,8 +1,8 @@ import { Navigate, Outlet } from "react-router-dom"; -import { isAuthenticated } from "../utils/auth"; +import { IsAuthenticated } from "../utils/auth"; const PrivateRoute = () => { - return isAuthenticated() ? : ; + return IsAuthenticated() ? : ; }; export default PrivateRoute; diff --git a/src/types/props.d.ts b/src/types/props.d.ts index d91e0f6..d93d98d 100644 --- a/src/types/props.d.ts +++ b/src/types/props.d.ts @@ -35,9 +35,6 @@ export interface MobileMenuButtonProps { onClick: () => void; } -// begin NavbarLink.tsx -import { NavLinkProps } from "react-router-dom"; - export interface NavbarLinkProps { to: string; children: React.ReactNode; @@ -52,7 +49,6 @@ export interface NavData { // begin ListTutorial.tsx import React, { ButtonHTMLAttributes, - Component, Dispatch, InputHTMLAttributes, ReactNode, @@ -130,6 +126,8 @@ export interface ConfigItemProps { textCopy: string; maxTraffic: number | "unlimited"; traffic: number; + type: string; + categoryId: number; } // نوع Item برای آیتم‌های داخل Dropdown @@ -203,6 +201,8 @@ type Config = { show_traffic: boolean; max_traffic: number; traffic: number; + type: string; + category_id: number; }; // تعریف تایپ داده‌های برگشتی @@ -225,7 +225,8 @@ interface ProfileDetailsProps { isLoading: boolean; isFetching: boolean; error: Error | AxiosError | null; - userTitle: string; + userTitle?: string; + categoryId?: number; } interface ScrollLinkProps { diff --git a/src/utils/auth.ts b/src/utils/auth.ts index df34fa4..16c513a 100644 --- a/src/utils/auth.ts +++ b/src/utils/auth.ts @@ -1,5 +1,6 @@ import { useSelector } from "react-redux"; import { RootState } from "../redux/store"; +import toast from "react-hot-toast"; const isTokenValid = (token: string): boolean => { try { @@ -8,11 +9,12 @@ const isTokenValid = (token: string): boolean => { return !!token; } catch (error) { console.error("Token validation error:", error); + toast.error(`Token validation error:${error}`); return false; } }; -export const isAuthenticated = () : boolean => { - const {token} = useSelector((state : RootState) => state.token) +export const IsAuthenticated = (): boolean => { + const { token } = useSelector((state: RootState) => state.token); return isTokenValid(token); };