From 5fb5a0bc5f5824b0ea0006de01e21b89959f4182 Mon Sep 17 00:00:00 2001
From: Anass Bouassaba <ebouassaba@gmail.com>
Date: Sat, 30 Nov 2024 07:59:28 +0100
Subject: [PATCH] refactor(ui): better variable names

---
 ui/src/components/sharing/sharing-groups.tsx |  12 +-
 ui/src/components/sharing/sharing-users.tsx  | 136 +++++++++----------
 2 files changed, 73 insertions(+), 75 deletions(-)

diff --git a/ui/src/components/sharing/sharing-groups.tsx b/ui/src/components/sharing/sharing-groups.tsx
index 420bc5323..07fc89e0d 100644
--- a/ui/src/components/sharing/sharing-groups.tsx
+++ b/ui/src/components/sharing/sharing-groups.tsx
@@ -55,7 +55,7 @@ const SharingGroups = () => {
   const dispatch = useAppDispatch()
   const selection = useAppSelector((state) => state.ui.files.selection)
   const mutateFiles = useAppSelector((state) => state.ui.files.mutate)
-  const [isGrantLoading, setIsGrantLoading] = useState(false)
+  const [isGranting, setIsGranting] = useState(false)
   const [revokedPermission, setRevokedPermission] = useState<string>()
   const [group, setGroup] = useState<Group>()
   const [permission, setPermission] = useState<string>()
@@ -77,23 +77,23 @@ const SharingGroups = () => {
   const handleGrantPermission = useCallback(async () => {
     if (group && permission) {
       try {
-        setIsGrantLoading(true)
+        setIsGranting(true)
         await FileAPI.grantGroupPermission({
           ids: selection,
           groupId: group.id,
-          permission: permission,
+          permission,
         })
         await mutateFiles?.()
         if (isSingleSelection) {
           await mutatePermissions()
         }
         setGroup(undefined)
-        setIsGrantLoading(false)
+        setIsGranting(false)
         if (!isSingleSelection) {
           dispatch(sharingModalDidClose())
         }
       } catch {
-        setIsGrantLoading(false)
+        setIsGranting(false)
       }
     }
   }, [
@@ -153,7 +153,7 @@ const SharingGroups = () => {
           <Button
             leftIcon={<IconCheck />}
             colorScheme="blue"
-            isLoading={isGrantLoading}
+            isLoading={isGranting}
             isDisabled={!group || !permission}
             onClick={() => handleGrantPermission()}
           >
diff --git a/ui/src/components/sharing/sharing-users.tsx b/ui/src/components/sharing/sharing-users.tsx
index d598a370d..740754f8f 100644
--- a/ui/src/components/sharing/sharing-users.tsx
+++ b/ui/src/components/sharing/sharing-users.tsx
@@ -59,7 +59,7 @@ const SharingUsers = () => {
   const dispatch = useAppDispatch()
   const selection = useAppSelector((state) => state.ui.files.selection)
   const mutateFiles = useAppSelector((state) => state.ui.files.mutate)
-  const [isGrantLoading, setIsGrantLoading] = useState(false)
+  const [isGranting, setIsGranting] = useState(false)
   const [revokedPermission, setRevokedPermission] = useState<string>()
   const [user, setUser] = useState<User>()
   const [permission, setPermission] = useState<string>()
@@ -84,23 +84,23 @@ const SharingUsers = () => {
       return
     }
     try {
-      setIsGrantLoading(true)
+      setIsGranting(true)
       await FileAPI.grantUserPermission({
         ids: selection,
         userId: user.id,
-        permission: permission,
+        permission,
       })
       await mutateFiles?.()
       if (isSingleSelection) {
         await mutatePermissions()
       }
       setUser(undefined)
-      setIsGrantLoading(false)
+      setIsGranting(false)
       if (!isSingleSelection) {
         dispatch(sharingModalDidClose())
       }
     } catch {
-      setIsGrantLoading(false)
+      setIsGranting(false)
     }
   }, [
     fileId,
@@ -183,7 +183,7 @@ const SharingUsers = () => {
           <Button
             leftIcon={<IconCheck />}
             colorScheme="blue"
-            isLoading={isGrantLoading}
+            isLoading={isGranting}
             isDisabled={!user || !permission}
             onClick={() => handleGrantPermission()}
           >
@@ -205,72 +205,70 @@ const SharingUsers = () => {
             </div>
           ) : null}
           {permissions && permissions.length > 0 ? (
-            <>
-              <Table>
-                <Thead>
-                  <Tr>
-                    <Th>User</Th>
-                    <Th>Permission</Th>
-                    <Th />
-                  </Tr>
-                </Thead>
-                <Tbody>
-                  {permissions.map((p) => (
-                    <Tr key={p.id}>
-                      <Td className={cx('p-1')}>
-                        <div
+            <Table>
+              <Thead>
+                <Tr>
+                  <Th>User</Th>
+                  <Th>Permission</Th>
+                  <Th />
+                </Tr>
+              </Thead>
+              <Tbody>
+                {permissions.map((p) => (
+                  <Tr key={p.id}>
+                    <Td className={cx('p-1')}>
+                      <div
+                        className={cx(
+                          'flex',
+                          'flex-row',
+                          'items-center',
+                          'gap-1',
+                        )}
+                      >
+                        <Avatar
+                          name={p.user.fullName}
+                          src={
+                            p.user.picture
+                              ? getPictureUrlById(p.user.id, p.user.picture, {
+                                  organizationId: workspace?.organization.id,
+                                })
+                              : undefined
+                          }
+                          size="sm"
                           className={cx(
-                            'flex',
-                            'flex-row',
-                            'items-center',
-                            'gap-1',
+                            'w-[40px]',
+                            'h-[40px]',
+                            'border',
+                            'border-gray-300',
+                            'dark:border-gray-700',
                           )}
-                        >
-                          <Avatar
-                            name={p.user.fullName}
-                            src={
-                              p.user.picture
-                                ? getPictureUrlById(p.user.id, p.user.picture, {
-                                    organizationId: workspace?.organization.id,
-                                  })
-                                : undefined
-                            }
-                            size="sm"
-                            className={cx(
-                              'w-[40px]',
-                              'h-[40px]',
-                              'border',
-                              'border-gray-300',
-                              'dark:border-gray-700',
-                            )}
-                          />
-                          <div className={cx('flex', 'flex-col', 'gap-0.5')}>
-                            <Text noOfLines={1}>{p.user.fullName}</Text>
-                            <span className={cx('text-gray-500')}>
-                              {p.user.email}
-                            </span>
-                          </div>
-                        </div>
-                      </Td>
-                      <Td>
-                        <Badge>{p.permission}</Badge>
-                      </Td>
-                      <Td className={cx('text-end')}>
-                        <IconButton
-                          icon={<IconDelete />}
-                          colorScheme="red"
-                          title="Revoke user permission"
-                          aria-label="Revoke user permission"
-                          isLoading={revokedPermission === p.id}
-                          isDisabled={me?.id === p.user.id}
-                          onClick={() => handleRevokePermission(p)}
                         />
-                      </Td>
-                    </Tr>
-                  ))}
-                </Tbody>
-              </Table>
-            </>
+                        <div className={cx('flex', 'flex-col', 'gap-0.5')}>
+                          <Text noOfLines={1}>{p.user.fullName}</Text>
+                          <span className={cx('text-gray-500')}>
+                            {p.user.email}
+                          </span>
+                        </div>
+                      </div>
+                    </Td>
+                    <Td>
+                      <Badge>{p.permission}</Badge>
+                    </Td>
+                    <Td className={cx('text-end')}>
+                      <IconButton
+                        icon={<IconDelete />}
+                        colorScheme="red"
+                        title="Revoke user permission"
+                        aria-label="Revoke user permission"
+                        isLoading={revokedPermission === p.id}
+                        isDisabled={me?.id === p.user.id}
+                        onClick={() => handleRevokePermission(p)}
+                      />
+                    </Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
           ) : null}
         </>
       ) : null}