From fc5cdada6abe4cad0720920371e9e2dd909e87c6 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 7 Sep 2021 09:19:39 +0700
Subject: [PATCH] enhance: logic code breadcrumb common

---
 pages/test.tsx                                | 20 ++++++
 .../BreadcrumbCommon.module.scss              |  3 +
 .../BreadcrumbCommon/BreadcrumbCommon.tsx     | 66 ++++++-------------
 .../BreadcrumbItem/BreadcrumbItem.tsx         |  3 +-
 4 files changed, 44 insertions(+), 48 deletions(-)

diff --git a/pages/test.tsx b/pages/test.tsx
index 5ac220819..90a46681f 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -5,6 +5,7 @@ import {
   ModalCommon,
   ProductCarousel,
 } from 'src/components/common'
+import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon'
 import { CollectionCarcousel } from 'src/components/modules/home'
 import image5 from '../public/assets/images/image5.png'
 import image6 from '../public/assets/images/image6.png'
@@ -96,6 +97,21 @@ const dataTest = [
     imageSrc: image6.src,
   },
 ]
+
+const crumbs = [
+  {
+    name: 'Product',
+    link: '/product',
+  },
+  {
+    name: 'Detail',
+    link: '/detail',
+  },
+  {
+    name: 'more',
+    link: '/more',
+  }
+]
 export default function Test() {
   const [visible, setVisible] = useState(false)
   const onClose = () => {
@@ -106,6 +122,10 @@ export default function Test() {
   }
   return (
     <>
+    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus tenetur repudiandae assumenda iste enim! Hic voluptas minus quos ipsa reprehenderit.
+
+    <BreadcrumbCommon crumbs={crumbs} showHomePage={true}/>
+    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus tenetur repudiandae assumenda iste enim! Hic voluptas minus quos ipsa reprehenderit.
       <ButtonCommon onClick={onOpen}>open</ButtonCommon>
       <ModalCommon visible={visible} onClose={onClose}>
         <div className="">
diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
index d72ea413b..8f6c05bf7 100644
--- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
+++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
@@ -2,4 +2,7 @@
 
 .breadcrumbCommon {
     color: var(--text-base);
+    .currentItem {
+        cursor: default;
+    }
 }
diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
index 98feb9628..6ad2e6817 100644
--- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
+++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
@@ -1,64 +1,36 @@
 import React from 'react'
+import { ROUTE } from 'src/utils/constanst.utils'
 import s from './BreadcrumbCommon.module.scss'
-
 import BreadcrumbItem from './components/BreadcrumbItem/BreadcrumbItem'
 import BreadcrumbSeparator from './components/BreadcrumbSeparator/BreadcrumbSeparator'
 
 interface BreadcrumbCommonProps {
-    crumbs: { link:string, name:string }[];
+    crumbs: { link: string, name: string }[];
     showHomePage?: boolean;
 }
 
-const BreadcrumbCommon = ({ crumbs, showHomePage=true } : BreadcrumbCommonProps) => {
+const BreadcrumbCommon = ({ crumbs, showHomePage = true }: BreadcrumbCommonProps) => {
     return (
         <section className={s.breadcrumbCommon}>
             {
-                showHomePage && crumbs[0].link==="/" && crumbs.map((crumb, i) => {
-                    if (i === 0) {
-                        return (
-                            <BreadcrumbItem key={crumb.name} text={crumb.name} href={crumb.link} />
-                        )
-                    }
-                    if (i === crumbs.length-1) {
-                        return (
-                            <BreadcrumbSeparator key={crumb.name}>
-                                <span>{crumb.name}</span>
-                            </BreadcrumbSeparator>
-                        )
-                    }
-                    return (
-                        <BreadcrumbSeparator key={crumb.name}>
-                            <BreadcrumbItem text={crumb.name} href={crumb.link} />
-                        </BreadcrumbSeparator>
-                    )
-                })
-            }
 
-            {
-                !showHomePage && crumbs.map((crumb, i) => {
-                    if (i === 0) {
-                        return
-                    }
-                    if (i === 1) {
-                        return (
-                            <BreadcrumbItem key={crumb.name} text={crumb.name} href={crumb.link} />
-                        )
-                    }
-                    if (i === crumbs.length-1) {
-                        return (
-                            <BreadcrumbSeparator key={crumb.name}>
-                                <span>{crumb.name}</span>
-                            </BreadcrumbSeparator>
-                        )
-                    }
-                    return (
-                        <BreadcrumbSeparator key={crumb.name}>
-                            <BreadcrumbItem text={crumb.name} href={crumb.link} />
-                        </BreadcrumbSeparator>
-                    )
-                })
+                showHomePage && <BreadcrumbItem key='Home' text='Home' href={ROUTE.HOME} />
             }
-        </section>
+            {
+                crumbs.length > 0 && <>
+
+                    {
+                        crumbs.slice(0, crumbs.length - 1).map((crumb) => (
+                            < BreadcrumbSeparator key={crumb.name}>
+                                <BreadcrumbItem text={crumb.name} href={crumb.link} />
+                            </BreadcrumbSeparator>
+                        ))}
+                    < BreadcrumbSeparator>
+                        <span className={s.currentItem}>{crumbs[crumbs.length - 1].name}</span>
+                    </BreadcrumbSeparator>
+                </>
+            }
+        </section >
     )
 }
 
diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
index f807de555..13f980ea9 100644
--- a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
+++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Link from 'next/link'
+import s from './BreadcrumbItem.module.scss'
 
 interface BreadcrumbItemProps {
     text: string;
@@ -9,7 +10,7 @@ interface BreadcrumbItemProps {
 const BreadcrumbItem = ({ text, href }: BreadcrumbItemProps) => {
     return (
         <Link href={href}>
-            <a>{text}</a>
+            <a className={s.breadcrumbItem}>{text}</a>
         </Link>
     )
 }