converting all to redux and moving out collection from shopping page

package.json

@@ -15,6 +15,7 @@
     "react-scripts": "4.0.0",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
+    "redux-persist": "^6.0.0",
     "reselect": "^4.0.0",
     "web-vitals": "^0.2.4"
   },

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 { selectShopCollection } from '../../redux/shop/shop.selector'
+
+import CollectionPreview from '../../components/preview-collection/preview-collection-component';
+
+import './collections-overview.styles.scss';
+
+const collectionOverview = ({collections}) =>(
+    <div className='collection-overview'>
+         {collections.map(({id, ...othersProps})=>(
+                <CollectionPreview key={id} {...othersProps} />
+          ))}
+    </div>
+
+)
+const mapStateToProps = createStructuredSelector ({
+    collections: selectShopCollection
+}
+)
+
+export default connect(mapStateToProps)(collectionOverview);

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,66 +1,23 @@
 import React from 'react';
 import MenuItem from '../menu-item/menu-items.component';
+import { connect } from 'react-redux';
+import { createStructuredSelector } from 'reselect';
+import { selectDirectorySections } from '../../redux/directory/directory.selector';
 import './directory.styles.scss';
 
-class Directory extends React.Component {
-    constructor(){
-        super();
-        this.state = {
-            sections : [
-                  {
-                    title: 'hats',
-                    // imageUrl: 'https://i.ibb.co/cvpntL1/hats.png',
-                    imageUrl: 'images/hats.png', // local file in public/images/
-                    id: 1,
-                    linkUrl: 'shop/hats'
-
-                },
-                {
-                    title: 'jackets',
-                    // imageUrl: 'https://i.ibb.co/px2tCc3/jackets.png',
-                    imageUrl: 'images/jackets.png', // local file in public/images/
-                    id: 2,
-                    linkUrl: 'shop/jackets'
-                },
-                {
-                    title: 'sneakers',
-                    // imageUrl: 'https://i.ibb.co/0jqHpnp/sneakers.png',
-                    imageUrl: 'images/sneakers.png', // local file in public/images/
-                    id: 3,
-                    linkUrl: 'shop/sneakers'
-                },
-                {
-                    title: 'womens',
-                    // imageUrl: 'https://i.ibb.co/GCCdy8t/womens.png',
-                    imageUrl: 'images/womens.png', // local file in public/images/
-                    size: 'large',
-                    id: 4,
-                    linkUrl: 'shop/womens'
-                },
-                {
-                    title: 'mens',
-                    // imageUrl: 'https://i.ibb.co/R70vBrQ/men.png',
-                    imageUrl: 'images/men.png', // local file in public/images/
-                    size: 'large',
-                    id: 5,
-                    linkUrl: 'shop/mens'
-                }
-              ]
+const Directory = ( { sections } ) => (
+    <div className='directory-menu'>
+        {
+            sections.map(({id, ...otherSectionProps})=>(
+                <MenuItem key={id} {...otherSectionProps} />
+            ))
         }
-    }
-    render(){
-        return(
-            <div className='directory-menu'>
-                {
-                    this.state.sections.map(({id, ...otherSectionProps})=>(
-                        <MenuItem key={id} {...otherSectionProps} />
-                    ))
-                }
 
-            </div>
-        )
-    }
+    </div>
+)
 
-}
+const mapStateToProps = createStructuredSelector ({
+    sections: selectDirectorySections
+})
 
-export default Directory;
+export default connect(mapStateToProps)(Directory);

src/index.js

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

src/pages/shop/shop.component.jsx

@@ -1,24 +1,13 @@
 import React from 'react';
-import ShopData from './shop.data';
-import CollectionPreview from '../../components/preview-collection/preview-collection-component';
 
-class ShopPage extends React.Component {
-    constructor(props){
-        super(props);
-        this.state = {
-            collections:ShopData
-        }
-    }
-    render(){
-        const {collections} = this.state;
-        return(
-            <div className="shopPage">
-            {collections.map(({id, ...othersProps})=>(
-                <CollectionPreview key={id} {...othersProps} />
-            ))}
-            </div>
-
-        )
-    }
-}
+import CollectionOverview from '../../components/collections-overview/collections-overview.component'
+
+
+const ShopPage = ({collections}) => (
+    <div className="shopPage">
+        <CollectionOverview />
+    </div>
+)
+
+
 export default ShopPage;

src/redux/directory/directory.reducer.js

@@ -0,0 +1,50 @@
+const INITIAL_STATE = {
+    sections : [
+          {
+            title: 'hats',
+            // imageUrl: 'https://i.ibb.co/cvpntL1/hats.png',
+            imageUrl: 'images/hats.png', // local file in public/images/
+            id: 1,
+            linkUrl: 'shop/hats'
+
+        },
+        {
+            title: 'jackets',
+            // imageUrl: 'https://i.ibb.co/px2tCc3/jackets.png',
+            imageUrl: 'images/jackets.png', // local file in public/images/
+            id: 2,
+            linkUrl: 'shop/jackets'
+        },
+        {
+            title: 'sneakers',
+            // imageUrl: 'https://i.ibb.co/0jqHpnp/sneakers.png',
+            imageUrl: 'images/sneakers.png', // local file in public/images/
+            id: 3,
+            linkUrl: 'shop/sneakers'
+        },
+        {
+            title: 'womens',
+            // imageUrl: 'https://i.ibb.co/GCCdy8t/womens.png',
+            imageUrl: 'images/womens.png', // local file in public/images/
+            size: 'large',
+            id: 4,
+            linkUrl: 'shop/womens'
+        },
+        {
+            title: 'mens',
+            // imageUrl: 'https://i.ibb.co/R70vBrQ/men.png',
+            imageUrl: 'images/men.png', // local file in public/images/
+            size: 'large',
+            id: 5,
+            linkUrl: 'shop/mens'
+        }
+      ]
+};
+
+export const directoryReducer = (state = INITIAL_STATE, action) => {
+    switch(action.type){
+        default:
+            return state
+    }
+
+}

src/redux/directory/directory.selector.js

@@ -0,0 +1,8 @@
+import { createSelector } from 'reselect';
+
+const selectDirectory = state => state.directory;
+
+export const selectDirectorySections = createSelector (
+    [selectDirectory],
+    directory => directory.sections
+)

src/redux/root-reducer.js

@@ -1,9 +1,24 @@
 import { combineReducers } from 'redux';
+import { persistReducer } from 'redux-persist'
 
 import { userReducer } from './user/user.reducer';
 import { cartReducer } from './cart/cart.reducer';
+import { directoryReducer } from './directory/directory.reducer';
+import { shopReducer } from './shop/shop.reducer';
+import storage from 'redux-persist/lib/storage'
 
-export default combineReducers({
+const persistConfig = {
+    key: 'root',
+    storage,
+    whitelist: ['cart']
+}
+
+const rootReducer = combineReducers({
     user: userReducer,
-    cart: cartReducer
-});
+    cart: cartReducer,
+    directory: directoryReducer,
+    shop: shopReducer
+});
+
+
+export default persistReducer(persistConfig, rootReducer);

src/redux/shop/shop.reducer.js

@@ -0,0 +1,12 @@
+import ShopData  from './shop.data'
+
+const INITIAL_STATE = {
+    collections: ShopData
+}
+
+export const shopReducer = (state=INITIAL_STATE, action) => {
+    switch(action.type){
+        default:
+            return state;
+    }
+};

src/redux/shop/shop.selector.js

@@ -0,0 +1,8 @@
+import { createSelector } from 'reselect';
+
+const selectShop = state => state.shop;
+
+export const selectShopCollection = createSelector(
+    [selectShop],
+    shop=>shop.collections
+)

src/redux/store.js

@@ -1,10 +1,13 @@
 import {createStore, applyMiddleware} from 'redux';
 import logger from 'redux-logger';
+import  { persistStore } from 'redux-persist'
 
 import rootReducer from './root-reducer';
 
 const middlewares = [logger];
 
-const store = createStore(rootReducer, applyMiddleware(...middlewares));
+export const store = createStore(rootReducer, applyMiddleware(...middlewares));
+
+export const persistor = persistStore(store);
 
 export default store;

yarn.lock

@@ -10549,6 +10549,11 @@ redux-logger@^3.0.6:
   dependencies:
     deep-diff "^0.3.5"
 
+redux-persist@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"
+  integrity sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==
+
 redux@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"