skeleton logout and ...

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-e7681877'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.qrm0hc87vi"
+    "revision": "0.l1l8csoi5qg"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/pages/annoncement/List.tsx

@@ -6,10 +6,10 @@ import { clx } from '../../helpers/utils'
 import { useNavigate } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
 import { useGetAnnoncement } from './hooks/useAnnoncementData'
-import PageLoading from '../../components/PageLoading'
 import { AnnoncementItemType } from './types/AnnoncementTypes'
 import moment from 'moment-jalaali'
 import { Helmet } from 'react-helmet-async'
+import AnouncementSkeleton from './components/AnouncementSkeleton'
 
 const AnnouncementtList: FC = () => {
 
@@ -62,19 +62,20 @@ const AnnouncementtList: FC = () => {
                         </div> */}
                     </div>
 
-                    {
-                        getAnnoncements.isPending ?
-                            <div className='mt-8'>
-                                <PageLoading />
-                            </div>
-                            :
                     <Fragment>
                         <div className='mt-8'>
                             {
+                                getAnnoncements.isPending ?
+                                    <Fragment>
+                                        <AnouncementSkeleton />
+                                        <AnouncementSkeleton />
+                                        <AnouncementSkeleton />
+                                    </Fragment>
+                                    :
                                     getAnnoncements.data?.data?.announcements?.map((item: AnnoncementItemType) => {
                                         return (
                                             <div onClick={() => handleChange(item)} className={clx(
-                                                    'p-4 border-b',
+                                                'p-4 border-b cursor-pointer',
                                                 item.id === itemSelected?.id && 'bg-[#F8F9FB]'
                                             )}>
                                                 <div className='flex justify-between'>
@@ -114,7 +115,6 @@ const AnnouncementtList: FC = () => {
 
                         </div>
                     </Fragment>
-                    }
                 </div>
 
                 {

src/pages/annoncement/components/AnouncementSkeleton.tsx

@@ -0,0 +1,41 @@
+import { FC } from 'react'
+import Skeleton from 'react-loading-skeleton'
+
+const AnouncementSkeleton: FC = () => {
+    return (
+        <div className={'p-4 border-b'}>
+            <div className='flex items-center justify-between'>
+                <div className='leading-6 text-xs xl:text-[12.5px] max-w-[70%]'>
+                    <Skeleton
+                        height={7}
+                        width={100}
+                    />
+                </div>
+
+                <div className='flex gap-1'>
+                    <Skeleton
+                        className='!w-10 !h-6 !rounded-full'
+                    />
+                    <Skeleton
+                        className='!w-10 !h-6 !rounded-full'
+                    />
+                </div>
+            </div>
+
+            <div className='m-2 flex justify-between items-center text-[11px]'>
+                <Skeleton
+                    height={7}
+                    width={150}
+                />
+                <div className='text-description'>
+                    <Skeleton
+                        height={7}
+                        width={40}
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default AnouncementSkeleton

src/pages/auth/hooks/useAuthData.tsx

@@ -37,3 +37,9 @@ export const useRegister = () => {
         mutationFn: (variables: RegisterType) => api.register(variables),
     });
 };
+
+export const useLogout = () => {
+    return useMutation({
+        mutationFn: (_) => api.logout(),
+    });
+};

src/pages/auth/service/AuthService.ts

@@ -43,3 +43,8 @@ export const refreshToken = async (params: RefreshTokenType) => {
   const { data } = await axios.post(`/auth/refresh`, params);
   return data;
 };
+
+export const logout = async () => {
+  const { data } = await axios.post(`/auth/logout`);
+  return data;
+};

src/pages/receipts/List.tsx

@@ -6,11 +6,11 @@ import Td from '../../components/Td'
 import { Link } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
 import { useGetInvoices } from './hooks/useReceiptData'
-import PageLoading from '../../components/PageLoading'
 import { NumberFormat } from '../../config/func'
 import { ReceiptItemType } from './types/ReceiptTypes'
 import moment from 'moment-jalaali'
 import { Helmet } from 'react-helmet-async'
+import DefaultTableSkeleton from '../../components/DefaultTableSkeleton'
 
 const ReceiptsList: FC = () => {
 
@@ -63,12 +63,7 @@ const ReceiptsList: FC = () => {
                 />
             </div>
 
-            {
+
-                getInvoices.isPending ?
-                    <div className='mt-5'>
-                        <PageLoading />
-                    </div>
-                    :
             <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
                 <table className='w-full text-sm '>
                     <thead className='thead'>
@@ -86,6 +81,10 @@ const ReceiptsList: FC = () => {
                     </thead>
                     <tbody>
                         {
+
+                            getInvoices.isPending ?
+                                <DefaultTableSkeleton tdCount={8} />
+                                :
                                 getInvoices.data?.data?.invoices?.map((item: ReceiptItemType) => {
                                     return (
                                         <tr className='tr'>
@@ -129,7 +128,6 @@ const ReceiptsList: FC = () => {
                     </tbody>
                 </table>
             </div>
-            }
         </div>
     )
 }

src/pages/service/OtherServices.tsx

@@ -4,13 +4,14 @@ import { useTranslation } from 'react-i18next'
 import { ArrowLeft } from 'iconsax-react'
 import TitleLine from '../../components/TitleLine'
 import { useGetSuggestedServices } from './hooks/useServiceData'
-import PageLoading from '../../components/PageLoading'
 import { ItemServiceType } from './types/ServiecTypes'
 import ServiceItem from '../../components/ServiceItem'
 import OtherServicesComponent from './components/OtherServices'
 import { useGetAds } from '../ads/hooks/useAdsData'
 import { AdsDisplayLocation, AdsItemType } from '../ads/types/AdsTypes'
 import { Helmet } from 'react-helmet-async'
+import Skeleton from 'react-loading-skeleton'
+import OtherServiceSkeleton from './components/OtherServiceSkeleton'
 
 
 const OtherServices: FC = () => {
@@ -30,7 +31,7 @@ const OtherServices: FC = () => {
             <div className='flex-1'>
                 {
                     getSuggestedServices.isPending || getAdsLeft.isPending ?
-                        <PageLoading />
+                        <OtherServiceSkeleton />
                         :
                         <Fragment>
                             <Carousel autoplay className="rounded-3xl overflow-hidden h-fit dltr z-[1]" placeholder="" onPointerEnterCapture={() => { }} onPointerLeaveCapture={() => { }} >
@@ -96,6 +97,9 @@ const OtherServices: FC = () => {
 
             </div>
             {
+                getAdsLeft.isPending ?
+                    <Skeleton className='!w-sidebar !rounded-3xl !hidden xl:!block' height={550} />
+                    :
                     getAdsLeft.isSuccess && getAdsLeft.data.data.ads[0] &&
                     <a href={getAdsLeft.data?.data?.ads[0].link} target='_blank' className='bg-white w-sidebar h-fit hidden xl:block rounded-3xl overflow-hidden sticky top-0'>
                         <img

src/pages/service/components/OtherServiceSkeleton.tsx

@@ -0,0 +1,32 @@
+import { FC } from 'react'
+import Skeleton from 'react-loading-skeleton'
+import TitleLine from '../../../components/TitleLine'
+import { useTranslation } from 'react-i18next'
+import ServiceItemSkeleton from './ServiceItemSkeleton'
+
+const OtherServiceSkeleton: FC = () => {
+
+    const { t } = useTranslation('global')
+
+    return (
+        <div>
+            <Skeleton
+                height={300}
+                className='!rounded-3xl'
+            />
+
+            <div className='w-full mt-8'>
+                <TitleLine title={t('service.selected_danak')} />
+            </div>
+
+            <div className='flex flex-wrap xl:gap-6 gap-4 items-center mt-8'>
+                <ServiceItemSkeleton />
+                <ServiceItemSkeleton />
+                <ServiceItemSkeleton />
+                <ServiceItemSkeleton />
+            </div>
+        </div>
+    )
+}
+
+export default OtherServiceSkeleton

src/pages/service/components/OtherServices.tsx

@@ -68,50 +68,10 @@ const OtherServicesComponent: FC = () => {
                         })
                     }
                     <div className='flex-1 min-w-[40%] xl:min-w-[30%] xl:p-6 p-4'></div>
+                    <div className='flex-1 min-w-[40%] xl:min-w-[30%] xl:p-6 p-4'></div>
                 </div>
 
             </div>
-
-            {/* <a target='_blank' key={item.id} href={item.status === 'ACTIVE' ? item.plan.service.link + item.id : '#'} className={clx(
-                                        'flex-1  min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6 flex flex-col items-center self-stretch',
-                                        item.status === 'INACTIVE' && 'opacity-50'
-                                    )}>
-                                        <div className="flex-grow">
-                                            <ServiceSection
-                                                item={{
-                                                    author: item.plan.service.author,
-                                                    createDate: item.plan?.service?.createDate,
-                                                    createdAt: item.createdAt,
-                                                    description: item.plan?.service?.title,
-                                                    icon: item.plan?.service.icon,
-                                                    id: item.plan.service.id,
-                                                    isActive: item.plan.isActive,
-                                                    isDanakSuggest: item.plan.service.isDanakSuggest,
-                                                    link: item.plan.service.link,
-                                                    metaDescription: item.plan.service.metaDescription,
-                                                    name: item.plan.service.name,
-                                                    serviceLanguage: item.plan.service.serviceLanguage,
-                                                    softwareLanguage: item.plan.service.softwareLanguage,
-                                                    updatedAt: item.plan.service.updatedAt,
-                                                    userCount: item.plan.service?.userCount,
-                                                    title: item.plan.service.title,
-                                                }}
-                                            />
-                                        </div>
-                                        <div className='mt-6 flex gap-1 items-center'>
-                                            <StatusCircle
-                                                color={item.status === 'ACTIVE' ? '#00BA4B' : '#FF0000'}
-                                            />
-                                            <div className='text-xs text-description'>
-                                                {
-                                                    item.status === 'ACTIVE' ?
-                                                        t('active')
-                                                        :
-                                                        t('inactive')
-                                                }
-                                            </div>
-                                        </div>
-                                    </a> */}
         </div>
     )
 }

src/pages/ticket/TicketList.tsx

@@ -9,6 +9,7 @@ import { Pages } from '../../config/Pages'
 import { useGetTickets } from './hooks/useTicketData'
 import moment from 'moment-jalaali'
 import { Helmet } from 'react-helmet-async'
+import DefaultTableSkeleton from '../../components/DefaultTableSkeleton'
 
 const TicketList: FC = () => {
 
@@ -88,6 +89,9 @@ const TicketList: FC = () => {
                     </thead>
                     <tbody>
                         {
+                            getTickets.isPending ?
+                                <DefaultTableSkeleton tdCount={9} />
+                                :
                                 getTickets.data?.data?.tickets?.map((item: any) => (
                                     <tr key={item.id} className='tr'>
                                         <Td text={item.numericId} />

src/shared/SideBarItem.tsx

@@ -2,6 +2,7 @@ import { FC, ReactNode } from 'react'
 import { Link } from 'react-router-dom'
 import { clx } from '../helpers/utils'
 import { Pages } from '../config/Pages'
+import { useLogout } from '../pages/auth/hooks/useAuthData'
 
 type Props = {
     icon: ReactNode,
@@ -14,7 +15,10 @@ type Props = {
 
 const SideBarItem: FC<Props> = (props: Props) => {
 
-    const handleLogout = () => {
+    const logout = useLogout()
+
+    const handleLogout = async () => {
+        await logout.mutateAsync()
         localStorage.removeItem(import.meta.env.VITE_TOKEN_NAME)
         window.location.href = Pages.auth.login
     }

vite.config.ts

@@ -9,7 +9,7 @@ export default defineConfig({
     VitePWA({
       registerType: "autoUpdate",
       devOptions: {
-        enabled: true, // در حالت توسعه هم کار کند
+        enabled: false, // در حالت توسعه هم کار کند
       },
       manifest: {
         name: "Danak Console",