diff --git a/package-lock.json b/package-lock.json index a333dd3..3c22b09 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.1.0", "dependencies": { "@tanstack/react-query": "^5.73.3", - "@tanstack/react-query-devtools": "^5.73.3", + "@tanstack/react-query-devtools": "^5.74.3", "axios": "^1.8.4", "iconsax-react": "^0.0.8", "js-cookie": "^3.0.5", @@ -1119,9 +1119,9 @@ } }, "node_modules/@tanstack/query-core": { - "version": "5.73.3", - "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.73.3.tgz", - "integrity": "sha512-LUpsgVT3IkvOECdkQ3QD6esczSH71mAzH/LDZ2cu8j6w430v5W0JB1ulzsG8FFwFBd5fm/ePM2DFpg9TucRMgQ==", + "version": "5.74.3", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.74.3.tgz", + "integrity": "sha512-Mqk+5o3qTuAiZML248XpNH8r2cOzl15+LTbUsZQEwvSvn1GU4VQhvqzAbil36p+MBxpr/58oBSnRzhrBevDhfg==", "license": "MIT", "funding": { "type": "github", @@ -1139,12 +1139,12 @@ } }, "node_modules/@tanstack/react-query": { - "version": "5.73.3", - "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.73.3.tgz", - "integrity": "sha512-umsAEsVsSSnrOZrstX/OlctdqkRZm6vPsetmbl241tdNo0jT3s+0bUoof9kCaTsPr/GopPlbJ1OYlrZj4toKzg==", + "version": "5.74.3", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.74.3.tgz", + "integrity": "sha512-QrycUn0wxjVPzITvQvOxFRdhlAwIoOQSuav7qWD4SWCoKCdLbyRZ2vji2GuBq/glaxbF4wBx3fqcYRDOt8KDTA==", "license": "MIT", "dependencies": { - "@tanstack/query-core": "5.73.3" + "@tanstack/query-core": "5.74.3" }, "funding": { "type": "github", @@ -1155,9 +1155,9 @@ } }, "node_modules/@tanstack/react-query-devtools": { - "version": "5.73.3", - "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.73.3.tgz", - "integrity": "sha512-5YizhmYep/A9h5Z+aApHZd0rwNH3FQm6JzUQmdH+f8aG5joi2cRAq+3UakDH6wst2kysReEmW4n7PaMxfCEtRQ==", + "version": "5.74.3", + "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.74.3.tgz", + "integrity": "sha512-H7TsOBB1fRCuuawrBzKMoIszqqILr2IN5oGLYMl7QG7ERJpMdc4hH8OwzBhVxJnmKeGwgtTQgcdKepfoJCWvFg==", "license": "MIT", "dependencies": { "@tanstack/query-devtools": "5.73.3" @@ -1167,7 +1167,7 @@ "url": "https://github.com/sponsors/tannerlinsley" }, "peerDependencies": { - "@tanstack/react-query": "^5.73.3", + "@tanstack/react-query": "^5.74.3", "react": "^18 || ^19" } }, diff --git a/package.json b/package.json index b69c569..073a23e 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@tanstack/react-query": "^5.73.3", - "@tanstack/react-query-devtools": "^5.73.3", + "@tanstack/react-query-devtools": "^5.74.3", "axios": "^1.8.4", "iconsax-react": "^0.0.8", "js-cookie": "^3.0.5", diff --git a/src/app/danak-services/page.tsx b/src/app/danak-services/page.tsx index e8d8d35..c4d972d 100644 --- a/src/app/danak-services/page.tsx +++ b/src/app/danak-services/page.tsx @@ -6,7 +6,7 @@ import React from 'react' const DanakServices: NextPage = () => { return (
-
+

خدمات داناک

@@ -16,7 +16,7 @@ const DanakServices: NextPage = () => {
-
+
@@ -36,7 +36,7 @@ const DanakServices: NextPage = () => {

-
+
service-1 {
-
+
-
+
service-1
@@ -80,7 +80,7 @@ const DanakServices: NextPage = () => {
-
+
@@ -100,7 +100,7 @@ const DanakServices: NextPage = () => {

-
+
service-1 {
-
+
service-1
diff --git a/src/app/home/DanakServices.tsx b/src/app/home/DanakServices.tsx deleted file mode 100644 index 0aca120..0000000 --- a/src/app/home/DanakServices.tsx +++ /dev/null @@ -1,74 +0,0 @@ -'use client' -import SectionHeader from '@/components/SectionHeader' -import ServiceItem from '@/components/ServiceItem' -import { clx } from '@/helpers/utils' -import { FC, useState } from 'react' -import { Swiper, SwiperSlide } from 'swiper/react' -import { useGetLanding } from './hooks/useHomeData' -const DanakServices: FC = () => { - - const { data } = useGetLanding() - const [categoryId, setCategoryId] = useState('') - - return ( -
- - -
- - -
setCategoryId('')} className={clx( - 'h-10 cursor-pointer rounded-full border-2 border-white bg-white/45 flex gap-2 justify-center items-center', - '' === categoryId && 'bg-white' - )}> -
- همه -
-
- - -
setCategoryId('1')} className={clx( - 'h-10 cursor-pointer rounded-full border-2 border-white bg-white/45 flex gap-2 justify-center items-center', - '1' === categoryId && 'bg-white' - )}> -
- -
-
- ابزارهای کاربردی -
-
- - - -
- -
- -
- -
-
- -
-
- -
-
-
- ) -} - -export default DanakServices \ No newline at end of file diff --git a/src/app/home/hooks/useHomeData.ts b/src/app/home/hooks/useHomeData.ts index 84b2072..8f63fe1 100644 --- a/src/app/home/hooks/useHomeData.ts +++ b/src/app/home/hooks/useHomeData.ts @@ -1,14 +1,12 @@ import { useQuery } from "@tanstack/react-query"; import * as api from "../service/HomeService"; -// برای client export const useGetLanding = () => useQuery({ queryKey: ["landing"], queryFn: api.getLanding, }); -// برای server prefetch export const landingQueryOptions = { queryKey: ["landing"], queryFn: api.getLanding, diff --git a/src/app/home/types/HomeTypes.ts b/src/app/home/types/HomeTypes.ts index 63ddfd9..5e4c2fe 100644 --- a/src/app/home/types/HomeTypes.ts +++ b/src/app/home/types/HomeTypes.ts @@ -1,5 +1,5 @@ import { Blog } from "@/app/blogs/types/BlogTypes"; - +import { ServiceCategoryType } from "@/app/products/types/ProductTypes"; export interface LandingResponse { statusCode: number; success: boolean; @@ -40,4 +40,5 @@ export interface DanakSuggestService { link: string; icon: string; deletedAt: string | null; + category: ServiceCategoryType; } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 1a9c260..0f44d53 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -6,6 +6,8 @@ import "@/assets/fonts/irancell/style.css"; import Header from "@/shared/Header"; import Footer from "@/shared/Footer"; import SideBar from "@/shared/SideBar"; +import { ReactQueryDevtools } from '@tanstack/react-query-devtools' + import QueryProvider from "@/config/QueryProvider"; const geistSans = Geist({ @@ -40,6 +42,8 @@ export default function RootLayout({ {children}
+ + diff --git a/src/app/products/DanakServices.tsx b/src/app/products/DanakServices.tsx new file mode 100644 index 0000000..5645b9f --- /dev/null +++ b/src/app/products/DanakServices.tsx @@ -0,0 +1,78 @@ +'use client' +import SectionHeader from '@/components/SectionHeader' +import ServiceItem from '@/components/ServiceItem' +import { clx } from '@/helpers/utils' +import { FC, useState } from 'react' +import { Swiper, SwiperSlide } from 'swiper/react' +import { useGetCategories, useGetServicesByCategory } from './hooks/useProductData' +import Image from 'next/image' +const DanakServices: FC = () => { + + const [categoryId, setCategoryId] = useState('') + const { data: categories } = useGetCategories() + const { data } = useGetServicesByCategory(categoryId) + + return ( +
+ + +
+ + +
setCategoryId('')} className={clx( + 'h-10 cursor-pointer rounded-full border-2 border-white bg-white/45 flex gap-2 justify-center items-center', + '' === categoryId && 'bg-white' + )}> +
+ همه +
+
+ + { + categories?.data?.categories?.map((item) => { + 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} +
+
+ {item.title} +
+
+ + ) + }) + } + +
+ +
+ {data?.data?.services?.map((item) => { + return ( +
+ +
+ ) + })} + +
+
+
+
+ ) +} + +export default DanakServices \ No newline at end of file diff --git a/src/app/products/Products.tsx b/src/app/products/Products.tsx new file mode 100644 index 0000000..3cab31c --- /dev/null +++ b/src/app/products/Products.tsx @@ -0,0 +1,173 @@ +'use client' +import { ArrowLeft } from 'iconsax-react' +import Image from 'next/image' +import { Swiper, SwiperSlide } from 'swiper/react' +import DanakSuggestedService from '../home/DanakSuggestedService' +import { FC } from 'react' +import DanakServices from './DanakServices' + +const Products: FC = () => { + + return ( +
+
+

+ محصولات +

+
+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است +
+
+ +
+ + +
+ product + +
+
+
+ منو دیجیتال رستوران +
+ +
+ دسته بندی +
+
+
+
+
+
+

+ دی منو +

+
+
+ داناک +
+
+
+
+
+
جزییات
+ +
+
+
+
+ + +
+ product + +
+
+
+ منو دیجیتال رستوران +
+ +
+ دسته بندی +
+
+
+
+
+
+

+ دی منو +

+
+
+ داناک +
+
+
+
+
+
جزییات
+ +
+
+
+
+ + +
+ product + +
+
+
+ منو دیجیتال رستوران +
+ +
+ دسته بندی +
+
+
+
+
+
+

+ دی منو +

+
+
+ داناک +
+
+
+
+
+
جزییات
+ +
+
+
+
+ + +
+ + + + +
+ ) +} + +export default Products \ No newline at end of file diff --git a/src/app/products/hooks/useProductData.ts b/src/app/products/hooks/useProductData.ts new file mode 100644 index 0000000..2d50d22 --- /dev/null +++ b/src/app/products/hooks/useProductData.ts @@ -0,0 +1,24 @@ +import { useQuery } from "@tanstack/react-query"; +import * as api from "../service/ProductService"; + +export const useGetServicesByCategory = (categoryId?: string) => + useQuery({ + queryKey: ["services", categoryId], + queryFn: () => api.getServicesByCategory(categoryId), + }); + +export const servicesQueryOptions = { + queryKey: ["services", ""], + queryFn: () => api.getServicesByCategory(undefined), +}; + +export const useGetCategories = () => + useQuery({ + queryKey: ["service-categories"], + queryFn: () => api.getCategoriesPublic(), + }); + +export const categoriesQueryOptions = { + queryKey: ["service-categories"], + queryFn: () => api.getCategoriesPublic(), +}; diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx index 2386db1..574a008 100644 --- a/src/app/products/page.tsx +++ b/src/app/products/page.tsx @@ -1,172 +1,18 @@ -'use client' -import { ArrowLeft } from 'iconsax-react' -import Image from 'next/image' -import { FC } from 'react' -import { Swiper, SwiperSlide } from 'swiper/react' -import DanakSuggestedService from '../home/DanakSuggestedService' -import DanakServices from '../home/DanakServices' - -const Products: FC = () => { +import { NextPage } from 'next' +import { HydrationBoundary } from '@tanstack/react-query' +import { dehydrate } from '@tanstack/react-query' +import { QueryClient } from '@tanstack/react-query' +import { categoriesQueryOptions, servicesQueryOptions } from './hooks/useProductData' +import Products from './Products' +const ProductsPage: NextPage = async () => { + const queryClient = new QueryClient() + await queryClient.prefetchQuery(servicesQueryOptions) + await queryClient.prefetchQuery(categoriesQueryOptions) return ( -
-
-

- محصولات -

-
- لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است -
-
- -
- - -
- product - -
-
-
- منو دیجیتال رستوران -
- -
- دسته بندی -
-
-
-
-
-
-

- دی منو -

-
-
- داناک -
-
-
-
-
-
جزییات
- -
-
-
-
- - -
- product - -
-
-
- منو دیجیتال رستوران -
- -
- دسته بندی -
-
-
-
-
-
-

- دی منو -

-
-
- داناک -
-
-
-
-
-
جزییات
- -
-
-
-
- - -
- product - -
-
-
- منو دیجیتال رستوران -
- -
- دسته بندی -
-
-
-
-
-
-

- دی منو -

-
-
- داناک -
-
-
-
-
-
جزییات
- -
-
-
-
- - -
- - - - -
+ + + ) } -export default Products \ No newline at end of file +export default ProductsPage \ No newline at end of file diff --git a/src/app/products/service/ProductService.ts b/src/app/products/service/ProductService.ts new file mode 100644 index 0000000..8cf19c0 --- /dev/null +++ b/src/app/products/service/ProductService.ts @@ -0,0 +1,20 @@ +import axios from "@/config/axios"; +import { CategoryResponse, ServiceResponse } from "../types/ProductTypes"; + +export const getServicesByCategory = async (categoryId?: string) => { + let query = ``; + if (categoryId) { + query = `?categoryId=${categoryId}`; + } + const { data } = await axios.get( + `/danak-services/public${query}` + ); + return data; +}; + +export const getCategoriesPublic = async () => { + const { data } = await axios.get( + `/danak-services/categories/public` + ); + return data; +}; diff --git a/src/app/products/types/ProductTypes.ts b/src/app/products/types/ProductTypes.ts new file mode 100644 index 0000000..7a9295b --- /dev/null +++ b/src/app/products/types/ProductTypes.ts @@ -0,0 +1,23 @@ +import { DanakSuggestService } from "@/app/home/types/HomeTypes"; +import { ApiResponse } from "@/shared/types/SharedTypes"; + +export type ServiceResponse = ApiResponse<{ + services: DanakSuggestService[]; + nextPage: boolean; +}>; + +export type CategoryResponse = ApiResponse<{ + categories: ServiceCategoryType[]; +}>; + +export type ServiceCategoryType = { + id: string; + createdAt: string; + updatedAt: string; + title: string; + icon: string; + isActive: boolean; + order: number; + parentId: string | null; + deletedAt: string | null; +}; diff --git a/src/components/ServiceItem.tsx b/src/components/ServiceItem.tsx index 897071e..13fdfa8 100644 --- a/src/components/ServiceItem.tsx +++ b/src/components/ServiceItem.tsx @@ -16,7 +16,7 @@ const ServiceItem: FC = (props) => { {props.item.name}
- دسته بندی + {props.item.category?.title}