Merge pull request #1 from 9AMTech/reorganize-useEffect

Reorganized Code

src/Context.tsx

@@ -1,12 +1,15 @@
 import { createContext, SetStateAction, Dispatch } from 'react';
 import { CartData } from './RouteSwitcher';
+import { FakeStoreData } from './components/Layout/Layout';
 
 interface ICartContext {
 	cart: CartData[],
 	setCart: Dispatch<SetStateAction<CartData[]>>,
 }
 
+export const ProductContext = createContext<FakeStoreData[]>([]);
+
 export const CartContext = createContext<ICartContext>({
 	cart: [],
-	setCart: () => {},
+	setCart: () => { },
 });

src/RouteSwitcher.tsx

@@ -1,12 +1,13 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import { CartContext } from "./Context";
-import { useState } from 'react';
+import { CartContext, ProductContext } from "./Context";
+import { useState, useEffect, createContext } from 'react';
 import IndexPage from "./pages";
 import ProductsPage from "./pages/products";
 import ProductPage from "./pages/products/[id]";
 import AboutPage from "./pages/about";
 import CartPage from "./pages/cart";
 import ScrollToTop from "./components/ScrollToTop";
+import { FakeStoreData } from "./components/Layout/Layout";
 
 export interface CartData {
 	id: number;
@@ -18,19 +19,44 @@ export interface CartData {
 }
 const RouteSwitch = () => {
 	const [cart, setCart] = useState<CartData[]>([]);
+	const [products, setProducts] = useState<FakeStoreData[]>([]);
+
+	useEffect(() => {
+		const uri = "https://fakestoreapi.com/products/";
+		let isCancelled = false;
+		fetch(uri)
+			.then((res) => res.json() as Promise<FakeStoreData[]>)
+			.then((json) => {
+				if (!isCancelled) {
+					const parsedProducts: FakeStoreData[] = [];
+					json.map((product) => {
+						if (product.category !== "electronics") {
+							parsedProducts.push(product);
+						}
+					}
+					);
+					setProducts(parsedProducts);
+				}
+				return () => {
+					isCancelled = true;
+				};
+			});
+	}, []);
 
 	return (
 		<CartContext.Provider value={{ cart, setCart }}>
-			<Router basename="/posh-landing/">
-				<ScrollToTop />
-				<Routes>
-					<Route path="/" element={<IndexPage />} />
-					<Route path="/products" element={<ProductsPage />} />
-					<Route path="/products/:id" element={<ProductPage />} />
-					<Route path="/about" element={<AboutPage />} />
-					<Route path="/cart" element={<CartPage />} />
-				</Routes>
-			</Router>
+			<ProductContext.Provider value={products}>
+				<Router basename="/posh-landing/">
+					<ScrollToTop />
+					<Routes>
+						<Route path="/" element={<IndexPage />} />
+						<Route path="/products" element={<ProductsPage />} />
+						<Route path="/products/:id" element={<ProductPage />} />
+						<Route path="/about" element={<AboutPage />} />
+						<Route path="/cart" element={<CartPage />} />
+					</Routes>
+				</Router>
+			</ProductContext.Provider>
 		</CartContext.Provider>
 
 	);

src/main.tsx

@@ -3,19 +3,10 @@ import ReactDOM from 'react-dom/client'
 import RouteSwitch from './RouteSwitcher';
 import './index.css'
 
-export interface CartData {
-	id: number;
-	name: string;
-	price: number;
-	quantity: number;
-	image: string;
-}
-
-
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
 
 	<React.StrictMode>
-			<RouteSwitch/>
+		<RouteSwitch />
 	</React.StrictMode>,
 )
 

src/pages/products.tsx

@@ -1,34 +1,14 @@
-import React, { useState, useEffect } from "react";
+import React, { useContext } from "react";
 import Layout from "../components/Layout/Layout";
 import Card from "../components/Product/Card";
 import { formatPrice } from "../components/functions";
-import { FakeStoreData } from "../components/Layout/Layout";
+import { ProductContext } from "../Context";
 
 
 const ProductsPage: React.FC = () => {
-	const [products, setProducts] = useState<FakeStoreData[]>([]);
 
-	useEffect(() => {
-		const uri = "https://fakestoreapi.com/products/";
-		let isCancelled = false;
-		fetch(uri)
-			.then((res) => res.json() as Promise<FakeStoreData[]>)
-			.then((json) => {
-				if (!isCancelled) {
-					const parsedProducts: FakeStoreData[] = [];
-					json.map((product) => {
-						if (product.category !== "electronics") {
-							parsedProducts.push(product);
-						}
-					}
-					);
-					setProducts(parsedProducts);
-				}
-				return () => {
-					isCancelled = true;
-				};
-			});
-	}, []);
+	const products = useContext(ProductContext);
+
 	return (
 		<Layout>
 			<section className="grid grid-cols-1 w-full max-w-sm gap-y-12 mx-auto my-24