readme.md

Checklist

Version 1

• Install font awesome as module
• [] Install bootstrap as module
• Adding a "Header" Component
  • Title
  • Top fixed sticky header
  • [] shopping cart button (right)
    • Display items in cart
    • display as button
    • inset icon
    • animation
    • Shopping cart info markup (right)
• Install bootstrap with css modules
• Adding the "Cart" Button Component
  • How to share meal count data from meals
• Button Component
• Adding a "Meals" Component
• Adding Individual Meal Items & Displaying Them
• Adding a Form
• Figure out parent / sibling relationship for menu cart
• Working on the "Shopping Cart" Component
• Adding a Modal via a React Portal
• Managing Cart & Modal State
  • [] Dialog closable bkg anoying minor bug. Try using proper bs integration with two methods as proposed (show/hide)
  • Adding a Cart Context
  • Using the Context
  • Adding a Cart Reducer
• [0] Working with Refs & Forward Refs
  • for meal input amounts
• Outputting Cart Items
• Working on a More Complex Reducer Logic
• Making Items Removable
• Using the useEffect Hook
• Cart Button animation
  • [] it may be possible this hook could fix multiple state items being returned
• [] Removing Container as a node in component tree (portal)
• How to get key in from component: Dont use key=pass a separate id attr https://reactjs.org/docs/lists-and-keys.html
  • pass id to meal item form
  • Bug: add to cart amount resets state
  • Export initalMeals for reusee
  • cartItems: filter meals by id passed to cart
  • how to handle cart : 2 scenarios: pass items, or merge items from mealItems array
    • Required initalState = {items:[], total}
    • See Example: (CartProvider)[https://github.com/academind/react-complete-guide-code/blob/11-practice-food-order-app/code/12-finished/src/store/CartProvider.js]
      • In the reducer we pass state.items and set existing cart items
• Prevent validate cart item input amounts
• [] UI cmpt to live in root
• Sync Cart / Menu amounts:
  • Instrucor doesnt do this anyway
  • Could leverage cart context passing amount from meals
• Show hide order button / or clickable modal when cart items
• Manage state total +1 / -1
• Cart amount reaching 0 will simply trigger dispatch->remove
• Remove border grey btn
• Navbar fixed top
• Fix structure for context

Version 2

Time to add a forms and database to the food application

• Admin firebase
  • Import initalState json
  • Create some basic schema
• "Meals" Data To The Backend
  • Make successfull Http
  • Loading State
  • Checkout page components + logic see ui's
• Reading Form Values
  • Validate
  • Custom useForm and reducer
  • Checkout
    • Client
      • [] Feeback to client
      • Name
      • Address
    • Order
      • Meal Item ids
• Get http request
• Use use-http.js custom hook
• Success full post http request
• Fetch Meal data from backend
  • Use react-bootstrap
• [] Modal Fix

Analyse

• [] How to delete ?
• How to elegantly handle the getMeals request between meals.js and context
• We can levarage the custom hooks erros and loading states which is nice in component. Maby it makes sense to leave this out of context. Still idealy we would want to load these mealItems just once maby init with a click or somethign ?
• Handling modal footer buttons to interact wiht cart ?
• UI form cart

Caveats / Threats

• Using react css modules rather than react-bootstrap ? smells a little

Context & Reducer

1. Create the context.
2. Put state and dispatch into context.
3. Use context anywhere in the tree.

Structure

CartProvider