persist store added. directory and shop state goes to redux. Changed …

…routing in shop page

package.json

@@ -15,6 +15,7 @@
     "react-scripts": "3.4.1",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
+    "redux-persist": "^6.0.0",
     "reselect": "^4.0.0",
     "typescript": "~3.7.2"
   },

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/components/collections-overview/collection-overview.styles.scss

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

src/components/collections-overview/collection-overview.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+
+import './collection-overview.styles.scss'
+
+import CollectionPreview from '../collection-preview/collection-preview'
+import { selectShopCollectionsForPreview } from '../../redux/shop-selector'
+
+type CollectionOverviewProps = {}
+
+const CollectionOverview = (props: CollectionOverviewProps) => {
+
+    const collections = useSelector(selectShopCollectionsForPreview)
+
+    return (
+        <div className='collection-overview'>
+            {
+                collections.map((collection) => (
+                    <CollectionPreview
+                        key={collection.id}
+                        title={collection.title}
+                        items={collection.items}
+                    />
+                ))
+            }
+        </div>
+    )
+}
+
+export default CollectionOverview

src/components/directory/directory.tsx

@@ -1,50 +1,19 @@
-import React, {useState} from 'react';
+import React from 'react';
 import './directory.styles.scss'
+import { useSelector } from 'react-redux'
+
+import { selectDirectorySections } from '../../redux/directory-selector'
+
 import MenuItem from "../menu-item/menu-item";
 
 const Directory = () => {
 
-    const [sections, setSections] = useState(
-        [
-            {
-                title: 'hats',
-                imageUrl: 'https://i.ibb.co/cvpntL1/hats.png',
-                id: 1,
-                linkUrl: 'shop/hats'
-            },
-            {
-                title: 'jackets',
-                imageUrl: 'https://i.ibb.co/px2tCc3/jackets.png',
-                id: 2,
-                linkUrl: 'shop/jackets'
-            },
-            {
-                title: 'sneakers',
-                imageUrl: 'https://i.ibb.co/0jqHpnp/sneakers.png',
-                id: 3,
-                linkUrl: 'shop/sneakers'
-            },
-            {
-                title: 'womens',
-                imageUrl: 'https://i.ibb.co/GCCdy8t/womens.png',
-                size: 'large',
-                id: 4,
-                linkUrl: 'shop/womens'
-            },
-            {
-                title: 'mens',
-                imageUrl: 'https://i.ibb.co/R70vBrQ/men.png',
-                size: 'large',
-                id: 5,
-                linkUrl: 'shop/mens'
-            }
-        ]
-    )
+    const directorySections = useSelector(selectDirectorySections)
 
     return (
         <div>
             <div className='directory-menu'>{
-                sections.map(section =>
+                directorySections.map(section =>
                     <MenuItem key={section.id} {...section} />
                 )
             }</div>

src/index.tsx

@@ -1,16 +1,19 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import {BrowserRouter} from 'react-router-dom'
-import {Provider} from 'react-redux'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { BrowserRouter } from 'react-router-dom'
+import { Provider } from 'react-redux'
+import { PersistGate } from 'redux-persist/integration/react'
 
-import './index.css';
-import App from './App';
-import store from './redux/store'
+import './index.css'
+import App from './App'
+import { store, persistor } from './redux/store'
 
 ReactDOM.render(
     <Provider store={store}>
         <BrowserRouter>
-            <App />
+            <PersistGate persistor={persistor}>
+                <App />
+            </PersistGate>
         </BrowserRouter>
     </Provider>
-    , document.getElementById('root'));
+    , document.getElementById('root'))

src/pages/collection-page/collection-page.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/collection-page/collection-page.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { RouteComponentProps } from 'react-router-dom'
+import { useSelector } from 'react-redux'
+import { selectCollection } from '../../redux/shop-selector'
+
+import './collection-page.styles.scss'
+
+import CollectionItem from '../../components/collection-item/collection-item'
+
+type MatchParams = {
+    collectionId: string
+}
+
+const CollectionPage = ({ match }: RouteComponentProps<MatchParams>) => {
+
+    const collection = useSelector(selectCollection(match.params.collectionId))
+
+    return (
+        <div className='collection-page'>
+            <h2 className='title'>{collection?.title}</h2>
+            <div className='items'>
+                {
+                    collection?.items.map(item => (<CollectionItem key={item.id} product={item} />))
+                }
+            </div>
+        </div>
+    )
+}
+
+export default CollectionPage