myorder

src/api/products.js

@@ -4,25 +4,46 @@ import 'firebase/auth';
 
 export const getAllProducts = () =>
   new Promise((resolve, reject) => {
-    var ref = database().ref('products');
-
-    ref.on(
-      'value',
-      function(snapshot) {
-        let value = snapshot.val();
+    database()
+      .ref('products')
+      .once('value')
+      .then(res => {
+        let value = res.val();
         resolve(
           Object.keys(value).map(id => ({
             id,
             ...value[id]
           }))
         );
-      },
-      function(error) {
-        reject(error.code);
-      }
-    );
+      });
+    //
+    // ref.on(
+    //   'value',
+    //   function(snapshot) {
+    //     let value = snapshot.val();
+    //     resolve(
+    //       Object.keys(value).map(id => ({
+    //         id,
+    //         ...value[id]
+    //       }))
+    //     );
+    //   },
+    //   function(error) {
+    //     reject(error.code);
+    //   }
+    // );
   });
-
+/**
+ *
+ * @param {Array} cart
+ * Cart with ordered products
+ * @param {String} uid
+ * User ID
+ * @param {String} displayName
+ * User display name
+ * @param {String} email
+ * User current email
+ */
 export const addDailyCheckout = (cart, uid, displayName, email) =>
   new Promise((resolve, reject) => {
     let today = new Date();

src/containers/App/App.js

@@ -7,12 +7,23 @@ import Login from '../Login/Login';
 import { beginVerifyToken } from '../../store/actions/auth';
 import AuthenticatedArea from '../AuthenticatedArea/AuthenticatedArea';
 import NotFound from '../NotFound/NotFound';
+import { retrieveOrdersWithSuccess } from '../../store/actions/orders';
+import { onDailyCheckoutChange } from '../../api/orders';
 
 class App extends Component {
   componentDidMount() {
     this.props.preAuthenticate();
   }
 
+  componentDidUpdate() {
+    const { onOrdersChange, isAuthenticated } = this.props;
+
+    if (isAuthenticated)
+      onDailyCheckoutChange(resp => {
+        onOrdersChange(resp);
+      });
+  }
+
   render() {
     return (
       <div className="full-height ">
@@ -34,7 +45,8 @@ const mapStateToProps = ({ auth }) => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-  preAuthenticate: token => dispatch(beginVerifyToken(token))
+  preAuthenticate: token => dispatch(beginVerifyToken(token)),
+  onOrdersChange: resp => dispatch(retrieveOrdersWithSuccess(resp))
 });
 
 export default connect(

src/containers/AuthenticatedArea/AuthenticatedArea.js

@@ -9,6 +9,8 @@ import Button from '../../ui/Button/Button';
 import { logoutFlow } from '../../store/actions/auth';
 import Toolbar from '../Toolbar/Toolbar';
 import MessageBar from '../../ui/MessageBar/MessageBar';
+import { retrieveOrdersWithSuccess } from '../../store/actions/orders';
+import MyOrders from '../MyOrders/MyOrders';
 class AuthenticatedArea extends Component {
   state = {
     toolbarIsOpen: false
@@ -74,6 +76,7 @@ class AuthenticatedArea extends Component {
             <Router>
               <Switch>
                 <Route path="/dailyorder" component={CollectiveOrders} />
+                <Route path="/myorder" component={MyOrders} />
                 <Route path="/order" exact component={Order} />
                 <Route path="/" exact component={Order} />
                 <Route component={NotFound} />
@@ -109,7 +112,8 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => {
   return {
-    onLogout: () => dispatch(logoutFlow())
+    onLogout: () => dispatch(logoutFlow()),
+    onOrdersChange: resp => dispatch(retrieveOrdersWithSuccess(resp))
   };
 };
 

src/containers/CollectiveOrders/CollectiveOrders.js

@@ -1,12 +1,8 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import {
-  beginOrdersFlow,
-  retrieveOrdersWithSuccess
-} from '../../store/actions/orders';
+import { beginOrdersFlow } from '../../store/actions/orders';
 import cssModule from './CollectiveOrders.module.css';
 import Button from '../../ui/Button/Button';
-import { onDailyCheckoutChange } from '../../api/orders';
 import { HashRouter as Router, Route, NavLink, Switch } from 'react-router-dom';
 import { ordersReducer, getWhoOrder, whoOrderThis } from '../../utils/order';
 import UserOrder from '../../components/UserOrders/UserOrder';
@@ -18,13 +14,7 @@ class CollectiveOrders extends Component {
   state = {
     lastProductSelectedName: ''
   };
-  componentDidMount() {
-    const { onOrdersChange } = this.props;
 
-    onDailyCheckoutChange(resp => {
-      onOrdersChange(resp);
-    });
-  }
   render() {
     const { orders } = this.props;
     const totalOrders = ordersReducer(orders);
@@ -169,8 +159,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => {
   return {
-    onOrdersLoad: () => dispatch(beginOrdersFlow()),
-    onOrdersChange: resp => dispatch(retrieveOrdersWithSuccess(resp))
+    onOrdersLoad: () => dispatch(beginOrdersFlow())
   };
 };
 

src/containers/MyOrders/MyOrders.js

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { ordersReducer } from '../../utils/order';
+import cssModule from './MyOrders.module.css';
+
+class MyOrders extends Component {
+  componentDidMount() {
+    console.log();
+  }
+  render() {
+    const totalOrders = ordersReducer(this.props.orders);
+    return (
+      <div className={cssModule.fullHeightContainer}>
+        <div className={cssModule.container}>
+          <div className={cssModule.title}>
+            <h3>Riepilogo dei miei ordini</h3>
+          </div>
+          {Object.keys(totalOrders).map((orderId, id) => {
+            if (totalOrders[orderId].quantity === 0) return null;
+            return (
+              <div className={cssModule.order} key={id}>
+                <span className={cssModule.orderName}>
+                  {totalOrders[orderId].descr}
+                </span>
+                <span className={cssModule.orderCount}>
+                  {totalOrders[orderId].quantity}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+}
+const mapStateToProps = state => ({
+  orders: state.orders.orderList.filter(
+    order => order.email === state.auth.user.email
+  )
+});
+
+const mapDispatchToProps = {};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(MyOrders);

src/containers/MyOrders/MyOrders.module.css

@@ -0,0 +1,49 @@
+.container {
+  display: flex;
+  width: 100%;
+  max-width: 900px;
+  margin: auto;
+  border: dashed 3px;
+  padding: 25px;
+  flex-direction: column;
+  background: #FFF;
+}
+
+.orderName {
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.orderCount {
+  display: flex;
+  width: 200px;
+  align-self: flex-end;
+  justify-content: flex-end;
+}
+
+.title {
+  text-align: center;
+  padding: 20px;
+}
+
+.footer {
+  text-align: right;
+  padding-top: 30px
+}
+
+.order {
+  border-bottom: solid 1px;
+  display: flex;
+  flex-wrap: nowrap;
+  padding: 15px 10px;
+}
+
+.fullHeightContainer {
+  display: flex;
+  width: 100%;
+  padding: 15px;
+  flex-direction: column;
+  align-self: center
+}

src/index.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import App from './containers/App/App';
 import { Provider } from 'react-redux';
 import configStore from './store/configStore';
-import { unregister } from './serviceWorker';
+import { register } from './serviceWorker';
 import 'reset-css';
 import './global.css';
 import { initializeApp } from 'firebase/app';
@@ -39,4 +39,4 @@ ReactDOM.render(
   document.getElementById('root')
 );
 
-unregister();
+register();

src/ui/Input/Input.js

@@ -31,7 +31,7 @@ export default ({
         type={type}
         placeholder={placeholder}
         className={`${SIZE[size]} `}
-        current-password={currentPassword.toString()}
+        autoComplete={currentPassword ? 'current-password' : ''}
       />
     </div>
   );