All shop data from firebase db

src/App.js

@@ -13,12 +13,10 @@ import ShopPage from './pages/shop/shop.component';
 import CheckoutPage from './pages/checkout/checkout.component';
 import SignInAndSignUp from './pages/signin-and-singup/signin-and-singup.component';
 import { auth,createUserProfileDocument } from './fireabase/firebase.utils';
+
 import { setCurrentUser } from './redux/user/user.actions';
 import { selectCurrentUser } from './redux/user/user.selectors';
 
-
-
-
 class App extends React.Component {
   unsubscribeFromAuth = null;
   componentWillUnmount(){
@@ -37,10 +35,9 @@ class App extends React.Component {
               ...snapShot.data()
             });
         });
-      }else{
-        setCurrentUser(userAuth);
       }
-
+      setCurrentUser(userAuth);
+      //  to add data, was deleted addCollectionAndItems('collections',collectionsArray.map(({title, items})=>({title, items})));
     })
   }
 

src/components/cart-item/cart-item-component.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import {CartItemContainer, ItemDetailsContainer} from './cart-item-component.styles'
+import {CartItemContainer, ItemDetailsContainer, CartItemImage} from './cart-item-component.styles'
 
 const CartItem = ({item: {imageUrl, price, name, quantity}}) => (
 
         <CartItemContainer>
-            <img src={imageUrl} alt='item'/>
+            <CartItemImage src={imageUrl} alt='item'/>
             <ItemDetailsContainer>
                 <span className='name'>{name}</span>
                 <span className='price'>

src/components/cart-item/cart-item-component.styles.jsx

@@ -5,12 +5,10 @@ export const CartItemContainer = styled.div`
   display: flex;
   height: 80px;
   margin-bottom: 15px;
-
-  img {
-    width: 30%;
-  }
 `;
-
+export const CartItemImage = styled.img`
+  width: 30%;
+`;
 export const ItemDetailsContainer = styled.div`
 .item-details {
     width: 70%;

src/components/custom-button/custom-button.component.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import { CustomButtonContainer } from './custom-button.styles';
 
-const CustomButton = ({children, ...props}) => (
-    <CustomButtonContainer {...props}>{children}</CustomButtonContainer>
+const CustomButton = ({ children, ...props }) => (
+  <CustomButtonContainer {...props}>{children}</CustomButtonContainer>
 );
 
-export default CustomButton;
+export default CustomButton;

src/components/custom-button/custom-button.styles.jsx

@@ -1,58 +1,57 @@
-import styled, {css} from 'styled-components';
+import styled, { css } from 'styled-components';
 
 const buttonStyles = css`
-    background-color: black;
-    color: white;
-    border: none;
-    &:hover {
-        background-color: white;
-        color: black;
-        border: 1px solid black;
-    }
-`;
-
-const invertedButtonStyles = css`
+  background-color: black;
+  color: white;
+  border: none;
+  &:hover {
     background-color: white;
     color: black;
     border: 1px solid black;
-
-    &:hover {
-      background-color: black;
-      color: white;
-      border: none;
-    }
+  }
 `;
-const googleSignInStyles = css`
-    background-color: #4285f4;
+
+const invertedButtonStyles = css`
+  background-color: white;
+  color: black;
+  border: 1px solid black;
+  &:hover {
+    background-color: black;
     color: white;
+    border: none;
+  }
+`;
 
-    &:hover {
-        background-color: #357ae8;
-        border: none;
-    }
+const googleSignInStyles = css`
+  background-color: #4285f4;
+  color: white;
+  &:hover {
+    background-color: #357ae8;
+    border: none;
+  }
 `;
 
-const getButtonStyles = props =>{
-    if(props.isGoogleSignIn){
-        return googleSignInStyles
-    }
-    return props.inverted ? invertedButtonStyles: buttonStyles;
-}
+const getButtonStyles = props => {
+  if (props.isGoogleSignIn) {
+    return googleSignInStyles;
+  }
 
-export const CustomButtonContainer = styled.button`
-    min-width: 165px;
-    width: auto;
-    height: 50px;
-    letter-spacing: 0.5px;
-    line-height: 50px;
-    padding: 0 35px 0 35px;
-    font-size: 15px;
-    text-transform: uppercase;
-    font-family: 'Open Sans Condensed';
-    font-weight: bolder;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
+  return props.inverted ? invertedButtonStyles : buttonStyles;
+};
 
-    ${getButtonStyles}
+export const CustomButtonContainer = styled.button`
+  min-width: 165px;
+  width: auto;
+  height: 50px;
+  letter-spacing: 0.5px;
+  line-height: 50px;
+  padding: 0 35px 0 35px;
+  font-size: 15px;
+  text-transform: uppercase;
+  font-family: 'Open Sans Condensed';
+  font-weight: bolder;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  ${getButtonStyles}
 `;

src/components/with-spinner/with-spinner.component.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import {SpinnerContainer, SpinnerOverlay} from './with-spinner.styles';
+
+const WithSpinner = WrappedDocument => {
+    const Spinner = ({isLoading, ...otherProps}) => {
+        return isLoading ? (
+            <SpinnerOverlay>
+                <SpinnerContainer />
+            </SpinnerOverlay>
+        ) : (
+            <WrappedDocument {...otherProps} />
+        )
+    }
+    return Spinner;
+}
+export default WithSpinner;

src/components/with-spinner/with-spinner.styles.jsx

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+export const SpinnerOverlay = styled.div`
+  height: 60vh;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const SpinnerContainer = styled.div`
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  border: 3px solid rgba(195, 195, 195, 0.6);
+  border-radius: 50%;
+  border-top-color: #636767;
+  animation: spin 1s ease-in-out infinite;
+  -webkit-animation: spin 1s ease-in-out infinite;
+  @keyframes spin {
+    to {
+      -webkit-transform: rotate(360deg);
+    }
+  }
+  @-webkit-keyframes spin {
+    to {
+      -webkit-transform: rotate(360deg);
+    }
+  }
+`;

src/fireabase/firebase.utils.js

@@ -7,6 +7,7 @@ const config = {
     authDomain: "ecommerceztom.firebaseapp.com",
     databaseURL: "https://ecommerceztom.firebaseio.com",
     projectId: "ecommerceztom",
+    name: "EcommerceZtoM",
     storageBucket: "ecommerceztom.appspot.com",
     messagingSenderId: "745149943574",
     appId: "1:745149943574:web:5e4d9e56554d82c35f8a37"
@@ -38,6 +39,36 @@ const config = {
     return userRef;
   }
 
+  export const addCollectionAndItems = async (collectionKey, objectsToAdd) => {
+    const collectionRef = firestore.collection(collectionKey);
+
+    const batch = firestore.batch()
+    objectsToAdd.forEach(object=>{
+        const newDocRef = collectionRef.doc();
+        batch.set(newDocRef, object);
+
+    });
+    return await batch.commit();
+  }
+
+export const convertCollectionsSnapshotToMap = (collections) => {
+      const transformedCollection = collections.docs.map(
+          doc => {
+              const {title, items} = doc.data();
+              return{
+                  routeName: encodeURI(title.toLowerCase()),
+                  id: doc.id,
+                  title, 
+                  items
+              }
+          }
+      );
+      return transformedCollection.reduce((accumulator,collection)=>{
+          accumulator[collection.title.toLowerCase()] = collection;
+          return accumulator;
+      },{});
+  }
+
   export const auth = firebase.auth();
   export const firestore = firebase.firestore();
 

src/pages/shop/shop.component.jsx

@@ -1,16 +1,51 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
+import {connect} from 'react-redux';
 
 import CollectionOverview from '../../components/collections-overview/collections-overview.component';
 import CollectionPage from '../collection/collection.component';
 
-const ShopPage = ({ match }) => (
-    <div className="shopPage">
-        <Route exact path={`${match.path}`} component={CollectionOverview} />
-        <Route path={`${match.path}/:collectionId`} component={CollectionPage} />
+import {firestore, convertCollectionsSnapshotToMap} from '../../fireabase/firebase.utils';
+import { updateCollections } from '../../redux/shop/shop.actions';
+import WithSpinner from '../../components/with-spinner/with-spinner.component';
+
+const CollectionsOverviewWithSpinner = WithSpinner(CollectionOverview);
+const CollectionPageWithSpinner = WithSpinner(CollectionPage);
+
+class ShopPage extends React.Component {
+    state = {
+            loading: true
+    }
+    unsubscribeFromSnapshot = null;
+
+    componentDidMount() {
+        const {updateCollections} = this.props;
+        const collectionRef = firestore.collection('collections');
+
+        //this.unsubscribeFromSnapshot = 
+
+        collectionRef.get().then(   snapshot=>{
+            const collectionsMap = convertCollectionsSnapshotToMap(snapshot);
+            updateCollections(collectionsMap);
+            this.setState({loading:false});
+            }
+        );
+    }
+
+    render() {
+    const { match } = this.props;
+    const { loading } = this.state;
+    return(<div className='shop-page'>
+        <Route exact path={`${match.path}`} render={(props) => <CollectionsOverviewWithSpinner isLoading={loading} {...props} />} />
+        <Route path={`${match.path}/:collectionId`} render={(props) => <CollectionPageWithSpinner  isLoading={loading} {...props} />} />
 
-    </div>
-)
+        </div>
+        );
+    }
+}
 
+const mapDispatchToProps = dispatch => ({
+    updateCollections: collectionsMap => dispatch(updateCollections(collectionsMap))
+})
 
-export default ShopPage;
+export default connect(null, mapDispatchToProps)(ShopPage);

src/redux/shop/shop.actions.js

@@ -0,0 +1,6 @@
+import ShopActionTypes from './shop.type';
+
+export const updateCollections = collectionsMap => ({
+    type: ShopActionTypes.UPDATE_COLLECTIONS,
+    payload: collectionsMap
+});