Layout updates

Trinityyi · Sep 20, 2020 · 168fcd0 · 168fcd0
1 parent 6f81d0b
commit 168fcd0
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 17 deletions.
diff --git a/src/components/addView.jsx b/src/components/addView.jsx
@@ -1,22 +1,23 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { changeView } from '../state';
+import { changeView, addItem } from '../state';
 
 const AddView = ({
-  items,
-  title = '',
   changeView,
   selectedCategory,
-  selectedItem
+  selectedItem,
+  addItem
 }) => {
   const withVariations = selectedItem.variations.length > 1;
   const [selectedVariation, setSelectedVariation] = useState(0);
   const [quantity, setQuantity] = useState(1);
+  const notesInput = useRef(null);
+
   return (
     <>
       <div>
-        <button onClick={e => {
+        <button className="mx-4 my-2" onClick={e => {
           changeView('items', selectedCategory);
         }}>
           <img src="/arrow-left.svg" alt="Back"/>
@@ -39,6 +40,7 @@ const AddView = ({
                 {
                   selectedItem.variations.map((v, i) => (
                     <button
+                      key={v.name}
                       className="min-h-16 w-full p-4 grid grid-cols-8 hover:bg-gray-200 cursor-pointer"
                       onClick={() => {
                         setSelectedVariation(i);
@@ -89,9 +91,26 @@ const AddView = ({
               className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline col-start-2 col-end-5 mt-2"
               aria-label="Notes"
               placeholder="Notes..."
+              ref={notesInput}
             />
             <button
               className="col-start-2 col-end-5 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2"
+              onClick={e => {
+                e.preventDefault();
+                const notes = notesInput.current && notesInput.current.value.trim().length > 0
+                  ? notesInput.current.value.trim()
+                  : null;
+                const variationDescription = selectedItem.variations.length > 1
+                  ? ` (${selectedItem.variations[selectedVariation].name})`
+                  : '';
+                addItem({
+                  name: `${selectedItem.name}${variationDescription}`,
+                  quantity,
+                  notes,
+                  price: selectedItem.variations[selectedVariation].price
+                });
+                changeView('items', selectedCategory);
+              }}
             >
               Add to order
             </button>
@@ -111,7 +130,8 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
   return {
-    changeView: bindActionCreators(changeView, dispatch)
+    changeView: bindActionCreators(changeView, dispatch),
+    addItem: bindActionCreators(addItem, dispatch)
   };
 };
 

diff --git a/src/components/categoryView.jsx b/src/components/categoryView.jsx
@@ -20,7 +20,7 @@ const CategoryView = ({
             </div>
           ) : (
             <>
-              <button onClick={e => {
+              <button className="mx-4 my-2" onClick={e => {
                 changeView('families');
               }}>
                 <img src="/arrow-left.svg" alt="Back"/>
@@ -61,7 +61,7 @@ const CategoryView = ({
 
 const mapStateToProps = state => {
   return {
-
+    // TODO: Clean me if you have to
   };
 };
 

diff --git a/src/components/itemView.jsx b/src/components/itemView.jsx
@@ -12,7 +12,7 @@ const ItemView = ({
   return (
     <>
       <div>
-        <button onClick={e => {
+        <button className="mx-4 my-2" onClick={e => {
           changeView('categories', selectedFamily);
         }}>
           <img src="/arrow-left.svg" alt="Back"/>
@@ -33,17 +33,17 @@ const ItemView = ({
                   }}
                 >
                   <div
-                    className={ withVariations
-                      ? 'col-start-1 col-end-5'
-                      : 'col-start-1 col-end-4'
+                    className={ Boolean(i.image)
+                      ? 'col-start-1 col-end-4'
+                      : 'col-start-1 col-end-5'
                     }
                   >
                     <h2 className="text-xl self-center block w-full mb-1">
                       {i.name}
                       {
                         Boolean(i.tags.length) &&
                         i.tags.map(tag => (
-                          <span className="bg-gray-200 text-base px-2 py-1 mx-2 rounded-lg">{tag}</span>
+                          <span key={tag} className="bg-gray-200 text-base px-2 py-1 mx-2 rounded-lg">{tag}</span>
                         ))
                       }
                     </h2>

diff --git a/src/components/layout.jsx b/src/components/layout.jsx
@@ -1,13 +1,26 @@
 import React from 'react';
 import Helmet from 'react-helmet';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { changeView, backToView } from '../state';
 
 require('../styles/index.scss');
 
 const Layout = ({
   title,
   isIndex = false,
+  cart,
+  changeView,
+  backToView,
+  currentView,
+  lastView,
   children
 }) => {
+  const totalPrice = cart.reduce((a, i) => {
+    a += parseFloat(i.price) * i.quantity;
+    return a;
+  }, 0.00);
+
   return (
     <>
       <Helmet
@@ -32,11 +45,27 @@ const Layout = ({
       {
         !isIndex &&
         <div className="fixed bottom-0 left-0 right-0 h-16 border-t-2 border-gray-200 bg-white grid grid-cols-12">
-          <button className="col-start-1 col-end-3 flex items-center justify-center">
+          <button
+            className="col-start-1 col-end-3 flex items-center justify-center"
+            onClick={e => {
+              e.preventDefault();
+              if (currentView === 'cart') backToView(lastView);
+              else changeView('cart', currentView);
+            }}
+          >
             <img src="/shopping-bag.svg" alt="" className="px-4" />
             <span className="hidden sm:inline">Cart</span>
           </button>
-          <button className="col-start-3 col-end-11 text-2xl">0.00 €</button>
+          <button
+            className="col-start-3 col-end-11 text-2xl"
+            onClick={e => {
+              e.preventDefault();
+              if (currentView === 'cart') backToView(lastView);
+              else changeView('cart', currentView);
+            }}
+          >
+            {totalPrice.toFixed(2)} €
+          </button>
           <button className="col-start-11 col-end-13 flex items-center justify-center">
             <img src="/search.svg" alt="" className="px-4" />
             <span className="hidden sm:inline">Search</span>
@@ -47,4 +76,19 @@ const Layout = ({
   );
 };
 
-export default Layout;
+const mapStateToProps = state => {
+  return {
+    cart: state.user.cart,
+    currentView: state.user.view,
+    lastView: state.user.lastView
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    changeView: bindActionCreators(changeView, dispatch),
+    backToView: bindActionCreators(backToView, dispatch)
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Layout);
diff --git a/static/x-circle.svg b/static/x-circle.svg