refactor(perf):go back to passing index and using it to mutate keypair

frontend/components/dashboard/DashboardInputField.tsx

@@ -7,8 +7,8 @@ import guidGenerator from "../utilities/randomId";
 const REGEX = /([$]{.*?})/g;
 
 interface DashboardInputFieldProps {
-  id: string;
+  position: number;
-  onChangeHandler: (value: string, id: string) => void;
+  onChangeHandler: (value: string, position: number) => void;
   value: string;
   type: "varName" | "value";
   blurred: boolean;
@@ -18,7 +18,7 @@ interface DashboardInputFieldProps {
 /**
  * This component renders the input fields on the dashboard
  * @param {object} obj - the order number of a keyPair
- * @param {string} obj.id - the order number of a keyPair
+ * @param {number} obj.pos - the order number of a keyPair
  * @param {function} obj.onChangeHandler - what happens when the input is modified
  * @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
@@ -28,7 +28,7 @@ interface DashboardInputFieldProps {
  */
 
 const DashboardInputField = ({
-  id,
+  position,
   onChangeHandler,
   type,
   value,
@@ -57,7 +57,7 @@ const DashboardInputField = ({
         >
           <input
             onChange={(e) =>
-              onChangeHandler(e.target.value.toUpperCase(), id)
+              onChangeHandler(e.target.value.toUpperCase(), position)
             }
             type={type}
             value={value}
@@ -87,7 +87,7 @@ const DashboardInputField = ({
         >
           <input
             value={value}
-            onChange={(e) => onChangeHandler(e.target.value, id)}
+            onChange={(e) => onChangeHandler(e.target.value, position)}
             onScroll={syncScroll}
             className={`${
               blurred

frontend/components/utilities/secrets/getSecretsForProject.js

@@ -68,9 +68,10 @@ const getSecretsForProject = async ({
     setFileState(tempFileState);
 
     setData(
-      tempFileState.map((line) => {
+      tempFileState.map((line, index) => {
         return {
           id: guidGenerator(),
+          pos: index,
           key: line["key"],
           value: line["value"],
           type: line["type"]

frontend/pages/dashboard/[id].js

@@ -73,7 +73,7 @@ const KeyPair = ({
             <DashboardInputField
               onChangeHandler={modifyKey}
               type="varName"
-              id={keyPair.id}
+              position={keyPair.pos}
               value={keyPair.key}
               duplicates={duplicates}
             />
@@ -84,7 +84,7 @@ const KeyPair = ({
             <DashboardInputField
               onChangeHandler={modifyValue}
               type="value"
-              id={keyPair.id}
+              position={keyPair.pos}
               value={keyPair.value}
               blurred={isBlurred}
             />
@@ -115,7 +115,7 @@ const KeyPair = ({
                 onClick={() =>
                   modifyVisibility(
                     keyPair.type == "personal" ? "shared" : "personal",
-                    keyPair.id
+                    keyPair.pos
                   )
                 }
                 className="relative flex justify-start items-center cursor-pointer select-none py-2 px-2 rounded-md text-gray-400 hover:bg-white/10 duration-200 hover:text-gray-200 w-full"
@@ -139,7 +139,7 @@ const KeyPair = ({
                       [...Array(randomStringLength)]
                         .map(() => Math.floor(Math.random() * 16).toString(16))
                         .join(""),
-                      keyPair.id
+                      keyPair.pos
                     );
                   }
                 }}
@@ -319,9 +319,10 @@ export default function Dashboard() {
   const addRow = () => {
     setIsNew(false);
     setData([...data, {
-      id:guidGenerator(), 
+      id:guidGenerator(),
-      key:"", 
+      pos:data.length,
-      value:"", 
+      key:"",
+      value:"",
       type:"shared"
     }]);
   };
@@ -331,41 +332,41 @@ export default function Dashboard() {
     setData(data.filter((row) => row.id !== id));
   };
 
-  const modifyValue = (value, id) => {
+  const modifyValue = (value, pos) => {
     setData((oldData) => {
-      oldData.find(data => data.id === id).value = value;
+      oldData[pos].value = value;
       return [...oldData];
     });
     setButtonReady(true);
   };
 
-  const modifyKey = (value, id) => {
+  const modifyKey = (value, pos) => {
     setData((oldData) => {
-      oldData.find(data => data.id === id).key = value;
+      oldData[pos].key = value;
       return [...oldData];
     });
     setButtonReady(true);
   };
 
-  const modifyVisibility = (value, id) => {
+  const modifyVisibility = (value, pos) => {
     setData((oldData) => {
-      oldData.find(data => data.id === id).type = value;
+      oldData[pos].type = value;
       return [...oldData];
     });
     setButtonReady(true);
   };
 
   // For speed purposes and better perforamance, we are using useCallback
-  const listenChangeValue = useCallback((value, id) => {
+  const listenChangeValue = useCallback((value, pos) => {
-    modifyValue(value, id);
+    modifyValue(value, pos);
   }, []);
 
-  const listenChangeKey = useCallback((value, id) => {
+  const listenChangeKey = useCallback((value, pos) => {
-    modifyKey(value, id);
+    modifyKey(value, pos);
   }, []);
 
-  const listenChangeVisibility = useCallback((value, id) => {
+  const listenChangeVisibility = useCallback((value, pos) => {
-    modifyVisibility(value, id);
+    modifyVisibility(value, pos);
   }, []);
 
   /**
@@ -448,17 +449,18 @@ export default function Dashboard() {
   };
 
   const sortValuesHandler = () => {
-    /**
+    console.log(sortMethod)
-     * Since react's SetStateActionHandler optimises renders when values don't change 
-     * we have to map and return a new sorted list to force a render.
-     * @returns {sorted list}
-    */
 
-    let sortedData = data.sort((a, b) =>
+    const sortedData = data.sort((a, b) =>
       sortMethod == "alphabetical"
         ? a.key.localeCompare(b.key)
         : b.key.localeCompare(a.key)
-    ).map((item) => item)
+    ).map((item, index) => {
+      return {
+        ...item, pos:index
+      }
+    })
+
     setData(sortedData)
   }