directory and shop data into reducer, and creating its own reselector

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "firebase": "^8.0.2",
+    "lodash.memoize": "^4.1.2",
     "node-sass": "4.14.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

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

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

src/components/collections-overview/collections-overview.component.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {connect} from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 
-import { selectShopCollection } from '../../redux/shop/shop.selector'
+import { selectCollectionForPreview } from '../../redux/shop/shop.selector'
 
 import CollectionPreview from '../../components/preview-collection/preview-collection-component';
 
@@ -17,7 +17,7 @@ const collectionOverview = ({collections}) =>(
 
 )
 const mapStateToProps = createStructuredSelector ({
-    collections: selectShopCollection
+    collections: selectCollectionForPreview
 }
 )
 

src/components/preview-collection/preview-collection-component.jsx

@@ -4,7 +4,8 @@ import './collection-preview.styles.scss';
 import CollectionItem from '../collection-items/collection-items.component';
 
 
-const CollectionPreview = ({title, items}) => (
+const CollectionPreview = ({title, items}) => {
+    return (
     <div className='collection-preview'>
         <h1 className="title">{title.toUpperCase()}</h1>
         <div className='preview'>
@@ -15,6 +16,7 @@ const CollectionPreview = ({title, items}) => (
             ))}
         </div>
     </div>
-)
+    )
+}
 
 export default CollectionPreview;

src/pages/collection/collection.component.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {connect} from 'react-redux';
+
+// eslint-disable-next-line 
+import CollectionItem from '../../components/collection-items/collection-items.component';
+
+import { selectShopCollection } from '../../redux/shop/shop.selector';
+
+import './collection.styles.scss';
+
+const CollectionPage = ({ collection }) => {
+    const {title, items} = collection;
+    return (
+        <div className='collection-page'>
+            <h2 className='title'>{ title }</h2>
+            <div className='items'>
+                {
+                    items.map(item=>(
+                        <CollectionItem key={item.id} item={item} />
+                    ))
+                }
+            </div>
+        </div>
+    )
+};
+
+const mapStateToProps = (state, ownProps) => ({
+    collection: selectShopCollection(ownProps.match.params.collectionId)(state)
+})
+
+export default connect(mapStateToProps)(CollectionPage);

src/pages/collection/collection.styles.scss

@@ -0,0 +1,19 @@
+.collection-page {
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    font-size: 38px;
+    margin: 0 auto 30px;
+  }
+
+  .items {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-gap: 10px;
+
+    & .collection-item {
+      margin-bottom: 30px;
+    }
+  }
+}

src/pages/shop/shop.component.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
+import { Route } from 'react-router-dom';
 
-import CollectionOverview from '../../components/collections-overview/collections-overview.component'
+import CollectionOverview from '../../components/collections-overview/collections-overview.component';
+import CollectionPage from '../collection/collection.component';
 
-
-const ShopPage = ({collections}) => (
+const ShopPage = ({ match }) => (
     <div className="shopPage">
-        <CollectionOverview />
+        <Route exact path={`${match.path}`} component={CollectionOverview} />
+        <Route path={`${match.path}/:collectionId`} component={CollectionPage} />
+
     </div>
 )
 

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

@@ -1,8 +1,26 @@
 import { createSelector } from 'reselect';
+import memoize from 'lodash.memoize';
 
 const selectShop = state => state.shop;
 
-export const selectShopCollection = createSelector(
+export const selectShopCollections = createSelector(
     [selectShop],
     shop=>shop.collections
+)
+
+export const selectShopCollectionWMemoize = createSelector(
+    [selectShop],
+    shop => shop.collections
+  );
+
+export const selectShopCollection =  memoize((collectionUrlParam) =>
+    createSelector(
+        [selectShopCollections],
+        collections=> collections[collectionUrlParam]
+    )
+)
+
+export const selectCollectionForPreview = createSelector(
+    [selectShopCollectionWMemoize],
+    collections=>Object.keys(collections).map(key=>collections[key])
 )

yarn.lock

@@ -3620,15 +3620,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001020, caniuse-lite@^1.0.30001035:
-  version "1.0.30001035"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001035.tgz#2bb53b8aa4716b2ed08e088d4dc816a5fe089a1e"
-  integrity sha512-C1ZxgkuA4/bUEdMbU5WrGY4+UhMFFiXrgNAfxiMIqWgFTWfv/xsZCS2xEHT2LMq7xAZfuAnu6mcqyDl0ZR6wLQ==
-
-caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001154:
-  version "1.0.30001154"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001154.tgz#f3bbc245ce55e4c1cd20fa731b097880181a7f17"
-  integrity sha512-y9DvdSti8NnYB9Be92ddMZQrcOe04kcQtcxtBx4NkB04+qZ+JUWotnXBJTmxlKudhxNTQ3RRknMwNU2YQl/Org==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001020, caniuse-lite@^1.0.30001035, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001154:
+  version "1.0.30001207"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001207.tgz"
+  integrity sha512-UPQZdmAsyp2qfCTiMU/zqGSWOYaY9F9LL61V8f+8MrubsaDGpaHD9HRV/EWZGULZn0Hxu48SKzI5DgFwTvHuYw==
 
 capture-exit@^2.0.0:
   version "2.0.0"