skeleton logout and ...

This commit is contained in:
hamid zarghami
2025-03-11 12:51:37 +03:30
parent c6a66eaf23
commit 8182e15cd7
12 changed files with 248 additions and 194 deletions
+1 -1
View File
@@ -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"), {
+9 -9
View File
@@ -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>
{
@@ -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
+6
View File
@@ -37,3 +37,9 @@ export const useRegister = () => {
mutationFn: (variables: RegisterType) => api.register(variables),
});
};
export const useLogout = () => {
return useMutation({
mutationFn: (_) => api.logout(),
});
};
+5
View File
@@ -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;
};
+6 -8
View File
@@ -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>
)
}
+6 -2
View File
@@ -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
@@ -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
+1 -41
View File
@@ -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>
)
}
+4
View File
@@ -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} />
+5 -1
View File
@@ -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
}
+1 -1
View File
@@ -9,7 +9,7 @@ export default defineConfig({
VitePWA({
registerType: "autoUpdate",
devOptions: {
enabled: true, // در حالت توسعه هم کار کند
enabled: false, // در حالت توسعه هم کار کند
},
manifest: {
name: "Danak Console",