optimizations

interface/src/app/settings/security/ManageUsers.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react';
+import { memo, useCallback, useContext, useMemo, useState } from 'react';
 import { useBlocker } from 'react-router';
 
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -55,14 +55,16 @@ const ManageUsers = () => {
   const blocker = useBlocker(changed !== 0);
   const { LL } = useI18nContext();
 
-  const table_theme = useTheme({
-    Table: `
+  const table_theme = useMemo(
+    () =>
+      useTheme({
+        Table: `
       --data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) minmax(120px, max-content) 120px;
     `,
-    BaseRow: `
+        BaseRow: `
       font-size: 14px;
     `,
-    HeaderRow: `
+        HeaderRow: `
       text-transform: uppercase;
       background-color: black;
       color: #90CAF9;
@@ -72,7 +74,7 @@ const ManageUsers = () => {
         border-bottom: 1px solid #565656;
       }
     `,
-    Row: `
+        Row: `
       .td {
         padding: 8px;
         border-top: 1px solid #565656;
@@ -85,7 +87,7 @@ const ManageUsers = () => {
         background-color: #1e1e1e;
       }
     `,
-    BaseCell: `
+        BaseCell: `
       &:nth-of-type(2) {
         text-align: center;
       }
@@ -93,72 +95,81 @@ const ManageUsers = () => {
         text-align: right;
       }
     `
-  });
+      }),
+    []
+  );
+
+  const noAdminConfigured = useCallback(
+    () => !data?.users.find((u) => u.admin),
+    [data]
+  );
+
+  const removeUser = useCallback(
+    (toRemove: UserType) => {
+      if (!data) return;
+      const users = data.users.filter((u) => u.username !== toRemove.username);
+      updateDataValue({ ...data, users });
+      setChanged(changed + 1);
+    },
+    [data, updateDataValue, changed]
+  );
+
+  const createUser = useCallback(() => {
+    setCreating(true);
+    setUser({
+      username: '',
+      password: '',
+      admin: true
+    });
+  }, []);
+
+  const editUser = useCallback((toEdit: UserType) => {
+    setCreating(false);
+    setUser({ ...toEdit });
+  }, []);
+
+  const cancelEditingUser = useCallback(() => {
+    setUser(undefined);
+  }, []);
+
+  const doneEditingUser = useCallback(() => {
+    if (user && data) {
+      const users = [
+        ...data.users.filter(
+          (u: { username: string }) => u.username !== user.username
+        ),
+        user
+      ];
+      updateDataValue({ ...data, users });
+      setUser(undefined);
+      setChanged(changed + 1);
+    }
+  }, [user, data, updateDataValue, changed]);
+
+  const closeGenerateToken = useCallback(() => {
+    setGeneratingToken(undefined);
+  }, []);
+
+  const generateTokenForUser = useCallback((username: string) => {
+    setGeneratingToken(username);
+  }, []);
+
+  const onSubmit = useCallback(async () => {
+    await saveData();
+    await authenticatedContext.refresh();
+    setChanged(0);
+  }, [saveData, authenticatedContext]);
+
+  const onCancelSubmit = useCallback(async () => {
+    await loadData();
+    setChanged(0);
+  }, [loadData]);
 
   const content = () => {
     if (!data) {
       return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
     }
 
-    const noAdminConfigured = () => !data.users.find((u) => u.admin);
-
-    const removeUser = (toRemove: UserType) => {
-      const users = data.users.filter((u) => u.username !== toRemove.username);
-      updateDataValue({ ...data, users });
-      setChanged(changed + 1);
-    };
-
-    const createUser = () => {
-      setCreating(true);
-      setUser({
-        username: '',
-        password: '',
-        admin: true
-      });
-    };
-
-    const editUser = (toEdit: UserType) => {
-      setCreating(false);
-      setUser({ ...toEdit });
-    };
-
-    const cancelEditingUser = () => {
-      setUser(undefined);
-    };
-
-    const doneEditingUser = () => {
-      if (user) {
-        const users = [
-          ...data.users.filter(
-            (u: { username: string }) => u.username !== user.username
-          ),
-          user
-        ];
-        updateDataValue({ ...data, users });
-        setUser(undefined);
-        setChanged(changed + 1);
-      }
-    };
-
-    const closeGenerateToken = () => {
-      setGeneratingToken(undefined);
-    };
-
-    const generateToken = (username: string) => {
-      setGeneratingToken(username);
-    };
-
-    const onSubmit = async () => {
-      await saveData();
-      await authenticatedContext.refresh();
-      setChanged(0);
-    };
-
-    const onCancelSubmit = async () => {
-      await loadData();
-      setChanged(0);
-    };
-
     interface UserType2 {
       id: string;
       username: string;
@@ -167,10 +178,14 @@ const ManageUsers = () => {
     }
 
     // add id to the type, needed for the table
-    const user_table = data.users.map((u) => ({
-      ...u,
-      id: u.username
-    })) as UserType2[];
+    const user_table = useMemo(
+      () =>
+        data.users.map((u) => ({
+          ...u,
+          id: u.username
+        })) as UserType2[],
+      [data.users]
+    );
 
     return (
       <>
@@ -197,7 +212,7 @@ const ManageUsers = () => {
                       <IconButton
                         size="small"
                         disabled={!authenticatedContext.me.admin}
-                        onClick={() => generateToken(u.username)}
+                        onClick={() => generateTokenForUser(u.username)}
                       >
                         <VpnKeyIcon />
                       </IconButton>
@@ -286,4 +301,4 @@ const ManageUsers = () => {
   );
 };
 
-export default ManageUsers;
+export default memo(ManageUsers);