refresh token

src/App.tsx

@@ -13,6 +13,8 @@ import { IApiErrorRepsonse } from './types/error.types'
 import MainRouter from './router/Main'
 import AuthRouter from './router/Auth'
 import { Pages } from './config/Pages'
+import { getRefreshToken, setToken, setRefreshToken, removeToken, removeRefreshToken, getToken } from './config/func';
+import { refreshToken } from './pages/auth/service/AuthService';
 
 i18next.init({
   interpolation: { escapeValue: false },
@@ -24,28 +26,81 @@ i18next.init({
   }
 })
 
+declare global {
+  interface Window {
+    isRefreshingToken?: boolean;
+  }
+}
+
 const queryClient = new QueryClient({
   queryCache: new QueryCache({
-    onError: (error: IApiErrorRepsonse) => {
+    onError: async (error: IApiErrorRepsonse) => {
       if (error?.response?.status === 401) {
-        localStorage.removeItem(import.meta.env.VITE_TOKEN_NAME)
-        window.location.href = '/auth/login';
+        try {
+          // Use a flag to track if refresh is in progress
+          if (window.isRefreshingToken) {
+            // Wait for the refresh to complete
+            await new Promise(resolve => {
+              const checkComplete = setInterval(() => {
+                if (!window.isRefreshingToken) {
+                  clearInterval(checkComplete);
+                  resolve(true);
+                }
+              }, 100);
+            });
+            return;
+          }
+
+          // Set the flag to indicate refresh is in progress
+          window.isRefreshingToken = true;
+
+          try {
+            const refreshTokenValue = await getRefreshToken();
+            const { data } = await refreshToken({ refreshToken: refreshTokenValue || '' });
+
+            if (data?.accessToken?.token) {
+              // Save the new token
+              await setToken(data?.accessToken?.token);
+
+              // If refresh token also returned, update it
+              if (data.refreshToken?.token) {
+                await setRefreshToken(data.refreshToken?.token);
+              }
+
+              // Retry the failed request
+              queryClient.invalidateQueries();
+              return;
+            } else {
+              throw new Error('Invalid token response');
+            }
+          } finally {
+            window.isRefreshingToken = false;
+          }
+        } catch (refreshError: unknown) {
+          console.error('Token refresh failed:', refreshError);
+          // Clear tokens and redirect to login
+          await removeToken();
+          await removeRefreshToken();
+          window.location.href = '/auth/login';
+        }
       }
-    },
+    }
   }),
   defaultOptions: {
     queries: {
       refetchOnWindowFocus: false,
-    },
-  },
+      retry: false
+      // staleTime: 86400000 // 1 day in milliseconds
+    }
+  }
 });
 
 const App: FC = () => {
 
   const [isLogin, setIsLogin] = useState<'checking' | 'isLogin' | 'isNotLogin'>('checking')
   useEffect(() => {
-
-    if (localStorage.getItem(import.meta.env.VITE_TOKEN_NAME)) {
+    const token = getToken()
+    if (token) {
       setIsLogin('isLogin')
     } else {
       setIsLogin('isNotLogin')

src/config/axios.ts

@@ -1,4 +1,5 @@
 import axios from "axios";
+import { getToken } from "./func";
 
 const axiosInstance = axios.create({
   baseURL: import.meta.env.VITE_BASE_URL,
@@ -7,18 +8,12 @@ const axiosInstance = axios.create({
 axiosInstance.interceptors.response.use(
   (response) => response,
   (error) => {
-    if (error.response.status === 401) {
-      localStorage.removeItem(import.meta.env.VITE_TOKEN_NAME);
-      window.location.href = "/auth/login";
-    }
     return Promise.reject(error);
   }
 );
 
 axiosInstance.interceptors.request.use(async function (config) {
-  const token = localStorage.getItem(import.meta.env.VITE_TOKEN_NAME)
-    ? localStorage.getItem(import.meta.env.VITE_TOKEN_NAME)
-    : "";
+  const token = getToken();
 
   config.headers.Authorization = "Bearer " + token;
   return config;

src/config/func.ts

@@ -1,3 +1,5 @@
+import Cookie from "js-cookie";
+
 export function isEmail(input: string): boolean {
   const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
   return emailRegex.test(input);
@@ -6,3 +8,30 @@ export function isEmail(input: string): boolean {
 export function NumberFormat(number: number): string {
   return Intl.NumberFormat("fa-IR").format(number);
 }
+
+export const getToken = () => {
+  return Cookie.get(import.meta.env.VITE_TOKEN_NAME);
+};
+
+export const getRefreshToken = () => {
+  return Cookie.get(import.meta.env.VITE_REFRESH_TOKEN_NAME);
+};
+
+const isProduction = import.meta.env.MODE === "production";
+const domain = isProduction ? ".danakcorp.com" : undefined;
+
+export const setToken = (token: string) => {
+  Cookie.set(import.meta.env.VITE_TOKEN_NAME, token, { domain });
+};
+
+export const setRefreshToken = (refreshToken: string) => {
+  Cookie.set(import.meta.env.VITE_REFRESH_TOKEN_NAME, refreshToken, { domain });
+};
+
+export const removeToken = () => {
+  Cookie.remove(import.meta.env.VITE_TOKEN_NAME, { domain, path: "/" });
+};
+
+export const removeRefreshToken = () => {
+  Cookie.remove(import.meta.env.VITE_REFRESH_TOKEN_NAME, { domain, path: "/" });
+};

src/pages/annoncement/Detail.tsx

@@ -1,61 +0,0 @@
-import { FC } from 'react'
-import { useTranslation } from 'react-i18next'
-import StatusWithText from '../../components/StatusWithText'
-import { useNavigate, useParams } from 'react-router-dom'
-import { ArrowLeft2 } from 'iconsax-react'
-import { useGetAnnoncementDetail } from './hooks/useAnnoncementData'
-import PageLoading from '../../components/PageLoading'
-
-const AnnouncementDetail: FC = () => {
-
-    const { id } = useParams()
-    const { t } = useTranslation('global')
-    const navigate = useNavigate()
-    const getDetail = useGetAnnoncementDetail(id ? id : '')
-
-    return (
-        <div className='mt-4'>
-            <div className='flex justify-between'>
-                <div>
-                    {t('announcement.text_announcement')}
-                </div>
-                <div onClick={() => navigate(-1)} className='text-xs cursor-pointer flex gap-0.5 items-center font-extralight'>
-                    {t('back')}
-                    <ArrowLeft2 size={12} color='black' />
-                </div>
-            </div>
-
-            {
-                getDetail.isPending ?
-                    <PageLoading />
-                    :
-                    <div className='flex-1 mt-4 bg-white py-6 px-4 rounded-2xl'>
-                        <div className='flex justify-between items-start'>
-                            <div className='text-sm max-w-[70%] leading-67'>
-                                {getDetail.data?.data?.announcement?.title}
-                            </div>
-                            <div className='flex gap-1'>
-                                {
-                                    getDetail.data?.data?.announcement.isImportant &&
-                                    <StatusWithText
-                                        variant='error'
-                                        text={t('announcement.important')}
-                                    />
-                                }
-
-                                <StatusWithText
-                                    variant='success'
-                                    text={t('announcement.new')}
-                                />
-                            </div>
-                        </div>
-
-                        <div dangerouslySetInnerHTML={{ __html: getDetail.data?.data?.announcement?.content }} className='mt-5 leading-7 text-xs font-light'>
-                        </div>
-                    </div>
-            }
-        </div>
-    )
-}
-
-export default AnnouncementDetail

src/pages/annoncement/List.tsx

@@ -2,19 +2,34 @@ import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
-import { useGetAnnoncements } from './hooks/useAnnoncementData'
+import { useDeleteAnnoncement, useGetAnnoncements } from './hooks/useAnnoncementData'
 import { AnnoncementItemType } from './types/AnnoncementTypes'
 import Button from '../../components/Button'
-import { Add } from 'iconsax-react'
+import { Add, Edit, Trash } from 'iconsax-react'
 import Td from '../../components/Td'
 import moment from 'moment-jalaali'
 import Pagination from '../../components/Pagination'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../helpers/types'
 
 const AnnouncementtList: FC = () => {
 
     const { t } = useTranslation('global')
     const [page, setPage] = useState<number>(1)
     const getAnnoncements = useGetAnnoncements(page, '', '')
+    const deleteAnnoncement = useDeleteAnnoncement()
+
+    const handleDelete = (id: string) => {
+        deleteAnnoncement.mutate(id, {
+            onSuccess: () => {
+                toast.success(t('success'))
+                getAnnoncements.refetch()
+            },
+            onError: (error: ErrorType) => {
+                toast.error(error.response?.data?.error.message[0])
+            }
+        })
+    }
 
     return (
         <div className='mt-4 text-sm'>
@@ -52,6 +67,7 @@ const AnnouncementtList: FC = () => {
                             <Td text={t('announcement.service')} />
                             <Td text={t('announcement.created_date')} />
                             <Td text={t('announcement.publish_date')} />
+                            <Td text={t('')} />
                         </tr>
                     </thead>
                     <tbody>
@@ -70,6 +86,21 @@ const AnnouncementtList: FC = () => {
                                             </div>
                                         </Td>
                                         <Td text={moment(item.publishAt).format('jYYYY-jMM-jDD')} />
+                                        <Td text={''}>
+                                            <div className='flex gap-2'>
+                                                <Link to={Pages.announcement.detail + item.id}>
+                                                    <Edit
+                                                        className='size-5'
+                                                        color='#888'
+                                                    />
+                                                </Link>
+                                                <Trash
+                                                    className='size-5'
+                                                    color='#888'
+                                                    onClick={() => handleDelete(item.id)}
+                                                />
+                                            </div>
+                                        </Td>
                                     </tr>
                                 )
                             })

src/pages/annoncement/Update.tsx

@@ -0,0 +1,212 @@
+import { FC, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '../../components/Button'
+import { InfoCircle, TickCircle } from 'iconsax-react'
+import Input from '../../components/Input'
+import Quill from 'quill'
+import DatePickerComponent from '../../components/DatePicker'
+import CheckBoxComponent from '../../components/CheckBoxComponent'
+import Select from '../../components/Select'
+import { useGetAllServices } from '../service/hooks/useServiceData'
+import { useFormik } from 'formik'
+import { AnnoncementCreateType, UserServiceItemType } from './types/AnnoncementTypes'
+import * as Yup from 'yup'
+import { ServiceItemType } from '../service/types/ServiceTypes'
+import { useGetAnnoncementDetail, useGetCustomersService, useUpdateAnnoncement } from './hooks/useAnnoncementData'
+import { ErrorType } from '../../helpers/types'
+import { toast } from 'react-toastify'
+import moment from 'moment-jalaali'
+import { useNavigate, useParams } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+
+const Update: FC = () => {
+
+    const { t } = useTranslation('global')
+    const navigate = useNavigate()
+    const { id } = useParams()
+    const editorRef = useRef<HTMLDivElement | null>(null);
+    const [serviceId, setServiceId] = useState('')
+    const [customerId, setCustomerId] = useState<string>('')
+    const getServices = useGetAllServices('', 1, '', '', false)
+    const getCustomer = useGetCustomersService(serviceId)
+    const getAnnoncement = useGetAnnoncementDetail(id || '')
+    const updateAnnoncement = useUpdateAnnoncement(id || '')
+
+    const formik = useFormik<AnnoncementCreateType>({
+        initialValues: {
+            title: '',
+            content: '',
+            publishAt: '',
+            isPublic: false,
+            isImportant: false,
+            serviceId: '',
+            groupIds: [],
+            userIds: undefined
+        },
+        validationSchema: Yup.object({
+            title: Yup.string().required(t('errors.required')),
+            content: Yup.string().required(t('errors.required')),
+            publishAt: Yup.string().required(t('errors.required')),
+        }),
+        onSubmit: (values) => {
+            if (!values.serviceId) {
+                values.serviceId = undefined
+            }
+            if (customerId) {
+                values.serviceId = undefined
+                values.userIds = [customerId]
+            }
+            updateAnnoncement.mutate(values, {
+                onSuccess: () => {
+                    formik.resetForm()
+                    toast.success(t('success'))
+                    navigate(Pages.announcement.list)
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error.response?.data?.error?.message[0])
+                }
+            })
+        }
+    })
+
+
+    useEffect(() => {
+        const quill = new Quill('#editor', {
+            theme: 'snow',
+            modules: {
+                toolbar: [
+                    [{ header: '1' }, { header: '2' }, { font: [] }],
+                    [{ list: 'ordered' }, { list: 'bullet' }],
+                    ['bold', 'italic', 'underline'],
+                    ['link', 'image'],
+                    [{ align: [] }],
+                    ['clean']
+                ]
+            }
+        });
+        quill.on('text-change', () => {
+            const html = editorRef.current?.querySelector('.ql-editor')?.innerHTML || '';
+            formik.setFieldValue('content', html);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+
+    useEffect(() => {
+        if (getAnnoncement.data) {
+            formik.setValues(getAnnoncement.data?.data?.announcement)
+            setServiceId(getAnnoncement.data?.data?.announcement?.targetService?.id)
+            setCustomerId(getAnnoncement.data?.data?.announcement?.userIds?.[0])
+
+            const editorElement = editorRef.current?.querySelector('.ql-editor');
+            if (editorElement) {
+                editorElement.innerHTML = getAnnoncement.data?.data?.announcement?.content || '';
+            }
+
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getAnnoncement.data])
+
+    return (
+        <div className='w-full mt-4'>
+            <div className='flex w-full justify-between items-center'>
+                <div>
+                    ویرایش اطلاعیه
+                </div>
+                <div>
+                    <Button
+                        className='px-5'
+                        onClick={() => formik.handleSubmit()}
+                        isLoading={updateAnnoncement.isPending}
+                    >
+                        <div className='flex gap-2'>
+                            <TickCircle
+                                className='size-5'
+                                color='#fff'
+                            />
+                            <div>{t('announcement.submit_announcement')}</div>
+                        </div>
+                    </Button>
+                </div>
+            </div>
+
+            <div className='flex gap-6'>
+                <div className='flex-1'>
+                    <div className='flex-1 mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
+                        <Input
+                            label={t('announcement.title')}
+                            name='title'
+                            onChange={formik.handleChange}
+                            value={formik.values.title}
+                            error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
+                        />
+
+                        <div className='mt-7 text-sm'>{t('announcement.text')}</div>
+
+                        <div className='mt-1'>
+                            <div ref={editorRef} id='editor' style={{ minHeight: '120px' }}></div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='bg-white mt-10 w-sidebar text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl'>
+                    <DatePickerComponent
+                        label={t('announcement.publish_date')}
+                        onChange={(d) => formik.setFieldValue('publishAt', moment(d, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'))}
+                        placeholder={t('select')}
+                        defaulValue={formik.values.publishAt}
+                    />
+
+                    <div className='flex gap-1 mt-3'>
+                        <InfoCircle
+                            color='#8C90A3'
+                            className='size-4 min-w-4'
+                        />
+                        <p className='text-[10px] text-description'>
+                            {t('announcement.info_publishdata')}
+                        </p>
+                    </div>
+
+                    <div className='flex items-center mt-5'>
+                        <CheckBoxComponent
+                            checked={formik.values.isImportant}
+                            onChange={(e) => formik.setFieldValue('isImportant', e.target.checked)}
+                        />
+
+                        <div className='text-xs'>{t('announcement.label_importance')}</div>
+
+                    </div>
+
+                    <div className='mt-5'>
+                        <Select
+                            label={t('announcement.contact_announcement')}
+                            placeholder={t('announcement.select_service')}
+                            items={getServices?.data?.data?.services?.map((item: ServiceItemType) => ({
+                                label: item.name,
+                                value: item.id
+                            })) || []}
+                            name='serviceId'
+                            onChange={(e) => {
+                                formik.setFieldValue('serviceId', e.target.value)
+                                setServiceId(e.target.value)
+                            }}
+                        />
+                    </div>
+                    <div className='mt-5'>
+                        <Select
+                            placeholder={t('select')}
+                            label={t('announcement.select_customer')}
+                            items={getCustomer?.data?.data?.users?.map((item: UserServiceItemType) => ({
+                                label: item.firstname + ' ' + item.lastname,
+                                value: item.id
+                            })) || []}
+                            onChange={(e) => setCustomerId(e.target.value)}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Update

src/pages/annoncement/hooks/useAnnoncementData.ts

@@ -24,6 +24,7 @@ export const useGetAnnoncementDetail = (id: string) => {
   return useQuery({
     queryKey: ["announcement", id],
     queryFn: () => api.getAnnoncementDetail(id),
+    enabled: !!id,
   });
 };
 
@@ -34,3 +35,16 @@ export const useGetCustomersService = (serviceId: string) => {
     enabled: !!serviceId,
   });
 };
+
+export const useUpdateAnnoncement = (id: string) => {
+  return useMutation({
+    mutationFn: (variables: CreateAnnouncementType) =>
+      api.updateAnnoncement(id, variables),
+  });
+};
+
+export const useDeleteAnnoncement = () => {
+  return useMutation({
+    mutationFn: (id: string) => api.deleteAnnoncement(id),
+  });
+};

src/pages/annoncement/service/AnnoncementService.ts

@@ -7,6 +7,14 @@ export const createAnnoncement = async (params: CreateAnnouncementType) => {
   return data;
 };
 
+export const updateAnnoncement = async (
+  id: string,
+  params: CreateAnnouncementType
+) => {
+  const { data } = await axios.patch(`/announcements/${id}`, params);
+  return data;
+};
+
 export const getCustomerService = async (serviceId: string) => {
   const { data } = await axios.get(`/danak-services/${serviceId}/users`);
   return data;
@@ -27,6 +35,11 @@ export const getAnnoncements = async (
 };
 
 export const getAnnoncementDetail = async (id: string) => {
-  const { data } = await axios.get(`/announcements/${id}`);
+  const { data } = await axios.get(`/announcements/${id}/admin`);
+  return data;
+};
+
+export const deleteAnnoncement = async (id: string) => {
+  const { data } = await axios.delete(`/announcements/${id}`);
   return data;
 };

src/pages/auth/components/LoginStep2.tsx

@@ -12,6 +12,7 @@ import { Pages } from '../../../config/Pages'
 import { useOtpVerify } from '../hooks/useAuthData'
 import { ErrorType } from '../../../helpers/types'
 import { toast } from 'react-toastify'
+import { setToken, setRefreshToken } from '../../../config/func'
 
 const LoginStep2: FC = () => {
 
@@ -36,8 +37,8 @@ const LoginStep2: FC = () => {
             }
             otpVerify.mutate(params, {
                 onSuccess(data) {
-                    localStorage.setItem(import.meta.env.VITE_TOKEN_NAME, data?.data?.accessToken?.token)
-                    localStorage.setItem(import.meta.env.VITE_REFRESH_TOKEN_NAME, data?.data?.refreshToken?.token)
+                    setToken(data?.data?.accessToken?.token)
+                    setRefreshToken(data?.data?.refreshToken?.token)
                     window.location.href = Pages.dashboard
                 },
                 onError(error: ErrorType) {

src/pages/auth/components/LoginStep3.tsx

@@ -13,6 +13,8 @@ import ArrowLeftIcon from '../../../assets/images/arrow-left.svg'
 import { useLoginWithPassword } from '../hooks/useAuthData'
 import { toast } from 'react-toastify'
 import { ErrorType } from '../../../helpers/types'
+import { setRefreshToken } from '../../../config/func'
+import { setToken } from '../../../config/func'
 
 const LoginStep3: FC = () => {
 
@@ -32,8 +34,8 @@ const LoginStep3: FC = () => {
         onSubmit(values) {
             loginWithPassword.mutate(values, {
                 onSuccess(data) {
-                    localStorage.setItem(import.meta.env.VITE_TOKEN_NAME, data?.data?.accessToken?.token)
-                    localStorage.setItem(import.meta.env.VITE_REFRESH_TOKEN_NAME, data?.data?.refreshToken?.token)
+                    setToken(data?.data?.accessToken?.token)
+                    setRefreshToken(data?.data?.refreshToken?.token)
                     window.location.href = Pages.dashboard
                 },
                 onError(error: ErrorType) {

src/pages/auth/service/AuthService.ts

@@ -5,6 +5,7 @@ import {
   LoginWithOtpType,
   LoginWithPasswordType,
   OtpVerifyType,
+  RefreshTokenType,
   RegisterType,
 } from "../types/AuthTypes";
 
@@ -37,3 +38,8 @@ export const register = async (params: RegisterType) => {
   const { data } = await axios.post(`/auth/register/complete`, params);
   return data;
 };
+
+export const refreshToken = async (params: RefreshTokenType) => {
+  const { data } = await axios.post(`/auth/refresh`, params);
+  return data;
+};

src/pages/auth/types/AuthTypes.ts

@@ -49,3 +49,6 @@ export type RegisterType = {
   password: string;
   code: number;
 };
+export type RefreshTokenType = {
+  refreshToken: string;
+};

src/router/Main.tsx

@@ -25,7 +25,6 @@ import ReceiptsDetail from '../pages/receipts/Detail'
 import Profile from '../pages/profile/Profile'
 import OtherServices from '../pages/service/OtherServices'
 import Footer from '../shared/Footer'
-import AnnouncementDetail from '../pages/annoncement/Detail'
 import DetailService from '../pages/service/DetailService'
 import { clx } from '../helpers/utils'
 import { useSharedStore } from '../shared/store/sharedStore'
@@ -59,6 +58,7 @@ import UpdateAds from '../pages/ads/Update'
 import UpdateService from '../pages/service/UpdateService'
 import UpdateCustomer from '../pages/customer/Update'
 import UpdateBlog from '../pages/blog/Update'
+import Update from '../pages/annoncement/Update'
 
 const MainRouter: FC = () => {
 
@@ -105,7 +105,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.receipts.detail + ':id'} element={<ReceiptsDetail />} />
                             <Route path={Pages.receipts.create} element={<CreateReceipt />} />
                             <Route path={Pages.announcement.list} element={<AnnouncementtList />} />
-                            <Route path={Pages.announcement.detail + ':id'} element={<AnnouncementDetail />} />
+                            <Route path={Pages.announcement.detail + ':id'} element={<Update />} />
                             <Route path={Pages.announcement.create} element={<Create />} />
                             <Route path={Pages.criticisms.list} element={<CriticismsList />} />
                             <Route path={Pages.criticisms.detail + ':id'} element={<CriticismsDetail />} />

src/shared/SideBarItem.tsx

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'
 import { clx } from '../helpers/utils'
 import { Pages } from '../config/Pages'
 import { useSharedStore } from './store/sharedStore'
+import { removeToken, removeRefreshToken } from '../config/func'
 
 type Props = {
     icon: ReactNode,
@@ -17,7 +18,8 @@ const SideBarItem: FC<Props> = (props: Props) => {
 
     const { hasSubMenu, setSubMenuName, setSubtMenu } = useSharedStore()
     const handleLogout = () => {
-        localStorage.removeItem(import.meta.env.VITE_TOKEN_NAME)
+        removeToken()
+        removeRefreshToken()
         window.location.href = Pages.auth.login
     }