feat: add search rendering results

src/app/solves/page.tsx

@@ -22,6 +22,7 @@ export default function SolvesPage() {
     handleMoveAll,
     handleTrashAll,
     handleSearch,
+    displaySolves,
   } = useSolvesPage();
   const { lang } = useSettingsModalStore();
 
@@ -41,6 +42,7 @@ export default function SolvesPage() {
               onChange={(e) => {
                 handleSearch(e);
               }}
+              id="search"
             />
             <ButtonsSection currentTab={currentTab}>
               <Button
@@ -60,7 +62,7 @@ export default function SolvesPage() {
             </ButtonsSection>
           </div>
         </SolveFilters>
-        <SolvesArea currentTab={currentTab} />
+        <SolvesArea displaySolves={displaySolves} />
         <ModalSolve />
       </OverallContainer>
     </>

src/components/input-text/InputText.tsx

@@ -6,6 +6,7 @@ interface InputTextProps {
   focus?: boolean;
   className?: string;
   onChange: (value: string) => void;
+  id?: string;
 }
 
 export default function InputText({
@@ -14,6 +15,7 @@ export default function InputText({
   focus = false,
   className,
   onChange,
+  id,
 }: InputTextProps) {
   const [valueText, setValueText] = useState(value);
 
@@ -31,6 +33,7 @@ export default function InputText({
       placeholder={placeholder}
       autoFocus={focus}
       onChange={handleChange}
+      id={id}
     />
   );
 }

src/components/solves/SolvesArea.tsx

@@ -1,4 +1,3 @@
-import { SolveTab } from "@/interfaces/types/SolveTabs";
 import SingleSolveItem from "@/components/solves/SingleSolveItem";
 import { useTimerStore } from "@/store/timerStore";
 import EmptySolves from "@/components/solves/EmptySolves";
@@ -8,10 +7,10 @@ import { Solve } from "@/interfaces/Solve";
 import genId from "@/lib/genId";
 
 interface SolvesArea {
-  currentTab: SolveTab;
+  displaySolves: Solve[] | null;
 }
 
-export function SolvesArea({ currentTab }: SolvesArea) {
+export function SolvesArea({ displaySolves }: SolvesArea) {
   const { selectedCube } = useTimerStore();
   const { lang } = useSettingsModalStore();
 
@@ -24,12 +23,7 @@ export function SolvesArea({ currentTab }: SolvesArea) {
     );
   }
 
-  const selectedSolves =
-    currentTab === "Session"
-      ? selectedCube?.solves.session
-      : selectedCube?.solves.all;
-
-  if (!selectedSolves || selectedSolves.length === 0) {
+  if (!displaySolves || displaySolves.length === 0) {
     return (
       <EmptySolves
         message={translation.solves["no-solves"][lang]}
@@ -41,7 +35,7 @@ export function SolvesArea({ currentTab }: SolvesArea) {
   return (
     <>
       <div className="grid w-full h-full grid-cols-3 gap-3 px-3 py-3 overflow-auto sm:grid-cols-4 md:grid-cols-5 xl:grid-cols-6">
-        {selectedSolves.map((solve: Solve) => (
+        {displaySolves.map((solve: Solve) => (
           <SingleSolveItem key={genId()} solve={solve} />
         ))}
       </div>

src/hooks/useSolvesPage.ts

@@ -2,15 +2,16 @@ import { Solve } from "@/interfaces/Solve";
 import { SolveTab } from "@/interfaces/types/SolveTabs";
 import deleteSession from "@/lib/deleteSession";
 import findCube from "@/lib/findCube";
-import formatTime from "@/lib/formatTime";
+import searchQuery from "@/lib/searchQuery";
 import updateSessions from "@/lib/updateSessions";
 import { useTimerStore } from "@/store/timerStore";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 export default function useSolvesPage() {
   const [currentTab, setCurrentTab] = useState<SolveTab>("Session");
   const { selectedCube, setCubes, setSelectedCube, cubes } = useTimerStore();
   const [displaySolves, setDisplaySolves] = useState<Solve[] | null>(null);
+  const searchBox = useRef<any>(null);
 
   const handleTabClick = (clickedTab: SolveTab) => {
     setCurrentTab(clickedTab);
@@ -39,22 +40,36 @@ export default function useSolvesPage() {
   };
 
   const handleSearch = (query: string) => {
-    if (!cubes) return;
-    if (!selectedCube) return;
+    if (!selectedCube) return null;
+    const solves = searchQuery({ query, currentTab, cubeId: selectedCube.id });
+    setDisplaySolves(solves);
+  };
+
+  useEffect(() => {
+    searchBox.current = document.querySelector("#search");
+
+    let solvesToDisplay = null;
 
-    const solves = selectedCube.solves.session.filter((u) => {
-      console.log(
-        formatTime(u.time),
-        query,
-        formatTime(u.time).includes(query)
-      );
-      if (formatTime(u.time).includes(query)) {
-        return u;
+    if (selectedCube) {
+      if (currentTab === "All") {
+        solvesToDisplay = selectedCube.solves.all;
+      } else if (currentTab === "Session") {
+        solvesToDisplay = selectedCube.solves.session;
       }
-    });
 
-    return solves;
-  };
+      const results = searchQuery({
+        query: searchBox.current.value,
+        currentTab,
+        cubeId: selectedCube.id,
+      });
+
+      if (results) {
+        solvesToDisplay = results;
+      }
+
+      setDisplaySolves(solvesToDisplay);
+    }
+  }, [currentTab, selectedCube, cubes]);
 
   return {
     currentTab,
@@ -63,5 +78,6 @@ export default function useSolvesPage() {
     handleMoveAll,
     handleTrashAll,
     handleSearch,
+    displaySolves,
   };
 }

src/lib/searchQuery.ts

@@ -0,0 +1,40 @@
+import { Solve } from "@/interfaces/Solve";
+import loadCubes from "./loadCubes";
+import formatTime from "./formatTime";
+
+export default function searchQuery({
+  query,
+  cubeId,
+  currentTab,
+}: {
+  query: string;
+  cubeId: string | null;
+  currentTab: "Session" | "All";
+}): Solve[] | null {
+  if (!cubeId) return null;
+
+  const cubeDB = loadCubes();
+
+  const selectedCube = cubeDB.filter((u) => u.id === cubeId);
+
+  if (!selectedCube) return null;
+
+  let solves = null;
+
+  if (currentTab === "Session") {
+    solves = selectedCube[0].solves.session.filter((u) => {
+      if (formatTime(u.time).includes(query)) {
+        return u;
+      }
+    });
+  }
+
+  if (currentTab === "All") {
+    solves = selectedCube[0].solves.all.filter((u) => {
+      if (formatTime(u.time).includes(query)) {
+        return u;
+      }
+    });
+  }
+  return solves;
+}