docs: add JSdoc to functions and return types for clarity (#248)

Author: bryanlundberg

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "docwriter.progress.trackFunctions": true,
+  "docwriter.style": "JSDoc",
+  "docwriter.progress.trackClasses": true,
+  "docwriter.progress.trackTypes": true
+}

public/brand_logo.svg

@@ -4,7 +4,7 @@ import { useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { Categories } from "@/interfaces/Categories";
-import { cubeCollection } from "@/lib/cubeCollection";
+import { cubeCollection } from "@/lib/const/cubeCollection";
 import genId from "@/lib/genId";
 import { useTimerStore } from "@/store/timerStore";
 import findCube from "@/lib/findCube";

public/next.svg

@@ -5,19 +5,13 @@ import { CreatePriceLineOptions, createChart } from "lightweight-charts";
 import { useEffect, useRef } from "react";
 import translation from "@/translations/global.json";
 import getBestTime from "@/lib/getBestTime";
+import { ChartData } from "@/interfaces/ChartData";
 
 type TimeObject = {
   time: number;
   value: number;
 };
 
-interface ChartData {
-  global: Solve[];
-  session: Solve[];
-  cubeSession: Solve[];
-  cubeAll: Solve[];
-}
-
 export default function LineCharter({
   data,
   cubeSelected,
@@ -75,9 +69,6 @@ export default function LineCharter({
         fixRightEdge: true,
         fixLeftEdge: true,
       },
-      areaStyle: {
-        lineColor: "black",
-      },
     };
     const container = chartContainerRef.current;
     if (container) {

public/vercel.svg

@@ -7,7 +7,7 @@ export default function BookmarkFav({
   cubeId,
 }: {
   isChecked: boolean;
-  setFavorite: any;
+  setFavorite: (cubeId: string) => void;
   cubeId: string;
 }) {
   const [checked, setChecked] = useState(isChecked);

src/components/Select.tsx

@@ -9,11 +9,11 @@ export default function CheckboxImage({
   handleClickRadio,
   selectedCategory,
 }: {
-  id: any;
+  id: string | number;
   value: string;
-  src: any;
+  src: string;
   alt: string;
-  handleClickRadio?: any;
+  handleClickRadio?: (value: any) => void;
   selectedCategory: Categories;
 }) {
   return (
@@ -27,14 +27,14 @@ export default function CheckboxImage({
       >
         <input
           type="radio"
-          id={id}
+          id={`${id}`}
           name="category"
           value={value}
           className="hidden peer"
           required
         />
         <label
-          htmlFor={id}
+          htmlFor={`${id}`}
           onClick={() => handleClickRadio && handleClickRadio(value)}
         >
           <Image src={src} alt={alt} draggable={false} />

src/components/charts/LineCharter.tsx

@@ -1,6 +1,6 @@
 import { InputText } from "@/components/input-text/index";
 import CheckboxImage from "@/components/cubes/CheckboxImage";
-import { cubeCollection } from "@/lib/cubeCollection";
+import { cubeCollection } from "@/lib/const/cubeCollection";
 import genId from "@/lib/genId";
 import translation from "@/translations/global.json";
 import useModalCube from "@/hooks/useModalCube";

src/components/charts/PieCharter.tsx

@@ -5,7 +5,7 @@ import BellAlert from "@/icons/BellAlert";
 import Clock from "@/icons/Clock";
 import { useSettingsModalStore } from "@/store/SettingsModalStore";
 import genId from "@/lib/genId";
-import { langCollection } from "@/lib/langCollection";
+import { langCollection } from "@/lib/const/langCollection";
 import translation from "@/translations/global.json";
 import { Settings } from "@/interfaces/Settings";
 import { sort } from "fast-sort";
@@ -17,9 +17,9 @@ import { DataImportExport } from "@/components/menu-settings/DataImportExport";
 import { useTimerStore } from "@/store/timerStore";
 import Folder from "@/icons/Folder";
 import Shield from "@/icons/Shield";
-import GithubIcon from "@/icons/GithubIcon";
 import Link from "next/link";
 import useEscape from "@/hooks/useEscape";
+import Image from "next/image";
 
 export default function MenuSettings() {
   const { settingsOpen, setSettingsOpen, settings, setSettings, lang } =
@@ -141,17 +141,17 @@ export default function MenuSettings() {
             title={translation.settings["about"][lang]}
           >
             <div className="flex flex-col justify-center items-center gap-3">
+              <Image
+                src={"/brand_logo.svg"}
+                alt="logo"
+                width={320}
+                height={100}
+              />
+
               <div className="text-center w-11/12 italic">
                 &rdquo;{translation.settings["legend"][lang]}&rdquo;
               </div>
 
-              <Link
-                href="https://github.com/bryanlundberg/NexusTimer"
-                target="_blank"
-                className="hover:text-zinc-500 transition duration-300"
-              >
-                <GithubIcon />
-              </Link>
               <div className="flex gap-3 underline">
                 <Link
                   href="https://github.com/bryanlundberg/NexusTimer/issues"

src/components/charts/RadarCharter.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { TwistyPlayer, PuzzleID } from "cubing/twisty";
-import { cubeCollection } from "@/lib/cubeCollection";
+import { cubeCollection } from "@/lib/const/cubeCollection";
 
 interface ScrambleDisplay {
   className: string;

src/components/cubes/BookmarkFav.tsx

@@ -6,7 +6,7 @@ import { useTimerStore } from "@/store/timerStore";
 import formatTime from "@/lib/formatTime";
 import moveSolve from "@/lib/moveSolve";
 import { ScrambleDisplay } from "@/components/scramble-display/index";
-import { cubeCollection } from "@/lib/cubeCollection";
+import { cubeCollection } from "@/lib/const/cubeCollection";
 import CalendarDays from "@/icons/CalentarDays";
 import useEscape from "@/hooks/useEscape";
 import { format } from "date-fns";

src/components/cubes/CheckboxImage.tsx

@@ -223,15 +223,15 @@ export default function CategoryStatistics() {
           />
           <StatisticRow
             label={translation.metrics.cards["success-rate"][lang]}
-            global={successRate.global === 0 ? "--" : successRate.global + "%"}
+            global={successRate.global === "" ? "--" : successRate.global + "%"}
             session={
-              successRate.session === 0 ? "--" : successRate.session + "%"
+              successRate.session === "" ? "--" : successRate.session + "%"
             }
             cubeAll={
-              successRate.cubeAll === 0 ? "--" : successRate.cubeAll + "%"
+              successRate.cubeAll === "" ? "--" : successRate.cubeAll + "%"
             }
             cubeSession={
-              successRate.cubeSession === 0
+              successRate.cubeSession === ""
                 ? "--"
                 : successRate.cubeSession + "%"
             }

src/components/cubes/ModalCreate.tsx

@@ -7,6 +7,7 @@ import useTimer from "@/hooks/useTimer";
 import Confetti from "react-dom-confetti";
 import { useTimerStatistics } from "@/hooks/useTimerStatistics";
 import useDeviceMatch from "@/hooks/useDeviceMatch";
+import { confettiConfig } from "@/lib/const/confettiConfig";
 
 const timerStatusClasses = {
   IDLE: "light:text-neutral-900 dark:text-white",
@@ -16,20 +17,6 @@ const timerStatusClasses = {
   INSPECTING: "text-orange-500",
 };
 
-const config: any = {
-  angle: 90,
-  spread: 180,
-  startVelocity: 40,
-  elementCount: 70,
-  dragFriction: 0.12,
-  duration: 5000,
-  stagger: 3,
-  width: "10px",
-  height: "10px",
-  perspective: "500px",
-  colors: ["#a864fd", "#29cdff", "#78ff44", "#ff718d", "#fdff6a"],
-};
-
 export default function Timer() {
   const { lang, settings } = useSettingsModalStore();
   const { selectedCube, isSolving, lastSolve, timerStatus, solvingTime } =
@@ -89,7 +76,7 @@ export default function Timer() {
               !isSolving &&
               settings.alerts.bestTime.status
             }
-            config={config}
+            config={confettiConfig}
           />
           {lastSolve &&
             settings.features.quickActionButtons.status &&

src/components/menu-settings/Menu.tsx

@@ -1,13 +1,18 @@
 import { Categories } from "@/interfaces/Categories";
-import { Solve } from "@/interfaces/Solve";
 import calcAoStatistics from "@/lib/calcAoStatistics";
 import calcAverageStatistics from "@/lib/calcAverageStatistics";
 import calcBestTime from "@/lib/calcBestTime";
 import calcDeviation from "@/lib/calcDeviation";
 import calcSuccessRate from "@/lib/calcSuccessRate";
 import calcTimeSpentStatistics from "@/lib/calcTimeSpentStatistics";
 import calcTotalSolvesStatistics from "@/lib/calcTotalSolvesStatistics";
-import { cubeCollection } from "@/lib/cubeCollection";
+import { cubeCollection } from "@/lib/const/cubeCollection";
+import {
+  defaultChartValuesA,
+  defaultChartValuesS,
+  defaultChartValuesN,
+  defaulCharAoValues,
+} from "@/lib/const/defaultChartValues";
 import getSolvesMetrics from "@/lib/getSolvesMetrics";
 import { useSettingsModalStore } from "@/store/SettingsModalStore";
 import { useTimerStore } from "@/store/timerStore";
@@ -27,35 +32,14 @@ export default function useMetricsSwitch() {
     best: false,
   });
 
-  const defaultValues: any = {
-    global: 0,
-    session: 0,
-    cubeSession: 0,
-    cubeAll: 0,
-  };
-
-  interface ChartData {
-    global: Solve[];
-    session: Solve[];
-    cubeSession: Solve[];
-    cubeAll: Solve[];
-  }
-
-  const defaultChartValues: ChartData = {
-    global: [],
-    session: [],
-    cubeSession: [],
-    cubeAll: [],
-  };
-
-  const [average, setAverage] = useState(defaultValues);
-  const [timeSpent, setTimeSpent] = useState(defaultValues);
-  const [counter, setCounter] = useState(defaultValues);
-  const [stats, setStats] = useState(defaultValues);
-  const [deviation, setDeviation] = useState(defaultValues);
-  const [successRate, setSuccessRate] = useState(defaultValues);
-  const [best, setBest] = useState(defaultValues);
-  const [data, setData] = useState(defaultChartValues);
+  const [average, setAverage] = useState(defaultChartValuesN);
+  const [timeSpent, setTimeSpent] = useState(defaultChartValuesS);
+  const [counter, setCounter] = useState(defaultChartValuesN);
+  const [stats, setStats] = useState(defaulCharAoValues);
+  const [deviation, setDeviation] = useState(defaultChartValuesN);
+  const [successRate, setSuccessRate] = useState(defaultChartValuesS);
+  const [best, setBest] = useState(defaultChartValuesN);
+  const [data, setData] = useState(defaultChartValuesA);
 
   const categoryOptions = loadCategoryOptions();
   const cubeOptions = loadCubeOptions();