From 8182e15cd7e987675fbef775e741d5fea1d6acb9 Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Tue, 11 Mar 2025 12:51:37 +0330 Subject: [PATCH] skeleton logout and ... --- dev-dist/sw.js | 2 +- src/pages/annoncement/List.tsx | 98 ++++++------- .../components/AnouncementSkeleton.tsx | 41 ++++++ src/pages/auth/hooks/useAuthData.tsx | 6 + src/pages/auth/service/AuthService.ts | 5 + src/pages/receipts/List.tsx | 130 +++++++++--------- src/pages/service/OtherServices.tsx | 30 ++-- .../components/OtherServiceSkeleton.tsx | 32 +++++ .../service/components/OtherServices.tsx | 44 +----- src/pages/ticket/TicketList.tsx | 46 ++++--- src/shared/SideBarItem.tsx | 6 +- vite.config.ts | 2 +- 12 files changed, 248 insertions(+), 194 deletions(-) create mode 100644 src/pages/annoncement/components/AnouncementSkeleton.tsx create mode 100644 src/pages/service/components/OtherServiceSkeleton.tsx diff --git a/dev-dist/sw.js b/dev-dist/sw.js index 4d12229..0ce0659 100644 --- a/dev-dist/sw.js +++ b/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"), { diff --git a/src/pages/annoncement/List.tsx b/src/pages/annoncement/List.tsx index 5e79b0f..80f286f 100644 --- a/src/pages/annoncement/List.tsx +++ b/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,59 +62,59 @@ const AnnouncementtList: FC = () => { */} - { - getAnnoncements.isPending ? -
- -
- : - -
- { - getAnnoncements.data?.data?.announcements?.map((item: AnnoncementItemType) => { - return ( -
handleChange(item)} className={clx( - 'p-4 border-b', - item.id === itemSelected?.id && 'bg-[#F8F9FB]' - )}> -
-
- {item.announcement.title} -
- -
- { - item.announcement.isImportant && - - } - { - !item.isRead && - - } -
+ +
+ { + getAnnoncements.isPending ? + + + + + + : + getAnnoncements.data?.data?.announcements?.map((item: AnnoncementItemType) => { + return ( +
handleChange(item)} className={clx( + 'p-4 border-b cursor-pointer', + item.id === itemSelected?.id && 'bg-[#F8F9FB]' + )}> +
+
+ {item.announcement.title}
-
-
-
-
- {moment(item.announcement.publishAt).format('jYYYY/jMM/jDD')} -
+
+ { + item.announcement.isImportant && + + } + { + !item.isRead && + + }
- ) - }) - } -
- - } +
+
+
+
+ {moment(item.announcement.publishAt).format('jYYYY/jMM/jDD')} +
+
+
+ ) + }) + } + +
+
{ diff --git a/src/pages/annoncement/components/AnouncementSkeleton.tsx b/src/pages/annoncement/components/AnouncementSkeleton.tsx new file mode 100644 index 0000000..a6c1bec --- /dev/null +++ b/src/pages/annoncement/components/AnouncementSkeleton.tsx @@ -0,0 +1,41 @@ +import { FC } from 'react' +import Skeleton from 'react-loading-skeleton' + +const AnouncementSkeleton: FC = () => { + return ( +
+
+
+ +
+ +
+ + +
+
+ +
+ +
+ +
+
+
+ ) +} + +export default AnouncementSkeleton \ No newline at end of file diff --git a/src/pages/auth/hooks/useAuthData.tsx b/src/pages/auth/hooks/useAuthData.tsx index 0c480e9..d9db212 100644 --- a/src/pages/auth/hooks/useAuthData.tsx +++ b/src/pages/auth/hooks/useAuthData.tsx @@ -36,4 +36,10 @@ export const useRegister = () => { return useMutation({ mutationFn: (variables: RegisterType) => api.register(variables), }); +}; + +export const useLogout = () => { + return useMutation({ + mutationFn: (_) => api.logout(), + }); }; \ No newline at end of file diff --git a/src/pages/auth/service/AuthService.ts b/src/pages/auth/service/AuthService.ts index da477ec..e176ba9 100644 --- a/src/pages/auth/service/AuthService.ts +++ b/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; +}; diff --git a/src/pages/receipts/List.tsx b/src/pages/receipts/List.tsx index 3b59741..993dee5 100644 --- a/src/pages/receipts/List.tsx +++ b/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,73 +63,71 @@ const ReceiptsList: FC = () => { />
- { - getInvoices.isPending ? -
- -
- : -
- - - - - - - { - getInvoices.data?.data?.invoices?.map((item: ReceiptItemType) => { - return ( - - - - - - - ) - }) - } +
+
- {/* */} - - - - - - - -
- {/* */} - -
- {moment(item.createdAt).format('jYYYY-jMM-jDD HH:mm')} -
- 		-
- {moment(item.dueDate).format('jYYYY-jMM-jDD HH:mm')} -
- 		- -
- { - item.items.map((item => { - return ( -
{item.name} ({item.count})
- ) - })) - } -
- 		- - - - - -
+ + + + + + { - -
+ {/* */} + + + + + + + +
-
- } + getInvoices.isPending ? + + : + getInvoices.data?.data?.invoices?.map((item: ReceiptItemType) => { + return ( + + + {/* */} + +
+ {moment(item.createdAt).format('jYYYY-jMM-jDD HH:mm')} +
+ + + +
+ {moment(item.dueDate).format('jYYYY-jMM-jDD HH:mm')} +
+ + + +
+ { + item.items.map((item => { + return ( +
{item.name} ({item.count})
+ ) + })) + } +
+ + + + + + + + + + ) + }) + } + + + +
) } diff --git a/src/pages/service/OtherServices.tsx b/src/pages/service/OtherServices.tsx index cda05c3..ebe59fa 100644 --- a/src/pages/service/OtherServices.tsx +++ b/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 = () => {
{ getSuggestedServices.isPending || getAdsLeft.isPending ? - + : { }} onPointerLeaveCapture={() => { }} > @@ -96,19 +97,22 @@ const OtherServices: FC = () => {
{ - getAdsLeft.isSuccess && getAdsLeft.data.data.ads[0] && - - + getAdsLeft.isPending ? + + : + getAdsLeft.isSuccess && getAdsLeft.data.data.ads[0] && + + -
-
- {getAdsLeft.data.data.ads[0].title} +
+
+ {getAdsLeft.data.data.ads[0].title} +
-
- + }
) diff --git a/src/pages/service/components/OtherServiceSkeleton.tsx b/src/pages/service/components/OtherServiceSkeleton.tsx new file mode 100644 index 0000000..3981e95 --- /dev/null +++ b/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 ( +
+ + +
+ +
+ +
+ + + + +
+
+ ) +} + +export default OtherServiceSkeleton \ No newline at end of file diff --git a/src/pages/service/components/OtherServices.tsx b/src/pages/service/components/OtherServices.tsx index 8fe1335..46aee23 100644 --- a/src/pages/service/components/OtherServices.tsx +++ b/src/pages/service/components/OtherServices.tsx @@ -68,51 +68,11 @@ const OtherServicesComponent: FC = () => { }) }
+
- - {/* -
- -
-
- -
- { - item.status === 'ACTIVE' ? - t('active') - : - t('inactive') - } -
-
- */} - + ) } diff --git a/src/pages/ticket/TicketList.tsx b/src/pages/ticket/TicketList.tsx index 09b9867..85f29bd 100644 --- a/src/pages/ticket/TicketList.tsx +++ b/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,27 +89,30 @@ const TicketList: FC = () => { { - getTickets.data?.data?.tickets?.map((item: any) => ( - - - - - - -
- {moment(item.updatedAt).format('jYYYY-jMM-jDD HH:mm')} -
- - - - - - - - - - - )) + getTickets.isPending ? + + : + getTickets.data?.data?.tickets?.map((item: any) => ( + + + + + + +
+ {moment(item.updatedAt).format('jYYYY-jMM-jDD HH:mm')} +
+ + + + + + + + + + + )) } diff --git a/src/shared/SideBarItem.tsx b/src/shared/SideBarItem.tsx index aaa984b..e3cc58c 100644 --- a/src/shared/SideBarItem.tsx +++ b/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) => { - 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 } diff --git a/vite.config.ts b/vite.config.ts index 09931c6..77a8853 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -9,7 +9,7 @@ export default defineConfig({ VitePWA({ registerType: "autoUpdate", devOptions: { - enabled: true, // در حالت توسعه هم کار کند + enabled: false, // در حالت توسعه هم کار کند }, manifest: { name: "Danak Console",