From f053952b5f77e5f2575f8df7d17b05e60a014ab5 Mon Sep 17 00:00:00 2001 From: Moaz Dawalibi Date: Mon, 21 Oct 2024 17:39:15 +0300 Subject: [PATCH] fixes --- src/Layout/Dashboard/FilterLayout.tsx | 8 ++- .../ReSeller/Collections/Model/FilterForm.tsx | 4 -- src/Pages/ReSeller/Collections/Page.tsx | 1 + src/Pages/ReSeller/Collections/Table.tsx | 11 ++-- .../ReSeller/Sales/Model/SalesModelForm.tsx | 8 ++- .../ReSeller/Sales/Model/SubmitModelForm.tsx | 22 +++++-- .../Sales/Model/ValidationModelForm.tsx | 60 ++++++++++++------- src/Pages/ReSeller/Sales/Table.tsx | 10 ++-- src/Pages/ReSeller/Sales/useTableColumns.tsx | 12 ++-- src/translate/ar.json | 3 +- 10 files changed, 90 insertions(+), 49 deletions(-) diff --git a/src/Layout/Dashboard/FilterLayout.tsx b/src/Layout/Dashboard/FilterLayout.tsx index e529f3f..1ed1c08 100644 --- a/src/Layout/Dashboard/FilterLayout.tsx +++ b/src/Layout/Dashboard/FilterLayout.tsx @@ -17,14 +17,16 @@ const FilterLayout = ({ search_by = "name", width = "500px", haveFilter = true, - haveOrder = true + haveOrder = true, + haveSearch = true }: { filterTitle: string; sub_children?: any; search_by?:string; width?:string; haveFilter?:boolean; - haveOrder?:boolean + haveOrder?:boolean; + haveSearch?:boolean }) => { const { t } = useTranslation(); const translateArray = translateOptions(search_array, t); @@ -80,7 +82,7 @@ const FilterLayout = ({
- + {haveSearch && }
diff --git a/src/Pages/ReSeller/Collections/Model/FilterForm.tsx b/src/Pages/ReSeller/Collections/Model/FilterForm.tsx index b687b6a..0126f74 100644 --- a/src/Pages/ReSeller/Collections/Model/FilterForm.tsx +++ b/src/Pages/ReSeller/Collections/Model/FilterForm.tsx @@ -1,11 +1,7 @@ import ValidationField from "../../../../Components/ValidationField/ValidationField"; import { Col, Row } from "reactstrap"; -import { useGetAllReseller } from "../../../../api/reseller"; const FilterForm = () => { - const {data} = useGetAllReseller() - console.log(data); - return (
diff --git a/src/Pages/ReSeller/Collections/Page.tsx b/src/Pages/ReSeller/Collections/Page.tsx index e62a422..efe465b 100644 --- a/src/Pages/ReSeller/Collections/Page.tsx +++ b/src/Pages/ReSeller/Collections/Page.tsx @@ -27,6 +27,7 @@ const TableHeader = () => { } filterTitle="table.collections" + haveSearch={false} /> diff --git a/src/Pages/ReSeller/Collections/Table.tsx b/src/Pages/ReSeller/Collections/Table.tsx index c2dbb6f..509108b 100644 --- a/src/Pages/ReSeller/Collections/Table.tsx +++ b/src/Pages/ReSeller/Collections/Table.tsx @@ -4,17 +4,20 @@ import { useColumns } from "./useTableColumns"; import useSearchQuery from "../../../api/utils/useSearchQuery"; import { useFilterState } from "../../../Components/Utils/Filter/FilterState"; import { useGetAllCollections } from "../../../api/collections"; +import { useFilterStateState } from "../../../zustand/Filter"; const App: React.FC = () => { - const [searchQuery] = useSearchQuery("name"); const { filterState } = useFilterState(); - + const { Filter } = useFilterStateState(); + const name = Filter?.description ; + const sort_by = Filter?.sort_by ; + const response = useGetAllCollections({ - name: searchQuery, pagination: true, ...filterState, + name, + sort_by }); - return ; }; diff --git a/src/Pages/ReSeller/Sales/Model/SalesModelForm.tsx b/src/Pages/ReSeller/Sales/Model/SalesModelForm.tsx index 5f94aa8..2a1b144 100644 --- a/src/Pages/ReSeller/Sales/Model/SalesModelForm.tsx +++ b/src/Pages/ReSeller/Sales/Model/SalesModelForm.tsx @@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next"; import { QueryStatusEnum } from "../../../../enums/QueryStatus"; import { Button, Divider, Spin } from "antd"; import { MdCancel } from "react-icons/md"; +import { useQueryClient } from "react-query"; const Form = () => { @@ -15,6 +16,7 @@ const Form = () => { const formik = useFormikContext(); const { values, setFieldValue } = useFormikContext() + const queryClient = useQueryClient(); const handleNext = ()=>{ setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 ) @@ -23,9 +25,13 @@ const Form = () => { const handleCancel = () => { setIsOpen(""); formik.resetForm(); - }; + queryClient.resetQueries(); + }; + console.log(objectToEdit); + const student_info = objectToEdit?.data?.data + const status = objectToEdit?.data?.status const PackagesInfo = student_info?.packages.map((info:any) => ({ id: info?.id, name: info.name + " " + `( ${info?.original_price} )` diff --git a/src/Pages/ReSeller/Sales/Model/SubmitModelForm.tsx b/src/Pages/ReSeller/Sales/Model/SubmitModelForm.tsx index d098dbc..540a9d0 100644 --- a/src/Pages/ReSeller/Sales/Model/SubmitModelForm.tsx +++ b/src/Pages/ReSeller/Sales/Model/SubmitModelForm.tsx @@ -9,15 +9,16 @@ import { MdCancel } from "react-icons/md"; import { useAddSales } from "../../../../api/sales"; import { useEffect } from "react"; import { toast } from "react-toastify"; +import { useQueryClient } from "react-query"; const Form = () => { const { setObjectToEdit,objectToEdit } = useObjectToEdit(); - const { resetForm, values, setFieldValue } = useFormikContext(); + const { resetForm, values, setFieldValue , } = useFormikContext(); const { setIsOpen } = useModalState((state) => state); const {t} = useTranslation(); - const {mutate,status,error}:any = useAddSales(); + const {mutate,status,error,isSuccess} = useAddSales(); const coupon_id_object = objectToEdit?.data?.data?.packages.find((e:any)=>(e.id === values?.package_id)) const student_info = objectToEdit?.data?.data const PackagesInfo = student_info?.packages.map((info:any) => ({ @@ -25,7 +26,7 @@ const Form = () => { name: info.name + " " + `( ${info?.original_price} )` })); - + const queryClient = useQueryClient(); const handleNext = ()=>{ mutate({ package_id:values?.package_id, @@ -36,7 +37,10 @@ const Form = () => { const handleCancel = () => { resetForm(); setIsOpen(""); - setFieldValue( "currentModalIndex" , 0 ) + setFieldValue( "currentModalIndex" , 0 ); + setObjectToEdit({}); + queryClient.resetQueries(); + }; @@ -45,7 +49,8 @@ const Form = () => { setIsOpen(""); setObjectToEdit({}); setFieldValue( "currentModalIndex" , values?.currentModalIndex - 2 ) - }else if(status === QueryStatusEnum.ERROR){ + } + else if(status === QueryStatusEnum.ERROR){ toast.error(t(`toast.${error?.response?.data?.message}` || `toast.error_while_trying_please_try_again`)) } if(values?.currentModalIndex >= 3){ @@ -53,6 +58,7 @@ const Form = () => { setObjectToEdit({}) setFieldValue( "currentModalIndex" , 0 ) } + }, [values?.currentModalIndex,status]) return ( @@ -106,3 +112,9 @@ const Form = () => { }; export default Form; + + +// in this files in my react project i am trying to handle to apis that one for getting student by phone number and check if this number is exist or not and the second file named salesModel for choosing package for this student and third model is for submitting the values and hit the api request but i am facing some problems i think from caching the values +// first problem if i choose a number and submit it and return successfully if i close the model in second level and try to re do the method from begginning the previous phone number is being cached i mean if ijust type and valid phone number it take me to the next step named salesModel without even hitting a new request for the new phone number +// +// second problem if in the 3rd step in submitting the values happen an error it close the model and try to do the method from beggining it happen the same this the phone number is being cached and it does not hit anew request \ No newline at end of file diff --git a/src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx b/src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx index 0059aef..c19df46 100644 --- a/src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx +++ b/src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx @@ -10,49 +10,68 @@ import { MdCancel } from "react-icons/md"; import { useEffect, useState } from "react"; import { useGetStudentByPhone } from "../../../../api/sales"; import { toast } from "react-toastify"; +import { useQueryClient } from "react-query"; const Form = () => { - const [triggerApi, setTriggerApi] = useState(false) + const [ triggerApi, setTriggerApi] = useState(false) const { setIsOpen } = useModalState((state) => state); const { setObjectToEdit } = useObjectToEdit(); const {t} = useTranslation(); + const formik = useFormikContext(); const {values,setFieldValue} = useFormikContext() const phoneNumber : number = values?.phone_number - - const { data,isError,status } = useGetStudentByPhone({ + + const { data,isError,status,isSuccess } = useGetStudentByPhone({ phone_number:phoneNumber, },{ - enabled: triggerApi + enabled: triggerApi }); + const queryClient = useQueryClient(); const handleNext = ()=>{ - if(values?.phone_number && phoneNumber.toString().length === 10){ - setTriggerApi(true) + if(values?.phone_number && phoneNumber.toString().length === 10 ){ + setTriggerApi(true); + setObjectToEdit({data}) } } - + + const handleCancel = () => { - setIsOpen(""); - formik.resetForm(); + setIsOpen(""); + formik.resetForm(); + setTriggerApi(false); + setObjectToEdit({}); + queryClient.resetQueries(); }; useEffect(() => { - if(!!data?.data?.phone_number){ - setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 ) + if(isSuccess){ + setTriggerApi(false); setObjectToEdit({data}) - setTriggerApi(false) + setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 ) } - else if(!data?.data){ - setTriggerApi(false) - } - if(isError){ - toast.error(t('toast.phone_number_not_found')) - } - }, [data?.data,triggerApi,isError]) - + }, [isSuccess]); + + + // useEffect(() => { + // if(!!data?.data?.phone_number){ + // // setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 ) + // setObjectToEdit({data}) + // setTriggerApi(false) + // } + // else if(!data?.data){ + // setTriggerApi(false) + // } + // if(isError){ + // toast.error(t('toast.phone_number_not_found')) + // } + // if(values?.phone_number === null){ + // setTriggerApi(false); + // } + // }, [data?.data,triggerApi,isError,status]) return ( values?.currentModalIndex == 0 && @@ -93,7 +112,6 @@ const Form = () => { - ); }; diff --git a/src/Pages/ReSeller/Sales/Table.tsx b/src/Pages/ReSeller/Sales/Table.tsx index 546d3e3..f1c8838 100644 --- a/src/Pages/ReSeller/Sales/Table.tsx +++ b/src/Pages/ReSeller/Sales/Table.tsx @@ -1,22 +1,24 @@ import React from "react"; import DataTable from "../../../Layout/Dashboard/Table/DataTable"; import { useColumns } from "./useTableColumns"; -import useSearchQuery from "../../../api/utils/useSearchQuery"; import { useFilterState } from "../../../Components/Utils/Filter/FilterState"; import { useGetAllSales } from "../../../api/sales"; import { formatDate } from "../../../utils/formatDate"; +import { useFilterStateState } from "../../../zustand/Filter"; const App: React.FC = () => { - const [searchQuery] = useSearchQuery("name"); const { filterState }:any = useFilterState(); - + const { Filter } = useFilterStateState(); + const name = Filter?.name ; + const sort_by = Filter?.sort_by ; const response = useGetAllSales({ - name: searchQuery, pagination: true, ...filterState, activation_date:formatDate(filterState?.activation_date), expiration_date:formatDate(filterState?.expiration_date), + name, + sort_by }); return ; diff --git a/src/Pages/ReSeller/Sales/useTableColumns.tsx b/src/Pages/ReSeller/Sales/useTableColumns.tsx index 62930d4..1219567 100644 --- a/src/Pages/ReSeller/Sales/useTableColumns.tsx +++ b/src/Pages/ReSeller/Sales/useTableColumns.tsx @@ -6,12 +6,12 @@ export const useColumns = () => { const [t] = useTranslation(); const columns: TableColumnsType = [ - { - title: t("columns.id"), - dataIndex: "id", - key: "id", - align: "center", - }, + // { + // title: t("columns.id"), + // dataIndex: "id", + // key: "id", + // align: "center", + // }, { title: t("columns.student_full_name"), key: "student_full_name", diff --git a/src/translate/ar.json b/src/translate/ar.json index 03e2ac6..73a7f8f 100644 --- a/src/translate/ar.json +++ b/src/translate/ar.json @@ -560,7 +560,8 @@ "due_to":"صالح الى", "reseller":"البائعين", "activation_date":"تاريخ التنشيط", - "expiration_date":"تاريخ الالغاء" + "expiration_date":"تاريخ الالغاء", + "package":"حزمة" }, "select": { "enums": {