Refactor Firebase to be used in App component since both child components use it similarly.

[yenly]

• Leverage the use of useCollection hook for real-time snapshot update of Firestore data
• We're still connecting to the database and grabbing list items twice (in App.js and in List.js). https://github.com/the-collab-lab/tcl-23-smart-shopping-list/blob/main/src/pages/List.js
  • Proposed changes:
  • Change useEffect() in App.js to use useCollection instead
  • pass down as props (note would have to remove some of the error/loading in List, or pass that down as well)
• In AddItem.js, in line 58, we're updating the listItems instead of just letting the database take care of it.
  • Proposed change: remove props.setListItems((prev) => [...prev, newItemObject]);

[jamesncox]

I will attempt to tackle this issue today!