added nested routing for individual categories, added custom collection selector in shop selectors

Author: AdityaKumawat97

src/App.js

@@ -47,9 +47,9 @@ class App extends Component {
       <Header />
       <Switch>
         <Route exact path='/' component={Homepage} />
-        <Route exact path='/shop' component={ShopPage} />
-        <Route exact path='/checkout' component={CheckoutPage} />
-        <Route exact path='/signin' render={() => this.props.currentUser ? (<Redirect to='/' />) : <SignInAndSignUpPage />} />
+        <Route path='/shop' component={ShopPage} />
+        <Route path='/checkout' component={CheckoutPage} />
+        <Route path='/signin' render={() => this.props.currentUser ? (<Redirect to='/' />) : <SignInAndSignUpPage />} />
       </Switch>
     </div>;
   }

src/Pages/collection/collection.component.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { selectCollection } from "../../redux/shop/shop.selector";
+import CollectionItem from '../../components/collection-item/collection-item.component'
+import './collection.styles.scss'
+
+function CollectionPage({ match, collection }) {
+    console.log(collection)
+    return (
+        <div className="collectionPage">
+            <h2>CategoryPage</h2>
+        </div>
+    )
+}
+
+const mapStateToProps = (state, ownProps) => ({
+    collection: selectCollection(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,24 +1,18 @@
-import React, { Component } from 'react'
-import { connect } from 'react-redux'
-import { selectCollections } from "../../redux/shop/shop.selector";
-import { createStructuredSelector } from "reselect";
-import CollectionPreview from '../../components/collection-preview/Collection-preview.component'
+import React from 'react'
+import { Route } from "react-router-dom";
+import CollectionPage from '../collection/collection.component'
 
+import CollectionOverview from '../../components/collections-overview/collections-overview.component'
 
 
-const Shop = ({ collections }) => {
-    return (<div className="shop-page">
-        {
-            collections.map(({ id, ...otherCollectionProps }) => (
-                <CollectionPreview key={id} {...otherCollectionProps} />
-            ))
-        }
-    </div>)
+const Shop = ({ match }) => {
+    console.log(match)
+    return (
+        <div className="shop-page">
+            <Route exact path={`${match.path}`} component={CollectionOverview} />
+            <Route path={`${match.path}/:collectionId`} component={CollectionPage} />
+        </div>)
 }
 
-const mapStatetoProps = createStructuredSelector({
-    collections: selectCollections
-})
 
-
-export default connect(mapStatetoProps)(Shop)
+export default Shop

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

@@ -9,7 +9,7 @@ export default function CollectionPreview({ title, items }) {
                 {
                     items
                         .filter((item, idx) => idx < 4)
-                        .map( item => (
+                        .map(item => (
                             <CollectionItem key={item.id} item={item} />
                         ))
                 }

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

@@ -0,0 +1,24 @@
+import React from 'react'
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import './collections-overview.styles.scss'
+import { selectCollections } from "../../redux/shop/shop.selector";
+import CollectionPreview from "../collection-preview/Collection-preview.component";
+
+function CollectionsOverview({ collections }) {
+    return (
+        <div className="collection-overview">
+            {
+                collections.map(({ id, ...otherCollectionProps }) => (
+                    <CollectionPreview key={id} {...otherCollectionProps} />
+                ))
+            }
+        </div>
+    )
+}
+
+
+const mapStatetoProps = createStructuredSelector({
+    collections: selectCollections
+})
+export default connect(mapStatetoProps)(CollectionsOverview)

src/components/collections-overview/collections-overview.styles.scss

@@ -0,0 +1,4 @@
+.collections-overview {
+    display: flex;
+    flex-direction: column;
+}

src/components/directory/Directory.component.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import MenuItem from '../menu-item/Menu-item.component'
 import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'

src/redux/shop/shop.selector.js

@@ -2,8 +2,20 @@ 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
-)
+)
+
+export const selectCollection = collectionUrlParam =>
+    createSelector(
+        [selectCollections],
+        collections => collections.find(collection => collection.id === COLLECTION_ID_MAP[collectionUrlParam])
+    )