Add navigation

Trinityyi · Sep 19, 2020 · 7e4c646 · 7e4c646
1 parent d61ae79
commit 7e4c646
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 45 deletions.
diff --git a/data/demo.csv b/data/demo.csv
@@ -2,7 +2,7 @@ itemName;itemDescription;itemPrice;categoryName;familyName;modelName;imageUrl;ta
 200 gr;This is so juicy! Oh my God!;7.50;Burgers;Menu;Juicy Burger;;Juicy
 400 gr;This is so juicy! Oh my God!;10.50;Burgers;Menu;Juicy Burger;;Juicy
 800 gr;This is so juicy! Oh my God!;14.50;Burgers;Menu;Juicy Burger;;Juicy
-Spicy Mexican;So hot you will die!;8.00;Burgers;Menu;;;Hot
+Spicy Mexican;So hot you will die!;8.00;Burgers;Menu;;https://images.unsplash.com/photo-1571091718767-18b5b1457add?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1352&q=80;Hot
 Veganito;No meat, just veggies.;5.80;Burgers;Menu;;;Vegan
 330ml;Good year, good beer;3.30;Beer;Drinks;Beeritsa (Draught);;Draught
 500ml;Good year, good beer;4.50;Beer;Drinks;Beeritsa (Draught);;Draught

diff --git a/src/components/categoryView.jsx b/src/components/categoryView.jsx
@@ -1,9 +1,13 @@
 import React from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { changeView } from '../state';
 
 const CategoryView = ({
   categories,
   isFamily = false,
   title = '',
+  changeView
 }) => {
   return (
     <>
@@ -15,9 +19,16 @@ const CategoryView = ({
               <h1 className="text-3xl text-center">My restaurant</h1>
             </div>
           ) : (
-            <div className="flex flex-col items-center mt-8 mb-4">
-              <h1 className="text-3xl text-center">{title}</h1>
-            </div>
+            <>
+              <button onClick={e => {
+                changeView('families');
+              }}>
+                <img src="/arrow-left.svg" alt="Back"/>
+              </button>
+              <div className="flex flex-col items-center mt-8 mb-4">
+                <h1 className="text-3xl text-center">{title}</h1>
+              </div>
+            </>
           )
         }
         <div className="flex flex-col divide-y-2 divide-gray-300 divide-double">
@@ -26,6 +37,10 @@ const CategoryView = ({
               <div
                 key={c.name}
                 className="h-16 w-full flex hover:bg-gray-200 p-4 cursor-pointer"
+                onClick={() => {
+                  if (isFamily) changeView('categories', c);
+                  else changeView('items', c);
+                }}
               >
                 <h2 className="text-2xl self-center">{c.name}</h2>
               </div>
@@ -44,4 +59,16 @@ const CategoryView = ({
   );
 };
 
-export default CategoryView;
+const mapStateToProps = state => {
+  return {
+
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    changeView: bindActionCreators(changeView, dispatch)
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(CategoryView);
diff --git a/src/components/itemView.jsx b/src/components/itemView.jsx
@@ -1,12 +1,22 @@
 import React from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { changeView } from '../state';
 
 const ItemView = ({
   items,
   title = '',
+  changeView,
+  selectedFamily
 }) => {
   return (
     <>
       <div>
+        <button onClick={e => {
+          changeView('categories', selectedFamily);
+        }}>
+          <img src="/arrow-left.svg" alt="Back"/>
+        </button>
         <div className="flex flex-col items-center mt-8 mb-4">
           <h1 className="text-3xl text-center">{title}</h1>
         </div>
@@ -17,53 +27,44 @@ const ItemView = ({
               return (
                 <div
                   key={i.name}
-                  className={`
-                    min-h-16 w-full p-4 grid grid-cols-9
-                    ${!withVariations ? 'hover:bg-gray-200 cursor-pointer' : ''}
-                  `}
+                  className="min-h-16 w-full p-4 grid grid-cols-4"
                 >
-                  <div className="col-start-1 col-end-9">
-                    {
-                      Boolean(i.image) &&
-                      <div
-                        className="col-start-1 col-end-10 h-32 w-1/3 bg-cover rounded-lg inline-block float-left"
-                        style={{ backgroundImage: `url(${i.image})` }}
-                      />
+                  <div
+                    className={ withVariations
+                      ? 'col-start-1 col-end-5'
+                      : 'col-start-1 col-end-4'
                     }
-                    <div className={Boolean(i.image) ? 'w-2/3 inline-block pl-4' : ''}>
-                      <h2 className="text-xl self-center block w-full mb-1">
-                        {i.name}
-                        {
-                          Boolean(i.tags.length) &&
+                  >
+                    <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>
                         ))
-                        }
-                      </h2>
-                      <p className="text-sm text-gray-800">{i.description}</p>
-                    </div>
-                  </div>
-                  <div className="col-start-9 col-end-10 flex flex-row items-center justify-end">
-                    <p className="text-lg font-medium">
-                      {
-                        !withVariations && i.variations[0].price
                       }
-                    </p>
+                    </h2>
+                    <p className="text-sm text-gray-800">{i.description}</p>
+                    {
+                      withVariations ? (
+                        <span className="bg-black text-white px-2 py-1 rounded-md">
+                          {i.variations.length} options
+                        </span>
+                      ) : (
+                        <p className="text-lg font-bold">
+                          {i.variations[0].price} €
+                        </p>
+                      )
+                    }
                   </div>
                   {
-                    withVariations &&
-                    i.variations.map(v => (
-                      <>
-                        <div className="col-start-1 col-end-10 hover:bg-gray-200 cursor-pointer">
-                          <h3 className="text-lg self-center inline-block py-1 pl-4 w-5/6">
-                            {v.name}
-                          </h3>
-                          <div className="float-right flex flex-row items-center justify-end">
-                            <p className="text-lg font-medium">{v.price}</p>
-                          </div>
-                        </div>
-                      </>
-                    ))
+                    Boolean(i.image) &&
+                    <div className="col-start-4 col-end-5 text-right">
+                      <div
+                        className="h-24 w-24 bg-cover rounded-lg inline-block"
+                        style={{ backgroundImage: `url(${i.image})` }}
+                      />
+                    </div>
                   }
                 </div>
               );
@@ -75,4 +76,16 @@ const ItemView = ({
   );
 };
 
-export default ItemView;
+const mapStateToProps = state => {
+  return {
+    selectedFamily: state.user.family
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    changeView: bindActionCreators(changeView, dispatch)
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ItemView);
diff --git a/src/state/index.js b/src/state/index.js
@@ -16,11 +16,51 @@ const reducer = (state, action) => {
       ...state,
       menu: action.menu
     };
+  case 'CHANGE_VIEW':
+    return {
+      ...state,
+      user: {
+        ...state.user,
+        ...action.data
+      }
+    };
   default:
     return state;
   }
 };
 
+export const changeView = (view, selection) => {
+  switch (view) {
+  case 'families':
+    return {
+      type: 'CHANGE_VIEW',
+      data: {
+        view,
+        family: null,
+        category: null
+      }
+    };
+  case 'categories':
+    return {
+      type: 'CHANGE_VIEW',
+      data: {
+        view,
+        family: selection
+      }
+    };
+  case 'items':
+    return {
+      type: 'CHANGE_VIEW',
+      data: {
+        view,
+        category: selection
+      }
+    };
+  default:
+    break;
+  }
+};
+
 export const initializeMenu = rawMenuData => {
   const menuData = rawMenuData
     .reduce((menu, rawItem) => {

diff --git a/static/arrow-left.svg b/static/arrow-left.svg