From 7e1fbb4809221899b2b5cd374870bf0a3b993475 Mon Sep 17 00:00:00 2001
From: Mariam Hammad <142991068+mariamisaeva@users.noreply.github.com>
Date: Thu, 19 Jun 2025 09:17:02 +0200
Subject: [PATCH 1/2] Align sign-up page layout with login

---
 .../(auth)/sign-up/[[...sign-up]]/page.tsx    |  4 +-
 client/src/app/_Components/ProductSection.tsx | 47 ++-------
 .../_components/AllProductsClient.tsx         | 49 +++++++++
 client/src/app/all-products/page.tsx          | 93 +++--------------
 .../[productid]/_components/ProductInfo.tsx   |  2 +-
 .../product-details/[productid]/loading.tsx   | 12 +++
 .../app/product-details/[productid]/page.tsx  | 99 ++++++-------------
 7 files changed, 112 insertions(+), 194 deletions(-)
 create mode 100644 client/src/app/all-products/_components/AllProductsClient.tsx
 create mode 100644 client/src/app/product-details/[productid]/loading.tsx

diff --git a/client/src/app/(auth)/sign-up/[[...sign-up]]/page.tsx b/client/src/app/(auth)/sign-up/[[...sign-up]]/page.tsx
index b0f2789..c1b5764 100644
--- a/client/src/app/(auth)/sign-up/[[...sign-up]]/page.tsx
+++ b/client/src/app/(auth)/sign-up/[[...sign-up]]/page.tsx
@@ -3,8 +3,8 @@ import Image from 'next/image';
 
 export default function Page() {
   return (
-    <section>
-      <div>
+    <section className="bg-white">
+      <div className="lg:grid lg:min-h-screen lg:grid-cols-12">
         <aside className="relative block h-16 lg:order-last lg:col-span-5 lg:h-full xl:col-span-6">
           <Image
             height={1000}
diff --git a/client/src/app/_Components/ProductSection.tsx b/client/src/app/_Components/ProductSection.tsx
index 28c17f3..930e2f1 100644
--- a/client/src/app/_Components/ProductSection.tsx
+++ b/client/src/app/_Components/ProductSection.tsx
@@ -1,42 +1,17 @@
-'use client';
-import React, { useEffect, useState } from 'react';
-import ProductList from './ProductList';
-import { getLatestProducts, StrapiResponse } from '../_utils/productsAPI';
+import React from 'react';
 import { AxiosResponse } from 'axios';
-import { Product } from '../_utils/productsAPI';
-
-export default function ProductSection() {
-  const [productList, setProductList] = useState<Product[]>([]);
-
-  //a state for featured products
-  const [featuredProducts, setFeaturedProducts] = useState<Product[]>([]);
-
-  useEffect(() => {
-    fetchLatestProducts();
-  }, []);
-
-  const fetchLatestProducts = async () => {
-    try {
-      const res: AxiosResponse<StrapiResponse<Product[]>> =
-        await getLatestProducts();
-      //   console.log(res.data.data);
-      //   setProductList(res.data.data);
-      const allProducts = res.data.data; //get all products
-      //select 8 random
-      const randomProducts = [...allProducts]
-        .sort(() => Math.random() - 0.5) //shuffle
-        .slice(0, 4);
+import ProductList from './ProductList';
+import { getLatestProducts, Product, StrapiResponse } from '../_utils/productsAPI';
 
-      setFeaturedProducts(randomProducts);
-      setProductList(allProducts); //store all products
-    } catch (err) {
-      console.error(err);
-    }
-  };
+export default async function ProductSection() {
+  const res: AxiosResponse<StrapiResponse<Product[]>> = await getLatestProducts();
+  const allProducts = res.data.data;
+  const featuredProducts = [...allProducts]
+    .sort(() => Math.random() - 0.5)
+    .slice(0, 4);
 
   return (
     <div className="px-6 sm:px-10 md:px-20 py-10">
-      {/*Featured products section*/}
       <h1
         id="featured-products"
         className="text-2xl md:text-3xl font-bold text-black my-4"
@@ -44,10 +19,6 @@ export default function ProductSection() {
         Featured Products
       </h1>
       <ProductList productList={featuredProducts} />
-
-      {/*All products section*/}
-      {/* <h1 className="text-3xl font-bold text-black my-4">All Products</h1>
-      <ProductList productList={productList} /> */}
     </div>
   );
 }
diff --git a/client/src/app/all-products/_components/AllProductsClient.tsx b/client/src/app/all-products/_components/AllProductsClient.tsx
new file mode 100644
index 0000000..3f3d965
--- /dev/null
+++ b/client/src/app/all-products/_components/AllProductsClient.tsx
@@ -0,0 +1,49 @@
+'use client';
+import React, { useState } from 'react';
+import ProductList from '../../_Components/ProductList';
+import SearchBar from './SearchBar';
+import { Product } from '../../_utils/productsAPI';
+
+interface AllProductsClientProps {
+  products: Product[];
+  categories: string[];
+}
+
+export default function AllProductsClient({ products, categories }: AllProductsClientProps) {
+  const [loadCount, setLoadCount] = useState(2);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState('');
+
+  const filteredProducts = products.filter((product) => {
+    return (
+      product.attributes.title.toLowerCase().includes(searchQuery.toLowerCase()) &&
+      (selectedCategory === '' || product.attributes.category === selectedCategory)
+    );
+  });
+
+  const handleLoadMore = () => {
+    setLoadCount(loadCount + 2);
+  };
+
+  return (
+    <div className="px-10 md:px-20 pt-10">
+      <SearchBar
+        searchQuery={searchQuery}
+        selectedCategory={selectedCategory}
+        setSearchQuery={setSearchQuery}
+        setSelectedCategory={setSelectedCategory}
+        categories={categories}
+      />
+      <h1 className="text-3xl font-bold text-black my-4">All Products</h1>
+      <ProductList productList={filteredProducts.slice(0, loadCount)} />
+      {loadCount < filteredProducts.length && (
+        <button
+          onClick={handleLoadMore}
+          className="w-full p-3 text-gray-500 rounded-lg transition duration-200 bg-transparent hover:shadow-md"
+        >
+          Load More
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/client/src/app/all-products/page.tsx b/client/src/app/all-products/page.tsx
index ba603e8..97642b8 100644
--- a/client/src/app/all-products/page.tsx
+++ b/client/src/app/all-products/page.tsx
@@ -1,87 +1,16 @@
-'use client';
-import React, { useCallback, useEffect, useState } from 'react';
-import ProductList from '../_Components/ProductList'; // Assuming ProductList is a shared component
-import { getLatestProducts, StrapiResponse } from '../_utils/productsAPI';
+import React from 'react';
 import { AxiosResponse } from 'axios';
-import { Product } from '../_utils/productsAPI';
-import SearchBar from './_components/SearchBar';
-
-export default function AllProductsPage() {
-  const [productList, setProductList] = useState<Product[]>([]);
-  const [visibleProducts, setVisibleProducts] = useState<Product[]>([]);
-  const [loadCount, setLoadCount] = useState(2); // Start by loading 10 products at a time
-  const [searchQuery, setSearchQuery] = useState(''); //search input
-  const [selectedCategory, setSelectedCategory] = useState(''); //category
-  const [categories, setCategories] = useState<string[]>([]); //categories I render in dropdown
-
-  useEffect(() => {
-    fetchAllProducts();
-  }, []);
-
-  useEffect(() => {
-    loadMoreProducts();
-  }, [loadCount]);
-
-  const fetchAllProducts = async () => {
-    try {
-      const res: AxiosResponse<StrapiResponse<Product[]>> =
-        await getLatestProducts();
-      setProductList(res.data.data); // Store all products
-      setVisibleProducts(res.data.data.slice(0, loadCount)); // Initially load 10 products
-
-      // get unique categories from products
-      const uniqueCategories = Array.from(
-        new Set(res.data.data.map((product) => product.attributes.category)),
-      );
-      setCategories(uniqueCategories);
-    } catch (err) {
-      console.error(err);
-    }
-  };
-
-  //Filter products based on SearchBar
-  const filteredProducts = productList.filter((product) => {
-    return (
-      product.attributes.title
-        .toLowerCase()
-        .includes(searchQuery.toLowerCase()) &&
-      (selectedCategory === '' ||
-        product.attributes.category === selectedCategory)
-    );
-  });
-
-  const loadMoreProducts = /*useCallback(*/ () => {
-    const newVisibleCount = visibleProducts.length + 2;
-    setVisibleProducts(productList.slice(0, newVisibleCount));
-  }; /*, [visibleProducts, productList])*/
-
-  const handleLoadMore = () => {
-    setLoadCount(loadCount + 2); // Load 10 more products
-  };
+import { getLatestProducts, Product, StrapiResponse } from '../_utils/productsAPI';
+import AllProductsClient from './_components/AllProductsClient';
+
+export default async function AllProductsPage() {
+  const res: AxiosResponse<StrapiResponse<Product[]>> = await getLatestProducts();
+  const productList = res.data.data;
+  const categories = Array.from(
+    new Set(productList.map((product) => product.attributes.category)),
+  );
 
   return (
-    <div className="px-10 md:px-20 pt-10">
-      {/* Search Bar */}
-      <SearchBar
-        searchQuery={searchQuery}
-        selectedCategory={selectedCategory}
-        setSearchQuery={setSearchQuery}
-        setSelectedCategory={setSelectedCategory}
-        categories={categories}
-      />
-
-      {/* All products section */}
-      <h1 className="text-3xl font-bold text-black my-4">All Products</h1>
-      <ProductList productList={filteredProducts.slice(0, loadCount)} />
-
-      {visibleProducts.length < productList.length && (
-        <button
-          onClick={handleLoadMore}
-          className="w-full p-3 text-gray-500 rounded-lg transition duration-200 bg-transparent hover:shadow-md"
-        >
-          Load More
-        </button>
-      )}
-    </div>
+    <AllProductsClient products={productList} categories={categories} />
   );
 }
diff --git a/client/src/app/product-details/[productid]/_components/ProductInfo.tsx b/client/src/app/product-details/[productid]/_components/ProductInfo.tsx
index b249f1c..7712dc8 100644
--- a/client/src/app/product-details/[productid]/_components/ProductInfo.tsx
+++ b/client/src/app/product-details/[productid]/_components/ProductInfo.tsx
@@ -1,4 +1,4 @@
-`use client`;
+'use client';
 import React, { useContext } from 'react';
 import { Product } from '../../../_utils/productsAPI';
 import { HiOutlineShoppingCart } from 'react-icons/hi';
diff --git a/client/src/app/product-details/[productid]/loading.tsx b/client/src/app/product-details/[productid]/loading.tsx
new file mode 100644
index 0000000..bd6e8eb
--- /dev/null
+++ b/client/src/app/product-details/[productid]/loading.tsx
@@ -0,0 +1,12 @@
+import SkeletonProductInfo from './_components/SkeletonProductInfo';
+
+export default function Loading() {
+  return (
+    <div className="text-black px-10 py-8 md:px-28">
+      <div className="grid grid-cols-1 sm:grid-cols-2 mt-10 gap-5">
+        <div className="w-[400px] h-[225px] bg-slate-200 rounded-lg animate-pulse" />
+        <SkeletonProductInfo />
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/app/product-details/[productid]/page.tsx b/client/src/app/product-details/[productid]/page.tsx
index b0f8476..6ed8393 100644
--- a/client/src/app/product-details/[productid]/page.tsx
+++ b/client/src/app/product-details/[productid]/page.tsx
@@ -1,5 +1,4 @@
-'use client';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import {
   getProductById,
   Product,
@@ -11,89 +10,47 @@ import ProductImage from './_components/ProductImage';
 import ProductInfo from './_components/ProductInfo';
 import { AxiosResponse } from 'axios';
 import ProductList from '../../_Components/ProductList';
-import { usePathname } from 'next/navigation';
-import SkeletonProductInfo from './_components/SkeletonProductInfo';
+import { notFound } from 'next/navigation';
 
 type paramsType = {
   productid: string;
 };
 
-function DetailsPage({ params }: { params: paramsType }) {
-  const path: any = usePathname();
-  const [productDetails, setProductDetails] = useState<Product | null>(null);
-
-  const [similarProductList, setSimilarProductList] = useState<
-    Product[] | null
-  >(null);
-
-  //   console.log('Params: ', params);
-  //   let productId = params?.productId;
-  //   productId = Number(productId);
+export default async function DetailsPage({ params }: { params: paramsType }) {
   const productId = Number(params?.productid);
 
-  useEffect(() => {
-    async function fetchProductById() {
-      //   console.log('PRODUCT_ID: ', productId);
-      //   console.log('PARAMS.PRODUCTID: ', params.productid);
-      //   console.log('PARAMS: ', params);
-
-      if (!productId) {
-        console.error('Product ID is undefined!');
-        return;
-      }
+  try {
+    const productRes: AxiosResponse<StrapiResponse<Product>> = await getProductById(productId);
+    const productDetails = productRes.data.data;
 
-      try {
-        const res = await getProductById(productId);
-        // console.log(res.data.data);
-        setProductDetails(res.data.data);
-        // getProductByCategory(res.data.data); //func call
-      } catch (err) {
-        console.error(err);
-      }
+    if (!productDetails) {
+      notFound();
     }
 
-    fetchProductById();
-  }, [productId]);
-
-  useEffect(() => {
-    if (productDetails) {
-      fetchProductByCategory(productDetails);
-    }
-  }, [productDetails]);
+    const categoryRes: AxiosResponse<StrapiResponse<Product[]>> = await getProductByCategory(
+      productDetails.attributes.category,
+    );
+    const similarProductList = categoryRes.data.data;
 
-  async function fetchProductByCategory(product: Product) {
-    try {
-      const res: AxiosResponse<StrapiResponse<Product[]>> =
-        await getProductByCategory(product?.attributes?.category);
-      //   console.log('Here is the Response: ', res?.data?.data);
-      setSimilarProductList(res?.data?.data);
-    } catch (err) {
-      console.error(err);
-    }
-  }
+    const path = `/product-details/${productId}`;
 
-  return (
-    <div className="text-black px-10 py-8 md:px-28">
-      <SmallNavbar path={path} />
+    return (
+      <div className="text-black px-10 py-8 md:px-28">
+        <SmallNavbar path={path} />
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 flex-col mt-10 justify-around gap-5 sm:gap:0">
-        {productDetails ? (
+        <div className="grid grid-cols-1 sm:grid-cols-2 flex-col mt-10 justify-around gap-5 sm:gap:0">
           <ProductImage product={productDetails} />
-        ) : (
-          <SkeletonProductInfo />
-        )}
-        {productDetails && <ProductInfo product={productDetails} />}
-      </div>
-      {/* <h1>Product Id: {params?.productId}</h1> */}
+          <ProductInfo product={productDetails} />
+        </div>
 
-      <div>
-        <h2 className="text-xl font-bold text-center mt-24 mb-5">
-          Similar Products
-        </h2>
-        <ProductList productList={similarProductList || []} />
+        <div>
+          <h2 className="text-xl font-bold text-center mt-24 mb-5">Similar Products</h2>
+          <ProductList productList={similarProductList || []} />
+        </div>
       </div>
-    </div>
-  );
+    );
+  } catch (error) {
+    console.error('Error loading product details', error);
+    notFound();
+  }
 }
-
-export default DetailsPage;

From 43129d0eee4d59309c4811aee1844b7f28949277 Mon Sep 17 00:00:00 2001
From: Mariam Hammad <142991068+mariamisaeva@users.noreply.github.com>
Date: Tue, 24 Jun 2025 16:58:08 +0200
Subject: [PATCH 2/2] cache product fetches and prefetch detail pages

---
 client/src/app/_Components/ProductCard.tsx |  1 +
 client/src/app/_utils/productsAPI.ts       | 49 +++++++++++++---------
 2 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/client/src/app/_Components/ProductCard.tsx b/client/src/app/_Components/ProductCard.tsx
index 3f97fd7..767ea06 100644
--- a/client/src/app/_Components/ProductCard.tsx
+++ b/client/src/app/_Components/ProductCard.tsx
@@ -24,6 +24,7 @@ export default function ProductCard({ product }: ProductCardProps) {
   return (
     <Link
       href={`/product-details/${product?.id}`}
+      prefetch
       className="flex flex-col hover:border hover:shadow-md rounded-lg border-blue-200 bg-white"
     >
       <Image
diff --git a/client/src/app/_utils/productsAPI.ts b/client/src/app/_utils/productsAPI.ts
index c9e5ce6..6443395 100644
--- a/client/src/app/_utils/productsAPI.ts
+++ b/client/src/app/_utils/productsAPI.ts
@@ -1,5 +1,6 @@
 import axiosClient from './axiosInstance';
 import { AxiosResponse } from 'axios';
+import { unstable_cache } from 'next/cache';
 
 export interface Product {
   id: number;
@@ -26,26 +27,36 @@ export interface StrapiResponse<T> {
   meta: any;
 }
 
-const getLatestProducts = (): Promise<
-  AxiosResponse<StrapiResponse<Product[]>>
-> => {
-  return axiosClient.get(
-    '/products?fields[0]=title&fields[1]=price&fields[2]=category&populate[image][fields][0]=url',
-  );
-};
+const getLatestProducts = unstable_cache(
+  async (): Promise<AxiosResponse<StrapiResponse<Product[]>>> => {
+    return axiosClient.get(
+      '/products?fields[0]=title&fields[1]=price&fields[2]=category&populate[image][fields][0]=url',
+    );
+  },
+  ['latest-products'],
+  { revalidate: 60 },
+);
 
-const getProductById = (id: number) => {
-  return axiosClient.get(`/products/${id}?populate=*`);
-  //   return axiosClient.get(
-  //     `/products/${id}?fields[0]=title&fields[1]=price&fields[2]=category&populate[image][fields][0]=url`,
-  //   );
-};
+const getProductById = unstable_cache(
+  async (
+    id: number,
+  ): Promise<AxiosResponse<StrapiResponse<Product>>> => {
+    return axiosClient.get(`/products/${id}?populate=*`);
+  },
+  (id: number) => ['product-by-id', id],
+  { revalidate: 60 },
+);
 
-const getProductByCategory = (category: string) => {
-  return axiosClient.get(
-    // `/products?filters[category][$eq]=${category}&fields[0]=title&fields[1]=price&fields[2]=category&populate[image][fields][0]=url`,
-    `/products?filters[category][$eq]=${category}&populate=*`,
-  );
-};
+const getProductByCategory = unstable_cache(
+  async (
+    category: string,
+  ): Promise<AxiosResponse<StrapiResponse<Product[]>>> => {
+    return axiosClient.get(
+      `/products?filters[category][$eq]=${category}&populate=*`,
+    );
+  },
+  (category: string) => ['products-category', category],
+  { revalidate: 60 },
+);
 
 export { getLatestProducts, getProductById, getProductByCategory };