Storing the data on the backend - [Setting up FireStoreDB & Utilizing in FrontEnd]

[DevonGifford]

• [x] Adding Mock Data
• [x] Instantiating a FireStore DB for all product data
• [x] Creating Method to push Mock data to FireStoreDB - NoSQL
• [x] Creating Method to pull product data from the FireStore DB
• [x] Utilize/Pass the ProductData in the shop route/component

[DevonGifford]

Storing the data on the backend - Setting up FireStoreDB

---

1. Adding some new mock data

   • As a test run I am going to add a bit more mock data with different types (i.e. Mens, Jackets, Shoes etc.)
   • Updating the shop-data json file
   • Reflecting changes in products.context (Temporarily breaks the shop page but after pushing the data up we will access the data via FireSotre)

2. Creating a way to push this data to the FireStore DB

In the FireBase.utils;

• Bringing in two new methods

  • collections
  • writeBatch
  • Created a addCollectionandDocuments function
    • This is an async function that will take two params
      • key - this wll be the name of the collection
      • object - this will be the data
    • Obviously uses the batch and collection methods
    • As this could be a large file, it's broken into batches to be sent
    • Await's a batch.commit() in return

In the Products.Context ;

• Imported the new SHOP_DATA

• Imported teh new addCollectionandDocuments

• Imported teh useEffect Hook

• Using the useEffect as I only want this to run literally once, thus commenting out after it's single use

  • Passing in product-categories as the key
  • Passing in SHOP_DATA as the object
  • I realise this is not a normal way to push data but I just need to push some data up there one time and it gets the job done.

• Saving - confirming the useEffect and function worked - it Did!

• Commenting out the useEffect

3. Pulling our data from the FireBase DB ;

In the FireBase.utils;

• Bringing in the querey method

• Created a getCategoriesAndDocuments function

  • definining the collectionRef we want access too
  • using the querey on our collectionRef
  • creating a const for the raw data
  • manipulating the data to return in a format we can work with

In the Products.Context ;

• Imported the new getCategoriesAndDocuments function

• Created a useEffect Hook to fetch the data

  • async function
  • returns the categoryMap
  • Checking the console log if everything worked

Implementing new FireStore Database

---

1. Utilizing the CategoryMap data

• In the ProductsContext

  • renaminng the file from ProductsContext to CategoriesContext
  • updating main.jsx to reflect change
  • updating the shop.component to reflect change (more required)
    
  • renaming some of the exports - makes more sense now;
    • ProductsContext to CategoriesContext
    • ProducstProvider to CategoriesProvider
      
  • updating functions to reflect categoriesMap as an object
  • updating return values to reflect name changes
    
  • updating the useEffect Hook;
    • include setCategoriesMap function using (CategoryMap)

2. Updating the shop.component return structure

   • updated to reflect name change of ProductsContext
   • Created a method to map through data from FireStore db.
   • Used Fragment to wrap the entire return
   • Used Object.keys to turn keys into an array
   • Then mapped over the array to find the title
   • Passed the tile into another fragment
     • created heading for category item
     • copy pasted the old mapping function for each product
       • Updated naming convention to utilise categoriesMap