slug website

src/app/products/DetailService.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { FC, Fragment } from 'react'
-import { useGetDetailService } from './hooks/useProductData'
+import { useGetProductBySlug } from './hooks/useProductData'
 import ServiceHeader from './components/ServiceHeader'
 import moment from 'moment-jalaali'
 import ServiceImages from './components/ServiceImages'
@@ -18,7 +18,7 @@ const DetailService: FC<{ id: string }> = ({ id }) => {
     // const { t } = useTranslation('global')
     // const getAdsLeft = useGetAds(AdsDisplayLocation.SINGLE_SERVICE_PAGE)
 
-    const getDetailService = useGetDetailService(id)
+    const getDetailService = useGetProductBySlug(id)
 
     // Show the skeleton loading component while data is loading
     if (getDetailService.isLoading) {

src/app/products/ProductsPage.tsx

@@ -34,7 +34,7 @@ const Products: FC = () => {
                             return (
                                 <SwiperSlide key={item.id} className='xl:max-w-[45%] max-w-[90%]'>
                                     <div className='rounded-4xl overflow-hidden relative'>
-                                        <Link href={`/products/${item.id}`}>
+                                        <Link href={`/products/${item.slug}`}>
                                             <Image
                                                 src={item.coverUrl}
                                                 alt='product'
@@ -70,7 +70,7 @@ const Products: FC = () => {
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <Link href={`/products/${item.id}`}>
+                                                <Link href={`/products/${item.slug}`}>
                                                     <div className='flex gap-1.5 text-sm items-center'>
                                                         <div>جزییات</div>
                                                         <ArrowLeft

src/app/products/[id]/page.tsx

@@ -1,6 +1,6 @@
 import { Suspense } from 'react'
 import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'
-import { detailServiceQueryOptions } from '../hooks/useProductData'
+import { getProductBySlugQueryOptions } from '../hooks/useProductData'
 import { Metadata, NextPage } from 'next'
 import DetailService from '../DetailService'
 import Loading from './loading'
@@ -19,8 +19,9 @@ export async function generateMetadata(
     const { id } = await params
     const queryClient = new QueryClient()
 
-    await queryClient.prefetchQuery(detailServiceQueryOptions(id))
-    const service = queryClient.getQueryData(detailServiceQueryOptions(id).queryKey) as ServiceDetailResponse
+    await queryClient.prefetchQuery(getProductBySlugQueryOptions(id))
+    const service = queryClient.getQueryData(getProductBySlugQueryOptions(id).queryKey) as ServiceDetailResponse
+    console.log('service', service);
 
     return {
         title: 'محصولات داناک' + ' | ' + service.data.danakService.name,
@@ -43,7 +44,7 @@ async function SingleServicePage({ id }: { id: string }) {
     const queryClient = new QueryClient()
 
     await Promise.all([
-        queryClient.prefetchQuery(detailServiceQueryOptions(id)),
+        queryClient.prefetchQuery(getProductBySlugQueryOptions(id)),
     ])
 
     return (

src/app/products/hooks/useProductData.ts

@@ -51,7 +51,18 @@ export const useGetDetailService = (serviceId: string) =>
     queryFn: () => api.getDetailService(serviceId),
   });
 
+export const useGetProductBySlug = (slug: string) =>
+  useQuery({
+    queryKey: ["product-detail", slug],
+    queryFn: () => api.getProductBySlug(slug),
+  });
+
 export const detailServiceQueryOptions = (serviceId: string) => ({
   queryKey: ["service-detail", serviceId],
   queryFn: () => api.getDetailService(serviceId),
 });
+
+export const getProductBySlugQueryOptions = (slug: string) => ({
+  queryKey: ["product-detail", slug],
+  queryFn: () => api.getProductBySlug(slug),
+});

src/app/products/service/ProductService.ts

@@ -45,3 +45,10 @@ export const getSliderProducts = async () => {
   );
   return data;
 };
+
+export const getProductBySlug = async (slug: string) => {
+  const { data } = await axios.get<ServiceDetailResponse>(
+    `/danak-services/slug/${slug}/public`
+  );
+  return data;
+};

src/app/products/types/ProductTypes.ts

@@ -59,6 +59,7 @@ export interface DanakService {
   link: string;
   icon: string;
   coverUrl: string;
+  slug: string;
   category: {
     id: string;
     title: string;