saving progress

src/App.css

@@ -10,16 +10,22 @@
 
   #findings-section {
     @apply mt-4 max-h-96 overflow-scroll;
-    div {
-      @apply mb-8 border rounded-lg h-16;
-      @apply flex flex-col justify-center;
+    >div {
+      @apply mb-3 border rounded-lg cursor-pointer h-32;
+     
     }
-    div:last-child {
+    >div:last-child {
       @apply mb-0
     }
   }
 }
 
+.tran {
+  -webkit-transition: height 1.60s ease;
+  -moz-transition: height 1.25s ease;
+       transition: height 1.25s ease;
+}
+
 #root {
   max-width: 1280px;
   margin: 0 auto;

src/App.tsx

@@ -3,7 +3,8 @@ import "./App.css";
 import useSpeechToText from "react-hook-speech-to-text";
 import micIcon from "./assets/1608550_microphone_icon.png";
 import useFetch from "./hooks/useFetch";
-import { useEffect } from "react";
+import ProductListItem from "./components/productListItem";
+import { useEffect, useState } from "react";
 
 function App() {
   const {
@@ -26,6 +27,8 @@ function App() {
     response,
   } = useFetch(`${import.meta.env.VITE_API_ENDPOINT}/todos`);
 
+  const [currentProductId, setCurrentProductId] = useState<null | number>(null);
+
   useEffect(() => {
     if (results.length > 0) {
       (async () => {
@@ -79,7 +82,19 @@ function App() {
         {!loading && !responseError && response && response.length > 0 && (
           <div id="findings-section">
             {response.map((content) => {
-              return <div>{content.title}</div>;
+              return (
+                <ProductListItem
+                  expandCallback={(pid: number) => setCurrentProductId(pid)}
+                  current={currentProductId}
+                  category={content.category}
+                  price={content.price}
+                  rating={content.rating}
+                  id={content.id}
+                  title={content.title}
+                  description={content.description}
+                  imgLink={content.image}
+                ></ProductListItem>
+              );
             })}
           </div>
         )}

src/components/productListItem/index.tsx

+import React, { useEffect, useRef } from "react";
+
+const shouldUpdate = (prevProps, nextProps) => {
+  // Custom comparison logic based on prevProps and nextProps
+  // Return true if props are equal, return false otherwise
+  return !prevProps.id === nextProps.id;
+};
+
+const ProductListItem = React.memo((props: {
+  id: number;
+  title: string;
+  description: string;
+  imgLink: string;
+  current: number | null;
+  category: string;
+  price: number;
+  rating: {
+    rate: number;
+    count: number;
+  };
+  expandCallback(id: number): void;
+}) => {
+  const currentElement = useRef(null);
+
+  useEffect(()=>{
+    debugger
+    const newHeight = (props.current && props.current == props.id) ? `auto` : `8rem`;
+    if(currentElement.current) currentElement.current.setAttribute("style",`height:${newHeight}`);
+  }, [props])
+
+  return (
+    <div
+      id={props.id.toString()}
+      className={`flex tran`}
+      onClick={() => {
+        // const newHeight = (props.current && props.current == props.id) ? `auto` : `8rem`;
+        // if(currentElement.current) currentElement.current.setAttribute("style",`height:${newHeight}`);
+        props.expandCallback(props.id);
+      }}
+      ref={currentElement}
+    >
+      <div className="mt-auto mb-auto ml-2 mr-2">
+        <div className="w-16">
+          <img src={props.imgLink}></img>
+        </div>
+      </div>
+      <div className="flex flex-col p-2 pb-3">
+        <div className="text-left font-semibold" id="header">
+          <span>{props.title}</span>
+        </div>
+        <div id="content" className="overflow-scroll text-left text-sm">
+          <span>{props.description}</span>
+          {props.current && props.current == props.id && (
+            <div className="flex flex-col">
+              <div>
+                <span className="font-semibold">Category: </span>{" "}
+                <span>{props.category}</span>{" "}
+              </div>
+              <div>
+                <span className="font-semibold">Price: </span>{" "}
+                <span>{props.price}</span>
+              </div>
+              <div>
+                <span className="font-semibold">Rating: </span>{" "}
+                <span>{props.rating.rate}</span>
+              </div>
+              <div>
+                <span className="font-semibold text-blue-web">
+                  Click here to get the location
+                </span>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}, shouldUpdate);
+
+export default ProductListItem;