Added breadcrumb links to a category page (#11)

* Added breadcrumb links to a category page

* Addressed PR issues

* Fixing accessibility issues

* Fixed warning

Author: dusanradovanovic

src/App.scss

@@ -1,11 +1,11 @@
 
+@import './theme/common';
+
 .app {
   min-height: 100%;
   display: flex;
   flex-direction: column;
 
-  $maxScrollWidth: 34px;
-
   &__header {
     height: 60px;
     flex: 0 0 auto;

src/Category.scss

@@ -1,15 +1,33 @@
 
+@import './theme/common';
+
 .category {
   $block: &;
 
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   height: 100%;
+  padding-left: $maxScrollWidth;
+  padding-right: calc(#{$maxScrollWidth} - 100vw + 100%);
+
+  #{$block}__breadcrumbs {
+    margin-top: 20px;
+    font-size: 15px;
+    font-weight: bold;
+    color: hsl(0, 0%, 45%);
+
+    #{$block}__breadcrumbseparator {
+      color: hsl(0, 0, 70%);
+      margin-left: 10px;
+      margin-right: 10px;
+    }
+  }
 
   #{$block}__categoryname {
     flex: 0;
-    padding: 50px 0px 80px;
+    margin-top: 20px;
+    margin-bottom: 80px;
     font-size: 26px;
     font-weight: bold;
   }

src/Category.tsx

@@ -18,7 +18,7 @@ function useCategoryProducts(categoryId: string | undefined, pageNum: number) {
   }, [categoryId]);
 
   const [products] = useResolve(async () => {
-    // during initial loading of categories categoryId mught be undefined
+    // during initial loading of categories categoryId might be undefined
     if (categoryId) {
       const result = await loadCategoryProducts(categoryId, pageNum);
       setTotalPages(result.pagination.totalPages);
@@ -37,8 +37,9 @@ interface CategoryParams {
 export const Category: React.FC = () => {
   const params = useParams<CategoryParams>();
   const categorySlug = params.categorySlug;
-  const { categoryBySlug } = useCategories();
-  const category = categoryBySlug(categorySlug);
+  const { categoryPathBySlug } = useCategories();
+  const categoryPath = categoryPathBySlug(categorySlug);
+  const category = categoryPath?.[categoryPath?.length - 1];
   const parsedPageNum = parseInt(params.pageNum!);
   const pageNum = isNaN(parsedPageNum) ? 1 : parsedPageNum;
 
@@ -48,6 +49,16 @@ export const Category: React.FC = () => {
     <div>
       {category ? (
         <div className="category">
+          <div className="category__breadcrumbs">
+            {categoryPath?.map((category, index) => (
+              <React.Fragment key={category.id}>
+                {index > 0 && (
+                  <span className="category__breadcrumbseparator">{'>'}</span>
+                )}
+                <a className="category__breadcrumblink" href={createCategoryUrl(category.slug)}>{category.name}</a>
+              </React.Fragment>
+            ))}
+          </div>
 
           <h1 className="category__categoryname">{category?.name ?? ' '}</h1>
 

src/CompareOverlay.scss

@@ -1,7 +1,8 @@
 
+@import './theme/common';
+
 $overlayHeight: 100px;
 $animLength: 0.2s;
-$maxScrollWidth: 34px;
 
 .compareoverlay {
   $block: &;

src/Pagination.scss

@@ -7,11 +7,11 @@
     text-decoration: none;
 
     &--current {
-      color: hsl(0, 0, 70%);
+      color: hsl(0, 0, 45%);
     }
   }
 
   &__ellipsis {
-    color: hsl(0, 0, 70%);
+    color: hsl(0, 0, 45%);
   }
 }

src/Product.scss

@@ -1,17 +1,22 @@
 
+@import './theme/common';
+
 .product {
   $block: &;
 
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding-left: $maxScrollWidth;
+  padding-right: calc(#{$maxScrollWidth} - 100vw + 100%);
 
   #{$block}__maincontainer {
     width: 800px;
     display: flex;
     flex-direction: row;
     margin-top: 60px;
+    margin-bottom: 60px;
 
     $imgSize: 400px;
 

src/ProductThumbnail.tsx

@@ -18,12 +18,12 @@ export const ProductThumbnail: React.FC<ProductThumbnailProps> = (props) => {
   return (
     <div className="productthumbnail">
       <div className="productthumbnail__imgcontainer">
-        <Link className="productthumbnail__imglink" to={productUrl} aria-label="productthumbnail__imglink">
+        <Link className="productthumbnail__imglink" to={productUrl} aria-label={props.product.name}>
           <ProductMainImage product={props.product} size={160} />
         </Link>
       </div>
       <div className="productthumbnail__name">
-        <Link className="productthumbnail__namelink" to={productUrl} aria-label="productthumbnail__namelink">
+        <Link className="productthumbnail__namelink" to={productUrl}>
           {props.product.name}
         </Link>
       </div>

src/app-state.ts

@@ -3,32 +3,46 @@ import constate from 'constate';
 import { Category, loadCategoryTree, Product } from './service';
 import { config } from './config';
 
-function flatTree(tree: Category[]): Category[] {
-  return [
-    ...tree.map(c => ({ ...c, children: undefined })),
-    ...tree.flatMap(c => c.children ? flatTree(c.children) : []),
-  ];
+
+function getCategoryPaths(categories: Category[]): { [categoryId: string]: Category[] } {
+  const lastCat = categories[categories.length - 1];
+
+  let map: { [categoryId: string]: Category[] } = {
+    [lastCat.slug]: [...categories]
+  };
+
+  const childCats = lastCat.children ?? [];
+
+  for (const child of childCats) {
+    map = { ...map, ...getCategoryPaths([...categories, child]) };
+  }
+
+  return map;
+}
+
+function mergeMaps(tree: Category[]): { [categoryId: string]: Category[] } {
+  return tree.reduce((acc, c) => ({ ...acc, ...getCategoryPaths([c]) }), {});
 }
 
 function useCategoriesState() {
-  const [categoriesTree, setCategoriesTree] = useState<Category[]>();
-  const [categoriesFlat, setCategoriesFlat] = useState<Category[]>();
+  const [categoryPaths, setCategoryPaths] = useState<{ [categoryId: string]: Category[] }>();
 
-  const categoryBySlug = (slug: string) => {
-    return categoriesFlat?.filter(c => c.slug === slug)[0];
-  };
+  const [categoriesTree, setCategoriesTree] = useState<Category[]>();
 
   useEffect(() => {
     loadCategoryTree().then(result => {
       setCategoriesTree(result);
-      setCategoriesFlat(flatTree(result));
+      setCategoryPaths(mergeMaps(result));
     });
   }, []);
 
+  const categoryPathBySlug = (slug: string) => {
+    return categoryPaths?.[slug];
+  };
+
   return {
     categoriesTree,
-    categoriesFlat,
-    categoryBySlug,
+    categoryPathBySlug,
   };
 }
 

src/config.ts

@@ -1,6 +1,6 @@
 
 export const config = {
-  clientId: 'EdP3Gi1agyUF3yFS7Ngm8iyodLgbSR3wY4ceoJl0d2',
+  clientId: 'HvmUtpjmMSYmWs7zR367WYETN2aj51yXzxrxoWXu0x',
   stripeKey: 'pk_test_JwRX4cevuCysIEQrpwcbn3j8',
   categoryPageSize: 8,
   maxCompareProducts: 4,

src/theme/common.scss

@@ -1,38 +1,40 @@
 
- $mainColor: #000000;
- $firstComplimentColor: #197C93;
- $secondComplimentColor: #228197;
- $thirdComplimentColor: #167A92;
+$mainColor: #000000;
+$firstComplimentColor: #197C93;
+$secondComplimentColor: #228197;
+$thirdComplimentColor: #167A92;
 
- $mainTextColor: #333333;
- $firstComplimentTextColor: #2D383C;
- $secondComplimentTextColor: #666666;
- $thirdComplimentTextColor: #565656;
- $fourthComplimentTextColor: #1F2532;
- $fifthComplimentTextColor: #EEEEEE;
+$mainTextColor: #333333;
+$firstComplimentTextColor: #2D383C;
+$secondComplimentTextColor: #666666;
+$thirdComplimentTextColor: #565656;
+$fourthComplimentTextColor: #1F2532;
+$fifthComplimentTextColor: #EEEEEE;
 
- $mainNavigationColor: #FFFFFF;
+$mainNavigationColor: #FFFFFF;
 
- $buttonFocusColor: #979797;
- $buttonActiveColor: #4C5666;
+$buttonFocusColor: #979797;
+$buttonActiveColor: #4C5666;
 
- $mainBorderColor: #D0D0D0;
- $firstBorderColor: #D4D3D3;
- $secondBorderColor: #CCCCCC;
+$mainBorderColor: #D0D0D0;
+$firstBorderColor: #D4D3D3;
+$secondBorderColor: #CCCCCC;
 
- $mainBackgroundColor: #FFFFFF;
- $firstComplimentBackground: #F3F3F3;
- $secondComplimentBackground: #F7F7F7;
- $thirdComplimentBackground: #F2F6FA;
- $forthComplimentBackground: #DBDBDB;
- $fifthComplimentBackground: #C5C5C5;
+$mainBackgroundColor: #FFFFFF;
+$firstComplimentBackground: #F3F3F3;
+$secondComplimentBackground: #F7F7F7;
+$thirdComplimentBackground: #F2F6FA;
+$forthComplimentBackground: #DBDBDB;
+$fifthComplimentBackground: #C5C5C5;
 
- $accountTreeActive: #E1F0F7;
+$accountTreeActive: #E1F0F7;
 
- $firstAccentColor: #78B13F;
+$firstAccentColor: #78B13F;
 
- $mainErrorColor: #E00646;
+$mainErrorColor: #E00646;
 
- $mobileWidth: 768px;
- $tabletWidth: 1092px;
+$maxScrollWidth: 34px;
+
+$mobileWidth: 768px;
+$tabletWidth: 1092px;