data normalization is done and changing selectors accordingly

Author: AdityaKumawat97

src/Pages/collection/collection.component.jsx

@@ -5,10 +5,15 @@ import CollectionItem from '../../components/collection-item/collection-item.com
 import './collection.styles.scss'
 
 function CollectionPage({ match, collection }) {
-    console.log(collection)
+    const { title, items } = collection
     return (
-        <div className="collectionPage">
-            <h2>CategoryPage</h2>
+        <div className="collection-page">
+            <h2 className="title">{title}</h2>
+            <div className="items">
+                {
+                    items.map(item => <CollectionItem key={item.id} item={item} />)
+                }
+            </div>
         </div>
     )
 }

src/components/collection-item/collection-item.styles.scss

@@ -1,5 +1,5 @@
 .collection-item {
-  width: 22%;
+  width: 22vw;
   display: flex;
   flex-direction: column;
   height: 350px;

src/redux/directory/directory.reducer.js

@@ -3,38 +3,33 @@ const INITIAL_STATE = {
         title: 'hats',
         imageUrl: 'https://i.ibb.co/cvpntL1/hats.png',
         id: 1,
-        linkUrl: 'hats'
-        // linkUrl: 'shop/hats'
+        linkUrl: 'shop/hats'
     },
     {
         title: 'jackets',
         imageUrl: 'https://i.ibb.co/px2tCc3/jackets.png',
         id: 2,
-        linkUrl: 'jackets'
-        // linkUrl: 'shop/jackets'
+        linkUrl: 'shop/jackets'
     },
     {
         title: 'sneakers',
         imageUrl: 'https://i.ibb.co/0jqHpnp/sneakers.png',
         id: 3,
-        linkUrl: 'sneakers'
-        // linkUrl: 'shop/sneakers'
+        linkUrl: 'shop/sneakers'
     },
     {
         title: 'womens',
         imageUrl: 'https://i.ibb.co/GCCdy8t/womens.png',
         size: 'large',
         id: 4,
-        linkUrl: 'womens'
-        // linkUrl: 'shop/womens'
+        linkUrl: 'shop/womens'
     },
     {
         title: ' mens ',
         imageUrl: 'https://i.ibb.co/R70vBrQ/men.png',
         size: 'large',
         id: 5,
-        linkUrl: 'mens'
-        // linkUrl: 'shop/mens'
+        linkUrl: 'shop/mens'
     }]
 }
 

src/redux/shop/shop.data.js

@@ -1,5 +1,5 @@
-const SHOP_DATA = [
-  {
+const SHOP_DATA = {
+  hats: {
     id: 1,
     title: 'Hats',
     routeName: 'hats',
@@ -60,7 +60,7 @@ const SHOP_DATA = [
       }
     ]
   },
-  {
+  sneakers: {
     id: 2,
     title: 'Sneakers',
     routeName: 'sneakers',
@@ -115,7 +115,7 @@ const SHOP_DATA = [
       }
     ]
   },
-  {
+  jackets: {
     id: 3,
     title: 'Jackets',
     routeName: 'jackets',
@@ -152,7 +152,7 @@ const SHOP_DATA = [
       }
     ]
   },
-  {
+  womens: {
     id: 4,
     title: 'Womens',
     routeName: 'womens',
@@ -201,7 +201,7 @@ const SHOP_DATA = [
       }
     ]
   },
-  {
+  mens: {
     id: 5,
     title: 'Mens',
     routeName: 'mens',
@@ -244,6 +244,6 @@ const SHOP_DATA = [
       }
     ]
   }
-];
+};
 
 export default SHOP_DATA;

src/redux/shop/shop.selector.js

@@ -2,13 +2,6 @@ import { createSelector } from "reselect";
 
 const selectShop = state => state.shop
 
-const COLLECTION_ID_MAP = {
-    hats: 1,
-    sneakers: 2,
-    jackets: 3,
-    womens: 4,
-    mens: 5
-}
 export const selectCollections = createSelector(
     [selectShop],
     shop => shop.collections
@@ -17,5 +10,5 @@ export const selectCollections = createSelector(
 export const selectCollection = collectionUrlParam =>
     createSelector(
         [selectCollections],
-        collections => collections.find(collection => collection.id === COLLECTION_ID_MAP[collectionUrlParam])
+        collections => collections[collectionUrlParam]
     )