diff --git a/src/api/products.js b/src/api/products.js index 9c5c66b..6d9aebe 100644 --- a/src/api/products.js +++ b/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(); diff --git a/src/containers/App/App.js b/src/containers/App/App.js index 6871c10..15606b6 100644 --- a/src/containers/App/App.js +++ b/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 (
@@ -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( diff --git a/src/containers/AuthenticatedArea/AuthenticatedArea.js b/src/containers/AuthenticatedArea/AuthenticatedArea.js index 9e0a719..ede17fa 100644 --- a/src/containers/AuthenticatedArea/AuthenticatedArea.js +++ b/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 { + @@ -109,7 +112,8 @@ const mapStateToProps = state => ({ const mapDispatchToProps = dispatch => { return { - onLogout: () => dispatch(logoutFlow()) + onLogout: () => dispatch(logoutFlow()), + onOrdersChange: resp => dispatch(retrieveOrdersWithSuccess(resp)) }; }; diff --git a/src/containers/CollectiveOrders/CollectiveOrders.js b/src/containers/CollectiveOrders/CollectiveOrders.js index 4f3ad2c..7acf152 100644 --- a/src/containers/CollectiveOrders/CollectiveOrders.js +++ b/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()) }; }; diff --git a/src/containers/MyOrders/MyOrders.js b/src/containers/MyOrders/MyOrders.js new file mode 100644 index 0000000..c9d9060 --- /dev/null +++ b/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 ( +
+
+
+

Riepilogo dei miei ordini

+
+ {Object.keys(totalOrders).map((orderId, id) => { + if (totalOrders[orderId].quantity === 0) return null; + return ( +
+ + {totalOrders[orderId].descr} + + + {totalOrders[orderId].quantity} + +
+ ); + })} +
+
+ ); + } +} +const mapStateToProps = state => ({ + orders: state.orders.orderList.filter( + order => order.email === state.auth.user.email + ) +}); + +const mapDispatchToProps = {}; + +export default connect( + mapStateToProps, + mapDispatchToProps +)(MyOrders); diff --git a/src/containers/MyOrders/MyOrders.module.css b/src/containers/MyOrders/MyOrders.module.css new file mode 100644 index 0000000..7444d87 --- /dev/null +++ b/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 +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 4c2ce5d..32f7a9b 100644 --- a/src/index.js +++ b/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(); diff --git a/src/ui/Input/Input.js b/src/ui/Input/Input.js index 0d8600b..0cfaeb3 100644 --- a/src/ui/Input/Input.js +++ b/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' : ''} />
);