#10: Implement the third page, Select Menu Items

 - adjustments in UI (columns width and formatting)
 - cleanup (debugger statements removed, etc.)

src/features/address/addressSlice.js

@@ -2,7 +2,6 @@ import { createAsyncThunk, createEntityAdapter, createSlice } from '@reduxjs/too
 import { safelyExecuteAsync } from '../../shared/promises';
 import { navigateToPickRestaurants } from '../actions/navigation';
 import { getRestaurantById, postAddressObtainRestaurants } from '../actions/api';
-import { resetCart } from '../cart/cartSlice';
 
 
 const restaurantsAdapter = createEntityAdapter({
@@ -41,7 +40,6 @@ export const retrieveRestaurantsForAddress = createAsyncThunk(
       return rejectWithValue(err);
     }
 
-    dispatch(resetCart());
     dispatch(keepAddressAndTime({ address, time, now }));
     dispatch(navigateToPickRestaurants());
 
@@ -94,21 +92,18 @@ export const addressSlice = createSlice({
       state.error = action.error;
     }).addCase(
       retrieveRestaurantByIdAsyncThunk.pending, state => {
-        debugger;
         state.status = 'loading';
       }
     ).addCase(
       retrieveRestaurantByIdAsyncThunk.fulfilled, (state, { payload }) => {
         state.status = 'idle';
-        debugger;
         if (!payload) {
           return;
         }
         restaurantsAdapter.addOne(state.restaurants, payload);
       }
     ).addCase(
       retrieveRestaurantByIdAsyncThunk.rejected, (state, action) => {
-        debugger;
         state.status = 'error';
         state.error = action.error;
       }

src/features/cart/cartSlice.js

@@ -82,7 +82,6 @@ export const cartSlice = createSlice({
       }
 
       const oldItem = state.items[ idx ];
-      debugger;
 
       state.items = [
         ...state.items.slice(0, idx),
@@ -114,12 +113,6 @@ export const cartSlice = createSlice({
     })
 });
 
-function calculateHash(arr) {
-  return arr.map(i => [ i.id, i.count, i.oldCount ?? '' ].join('|')).join(';');
-}
-
-void calculateHash;
-
 export const { resetCart } = cartSlice.actions;
 
 const namedReducer = {

src/ui/pages/RestaurantListPage/index.js

@@ -13,6 +13,7 @@ import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
 import { keepSelectedRestaurant } from '../../../features/restaurants/restaurantsSlice';
 import { SelectedAddressRow } from '../../components/SelectedAddressRow';
 import { PaginatedTable } from '../../elements/paginatedTable';
+import { resetCart } from '../../../features/cart/cartSlice';
 
 export const RestaurantListPage = () => {
 
@@ -53,6 +54,7 @@ export const RestaurantListPage = () => {
 
   const handleRowSelect = useCallback((entry) => {
     dispatch(keepSelectedRestaurant(entry));
+    dispatch(resetCart());
     entry?.id && dispatch(navigateToEditMenu(entry.id));
   }, [ dispatch ]);
 

src/ui/pages/RestaurantPage/index.js

@@ -19,7 +19,10 @@ export const RestaurantPage = ({ match }) => {
   const selectedRestaurantId = useSelector(accessSelectedRestaurantId());
   const cartItems = useSelector(accessCartItems());
 
-  const cartSubtotal = useMemo(() => cartItems.reduce((sum, { price, count }) => (sum + Number(price) * count ), 0), [ cartItems ]);
+  const cartSubtotal = useMemo(() => cartItems.reduce((sum, {
+    price,
+    count
+  }) => (sum + Number(price) * count), 0), [ cartItems ]);
 
   useEffect(() => {
     if (selectedRestaurantId && urlRestaurantId) {
@@ -33,12 +36,12 @@ export const RestaurantPage = ({ match }) => {
   return <div style={ { marginTop: '-1rem' } }>
     <SelectedAddressRow />
     <SelectedRestaurantRow />
-    <Container className="d-flex">
-      <Col sm={ 6 } className="py-2">
+    <Container className="d-flex flex-column flex-lg-row">
+      <Col xs={ 12 } lg={ 7 } className="py-2">
         <h2>Menu Items:</h2>
         <MenuItems restaurantId={ selectedRestaurantId } />
       </Col>
-      <Col sm={ 6 } className="py-2">
+      <Col xs={ 12 } lg={ 5 } className="py-2">
         <h2>Your Tray: <div className="d-inline-block float-right">{ `$${ cartSubtotal.toFixed(2) }` }</div></h2>
         <YourTrayItems />
         <div className="text-right">

src/ui/pages/RestaurantPage/menuItems.js

@@ -79,9 +79,10 @@ export function MenuItems({ restaurantId }) {
     }, {
       dataField: 'actions',
       isDummyField: true,
-      text: 'Action',
+      text: 'Add To Cart',
       formatter: actionColumnFormatter,
-      formatExtraData: cartId
+      formatExtraData: cartId,
+      classes: 'text-right'
     }
   ]), [ actionColumnFormatter, cartId ]);
 

src/ui/pages/RestaurantPage/yourTrayItems.js

@@ -16,7 +16,6 @@ export function YourTrayItems() {
 
   const actionColumnFormatter = useCallback((cellContent, row, rowIdx, cartId) => {
     const disabled = !cartId || typeof row.oldCount !== 'undefined';
-    console.log('yourTrayItems - actionColumnFormatter', { cartId });
     return <ButtonGroup size="sm">
       <Button color={ 'info' } size={ 'sm' } disabled={ disabled || (row.count === 0) } onClick={ handleAddToCart(row.id, undefined, row, -1) }><IconMinus /></Button>
       <Button color="link" disabled className={ disabled ? 'text-muted' : '' }> { row.count } </Button>
@@ -32,14 +31,20 @@ export function YourTrayItems() {
       dataField: 'name',
       text: 'Food Item',
       sort: true
-    }, {
-      dataField: 'count',
-      text: 'Qty'
     },
     {
       dataField: 'actions',
       isDummyField: true,
-      text: 'Action',
+      text: 'Qty',
+      sort: true,
+      sortFunc: (a, b, order, dataField, rowA, rowB) => {
+        if (order === 'asc') {
+          return rowA.count - rowB.count;
+        } else {
+          return -(rowA.count - rowB.count);
+        }
+      },
+      classes: 'text-right',
       formatter: actionColumnFormatter,
       formatExtraData: cartId
     }
@@ -68,7 +73,7 @@ export function YourTrayItems() {
       custom: true,
       sizePerPage: 5,
       sizePerPageList: [ 5, 10, 25, 30, 50 ],
-      hidePageListOnlyOnePage: true
+      hidePageListOnlyOnePage: true,
     } }
   />;
 }