refactor: remove random key prop generation (#341)

bryanlundberg · Sep 8, 2024 · 3b92973 · 3b92973
1 parent d53ff95
commit 3b92973
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 50 deletions.
diff --git a/src/app/[locale]/cubes/page.tsx b/src/app/[locale]/cubes/page.tsx
@@ -23,7 +23,7 @@ export default function CubesPage() {
           <OptionsContainer>
             <InputText
               placeholder={t("filter-cubes")}
-              onChange={handleSearchFilter}
+              onChangeCallback={handleSearchFilter}
               className="border light:bg-neutral-50 light:border-neutral-200 light:focus:bg-white dark:bg-zinc-950 dark:border-zinc-800 dark:focus:bg-zinc-900"
             />
             <Button

diff --git a/src/app/[locale]/solves/page.tsx b/src/app/[locale]/solves/page.tsx
@@ -90,7 +90,7 @@ export default function SolvesPage() {
             <InputText
               className="border light:bg-neutral-50 light:border-neutral-200 light:focus:bg-white dark:bg-zinc-950 dark:border-zinc-800 dark:focus:bg-zinc-900"
               placeholder={t("SolvesPage.search-by-time")}
-              onChange={(e) => {
+              onChangeCallback={(e) => {
                 handleSearch(e);
               }}
               id="search"

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
@@ -66,7 +66,7 @@ export default function Select() {
                 if (cube.favorite) {
                   return (
                     <Option
-                      key={genId()}
+                      key={cube.id}
                       name={cube.name}
                       category={cube.category}
                       cubeId={cube.id}
@@ -79,7 +79,7 @@ export default function Select() {
               {cubes?.map((cube) => {
                 return (
                   <Option
-                    key={genId()}
+                    key={cube.id}
                     name={cube.name}
                     category={cube.category}
                     cubeId={cube.id}
@@ -101,7 +101,7 @@ export function MiniatureIcon({ category }: { category: Categories }) {
     if (option.name === category) {
       return (
         <Image
-          key={genId()}
+          key={option.displayId}
           src={option.src}
           alt={option.name}
           width={24}

diff --git a/src/components/cubes/CubesSection.tsx b/src/components/cubes/CubesSection.tsx
@@ -1,21 +1,20 @@
 import { Cube } from "@/interfaces/Cube";
 import TableHeader from "@/components/cubes/TableHeader";
 import TableRow from "@/components/cubes/TableRow";
-import genId from "@/lib/genId";
 
-interface CubesSection {
+interface CubesSectionProps {
   filterCubes: Cube[];
 }
 
-export function CubesSection({ filterCubes }: CubesSection) {
+export function CubesSection({ filterCubes }: CubesSectionProps) {
   return (
     <>
       <div className="h-full overflow-auto grow">
         <div className="table w-full text-sm">
           <TableHeader />
           <div className="table-row-group h-10 text-sm">
             {filterCubes.map((cube) => (
-              <TableRow key={genId()} cube={cube} />
+              <TableRow key={cube.id} cube={cube} />
             ))}
           </div>
         </div>

diff --git a/src/components/cubes/ModalCreate.tsx b/src/components/cubes/ModalCreate.tsx
@@ -61,9 +61,8 @@ export default function ModalCreate() {
               <div className="flex flex-col w-full">
                 <InputText
                   placeholder={t("Cubes-modal.placeholder")}
-                  onChange={handleWriteCubeName}
+                  onChangeCallback={handleWriteCubeName}
                   value={cubeName}
-                  focus={true}
                   className={`bg-neutral-100 focus:bg-neutral-50 text-neutral-900 border border-neutral-300`}
                 />
                 {error ? (
@@ -94,7 +93,7 @@ export default function ModalCreate() {
               {cubeCollection.map((category) => {
                 return (
                   <CheckboxImage
-                    key={genId()}
+                    key={category.id}
                     src={category.src}
                     alt={category.name}
                     id={category.id}

diff --git a/src/components/cubes/TableRow.tsx b/src/components/cubes/TableRow.tsx
@@ -25,7 +25,7 @@ export default function TableRow({ cube }: { cube: Cube }) {
   const { setEditingCube, setModalOpen, setCubeName, setSelectedCategory } =
     useCubesModalStore();
   const setFavorite = async (cube: Cube) => {
-    const updatedCube = await saveCube({
+    await saveCube({
       ...cube,
       favorite: !cube.favorite,
     });
@@ -58,7 +58,7 @@ export default function TableRow({ cube }: { cube: Cube }) {
           <BookmarkFav
             cube={cube}
             isChecked={cube.favorite}
-            setFavorite={setFavorite}
+            setFavorite={() => setFavorite(cube)}
           />
         </div>
         <div className="table-cell text-left align-middle cursor-pointer">
@@ -100,7 +100,7 @@ export default function TableRow({ cube }: { cube: Cube }) {
               setModalOpen(true);
             }}
           >
-            <EllipsisHorizontalIcon className="w-6 h-6" />
+            <EllipsisHorizontalIcon className="w-4 h-4" />
           </button>
         </div>
       </div>

diff --git a/src/components/input-text/InputText.tsx b/src/components/input-text/InputText.tsx
@@ -1,39 +1,40 @@
+"use client";
 import { useState } from "react";
+import { twMerge } from "tailwind-merge";
 
-interface InputTextProps {
-  placeholder: string;
+interface InputTextProps extends React.HTMLAttributes<HTMLInputElement> {
   value?: string;
-  focus?: boolean;
   className?: string;
-  onChange: (value: string) => void;
-  id?: string;
+  onChangeCallback: (value: string) => void;
 }
 
 export default function InputText({
-  placeholder,
   value = "",
-  focus = false,
   className,
+  onChangeCallback,
   onChange,
-  id,
+  ...rest
 }: InputTextProps) {
   const [valueText, setValueText] = useState(value);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
     setValueText(newValue);
-    onChange(newValue);
+    onChangeCallback(newValue);
   };
 
   return (
     <input
+      {...rest}
       type="text"
-      className={`appearance-none outline-none transition duration-300 w-full h-9 px-3 text-md rounded-md shadow-sm ${className} light:hover:border-neutral-400 light:focus:border-neutral-400 dark:hover:border-zinc-500 dark:focus:border-zinc-500`}
+      className={twMerge(
+        "appearance-none outline-none transition duration-300 w-full h-9 px-3 text-md rounded-md shadow-sm light:hover:border-neutral-400 light:focus:border-neutral-400 dark:hover:border-zinc-500 dark:focus:border-zinc-500",
+        className
+      )}
       value={valueText}
-      placeholder={placeholder}
-      autoFocus={focus}
-      onChange={handleChange}
-      id={id}
+      onChange={(e) => {
+        handleChange(e);
+      }}
       autoComplete="off"
     />
   );

diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx
@@ -49,7 +49,7 @@ export default function Select({
         <SelectOptionList isOpen={isOpen}>
           {list.map((item: Item) => (
             <SelectOption
-              key={genId()}
+              key={item.id}
               label={item.name}
               selected={selectedValue}
               onSelect={() => handleOptionSelect(item)}

diff --git a/src/hooks/useModalCube.ts b/src/hooks/useModalCube.ts
@@ -1,3 +1,4 @@
+"use client";
 import { useState } from "react";
 import { Categories } from "@/interfaces/Categories";
 import { useCubesModalStore } from "@/store/CubesModalStore";
@@ -103,7 +104,7 @@ export default function useModalCube() {
       window.localStorage.setItem("settings", JSON.stringify(currentSettings));
     }
 
-    const updatedCube = await saveCube({
+    await saveCube({
       ...editingCube,
       name: name.trim(),
       category: category,

diff --git a/src/hooks/useSolveShare.ts b/src/hooks/useSolveShare.ts
@@ -5,7 +5,7 @@ import useSolvesPage from "./useSolvesPage";
 export default function useSolveShare() {
   const { displaySolves } = useSolvesPage();
 
-  // retreiving last n solves
+  // retrieving last n solves
   const last5Solves = displaySolves?.slice(0, 5) ?? [];
   const last12Solves = displaySolves?.slice(0, 12) ?? [];
 
@@ -40,27 +40,31 @@ export default function useSolveShare() {
   }
 
   // formatting each solves
-  const formattedLast5Solves = last5Solves.map((solve,index) => {
-    const time = `${formatTime(solve.time).split(".")[0]}.${
-      formatTime(solve.time).split(".")[1]
-    }`;
-    const scramble = `${solve.scramble}`;
+  const formattedLast5Solves = last5Solves
+    .map((solve, index) => {
+      const time = `${formatTime(solve.time).split(".")[0]}.${
+        formatTime(solve.time).split(".")[1]
+      }`;
+      const scramble = `${solve.scramble}`;
 
-    if (solve.time === maxTimeAo5 || solve.time === minTimeAo5) {
-      return `${Array(4).join(" ")}${index + 1}. (${time}) ${scramble}`;
-    } else return `${Array(4).join(" ")}${index + 1}. ${time} ${scramble}`;
-  }).join('\n');
+      if (solve.time === maxTimeAo5 || solve.time === minTimeAo5) {
+        return `${Array(4).join(" ")}${index + 1}. (${time}) ${scramble}`;
+      } else return `${Array(4).join(" ")}${index + 1}. ${time} ${scramble}`;
+    })
+    .join("\n");
 
-  const formattedLast12Solves = last12Solves.map((solve , index) => {
-    const time = `${formatTime(solve.time).split(".")[0]}.${
-      formatTime(solve.time).split(".")[1]
-    }`;
-    const scramble = `${solve.scramble}`;
+  const formattedLast12Solves = last12Solves
+    .map((solve, index) => {
+      const time = `${formatTime(solve.time).split(".")[0]}.${
+        formatTime(solve.time).split(".")[1]
+      }`;
+      const scramble = `${solve.scramble}`;
 
-    if (solve.time === maxTimeAo12 || solve.time === minTimeAo12) {
-      return `${Array(4).join(" ")}${index + 1}. (${time}) ${scramble}`;
-    } else return `${Array(4).join(" ")}${index + 1}. ${time} ${scramble}`;
-  }).join('\n');
+      if (solve.time === maxTimeAo12 || solve.time === minTimeAo12) {
+        return `${Array(4).join(" ")}${index + 1}. (${time}) ${scramble}`;
+      } else return `${Array(4).join(" ")}${index + 1}. ${time} ${scramble}`;
+    })
+    .join("\n");
 
   return {
     formatedAo5,