From 0cb26a9495826cc2e312e3cca1b93537c0c53dac Mon Sep 17 00:00:00 2001 From: Vladyslav Matsiiako Date: Sun, 25 Dec 2022 10:11:13 -0500 Subject: [PATCH] Added memoization and did performance optimizations --- .../dashboard/DashboardInputField.tsx | 23 ++-- frontend/components/dashboard/KeyPair.tsx | 102 ++++++++++++++++++ frontend/pages/dashboard/[id].tsx | 95 +--------------- 3 files changed, 118 insertions(+), 102 deletions(-) create mode 100644 frontend/components/dashboard/KeyPair.tsx diff --git a/frontend/components/dashboard/DashboardInputField.tsx b/frontend/components/dashboard/DashboardInputField.tsx index 13df0630d..9774a1ec7 100644 --- a/frontend/components/dashboard/DashboardInputField.tsx +++ b/frontend/components/dashboard/DashboardInputField.tsx @@ -11,20 +11,21 @@ interface DashboardInputFieldProps { onChangeHandler: (value: string, position: number) => void; value: string; type: 'varName' | 'value'; - blurred: boolean; - duplicates: string[]; + blurred?: boolean; + isDuplicate?: boolean; override?: boolean; } /** * This component renders the input fields on the dashboard * @param {object} obj - the order number of a keyPair - * @param {number} obj.pos - the order number of a keyPair + * @param {number} obj.position - 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 * @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 duplicated key names on the dashboard + * @param {boolean} obj.isDuplicate - if the key name is duplicated + * @param {boolean} obj.override - whether a secret/row should be displalyed as overriden * @returns */ @@ -34,7 +35,7 @@ const DashboardInputField = ({ type, value, blurred, - duplicates, + isDuplicate, override }: DashboardInputFieldProps) => { const ref = useRef(null); @@ -44,11 +45,11 @@ const DashboardInputField = ({ ref.current.scrollTop = e.currentTarget.scrollTop; ref.current.scrollLeft = e.currentTarget.scrollLeft; }; + console.log('rerender', value) if (type === 'varName') { const startsWithNumber = !isNaN(Number(value.charAt(0))) && value != ''; - const hasDuplicates = duplicates?.includes(value); - const error = startsWithNumber || hasDuplicates; + const error = startsWithNumber || isDuplicate; return (
@@ -74,7 +75,7 @@ const DashboardInputField = ({ Should not start with a number

)} - {hasDuplicates && !startsWithNumber && ( + {isDuplicate && !startsWithNumber && (

Secret names should be unique

@@ -159,4 +160,8 @@ const DashboardInputField = ({ return <>Something Wrong; }; -export default React.memo(DashboardInputField); +function inputPropsAreEqual(prev: DashboardInputFieldProps, next: DashboardInputFieldProps) { + return prev.value === next.value && prev.type === next.type && prev.position === next.position && prev.blurred === next.blurred && prev.override === next.override && prev.duplicate === next.duplicate; +} + +export default React.memo(DashboardInputField, inputPropsAreEqual); diff --git a/frontend/components/dashboard/KeyPair.tsx b/frontend/components/dashboard/KeyPair.tsx new file mode 100644 index 000000000..d917f3cee --- /dev/null +++ b/frontend/components/dashboard/KeyPair.tsx @@ -0,0 +1,102 @@ +import React from 'react'; +import { faEllipsis, faShuffle, faX } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + +import Button from '../basic/buttons/Button'; +import DashboardInputField from './DashboardInputField'; + +interface SecretDataProps { + type: 'personal' | 'shared'; + pos: number; + key: string; + value: string; + id: string; +} + +interface KeyPairProps { + keyPair: SecretDataProps; + deleteRow: (id: string) => void; + modifyKey: (value: string, position: number) => void; + modifyValue: (value: string, position: number) => void; + isBlurred: boolean; + isDuplicate: boolean; + toggleSidebar: (id: string) => void; + sidebarSecretId: string; +} + +/** + * This component represent a single row for an environemnt variable on the dashboard + * @param {object} obj + * @param {String[]} obj.keyPair - data related to the environment variable (id, pos, key, value, public/private) + * @param {function} obj.deleteRow - a function to delete a certain keyPair + * @param {function} obj.modifyKey - modify the key of a certain environment variable + * @param {function} obj.modifyValue - modify the value of a certain environment variable + * @param {boolean} obj.isBlurred - if the blurring setting is turned on + * @param {boolean} obj.isDuplicate - list of all the duplicates secret names on the dashboard + * @param {function} obj.toggleSidebar - open/close/switch sidebar + * @param {string} obj.sidebarSecretId - the id of a secret for the side bar is displayed + * @returns + */ +const KeyPair = ({ + keyPair, + deleteRow, + modifyKey, + modifyValue, + isBlurred, + isDuplicate, + toggleSidebar, + sidebarSecretId +}: KeyPairProps) => { + return ( +
+
+ {keyPair.type == "personal" &&
+
+ + This secret is overriden + +
} +
+
+ +
+
+
+
+ +
+
+
toggleSidebar(keyPair.id)} className="cursor-pointer w-9 h-9 bg-mineshaft-700 hover:bg-chicago-700 rounded-md flex flex-row justify-center items-center duration-200"> + +
+
+
+
+
+
+ ); +}; + +export default React.memo(KeyPair); \ No newline at end of file diff --git a/frontend/pages/dashboard/[id].tsx b/frontend/pages/dashboard/[id].tsx index 65408aaa5..276d7c5ad 100644 --- a/frontend/pages/dashboard/[id].tsx +++ b/frontend/pages/dashboard/[id].tsx @@ -8,13 +8,11 @@ import { faCheck, faCopy, faDownload, - faEllipsis, faEye, faEyeSlash, faFolderOpen, faMagnifyingGlass, faPlus, - faX } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -22,8 +20,8 @@ import Button from '~/components/basic/buttons/Button'; import ListBox from '~/components/basic/Listbox'; import BottonRightPopup from '~/components/basic/popups/BottomRightPopup'; import { useNotificationContext } from '~/components/context/Notifications/NotificationProvider'; -import DashboardInputField from '~/components/dashboard/DashboardInputField'; import DropZone from '~/components/dashboard/DropZone'; +import KeyPair from '~/components/dashboard/KeyPair'; import SideBar from '~/components/dashboard/SideBar'; import NavHeader from '~/components/navigation/NavHeader'; import getSecretsForProject from '~/components/utilities/secrets/getSecretsForProject'; @@ -45,95 +43,6 @@ interface SecretDataProps { id: string; } -interface KeyPairProps { - keyPair: SecretDataProps; - deleteRow: (id: string) => void; - modifyKey: (value: string, position: number) => void; - modifyValue: (value: string, position: number) => void; - isBlurred: boolean; - duplicates: any[]; - toggleSidebar: (id: string) => void; - sidebarSecretId: string; -} - -/** - * This component represent a single row for an environemnt variable on the dashboard - * @param {object} obj - * @param {String[]} obj.keyPair - data related to the environment variable (id, pos, key, value, public/private) - * @param {function} obj.deleteRow - a function to delete a certain keyPair - * @param {function} obj.modifyKey - modify the key of a certain environment variable - * @param {function} obj.modifyValue - modify the value of a certain environment variable - * @param {boolean} obj.isBlurred - if the blurring setting is turned on - * @param {string[]} obj.duplicates - list of all the duplicates secret names on the dashboard - * @param {string[]} obj.toggleSidebar - open/close/switch sidebar - * @param {string[]} obj.sidebarSecretId - the id of a secret for the side bar is displayed - * @returns - */ -const KeyPair = ({ - keyPair, - deleteRow, - modifyKey, - modifyValue, - isBlurred, - duplicates, - toggleSidebar, - sidebarSecretId -}: KeyPairProps) => { - return ( -
-
- {keyPair.type == "personal" &&
-
- - This secret is overriden - -
} -
-
- -
-
-
-
- -
-
-
toggleSidebar(keyPair.id)} className="cursor-pointer w-9 h-9 bg-mineshaft-700 hover:bg-chicago-700 rounded-md flex flex-row justify-center items-center duration-200"> - -
-
-
-
-
-
- ); -}; - - /** * this function finds the teh duplicates in an array * @param arr - array of anything (e.g., with secret keys and types (personal/shared)) @@ -653,7 +562,7 @@ export default function Dashboard() { modifyValue={listenChangeValue} modifyKey={listenChangeKey} isBlurred={blurred} - duplicates={findDuplicates(data?.map((item) => [item.key, item.type]))} + isDuplicate={findDuplicates(data?.map((item) => [item.key, item.type]))?.includes(keyPair.value)} toggleSidebar={toggleSidebar} sidebarSecretId={sidebarSecretId} />