refactor(Options.tsx): remove the states and replace them with a single one that stores an object

Author: 0l1v3rr

README.md

@@ -54,7 +54,7 @@ None of the fields are required. Every query parameter has a default value displ
 | Parameter | Example | Default value | Description|
 |---------- |---------|---------------|------------|
 | **title** | `?title=My%20Title` | My Tech Stack | The title of the card. %20 can be used as a space. |
-| **theme** | `?theme=github_dark` | github | The theme of the card. You can browse between the themes [here](#-themes). |
+| **theme** | `?theme=github_dark` | github | The theme of the card. You can browse between the themes [here](docs/THEMES.md). |
 | **align** | `?align=center` | left | The alignment of the badges. (`left`, `center`, `right`) |
 | **showBorder** | `?showBorder=false` | true | Display the border around the card or not. (`true`, `false`) |
 | **borderRadius** | `?borderRadius=12.5` | 4.5 | Value between 0 and 50. |

client/src/components/input/LineInput.tsx

@@ -1,52 +1,38 @@
 import { FC, useState } from "react";
-import { Badge, Line } from "../../types/line";
+import { Badge, Line } from "../../types/card";
 import { AiOutlinePlus } from "react-icons/ai";
 import BlurOverlay from "../popups/BlurOverlay";
 import LinePopup from "../popups/LinePopup";
 import HoverText from "../hover/HoverText";
 import { AiOutlineQuestionCircle } from "react-icons/ai";
 
 interface InputProps {
-  line: string;
+  line: Line;
   updateLine: (line: Line) => void;
   className?: string;
 }
 
 const LineInput: FC<InputProps> = (props) => {
-  const [badges, setBadges] = useState<Badge[]>([]);
   const [isPopupOpen, setIsPopupOpen] = useState<boolean>(false);
 
   const addBadge = (badge: Badge) => {
     props.updateLine({
-      badges: [...badges, badge],
-      lineNumber: props.line,
+      badges: [...props.line.badges, badge],
+      lineNumber: props.line.lineNumber,
     });
-
-    setBadges((prev) => [...prev, badge]);
   };
 
   const removeBadge = (badge: Badge) => {
-    setBadges((prev) =>
-      [...prev].filter(
-        (b) =>
-          !(
-            b.color === badge.color &&
-            b.iconName === badge.iconName &&
-            b.label === badge.label
-          )
-      )
-    );
-
     props.updateLine({
-      badges: [...badges].filter(
+      lineNumber: props.line.lineNumber,
+      badges: [...props.line.badges].filter(
         (b) =>
           !(
             b.color === badge.color &&
             b.iconName === badge.iconName &&
             b.label === badge.label
           )
       ),
-      lineNumber: props.line,
     });
   };
 
@@ -60,12 +46,12 @@ const LineInput: FC<InputProps> = (props) => {
       <LinePopup
         addBadge={addBadge}
         isActive={isPopupOpen}
-        lineNumber={props.line}
+        lineNumber={props.line.lineNumber}
         closePopup={() => setIsPopupOpen(false)}
       />
 
       <span className="text-sm text-gh-text-secondary font-semibold w-fit">
-        Line {props.line}
+        Line {props.line.lineNumber}
       </span>
 
       <div
@@ -76,7 +62,9 @@ const LineInput: FC<InputProps> = (props) => {
           className="flex items-center justify-between border-b 
             border-solid border-gh-border px-3 py-2 gap-2"
         >
-          <span className="font-semibold">Badges: {badges.length}</span>
+          <span className="font-semibold">
+            Badges: {props.line.badges.length}
+          </span>
 
           <HoverText label="Click the badge to remove it" className="ml-auto">
             <div
@@ -100,15 +88,15 @@ const LineInput: FC<InputProps> = (props) => {
           </HoverText>
         </div>
 
-        {badges.length < 1 && (
+        {props.line.badges.length < 1 && (
           <div className="text-gh-text-secondary italic px-4 py-2">
             There are no badges selected. 🥱
           </div>
         )}
 
-        {badges.length > 0 && (
+        {props.line.badges.length > 0 && (
           <div className="flex items-center gap-3 p-2 overflow-hidden flex-wrap">
-            {badges.map((badge) => {
+            {props.line.badges.map((badge) => {
               return (
                 <div
                   key={`${badge.iconName}-${Math.random()}`}

client/src/components/popups/LinePopup.tsx

@@ -1,5 +1,5 @@
 import { FC, useState } from "react";
-import { Badge } from "../../types/line";
+import { Badge } from "../../types/card";
 import GreenButton from "../buttons/GreenButton";
 import { FiSave } from "react-icons/fi";
 import SecondaryButton from "../buttons/SecondaryButton";

client/src/pages/Options.tsx

@@ -3,9 +3,9 @@ import { VscSettings } from "react-icons/vsc";
 import { IoHammerOutline } from "react-icons/io5";
 import SelectInput from "../components/input/SelectInput";
 import GreenButton from "../components/buttons/GreenButton";
-import { FC, useCallback, useEffect, useState } from "react";
+import { FC, useCallback, useState } from "react";
 import LineInput from "../components/input/LineInput";
-import { Line } from "../types/line";
+import { Card, Line, newCard } from "../types/card";
 import { generateLink } from "../utils/generate";
 import { useFetchThemes } from "../hooks/useFetchThemes";
 import NumberInput from "../components/input/NumberInput";
@@ -19,66 +19,43 @@ interface OptionsProps {
 
 const Options: FC<OptionsProps> = (props) => {
   const themes = useFetchThemes();
-  const [lineChars, setLineChars] = useState(["1"]);
-
-  const [title, setTitle] = useState<string>("My Tech Stack");
-  const [lineCount, setLineCount] = useState<string>("1");
-  const [theme, setTheme] = useState<string>("github");
-  const [align, setAlign] = useState<string>("left");
-  const [lines, setLines] = useState<Line[]>([]);
-  const [showBorder, setShowBorder] = useState(true);
-  const [borderRadius, setBorderRadius] = useState<string>("4.5");
-  const [fontWeight, setFontWeight] = useState<string>("semibold");
-  const [fontSize, setFontSize] = useState<string>("18");
-
-  useEffect(() => {
-    // create an array with the numbers of lineCount to 1
-    const res: string[] = [];
-    for (let i = 1; i <= Number(lineCount); i++) {
-      res.push(`${i}`);
-      setLines((prev) => [
-        ...prev,
-        {
-          badges: [],
-          lineNumber: `${i}`,
-        },
-      ]);
-    }
-    setLineChars(res);
-  }, [lineCount, setLineCount, setLines]);
-
-  const reset = () => {
-    setTitle("My Tech Stack");
-    setLineCount("1");
-    setTheme("github");
-    setAlign("left");
-    setShowBorder(true);
-    setLines([]);
-    setBorderRadius("4.5");
-    setFontSize("18");
-    setFontWeight("semibold");
-  };
+  const [card, setCard] = useState<Card>(newCard());
 
-  const updateLine = useCallback(
-    (line: Line) => {
-      setLines((prev) => {
-        const res: Line[] = [];
+  const updateLineCount = useCallback(
+    (lineNumber: number) => {
+      // storing just the line numbers in an array
+      const lineNums: number[] = card.lines.map((x) => Number(x.lineNumber));
 
-        for (const l of [...prev]) {
-          if (l.lineNumber === line.lineNumber) {
-            res.push(line);
-            continue;
-          }
+      // variable to store the result
+      const updated: Line[] = [];
 
-          res.push(l);
+      for (let i = 1; i <= lineNumber; i++) {
+        // if the card.lines contain line with this lineNumber
+        if (lineNums.includes(i)) {
+          updated.push(card.lines.filter((x) => x.lineNumber === `${i}`)[0]);
+          continue;
         }
 
-        return res;
-      });
+        // else push a new one
+        updated.push({
+          badges: [],
+          lineNumber: `${i}`,
+        });
+      }
+
+      setCard({ ...card, lines: updated });
     },
-    [setLines]
+    [card]
   );
 
+  const updateLine = (line: Line) => {
+    const lines = [...card.lines];
+
+    lines[lines.findIndex((l) => l.lineNumber === line.lineNumber)] = line;
+
+    setCard({ ...card, lines: lines });
+  };
+
   const validateBorderRadius = (val: string): string => {
     const num = parseInt(val);
 
@@ -108,40 +85,44 @@ const Options: FC<OptionsProps> = (props) => {
         <Input
           label="Title"
           placeholder="My Tech Stack"
-          value={title}
-          setValue={(val) => setTitle(val)}
+          value={card.title}
+          setValue={(v) => setCard({ ...card, title: v, lines: card.lines })}
           validate={() => ""}
         />
 
         <div className="flex items-center gap-4">
           <SelectInput
             label="Theme"
             options={themes}
-            value={theme}
-            setValue={setTheme}
+            value={card.theme}
+            setValue={(v) => setCard({ ...card, theme: v, lines: card.lines })}
             searchField={true}
           />
 
           <SelectInput
             label="Badge Align"
             options={["left", "center", "right"]}
-            value={align}
-            setValue={(val) => setAlign(val)}
+            value={card.align}
+            setValue={(v) => setCard({ ...card, align: v, lines: card.lines })}
           />
         </div>
 
         <div className="flex items-start gap-4">
           <SelectInput
             label="Font Weight"
             options={["thin", "normal", "semibold", "bold"]}
-            value={fontWeight}
-            setValue={(val) => setFontWeight(val)}
+            value={card.fontWeight}
+            setValue={(v) =>
+              setCard({ ...card, fontWeight: v, lines: card.lines })
+            }
           />
 
           <NumberInput
             label="Font Size"
-            value={fontSize}
-            setValue={(val) => setFontSize(val)}
+            value={card.fontSize}
+            setValue={(v) =>
+              setCard({ ...card, fontSize: v, lines: card.lines })
+            }
             minValue={15}
             maxValue={30}
           />
@@ -150,23 +131,27 @@ const Options: FC<OptionsProps> = (props) => {
         <Input
           label="Border Radius"
           placeholder="4.5"
-          value={borderRadius}
-          setValue={(val) => setBorderRadius(val)}
+          value={card.borderRadius}
+          setValue={(v) =>
+            setCard({ ...card, borderRadius: v, lines: card.lines })
+          }
           helperText="A number between 0 and 50."
           validate={(val) => validateBorderRadius(val)}
         />
 
         <div className="flex items-start gap-4">
           <TrueFalseInput
             label="Border"
-            setValue={(val) => setShowBorder(val)}
-            value={showBorder}
+            value={card.showBorder}
+            setValue={(v) =>
+              setCard({ ...card, showBorder: v, lines: card.lines })
+            }
           />
 
           <NumberInput
             label="Lines"
-            value={lineCount}
-            setValue={(val) => setLineCount(val)}
+            value={`${card.lines.length}`}
+            setValue={(v) => updateLineCount(Number(v))}
             minValue={1}
             maxValue={5}
           />
@@ -176,36 +161,26 @@ const Options: FC<OptionsProps> = (props) => {
       <div className="my-4 flex flex-col gap-4 px-4">
         <div className="w-full h-[.8px] bg-gh-border mx-auto" />
 
-        {lineChars.map((line) => (
-          <LineInput line={line} updateLine={updateLine} key={line} />
+        {card.lines.map((line) => (
+          <LineInput
+            line={line}
+            updateLine={updateLine}
+            key={line.lineNumber}
+          />
         ))}
 
         <div className="w-full h-[.8px] bg-gh-border mx-auto" />
 
         <div className="flex items-stretch gap-3">
           <GreenButton
             icon={IoHammerOutline}
-            onClick={() => {
-              props.setLink(
-                generateLink(
-                  title,
-                  lineCount,
-                  theme,
-                  align,
-                  lines,
-                  showBorder,
-                  borderRadius,
-                  fontWeight,
-                  fontSize
-                )
-              );
-            }}
-            disabled={validateBorderRadius(borderRadius) !== ""}
+            onClick={() => props.setLink(generateLink(card))}
+            disabled={validateBorderRadius(card.borderRadius) !== ""}
             text="Generate"
           />
 
           <SecondaryButton
-            onClick={() => reset()}
+            onClick={() => setCard(newCard())}
             text="Reset"
             className="text-red-500 font-semibold"
           />