diff --git a/src/App.tsx b/src/App.tsx index a76b0a6..a59b231 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -34,6 +34,7 @@ const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, + staleTime: 86400000 // 1 day in milliseconds }, }, }); diff --git a/src/components/ServiceItem.tsx b/src/components/ServiceItem.tsx new file mode 100644 index 0000000..873a66e --- /dev/null +++ b/src/components/ServiceItem.tsx @@ -0,0 +1,51 @@ +import { FC } from 'react' +import { Link } from 'react-router-dom' +import { Pages } from '../config/Pages' +import { ArrowLeft } from 'iconsax-react' +import Button from './Button' +import { useTranslation } from 'react-i18next' +import { ItemServiceType } from '../pages/service/types/ServiecTypes' + +type Props = { + item: ItemServiceType +} + +const ServiceItem: FC = (props: Props) => { + + const { t } = useTranslation('global') + const { item } = props + + return ( +
+
+
+ {item.name} +
+
+ {item.name} +
+
+
+
{item.description}
+

+ +

+
+ +
+ + + +
+
+ ) +} + +export default ServiceItem \ No newline at end of file diff --git a/src/components/ServiceSection.tsx b/src/components/ServiceSection.tsx index 5a6c1bc..5231922 100644 --- a/src/components/ServiceSection.tsx +++ b/src/components/ServiceSection.tsx @@ -1,15 +1,23 @@ import { FC } from 'react' +import { ItemServiceType } from '../pages/service/types/ServiecTypes' -const ServiceSection: FC = () => { +type Props = { + item: ItemServiceType +} + +const ServiceSection: FC = (props: Props) => { + const { item } = props return (
-
+
+ {item.name} +
- دی منو + {item.name}
- منو رستوران + {item.description}
diff --git a/src/pages/notification/Notification.tsx b/src/pages/notification/Notification.tsx index df2a4ff..3d6664b 100644 --- a/src/pages/notification/Notification.tsx +++ b/src/pages/notification/Notification.tsx @@ -9,6 +9,7 @@ import { useGetNotification } from './hooks/useNotificationData'; import { NotificationItemType } from './types/NotificationTypes'; import { timeAgo } from '../../config/func'; import InfiniteScroll from 'react-infinite-scroll-component'; +import MoonLoader from "react-spinners/MoonLoader" const Notifications: FC = () => { const { t } = useTranslation('global'); @@ -29,7 +30,7 @@ const Notifications: FC = () => { setShowModal(!showModal)} size={18} color="black" /> {showModal && ( -
+
{t('notif.natification')}
@@ -67,23 +68,15 @@ const Notifications: FC = () => {
-
+
در حال بارگذاری...} - scrollThreshold={0.9} - - - - + loader={
} + scrollableTarget="notificationsContainer" > - {isLoading ? ( -

در حال بارگذاری...

- ) : isFetching ? ( -

در حال بارگذاری صفحه بعدی...

- ) : ( + { posts.map((item: NotificationItemType) => (
@@ -101,7 +94,7 @@ const Notifications: FC = () => {
)) - )} + }
diff --git a/src/pages/service/OtherServices.tsx b/src/pages/service/OtherServices.tsx index 5de71f4..2325491 100644 --- a/src/pages/service/OtherServices.tsx +++ b/src/pages/service/OtherServices.tsx @@ -1,206 +1,110 @@ import { Carousel } from '@material-tailwind/react' -import { FC } from 'react' +import { FC, Fragment } from 'react' import { useTranslation } from 'react-i18next' import BannerImage from '../../assets/images/banner2.jpeg' import RobotImage from '../../assets/images/robot.jpeg' import { ArrowLeft } from 'iconsax-react' import TitleLine from '../../components/TitleLine' -import Button from '../../components/Button' -import ServiceSection from '../../components/ServiceSection' -import { Link } from 'react-router-dom' -import { Pages } from '../../config/Pages' +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' + const OtherServices: FC = () => { const { t } = useTranslation('global') + const getSuggestedServices = useGetSuggestedServices() + + + + + return (
- { }} onPointerLeaveCapture={() => { }} > -
- -
- + { + getSuggestedServices.isPending ? + + : + + { }} onPointerLeaveCapture={() => { }} > +
+ +
+ -
-
- سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟ -
-
- ۸ دقیقه مطالعه -
- -
-
-
-
- -
- - -
-
- سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟ -
-
- ۸ دقیقه مطالعه -
- -
-
-
- - - -
- -
- -
-
-
-
-
- دی منو -
-
-
-
منو رستوران
-

- دی منو، راهی ساده و هوشمند برای مدیریت منو شما! -

-
- -
- - - -
-
-
-
-
-
- دی منو -
-
-
-
منو رستوران
-

- دی منو، راهی ساده و هوشمند برای مدیریت منو شما! -

-
- -
- - - -
-
-
-
-
-
- دی منو -
-
-
-
منو رستوران
-

- دی منو، راهی ساده و هوشمند برای مدیریت منو شما! -

-
- -
- - - -
-
-
-
- -
- -
- -
-
-
-
- - -
- - -
+
+
+
+ +
+ -
-
-
- - -
- - +
+
+ + + +
+
-
-
+
+ { + getSuggestedServices.data?.data?.danakServices?.map((item: ItemServiceType) => ( + + )) + } +
+
-
-
+ + + + + +
+ + }
diff --git a/src/pages/service/components/OtherServices.tsx b/src/pages/service/components/OtherServices.tsx new file mode 100644 index 0000000..bbc3148 --- /dev/null +++ b/src/pages/service/components/OtherServices.tsx @@ -0,0 +1,93 @@ +import { FC, useEffect, useState } from 'react' +import TitleLine from '../../../components/TitleLine' +import { useTranslation } from 'react-i18next' +import { useGetCategoriesPublic, useGetServicesByCategory } from '../hooks/useServiceData' +import { SwiperSlide, Swiper } from 'swiper/react' +import { CategoryItemType, ItemServiceType } from '../types/ServiecTypes' +import { clx } from '../../../helpers/utils' +import ServiceSection from '../../../components/ServiceSection' +import { Link } from 'react-router-dom' +import Button from '../../../components/Button' +import { ArrowLeft } from 'iconsax-react' +import { Pages } from '../../../config/Pages' + +const OtherServicesComponent: FC = () => { + + const { t } = useTranslation('global') + const [categoryId, setCategoryId] = useState('') + const getCategory = useGetCategoriesPublic() + const getServices = useGetServicesByCategory(categoryId) + + useEffect(() => { + + if (getCategory.data) { + setCategoryId(getCategory?.data?.data?.categories[0]?.id) + } + + }, [getCategory.data]) + + return ( +
+
+ +
+ +
+ + { + getCategory.data?.data?.categories?.map((item: CategoryItemType) => { + return ( + +
setCategoryId(item.id)} className={clx( + 'h-10 cursor-pointer rounded-full border-2 border-white bg-white/45 flex gap-2 justify-center items-center', + item.id === categoryId && 'bg-white' + )}> + +
{item.title}
+
+ + ) + }) + } + + +
+ +
+
+ { + getServices.data?.data?.category?.danakService?.map((item: ItemServiceType) => { + return ( +
+
+ + + + +
+ +
+ ) + }) + } +
+ +
+
+ ) +} + +export default OtherServicesComponent \ No newline at end of file diff --git a/src/pages/service/hooks/useServiceData.ts b/src/pages/service/hooks/useServiceData.ts new file mode 100644 index 0000000..7abfe76 --- /dev/null +++ b/src/pages/service/hooks/useServiceData.ts @@ -0,0 +1,24 @@ +import { useQuery } from "@tanstack/react-query"; +import * as api from "../service/ServiceService"; + +export const useGetSuggestedServices = () => { + return useQuery({ + queryKey: ["suggested-services"], + queryFn: () => api.getServiceSuggestedDanak(), + }); +}; + +export const useGetCategoriesPublic = () => { + return useQuery({ + queryKey: ["categories-public"], + queryFn: () => api.getCategoriesPublic(), + }); +}; + +export const useGetServicesByCategory = (categoryId: string) => { + return useQuery({ + queryKey: ["services-category", categoryId], + queryFn: () => api.getServicesByCategory(categoryId), + enabled: !!categoryId, + }); +}; diff --git a/src/pages/service/service/ServiceService.ts b/src/pages/service/service/ServiceService.ts new file mode 100644 index 0000000..40d6bd2 --- /dev/null +++ b/src/pages/service/service/ServiceService.ts @@ -0,0 +1,16 @@ +import axios from "../../../config/axios"; + +export const getServiceSuggestedDanak = async () => { + const { data } = await axios.get(`/danak-services/suggested`); + return data; +}; +export const getCategoriesPublic = async () => { + const { data } = await axios.get(`/danak-services/categories/public`); + return data; +}; +export const getServicesByCategory = async (categoryId: string) => { + const { data } = await axios.get( + `/danak-services/categories/${categoryId}/services` + ); + return data; +}; diff --git a/src/pages/service/types/ServiecTypes.ts b/src/pages/service/types/ServiecTypes.ts new file mode 100644 index 0000000..1a02d1f --- /dev/null +++ b/src/pages/service/types/ServiecTypes.ts @@ -0,0 +1,27 @@ +export type ItemServiceType = { + author: string; + createDate: string; + createdAt: string; + description: string; + icon: string; + id: string; + isActive: boolean; + isDanakSuggest: boolean; + link: string; + metaDescription: string; + name: string; + serviceLanguage: string; + softwareLanguage: string; + updatedAt: string; + userCount: number; +}; + +export type CategoryItemType = { + createdAt: string; + icon: string; + id: string; + isActive: boolean; + parentId: string | null; + title: string; + updatedAt: string; +};