React Context API - For global state management of cart data

Community feedback

• 

  P

  Antoine•330

  @super7ramp

  Posted about 2 months ago

  Nice work 🙂

  I find your approach with React Context interesting. It could be really useful for large projects with lots of components and shared states. Thanks for sharing this!

  I learned the existence of React Portals thanks to you 🙂 As an alternative, you may consider using the native <dialog> element with a useRef to manage the modal:

  import {useRef} from "react";
  
  function App() {
      const modalRef = useRef(null)
      const showModal = () => modalRef.current?.showModal()
      const closeModal = () => modalRef.current?.close()
      return (
          <>
              <button onClick={showModal}>Show modal</button>
              <dialog ref={modalRef}>
                  <h2>Hey!</h2>
                  <button onClick={closeModal}>Close modal</button>
              </dialog>
          </>
      )
  }
  
  export default App
  

  Concerning the logic, implementation works as expected, expect for one bug: Items in the confirmation order modal are removable, whereas they should not. Once it's ordered, it's ordered 😉 It leads to a confusing behavior:

  1. Add an item to the cart → item is added to the cart
  2. Confirm order → confirmation modal appears
  3. Remove the item from the cart → the modal disappears 🤔
  4. Add any item to the cart → the modal reappears with the new item, without clicking on the confirm order button 😮

  Concerning the appearance, I find your approach interesting again, code is really compact with Tailwind!

  There are some details that could be improved though:

  • Dessert in the grid should have a solid outline when added to the cart
  • There are differences in colors and button sizes compared with the design.
  • The '-' and '+' buttons are not exactly centered in their circles
  • Buttons are missing hover effects
  • Modal is missing an open/close animation

  Overall, kudos for your work and thank you again for sharing it 🙂

  00