Merged in cr/prod-detail (pull request #449)

Cr/prod detail

1 files changed, 117 insertions, 19 deletions

diff --git a/src-migrate/modules/product-detail/components/Breadcrumb.tsx b/src-migrate/modules/product-detail/components/Breadcrumb.tsx
index f41859a9..0e263fe9 100644
--- a/src-migrate/modules/product-detail/components/Breadcrumb.tsx
+++ b/src-migrate/modules/product-detail/components/Breadcrumb.tsx
@@ -1,31 +1,129 @@
-import React, { Fragment } from 'react'
-import { useQuery } from 'react-query'
-import { getProductCategoryBreadcrumb } from '~/services/product'
-import Link from 'next/link'
-import { createSlug } from '~/libs/slug'
+import React, { Fragment } from 'react';
+import { useQuery } from 'react-query';
+import Link from 'next/link';
+import { getProductCategoryBreadcrumb } from '~/services/product';
+import { createSlug } from '~/libs/slug';
+import useDevice from '@/core/hooks/useDevice';
 
-type Props = {
-  id: number,
-  name: string
-}
+type Props = { id: number; name: string };
 
 const Breadcrumb = ({ id, name }: Props) => {
-  const query = useQuery({
-    queryKey: ['product-category-breadcrumb'],
+  const { isDesktop, isMobile } = useDevice();
+
+  const { data: breadcrumbs = [] } = useQuery({
+    queryKey: ['product-category-breadcrumb', id],
     queryFn: () => getProductCategoryBreadcrumb(id),
-    refetchOnWindowFocus: false
-  })
+    refetchOnWindowFocus: false,
+  });
+
+  const total = breadcrumbs.length;
+  const lastCat = total ? breadcrumbs[total - 1] : null;
+  const hasHidden = total > 1;
+  const hiddenText = hasHidden
+    ? breadcrumbs
+        .slice(0, total - 1)
+        .map((c) => c.name)
+        .join(' / ')
+    : '';
+
+  if (isMobile) {
+    const crumbsMobile: React.ReactNode[] = [];
+
+    crumbsMobile.push(
+      <Link href='/' className='text-danger-500 shrink-0' key='home'>
+        Home
+      </Link>
+    );
+
+    if (hasHidden) {
+      crumbsMobile.push(
+        <span
+          className='text-danger-500 shrink-0'
+          title={hiddenText}
+          aria-label='Kategori tersembunyi'
+          key='hidden'
+        >
+          ..
+        </span>
+      );
+    }
+
+    // Kategori terakhir
+    if (lastCat) {
+      crumbsMobile.push(
+        <Link
+          key={`cat-${lastCat.id}`}
+          href={createSlug('/shop/category/', lastCat.name, String(lastCat.id))}
+          className='text-danger-500 shrink-0'
+        >
+          {lastCat.name}
+        </Link>
+      );
+    }
+
+    // Nama produk (dipotong kalau gk muat)
+    crumbsMobile.push(
+      <span className='truncate min-w-0 flex-1' title={name} key='product'>
+        {name}
+      </span>
+    );
+
+    return (
+      <div className='flex items-center whitespace-nowrap overflow-hidden text-caption-1 leading-7'>
+        {crumbsMobile.map((node, i) => (
+          <Fragment key={i}>
+            {node}
+            {i < crumbsMobile.length - 1 && (
+              <span className='mx-2 shrink-0'>/</span>
+            )}
+          </Fragment>
+        ))}
+      </div>
+    );
+  }
 
-  const breadcrumbs = query.data || []
+  // ===== DESKTOP =====
+  if (isDesktop) {
+    return (
+      <div className='line-clamp-2 md:line-clamp-1 leading-7 text-caption-1'>
+        <Link href='/' className='text-danger-500'>
+          Home
+        </Link>
+        <span className='mx-2'>/</span>
+        {breadcrumbs.map((category, index) => (
+          <Fragment key={index}>
+            <Link
+              href={createSlug(
+                '/shop/category/',
+                category.name,
+                category.id.toString()
+              )}
+              className='text-danger-500'
+            >
+              {category.name}
+            </Link>
+            <span className='mx-2'>/</span>
+          </Fragment>
+        ))}
+        <span>{name}</span>
+      </div>
+    );
+  }
 
   return (
     <div className='line-clamp-2 md:line-clamp-1 leading-7 text-caption-1'>
-      <Link href='/' className='text-danger-500'>Home</Link>
+      <Link href='/' className='text-danger-500'>
+        Home
+      </Link>
       <span className='mx-2'>/</span>
       {breadcrumbs.map((category, index) => (
         <Fragment key={index}>
           <Link
-            href={createSlug('/shop/category/', category.name, category.id.toString())}
+            href={createSlug(
+              '/shop/category/',
+              category.name,
+              category.id.toString()
+            )}
             className='text-danger-500'
           >
             {category.name}
@@ -35,7 +133,7 @@ const Breadcrumb = ({ id, name }: Props) => {
       ))}
       <span>{name}</span>
     </div>
-  )
-}
+  );
+};
 
-export default Breadcrumb
\ No newline at end of file
+export default Breadcrumb;