React - Context API w/ promise from Firebase - reactjs

Question

First I want to say a) I am new to react, and b) I spent about 8hrs trying to dig around in stackoverflow for a fix, trying many different methods. I am stuck. Many thanks for your time.
The objective here is to wait for the request from firebase to create the value 'products', before rendering the page. What keeps happening is products gets loaded as null.
Here is my setup:
ProductContext.js
import React, {createContext, useState, useEffect} from 'react';
import { dummyProducts } from '../services/dummy';
import {collection, onSnapshot} from "firebase/firestore";
import {db} from "../firebase";
export const ProductsContext = createContext();
export function getProductData() {
const myArray =[];
return new Promise(function (resolve, reject) {
const querySnapshot = onSnapshot(collection(db, 'products'), (snapshot) => {
snapshot.forEach(doc => {
let productData = doc.data();
myArray.push(productData)
})
})
resolve(myArray);
});
}
const ProductsContextProvider = ({children}) => {
const [products, setProducts] = useState([]);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
let didCancel = false;
async function fetchMyAPI() {
let results = await getProductData();
console.log(results) // Outputs array with results
setProducts(results)
}
fetchMyAPI();
return () => { didCancel = true; }; // Remember if we start fetching something else
}, []);
return (
<ProductsContext.Provider value={{products}}>
{ children }
</ProductsContext.Provider>
);
}
export default ProductsContextProvider;
UseProducts.js
// eslint-disable-next-line
import React, { useContext } from 'react';
import { ProductsContext } from '../contexts/ProductsContext';
export const useProducts = () => {
const ctx = useContext(ProductsContext)
return {
...ctx
}
}
ProductsGrid.js
import React from 'react';
import ProductItem from './ProductItem';
import styles from './ProductsGrid.module.scss';
import { useProducts } from '../../hooks/useProducts';
const ProductsGrid = () => {
const {products} = useProducts();
console.log(products.length) // Outputs zero
console.log(products) // Outputs array with 1 object (correct)
return (
<div className={styles.p__container}>
<div className="row">
<div className="col-sm-8">
<div className="py-3">
{products.length} Products
</div>
</div>
<div className="col-sm-4">
</div>
</div>
<div className={styles.p__grid}>
{
products.map(product => (
<ProductItem key={product.id} product={product}/>
))
}
</div>
<div className={styles.p__footer}>
</div>
</div>
);
}
export default ProductsGrid;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './routes';
import * as serviceWorker from './serviceWorker';
import { HelmetProvider } from 'react-helmet-async';
import ProductsContextProvider from './contexts/ProductsContext';
import CartContextProvider from './contexts/CartContext';
ReactDOM.render(
<HelmetProvider>
<ProductsContextProvider>
<CartContextProvider>
<Routes />
</CartContextProvider>
</ProductsContextProvider>
</HelmetProvider>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

Answer 1

Got it working.
I changed
ProductsContext.js
import React, { createContext, useState } from 'react';
// import { dummyProducts } from '../services/dummy';
export const ProductsContext = createContext();
const ProductsContextProvider = ({children}) => {
const [products, setProducts] = useState([]);
return (
<ProductsContext.Provider value={{products, setProducts}} >
{ children }
</ProductsContext.Provider>
);
}
export default ProductsContextProvider;
And changed
ProductsGrid.js to:
import React, { useEffect, useState, createContext } from 'react';
import ProductItem from './ProductItem';
import styles from './ProductsGrid.module.scss';
import { useProducts } from '../../hooks/useProducts'
import {collection, onSnapshot, where} from "firebase/firestore";
import {db} from "../../firebase";
export const ProductsContext = createContext();
async function getProductData() {
const myArray =[];
const promise = new Promise(resolve =>
onSnapshot(collection(db, 'products'), (snapshot) => {
snapshot.forEach(doc => {
let productData = doc.data();
myArray.push(productData)
})
resolve(myArray)
}));
const productData = await promise;
//console.log(productData);
return productData;
}
const ProductsGrid = () => {
const { products, setProducts } = useProducts()
const [loading, setLoading]= useState(false);
const getProducts = async ()=>{
setLoading(true)
const newText = await getProductData();
setProducts(newText)
setLoading(false)
}
useEffect(()=> {
getProducts()
},[])
return (
loading ? (
<div className={styles.p__container}>
<div className="row">
<div className="col-sm-8"> <h4>Loading...</h4></div></div></div>) : (
<div className={styles.p__container}>
<div className="row">
<div className="col-sm-8">
<div className="py-3">
{products.length} Products
</div>
</div>
<div className="col-sm-4">
</div>
</div>
<div className={styles.p__grid}>
{
products.map(product => (
<ProductItem key={product.id} product={product}/>
))
}
</div>
<div className={styles.p__footer}>
</div>
</div>
));
}
export default ProductsGrid;
Notable changes are:
I moved the fetch request to ProductsGrid
I changed how the getProductData() function was structured. I suspect it was the 'return' on the new Promise which wasn't giving the desired effect.
I added Loading state