From e2e9257329ea069841e8109646a07b5ab6fafc4d Mon Sep 17 00:00:00 2001 From: samilabud Date: Fri, 2 Apr 2021 19:18:54 -0400 Subject: [PATCH] converting all to redux and moving out collection from shopping page --- package.json | 1 + .../collections-overview.component.jsx | 24 ++++++ .../collections-overview.styles.scss | 4 + .../directory/directory.component.jsx | 73 ++++--------------- src/index.js | 7 +- src/pages/shop/shop.component.jsx | 31 +++----- src/redux/directory/directory.reducer.js | 50 +++++++++++++ src/redux/directory/directory.selector.js | 8 ++ src/redux/root-reducer.js | 21 +++++- src/{pages => redux}/shop/shop.data.js | 0 src/redux/shop/shop.reducer.js | 12 +++ src/redux/shop/shop.selector.js | 8 ++ src/redux/store.js | 5 +- yarn.lock | 5 ++ 14 files changed, 164 insertions(+), 85 deletions(-) create mode 100644 src/components/collections-overview/collections-overview.component.jsx create mode 100644 src/components/collections-overview/collections-overview.styles.scss create mode 100644 src/redux/directory/directory.reducer.js create mode 100644 src/redux/directory/directory.selector.js rename src/{pages => redux}/shop/shop.data.js (100%) create mode 100644 src/redux/shop/shop.reducer.js create mode 100644 src/redux/shop/shop.selector.js diff --git a/package.json b/package.json index 0b87cb7..616587b 100644 --- a/package.json +++ b/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" }, diff --git a/src/components/collections-overview/collections-overview.component.jsx b/src/components/collections-overview/collections-overview.component.jsx new file mode 100644 index 0000000..2e975fd --- /dev/null +++ b/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}) =>( +
+ {collections.map(({id, ...othersProps})=>( + + ))} +
+ +) +const mapStateToProps = createStructuredSelector ({ + collections: selectShopCollection +} +) + +export default connect(mapStateToProps)(collectionOverview); \ No newline at end of file diff --git a/src/components/collections-overview/collections-overview.styles.scss b/src/components/collections-overview/collections-overview.styles.scss new file mode 100644 index 0000000..ac9e5f8 --- /dev/null +++ b/src/components/collections-overview/collections-overview.styles.scss @@ -0,0 +1,4 @@ +.collections-overview { + display: flex; + flex-direction: column; +} diff --git a/src/components/directory/directory.component.jsx b/src/components/directory/directory.component.jsx index 575745b..2c86cb8 100644 --- a/src/components/directory/directory.component.jsx +++ b/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 } ) => ( +
+ { + sections.map(({id, ...otherSectionProps})=>( + + )) } - } - render(){ - return( -
- { - this.state.sections.map(({id, ...otherSectionProps})=>( - - )) - } -
- ) - } +
+) -} +const mapStateToProps = createStructuredSelector ({ + sections: selectDirectorySections +}) -export default Directory; \ No newline at end of file +export default connect(mapStateToProps)(Directory); \ No newline at end of file diff --git a/src/index.js b/src/index.js index 30843d5..9bd0e13 100644 --- a/src/index.js +++ b/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( - + + + , document.getElementById('root') diff --git a/src/pages/shop/shop.component.jsx b/src/pages/shop/shop.component.jsx index c1f44de..5ca438b 100644 --- a/src/pages/shop/shop.component.jsx +++ b/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( -
- {collections.map(({id, ...othersProps})=>( - - ))} -
- - ) - } -} +import CollectionOverview from '../../components/collections-overview/collections-overview.component' + + +const ShopPage = ({collections}) => ( +
+ +
+) + + export default ShopPage; \ No newline at end of file diff --git a/src/redux/directory/directory.reducer.js b/src/redux/directory/directory.reducer.js new file mode 100644 index 0000000..2549519 --- /dev/null +++ b/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 + } + +} diff --git a/src/redux/directory/directory.selector.js b/src/redux/directory/directory.selector.js new file mode 100644 index 0000000..aa4f7da --- /dev/null +++ b/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 +) \ No newline at end of file diff --git a/src/redux/root-reducer.js b/src/redux/root-reducer.js index 7fe7bf6..7e5562e 100644 --- a/src/redux/root-reducer.js +++ b/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 -}); \ No newline at end of file + cart: cartReducer, + directory: directoryReducer, + shop: shopReducer +}); + + +export default persistReducer(persistConfig, rootReducer); \ No newline at end of file diff --git a/src/pages/shop/shop.data.js b/src/redux/shop/shop.data.js similarity index 100% rename from src/pages/shop/shop.data.js rename to src/redux/shop/shop.data.js diff --git a/src/redux/shop/shop.reducer.js b/src/redux/shop/shop.reducer.js new file mode 100644 index 0000000..d095b6b --- /dev/null +++ b/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; + } +}; \ No newline at end of file diff --git a/src/redux/shop/shop.selector.js b/src/redux/shop/shop.selector.js new file mode 100644 index 0000000..e11fbd7 --- /dev/null +++ b/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 +) \ No newline at end of file diff --git a/src/redux/store.js b/src/redux/store.js index ad643ce..1f92577 100644 --- a/src/redux/store.js +++ b/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; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index fa0f3cd..29bb695 100644 --- a/yarn.lock +++ b/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"