diff --git a/src/components/awards/index.tsx b/src/components/awards/index.tsx index 92e3867..3b7b563 100644 --- a/src/components/awards/index.tsx +++ b/src/components/awards/index.tsx @@ -3,13 +3,19 @@ import { AwardNotComplete } from "./award-not-complete" import { getAwardsList } from "../../services/api/awards" import { AwardsResponse } from "../../types" import { AwardSkeleton } from "./award-skeleton" +import { handleError } from "../../utility/error-handle" +import { useEffect } from "react" export const Awards = () => { - const { data, isLoading } = useQuery({ + const { data, isLoading, error } = useQuery({ queryKey: ["awards"], queryFn: getAwardsList }) + useEffect(() => { + handleError(error) + }, [error]) + if (isLoading) return return (
diff --git a/src/components/common/table.tsx b/src/components/common/table.tsx index 23f9fa5..7076dfb 100644 --- a/src/components/common/table.tsx +++ b/src/components/common/table.tsx @@ -1,11 +1,11 @@ import { flexRender, getCoreRowModel, getPaginationRowModel, useReactTable } from "@tanstack/react-table" import { ArrowDown2, ArrowLeft2, ArrowRight2, ArrowUp2, SearchNormal1 } from "iconsax-react" -import { FC, useEffect } from "react" +import { FC, useEffect, useState } from "react" import { Input } from "./input" import { ComboBox } from "./combo-box" import { Loading } from "./loading" -import { useParamsStore } from "../../store/params" import { tableRows } from "../../utility/table-rows" +import { useParamsStore } from "../../store/params" type Props = { columns: any @@ -16,8 +16,17 @@ type Props = { tableScore?: number } +type ADSortType = { + key: string, + value: 1 | -1 +} + export const Table: FC = ({ columns, data, tableStatus = false, tableScore = 0, isLoading = false, totalData = 0 }) => { - const { updateParams, params } = useParamsStore() + const [aDSort, setADSort] = useState({ + key: "", + value: 1 + }) + const { updateParams, params, clearParams } = useParamsStore() const totalPages = Math.ceil(totalData / params?.rows) const table = useReactTable({ data: data ? data : [], @@ -37,6 +46,19 @@ export const Table: FC = ({ columns, data, tableStatus = false, tableScor }) } + useEffect(() => { + const newParams: any = { + page: params?.page, + rows: params?.rows, + search: params?.search, + }; + clearParams(newParams) + if (aDSort?.key?.length > 0) { + newParams[aDSort.key] = aDSort.value; + } + updateParams(newParams); + }, [aDSort]) + useEffect(() => { updateParams({ page: 1, @@ -62,7 +84,12 @@ export const Table: FC = ({ columns, data, tableStatus = false, tableScor {table.getHeaderGroups().map((headerGroup: any, index: number) => ( {headerGroup.headers.map((header: any, index: number) => ( - + { + setADSort({ + key: header.getContext()?.column?.id, + value: aDSort?.value === 1 ? -1 : 1 + }) + }}>
{flexRender(header.column.columnDef.header, header.getContext())} {{ asc: , desc: }[header.column.getIsSorted() as string] ?? null} diff --git a/src/components/forms/forgot-password-form.tsx b/src/components/forms/forgot-password-form.tsx index f736506..2a9db73 100644 --- a/src/components/forms/forgot-password-form.tsx +++ b/src/components/forms/forgot-password-form.tsx @@ -9,6 +9,7 @@ import { useMutation } from "@tanstack/react-query" import { sendOTPMutation } from "../../services/api/auth" import toast from "react-hot-toast" import { ButtonComponent } from "../common/button" +import { handleError } from "../../utility/error-handle" export const ForgotPasswordForm = () => { const navigate = useNavigate() @@ -33,10 +34,7 @@ export const ForgotPasswordForm = () => { toast.success(`کد ورود برای شماره ${data?.mobile_number} ارسال شد`) navigate(`/auth/reset-password-code?phone_number=${data?.mobile_number}`) }, - onError: (err: any) => { - console.log("error", err) - navigate(`/auth/reset-password-code?phone_number=${data?.mobile_number}`) - } + onError: (err: any) => handleError(err) } ) } diff --git a/src/components/forms/login-form.tsx b/src/components/forms/login-form.tsx index 3317c9c..a61871c 100644 --- a/src/components/forms/login-form.tsx +++ b/src/components/forms/login-form.tsx @@ -9,6 +9,7 @@ import { useMutation } from "@tanstack/react-query" import { loginMutation } from "../../services/api/auth" import { ButtonComponent } from "../common/button" import toast from "react-hot-toast" +import { handleError } from "../../utility/error-handle" export const LoginForm = () => { const navigate = useNavigate() @@ -33,9 +34,8 @@ export const LoginForm = () => { toast.success("با موفقیت وارد شدین") navigate("/") }, - onError: () => { - toast.error("نام کاربری یا رمز عبور اشتباه است") - } + onError: (err: any) => handleError(err) + }) } diff --git a/src/components/forms/login-with-code-form.tsx b/src/components/forms/login-with-code-form.tsx index 0a3b6d2..40fba6c 100644 --- a/src/components/forms/login-with-code-form.tsx +++ b/src/components/forms/login-with-code-form.tsx @@ -9,6 +9,7 @@ import { ButtonComponent } from "../common/button" import { useMutation } from "@tanstack/react-query" import { sendOTPMutation } from "../../services/api/auth" import toast from "react-hot-toast" +import { handleError } from "../../utility/error-handle" export const LoginWithCodeForm = () => { const navigate = useNavigate() @@ -28,10 +29,8 @@ export const LoginWithCodeForm = () => { toast.success(`کد ورود برای شماره ${data?.mobile_number} ارسال شد`) navigate(`/auth/send-code?phone_number=${data?.mobile_number}`) }, - onError: (err: any) => { - console.log("error", err) - navigate(`/auth/send-code?phone_number=${data?.mobile_number}`) - } + onError: (err: any) => handleError(err) + } ) } diff --git a/src/components/forms/register-form.tsx b/src/components/forms/register-form.tsx index a6b2b91..e4aa76f 100644 --- a/src/components/forms/register-form.tsx +++ b/src/components/forms/register-form.tsx @@ -13,6 +13,7 @@ import { getCitiesList } from "../../services/api/cities" import { registerMutation } from "../../services/api/auth" import { ButtonComponent } from "../common/button" import toast from "react-hot-toast" +import { handleError } from "../../utility/error-handle" export const RegisterForm = () => { const [provinceData, setProvinceData] = useState([]) @@ -46,9 +47,8 @@ export const RegisterForm = () => { toast.success("با موفقیت ثبت نام شدید") navigate("/auth/login") }, - onError: (error: any) => { - console.log("error =>", error) - } + onError: (err: any) => handleError(err) + }) } useEffect(() => { diff --git a/src/components/forms/reset-password-code-form.tsx b/src/components/forms/reset-password-code-form.tsx index d6e251e..d0ca339 100644 --- a/src/components/forms/reset-password-code-form.tsx +++ b/src/components/forms/reset-password-code-form.tsx @@ -10,6 +10,7 @@ import { checkOTP, sendOTPMutation } from "../../services/api/auth"; import toast from "react-hot-toast"; import { useEffect, useState } from "react"; import { ButtonComponent } from "../common/button"; +import { handleError } from "../../utility/error-handle"; export const ResetpasswordCodeForm = () => { const navigate = useNavigate() @@ -40,10 +41,8 @@ export const ResetpasswordCodeForm = () => { toast.success(`کد وارد شده مطابقت دارد`) navigate(`/auth/reset-password?mobile_number=${searchParams.get("phone_number")}&otp=${data?.otp}`) }, - onError: (err: any) => { - console.log("err=>", err) - navigate(`/auth/reset-password?mobile_number=${searchParams.get("phone_number")}&otp=${data?.otp}`) - } + onError: (err: any) => handleError(err) + }) } @@ -57,9 +56,7 @@ export const ResetpasswordCodeForm = () => { setSeconds(30) setIsTimeUp(false) }, - onError: (err: any) => { - console.log("err=>", err) - } + onError: (err: any) => handleError(err) }) } @@ -96,7 +93,7 @@ export const ResetpasswordCodeForm = () => { } inputStyle="otp-inputs" /> @@ -108,7 +105,7 @@ export const ResetpasswordCodeForm = () => {

{seconds} ثانیه دیگر تا دریافت کد

- +
diff --git a/src/components/forms/reset-password.form.tsx b/src/components/forms/reset-password.form.tsx index 07f2a64..ca97f1b 100644 --- a/src/components/forms/reset-password.form.tsx +++ b/src/components/forms/reset-password.form.tsx @@ -9,6 +9,7 @@ import { useMutation } from "@tanstack/react-query" import { resetPasswordMutation } from "../../services/api/auth" import { ButtonComponent } from "../common/button" import toast from "react-hot-toast" +import { handleError } from "../../utility/error-handle" export const ResetPasswordForm = () => { @@ -36,7 +37,7 @@ export const ResetPasswordForm = () => { toast.success("تغییر رمز عبور با موفقیت انجام شد") navigate("/auth/login") }, - onError: (err: any) => console.log("err=>", err) + onError: (err: any) => handleError(err) }) } return ( diff --git a/src/components/forms/send-code-form.tsx b/src/components/forms/send-code-form.tsx index 5fabf97..6dd6a70 100644 --- a/src/components/forms/send-code-form.tsx +++ b/src/components/forms/send-code-form.tsx @@ -1,5 +1,5 @@ import OTPInput from "react-otp-input" -import { Link, useSearchParams } from "react-router-dom" +import { Link, useNavigate, useSearchParams } from "react-router-dom" import { ErrorComponent } from "../common/error" import { Controller, SubmitHandler, useForm } from "react-hook-form" import { LoginWithOTP } from "../../types" @@ -10,8 +10,10 @@ import { ButtonComponent } from "../common/button" import { useMutation } from "@tanstack/react-query" import { loginWithOTP, sendOTPMutation } from "../../services/api/auth" import toast from "react-hot-toast" +import { handleError } from "../../utility/error-handle" export const SendCodeForm = () => { + const navigate = useNavigate() const { mutate, isPending } = useMutation({ mutationFn: sendOTPMutation, mutationKey: ["send-otp"] @@ -36,9 +38,8 @@ export const SendCodeForm = () => { setSeconds(30) setIsTimeUp(false) }, - onError: (err: any) => { - console.log("err=>", err) - } + onError: (err: any) => handleError(err) + }) } const submitCode: SubmitHandler = async (data) => { @@ -47,14 +48,14 @@ export const SendCodeForm = () => { mobile_number: searchParams.get("phone_number"), }, { - onSuccess: () => { - toast.success(`کد ورود برای شماره ${searchParams.get("phone_number")} ارسال شد`) + onSuccess: (res: any) => { + toast.success("با موفقیت وارد شدید") + window.localStorage.setItem("token", res?.data?.token) + navigate("/") setSeconds(30) setIsTimeUp(false) }, - onError: (err: any) => { - console.log("err=>", err) - } + onError: (err: any) => handleError(err) }) } useEffect(() => { @@ -89,7 +90,7 @@ export const SendCodeForm = () => { } inputStyle="otp-inputs" /> @@ -101,7 +102,7 @@ export const SendCodeForm = () => {
{!isTimeUp &&

{seconds} ثانیه دیگر تا دریافت کد

} - +
diff --git a/src/components/home/status-box.tsx b/src/components/home/status-box.tsx index 2f920ff..edac6b9 100644 --- a/src/components/home/status-box.tsx +++ b/src/components/home/status-box.tsx @@ -5,9 +5,10 @@ import { getOverviewDetails } from "../../services/api/overview" import { useEffect, useState } from "react" import { Coin1, DollarCircle, Radar, Star } from "iconsax-react" import { HomeStatusSkeleton } from "./status-skeleton" +import { handleError } from "../../utility/error-handle" export const StatusBox = () => { - const { data, isLoading } = useQuery({ + const { data, isLoading, error } = useQuery({ queryKey: ['overview'], queryFn: getOverviewDetails }) @@ -40,6 +41,10 @@ export const StatusBox = () => { }]) }, [data]) + useEffect(() => { + handleError(error) + }, [error]) + if (isLoading) return return (
diff --git a/src/components/installation-reports/index.tsx b/src/components/installation-reports/index.tsx index 0fef7d8..33510f6 100644 --- a/src/components/installation-reports/index.tsx +++ b/src/components/installation-reports/index.tsx @@ -5,6 +5,7 @@ import { useMutation } from "@tanstack/react-query" import { getRegisterDeviceList } from "../../services/api/register-device" import { RegisterDeviceResponse } from "../../types" import { useParamsStore } from "../../store/params" +import { handleError } from "../../utility/error-handle" export const InstallationReports = () => { const { params } = useParamsStore() @@ -25,6 +26,9 @@ export const InstallationReports = () => { data: res?.data?.data, total: res?.data?.total }) + }, + onError: (err: any) => { + handleError(err) } }) }, [mutate, params]) diff --git a/src/components/management-bank-accounts/add-new-cart-dialog.tsx b/src/components/management-bank-accounts/add-new-cart-dialog.tsx index 4ccef3b..d0afdf2 100644 --- a/src/components/management-bank-accounts/add-new-cart-dialog.tsx +++ b/src/components/management-bank-accounts/add-new-cart-dialog.tsx @@ -11,6 +11,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query" import { createNewCardMutation } from "../../services/api/bank-card" import toast from "react-hot-toast" import { ButtonComponent } from "../common/button" +import { handleError } from "../../utility/error-handle" type Props = { isOpen: boolean, @@ -35,9 +36,7 @@ export const AddNewCardDialog: FC = ({ isOpen, close }) => { queryClient.invalidateQueries({ queryKey: ["bank-card"] }) close() }, - onError: () => { - toast.error("کارت با موفقیت اضافه نشد") - } + onError: (err: any) => handleError(err) }) } useEffect(() => { @@ -47,7 +46,7 @@ export const AddNewCardDialog: FC = ({ isOpen, close }) => { IBAN: "", PAN: "", }) - }, [isOpen , reset]) + }, [isOpen, reset]) return ( }>
diff --git a/src/components/management-bank-accounts/delete-card.tsx b/src/components/management-bank-accounts/delete-card.tsx index 1d5243a..197626c 100644 --- a/src/components/management-bank-accounts/delete-card.tsx +++ b/src/components/management-bank-accounts/delete-card.tsx @@ -5,6 +5,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query" import { deleteCardMutation } from "../../services/api/bank-card" import toast from "react-hot-toast" import { ButtonComponent } from "../common/button" +import { handleError } from "../../utility/error-handle" type Props = { isOpen: boolean, @@ -27,7 +28,7 @@ export const DeleteCardDialog: FC = ({ isOpen, close, id }) => { queryClient.invalidateQueries({ queryKey: ["bank-card"] }) close() }, - onError: () => toast.error("حذف کارت نا موفق") + onError: (err: any) => handleError(err) }) } return ( diff --git a/src/components/management-bank-accounts/index.tsx b/src/components/management-bank-accounts/index.tsx index e8973ee..d3f2367 100644 --- a/src/components/management-bank-accounts/index.tsx +++ b/src/components/management-bank-accounts/index.tsx @@ -1,4 +1,4 @@ -import { useState } from "react" +import { useEffect, useState } from "react" import { CardBank } from "../../types" import { CreateNewCart } from "./create-new-cart" import { AddNewCardDialog } from "./add-new-cart-dialog" @@ -7,19 +7,25 @@ import { useQuery } from "@tanstack/react-query" import { getUserCardsList } from "../../services/api/bank-card" import { BankCart } from "./bank-cart" import { ManagementBankCardSkeleton } from "./bank-card-skeleton" +import { handleError } from "../../utility/error-handle" export const ManagementBankAccounts = () => { const [selectedCard, setSelectedCard] = useState(null) - const { data, isLoading } = useQuery({ + const { data, isLoading, error } = useQuery({ queryKey: ["bank-card"], queryFn: getUserCardsList }) + const [showDialog, setShowDialog] = useState(false) const handleCloseDialog = () => setShowDialog(false) const handleOpenDialog = () => !isLoading && setShowDialog(true) const [showDeleteDialog, setShowDeleteDialog] = useState(false) const handleOpenDeleteDialog = () => !isLoading && setShowDeleteDialog(true) const handleCloseDeleteDialog = () => setShowDeleteDialog(false) + + useEffect(() => { + handleError(error) + }, [error]) return ( <>
diff --git a/src/components/score/index.tsx b/src/components/score/index.tsx index 95e37d4..be0380c 100644 --- a/src/components/score/index.tsx +++ b/src/components/score/index.tsx @@ -5,6 +5,7 @@ import { useMutation } from "@tanstack/react-query" import { getScoresList } from "../../services/api/score" import { useParamsStore } from "../../store/params" import { ScoreResponse } from "../../types" +import { handleError } from "../../utility/error-handle" export const Score = () => { const { params } = useParamsStore() @@ -27,7 +28,9 @@ export const Score = () => { total: res?.data?.total, score: res?.data?.score }) - } + }, + onError: (err: any) => handleError(err) + }) }, [mutate, params]) return ( diff --git a/src/components/transactions/index.tsx b/src/components/transactions/index.tsx index 0832c17..f3d3f7c 100644 --- a/src/components/transactions/index.tsx +++ b/src/components/transactions/index.tsx @@ -5,6 +5,7 @@ import { getTransactionsList } from "../../services/api/transactions" import { useMutation } from "@tanstack/react-query" import { TransactionsResponse } from "../../types" import { useParamsStore } from "../../store/params" +import { handleError } from "../../utility/error-handle" export const Transactions = () => { const { params } = useParamsStore() @@ -25,6 +26,9 @@ export const Transactions = () => { data: res?.data?.data, total: res?.data?.total }) + }, + onError: (err: any) => { + handleError(err) } }) }, [mutate, params]) diff --git a/src/components/wallet/wallet-page.tsx b/src/components/wallet/wallet-page.tsx index 0b305a4..4e69530 100644 --- a/src/components/wallet/wallet-page.tsx +++ b/src/components/wallet/wallet-page.tsx @@ -5,10 +5,11 @@ import { getWalletDetails } from "../../services/api/wallet" import { useEffect, useState } from "react" import { StatusBoxItemInterface } from "../../types" import { Coin1, DollarCircle } from "iconsax-react" +import { handleError } from "../../utility/error-handle" export const WalletPage = () => { const [statusData, setStatusData] = useState([]) - const { data, isLoading } = useQuery({ + const { data, isLoading, error } = useQuery({ queryKey: ["wallet"], queryFn: getWalletDetails }) @@ -29,6 +30,10 @@ export const WalletPage = () => { }]) }, [data]) + useEffect(() => { + handleError(error) + }, [error]) + return (
diff --git a/src/schema/index.ts b/src/schema/index.ts index 51eb972..c41bc2b 100644 --- a/src/schema/index.ts +++ b/src/schema/index.ts @@ -41,9 +41,9 @@ export const ResetPasswordCodeSchema = yup.object({ .matches(/^[0-9]{11}$/, "شماره تماس نامعتبر"), otp: yup.string() .required("وارد کردن کد الزامی میباشد") - .min(5, "کد نمیتوند کمتر از 5 رقم باشد") - .max(5, "کد نمیتواند بیشتر از 5 رقم باشد") - .matches(/^[0-9]{5}$/, "کد نامعتبر"), + .min(6, "کد نمیتوند کمتر از 6 رقم باشد") + .max(6, "کد نمیتواند بیشتر از 6 رقم باشد") + .matches(/^[0-9]{6}$/, "کد نامعتبر"), }) export const LoginCodeSchema = yup.object({ @@ -53,9 +53,9 @@ export const LoginCodeSchema = yup.object({ .matches(/^[0-9]{11}$/, "شماره تماس نامعتبر"), otp: yup.string() .required("وارد کردن کد الزامی میباشد") - .min(5, "کد نمیتوند کمتر از 5 رقم باشد") - .max(5, " کد نمیتواند بیشتر از 5 رقم باشد") - .matches(/^[0-9]{5}$/, "کد نامعتبر"), + .min(6, "کد نمیتوند کمتر از 6 رقم باشد") + .max(6, " کد نمیتواند بیشتر از 6 رقم باشد") + .matches(/^[0-9]{6}$/, "کد نامعتبر"), }) export const RegisterSchema = yup.object({ diff --git a/src/store/params.ts b/src/store/params.ts index 1ab0120..2dc5589 100644 --- a/src/store/params.ts +++ b/src/store/params.ts @@ -4,6 +4,7 @@ import { TableParams } from '../types'; type ZustandState = { params: TableParams; updateParams: (newParams: Partial) => void; + clearParams: (newParams: TableParams) => void; }; export const useParamsStore = create((set) => ({ @@ -20,4 +21,9 @@ export const useParamsStore = create((set) => ({ ...newParams, }, })), + clearParams: (defaultParams: TableParams) => + set((state) => ({ + ...state, + params: defaultParams, + })), })); \ No newline at end of file diff --git a/src/utility/error-handle.tsx b/src/utility/error-handle.tsx new file mode 100644 index 0000000..852dd16 --- /dev/null +++ b/src/utility/error-handle.tsx @@ -0,0 +1,19 @@ +import toast from "react-hot-toast"; + +export const handleError = (err: any) => { + if (err) { + const errorStatus: number = err?.response?.status; + const keys = errorStatus === 422 ? Object.keys(err?.response?.data.validation) : []; + const handle401Error = () => { + window.localStorage.clear() + window.location.href = "/auth/login" + } + switch (errorStatus) { + case 422: return toast.error(err?.response?.data?.validation[keys[0]]?.msg); + case 401: return handle401Error() + case 500: return toast.error(err?.response?.data?.msg); + default: + return toast.error(err?.response?.data?.msg); + } + } +}