TF-87 loan management refahi use SWR

src/components/dashboard/refahi-loan-management/Form/UpdateForm.jsx

@@ -1,5 +1,5 @@
 import {useTranslations} from "next-intl";
-import {useContext, useState} from "react";
+import {useState} from "react";
 import {
     Button,
     Dialog,
@@ -22,12 +22,12 @@ import {UPDATE_LOAN_MANAGEMENT_REFAHI} from "@/core/data/apiRoutes";
 import useRequest from "@/lib/app/hooks/useRequest";
 import useNotification from "@/lib/app/hooks/useNotification";
 import * as Yup from "yup";
-import {LoanStateRefahiContext} from "@/lib/prefetchDataTable/hooks/LoanStateRefahi";
+import useLoanStateRefahi from "@/lib/prefetchDataTable/hooks/useLoanStateRefahi";
 
 
 const Update = ({rowId, fetchUrl, mutate}) => {
     const t = useTranslations();
-    const detail = useContext(LoanStateRefahiContext);
+    const {loan_state_refahi} = useLoanStateRefahi()
     const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
     const requestServer = useRequest({auth: true})
     const {update_notification} = useNotification()
@@ -120,11 +120,11 @@ const Update = ({rowId, fetchUrl, mutate}) => {
                                         formik.touched.next_state_id && formik.errors.next_state_id
                                     }
                                 >
-                                    {detail.map((item) => {
+                                    {loan_state_refahi ? (loan_state_refahi.map((item) => {
                                         return (
                                             <MenuItem key={item.id} value={item.id}>{item.name}</MenuItem>
                                         )
-                                    })}
+                                    })) : null}
                                 </Select>
                                 <FormHelperText>
                                     {formik.touched.next_state_id && formik.errors.next_state_id}

src/components/dashboard/refahi-loan-management/index.jsx

@@ -7,7 +7,6 @@ import TableRowActions from "./TableRowActions";
 import DataTable from "@/core/components/DataTable";
 import moment from "jalali-moment";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
-import {LoanStateRefahiProvider} from "@/lib/prefetchDataTable/hooks/LoanStateRefahi";
 
 function DashboardRefahiLoanManagementComponent() {
     const t = useTranslations();
@@ -129,26 +128,24 @@ function DashboardRefahiLoanManagementComponent() {
     return (
         <DashboardLayouts>
             <Box sx={{px: 3}}>
-                <LoanStateRefahiProvider>
-                    <DataTable
-                        tableUrl={GET_LOAN_MANAGEMENT_REFAHI}
-                        columns={columns}
-                        selectableRow={false}
-                        enableCustomToolbar={true}
-                        // CustomToolbar={<TableToolbar />}
-                        enableLastUpdate={true}
-                        enablePinning={true}
-                        enableDensityToggle={false}
-                        initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
-                        enableColumnFilters={true}
-                        enableHiding={true}
-                        enableFullScreenToggle={false}
-                        enableGlobalFilter={false}
-                        enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
-                        enableRowActions={true}
-                        TableRowAction={TableRowActions}
-                    />
-                </LoanStateRefahiProvider>
+                <DataTable
+                    tableUrl={GET_LOAN_MANAGEMENT_REFAHI}
+                    columns={columns}
+                    selectableRow={false}
+                    enableCustomToolbar={true}
+                    // CustomToolbar={<TableToolbar />}
+                    enableLastUpdate={true}
+                    enablePinning={true}
+                    enableDensityToggle={false}
+                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                    enableColumnFilters={true}
+                    enableHiding={true}
+                    enableFullScreenToggle={false}
+                    enableGlobalFilter={false}
+                    enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                    enableRowActions={true}
+                    TableRowAction={TableRowActions}
+                />
             </Box>
         </DashboardLayouts>
     );

src/lib/prefetchDataTable/hooks/LoanStateRefahi.jsx

@@ -1,24 +0,0 @@
-import {createContext, useEffect, useState} from "react";
-import {GET_LOAN_STATE_REFAHI} from "@/core/data/apiRoutes";
-import useRequest from "@/lib/app/hooks/useRequest";
-
-export const LoanStateRefahiContext = createContext();
-export const LoanStateRefahiProvider = ({children}) => {
-    const [detail, setDetail] = useState([])
-    const requestServer = useRequest({auth: true, notification: false})
-
-    useEffect(() => {
-        requestServer(GET_LOAN_STATE_REFAHI, "get").then((response) => {
-            setDetail(response.data.data)
-        }).catch(() => {
-        })
-    }, []);
-
-    return (
-        <LoanStateRefahiContext.Provider
-            value={detail}
-        >
-            {children}
-        </LoanStateRefahiContext.Provider>
-    );
-}

src/lib/prefetchDataTable/hooks/useLoanStateRefahi.jsx

@@ -0,0 +1,27 @@
+import useSWR from 'swr'
+import {GET_LOAN_STATE_REFAHI} from "@/core/data/apiRoutes";
+import useRequest from "@/lib/app/hooks/useRequest";
+
+const useLoanStateRefahi = () => {
+    const requestServer = useRequest({auth: true, notification: false})
+
+    //swr config
+    const fetcher = (...args) => {
+        return requestServer(args, 'get').then((response) => {
+            return response.data.data;
+        }).catch(() => {
+        })
+    };
+
+    const {data} = useSWR(GET_LOAN_STATE_REFAHI, fetcher, {
+        revalidateIfStale: false,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false
+    })
+    const loan_state_refahi = data
+    //swr config
+
+    // render data
+    return {loan_state_refahi}
+}
+export default useLoanStateRefahi