Update dashboard component

frontend/components/basic/buttons/Button.tsx

@@ -1,25 +1,28 @@
 import React from "react";
 import Image from "next/image";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconProps,
+} from "@fortawesome/react-fontawesome";
 
 var classNames = require("classnames");
 
 type ButtonProps = {
   text: string;
   onButtonPressed: () => void;
-  loading: boolean;
+  loading?: boolean;
   color: string;
   size: string;
-  icon: IconProp;
+  icon?: IconProp;
-  active: boolean;
+  active?: boolean;
-  iconDisabled: string;
+  iconDisabled?: string;
-  textDisabled: string;
+  textDisabled?: string;
-}
+};
 
 /**
  * This is the main butto component in the app.
- * @param {object} props 
+ * @param {object} props
  * @param {string} props.text - text inside the button
  * @param {function} props.onButtonPressed - the action that happens when the button is clicked
  * @param {boolean} props.loading - if a button is currently in the laoding state
@@ -29,21 +32,28 @@ type ButtonProps = {
  * @param {boolean} props.active - if the button is active or disabled
  * @param {FontAwesomeIconProps} props.text - the icon inside the button when it is disabled
  * @param {string} props.textDisable - text inside the button when it is disabled
- * @returns 
+ * @returns
  */
-export default function Button (props: ButtonProps): JSX.Element {
+export default function Button(props: ButtonProps): JSX.Element {
   // Check if the button show always be 'active' - then true;
   // or if it should switch between 'active' and 'disabled' - then give the status
-  const activityStatus = props.active || (props.text != "" && props.textDisabled == undefined)
+  const activityStatus =
-  
+    props.active || (props.text != "" && props.textDisabled == undefined);
+
   let styleButton = classNames(
     "group m-auto md:m-0 inline-block rounded-md duration-200",
 
     // Setting background colors and hover modes
-    props.color == "mineshaft" && activityStatus && "bg-mineshaft-700 hover:bg-primary",
+    props.color == "mineshaft" &&
+      activityStatus &&
+      "bg-mineshaft-700 hover:bg-primary",
     props.color == "mineshaft" && !activityStatus && "bg-mineshaft",
-    (props.color == "primary" || !props.color) && activityStatus && "bg-primary hover:opacity-80",
+    (props.color == "primary" || !props.color) &&
-    (props.color == "primary" || !props.color) && !activityStatus && "bg-primary",
+      activityStatus &&
+      "bg-primary hover:opacity-80",
+    (props.color == "primary" || !props.color) &&
+      !activityStatus &&
+      "bg-primary",
     props.color == "red" && "bg-red",
 
     // Changing the opacity when active vs when not
@@ -73,7 +83,7 @@ export default function Button (props: ButtonProps): JSX.Element {
     "relative duration-200",
 
     // Show the loading sign if the loading indicator is on
-    props.loading == true ? "opacity-0" : "opacity-100",
+    Boolean(props.loading) ? "opacity-0" : "opacity-100",
     props.size == "md" && "text-sm",
     props.size == "lg" && "text-lg"
   );
@@ -100,7 +110,7 @@ export default function Button (props: ButtonProps): JSX.Element {
         </div>
         {props.icon && (
           <FontAwesomeIcon
-            icon={props.icon as IconProp}
+            icon={props.icon}
             className={`flex my-auto font-extrabold ${
               props.size == "icon-sm" ? "text-sm" : "text-md"
             } ${(props.text || props.textDisabled) && "mr-2"}`}
@@ -115,7 +125,9 @@ export default function Button (props: ButtonProps): JSX.Element {
           />
         )}
         {(props.text || props.textDisabled) && (
-          <p className={textStyle}>{activityStatus ? props.text : props.textDisabled}</p>
+          <p className={textStyle}>
+            {activityStatus ? props.text : props.textDisabled}
+          </p>
         )}
       </div>
     </button>

frontend/components/dashboard/DashboardInputField.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { SyntheticEvent, UIEvent, useRef, WheelEvent } from "react";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
@@ -6,6 +6,15 @@ import guidGenerator from "../utilities/randomId";
 
 const REGEX = /([$]{.*?})/g;
 
+interface DashboardInputFieldProps {
+  index: number;
+  onChangeHandler: (value: string, index: number) => void;
+  value: string;
+  type: "varName" | "value";
+  blurred: boolean;
+  duplicates: string[];
+}
+
 /**
  * This component renders the input fields on the dashboard
  * @param {object} obj - the order number of a keyPair
@@ -14,51 +23,60 @@ const REGEX = /([$]{.*?})/g;
  * @param {string} obj.type - whether the input field is for a Key Name or for a Key Value
  * @param {string} obj.value - value of the InputField
  * @param {boolean} obj.blurred - whether the input field should be blurred (behind the gray dots) or not; this can be turned on/off in the dashboard
- * @param {string[]} obj.duplicates - list of all the suplicated key names on the dashboard
+ * @param {string[]} obj.duplicates - list of all the duplicated key names on the dashboard
  * @returns
  */
+
 const DashboardInputField = ({
   index,
   onChangeHandler,
   type,
   value,
   blurred,
-  duplicates
+  duplicates,
-}) => {
+}: DashboardInputFieldProps) => {
-  const ref = useRef(null);
+  const ref = useRef<HTMLDivElement | null>(null);
-  const syncScroll = (e) => {
+  const syncScroll = (e: SyntheticEvent<HTMLDivElement>) => {
-    ref.current.scrollTop = e.target.scrollTop;
+    if (ref.current == null) return;
-    ref.current.scrollLeft = e.target.scrollLeft;
+
+    ref.current.scrollTop = e.currentTarget.scrollTop;
+    ref.current.scrollLeft = e.currentTarget.scrollLeft;
   };
-  
+
   if (type === "varName") {
-    const startsWithNumber = !isNaN(value.charAt(0)) && value != "";
+    const startsWithNumber = !isNaN(Number(value.charAt(0))) && value != "";
     const hasDuplicates = duplicates?.includes(value);
     const error = startsWithNumber || hasDuplicates;
 
     return (
       <div className="flex-col w-full">
         <div
-          className={`group relative flex flex-col justify-center w-full max-w-2xl border ${error ? "border-red" : "border-mineshaft-500"} rounded-md`}
+          className={`group relative flex flex-col justify-center w-full max-w-2xl border ${
+            error ? "border-red" : "border-mineshaft-500"
+          } rounded-md`}
         >
           <input
-            onChange={(e) => onChangeHandler(e.target.value.toUpperCase(), index)}
+            onChange={(e) =>
+              onChangeHandler(e.target.value.toUpperCase(), index)
+            }
             type={type}
             value={value}
-            className={`asolute z-10 peer font-mono ph-no-capture bg-bunker-800 rounded-md caret-white text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 ${error ? "focus:ring-red/50" : "focus:ring-primary/50"} duration-200`}
+            className={`absolute z-10 peer font-mono ph-no-capture bg-bunker-800 rounded-md caret-white text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 ${
+              error ? "focus:ring-red/50" : "focus:ring-primary/50"
+            } duration-200`}
             spellCheck="false"
           />
         </div>
-        {startsWithNumber && 
+        {startsWithNumber && (
           <p className="text-red text-xs mt-0.5 mx-1 mb-2 max-w-xs">
             Should not start with a number
           </p>
-        }
+        )}
-        {hasDuplicates && !startsWithNumber &&
+        {hasDuplicates && !startsWithNumber && (
           <p className="text-red text-xs mt-0.5 mx-1 mb-2 max-w-xs">
             Secret names should be unique
           </p>
-        }
+        )}
       </div>
     );
   } else if (type === "value") {
@@ -78,61 +96,61 @@ const DashboardInputField = ({
             } z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-200 no-scrollbar no-scrollbar::-webkit-scrollbar`}
             spellCheck="false"
           />
-          <div 
+          <div
-            ref={ref} 
+            ref={ref}
             className={`${
               blurred
                 ? "text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active:text-gray-400"
                 : ""
             } absolute flex flex-row whitespace-pre font-mono z-0 ph-no-capture max-w-2xl overflow-x-scroll bg-bunker-800 h-9 rounded-md text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-100 no-scrollbar no-scrollbar::-webkit-scrollbar`}
           >
-            {
+            {value.split(REGEX).map((word, id) => {
-              value
+              if (word.match(REGEX) !== null) {
-              .split(REGEX)
+                return (
-              .map((word, id) => {
+                  <span className="ph-no-capture text-yellow" key={id}>
-                if (word.match(REGEX) !== null) {
+                    {word.slice(0, 2)}
-                  return (
+                    <span className="ph-no-capture text-yellow-200/80">
-                    <span className="ph-no-capture text-yellow" key={id}>
+                      {word.slice(2, word.length - 1)}
-                      {word.slice(0, 2)}
-                      <span className="ph-no-capture text-yellow-200/80">
-                        {word.slice(2, word.length - 1)}
-                      </span>
-                      {word.slice(word.length - 1, word.length) == "}" ? (
-                        <span className="ph-no-capture text-yellow">
-                          {word.slice(word.length - 1, word.length)}
-                        </span>
-                      ) : (
-                        <span className="ph-no-capture text-yellow-400">
-                          {word.slice(word.length - 1, word.length)}
-                        </span>
-                      )}
                     </span>
-                  );
+                    {word.slice(word.length - 1, word.length) == "}" ? (
-                } else {
+                      <span className="ph-no-capture text-yellow">
-                  return <span key={id} className="ph-no-capture">{word}</span>;
+                        {word.slice(word.length - 1, word.length)}
-                }
+                      </span>
-              })
+                    ) : (
-            }
+                      <span className="ph-no-capture text-yellow-400">
+                        {word.slice(word.length - 1, word.length)}
+                      </span>
+                    )}
+                  </span>
+                );
+              } else {
+                return (
+                  <span key={id} className="ph-no-capture">
+                    {word}
+                  </span>
+                );
+              }
+            })}
           </div>
           {blurred && (
             <div className="absolute flex flex-row items-center z-20 peer pr-2 bg-bunker-800 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible h-9 w-full max-w-2xl rounded-md text-gray-400/50 text-clip">
               <div className="px-2 flex flex-row items-center overflow-x-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
-                {value
+                {value.split("").map(() => (
-                  .split("")
+                  <FontAwesomeIcon
-                  .map(() => (
+                    key={guidGenerator()}
-                    <FontAwesomeIcon
+                    className="text-xxs mx-0.5"
-                      key={guidGenerator()}
+                    icon={faCircle}
-                      className="text-xxs mx-0.5"
+                  />
-                      icon={faCircle}
+                ))}
-                    />
-                  ))}
               </div>
             </div>
-          )} 
+          )}
         </div>
       </div>
     );
   }
+
+  return <>Something Wrong</>;
 };
 
 export default React.memo(DashboardInputField);