Improve RoleAdminPage a bit

Samfundet · Nov 16, 2024 · 9df3c20 · 9df3c20
1 parent 0c11e67
commit 9df3c20
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 68 deletions.
diff --git a/frontend/src/PagesAdmin/RoleAdminPage/RoleAdminPage.tsx b/frontend/src/PagesAdmin/RoleAdminPage/RoleAdminPage.tsx
@@ -1,17 +1,26 @@
 import { useQuery } from '@tanstack/react-query';
-import { useEffect, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useRouteLoaderData } from 'react-router-dom';
 import { H1, Link, Table } from '~/Components';
 import { AdminPageLayout } from '~/PagesAdmin/AdminPageLayout/AdminPageLayout';
 import { getRoleUsers } from '~/api';
-import type { UserGangSectionRoleDto } from '~/dto';
+import type { RoleDto, RoleUsersDto } from '~/dto';
 import { useTitle } from '~/hooks';
 import { KEY } from '~/i18n/constants';
 import { reverse } from '~/named-urls';
+import { roleKeys } from '~/queryKeys';
 import type { RoleLoader } from '~/router/loaders';
 import { ROUTES_FRONTEND } from '~/routes/frontend';
-import { dbT, formatDateYMD, getFullName } from '~/utils';
+import { dbT, formatDateYMDWithTime, getFullDisplayName } from '~/utils';
+
+function getCreatedInfo(ru: RoleUsersDto) {
+  const roleData = ru.org_role || ru.gang_role || ru.section_role;
+  return {
+    createdAt: roleData?.created_at ? formatDateYMDWithTime(new Date(roleData.created_at)) : '',
+    createdBy: roleData?.created_by ? getFullDisplayName(roleData.created_by) : '',
+  };
+}
 
 export function RoleAdminPage() {
   const { t } = useTranslation();
@@ -22,90 +31,83 @@ export function RoleAdminPage() {
   useTitle(title);
 
   const { data, isLoading } = useQuery({
-    queryKey: ['roleusers', role?.id],
-    queryFn: () => {
-      if (!role) {
-        return;
-      }
-      return getRoleUsers(role.id);
-    },
+    queryKey: roleKeys.users((role as RoleDto).id),
+    queryFn: () => (role ? getRoleUsers(role.id) : undefined),
+    enabled: !!role,
   });
 
   const usersColumns = [
-    `${t(KEY.common_name)}`,
-    `${t(KEY.common_role)}`,
-    'Org/Gang/Section',
-    'Hatt rollen siden',
-    'Gitt av',
+    t(KEY.common_name),
+    t(KEY.admin_role_page_orggangsection),
+    t(KEY.admin_role_page_role_since),
+    t(KEY.admin_role_page_given_by),
   ];
 
-  const usersData = useMemo(() => {
-    if (!data) {
-      return [];
-    }
-    return data.map((ru) => {
-      const fullName = getFullName(ru.user) || ru.user.username;
+  const getRoleInfo = useCallback(
+    (ru: RoleUsersDto) => {
       if (ru.org_role) {
         return {
-          cells: [
-            { content: fullName, value: fullName },
-            { content: '', value: '' },
-            {
-              content: (
-                <>
-                  {t(KEY.recruitment_organization)}: ${ru.org_role.organization.name}
-                </>
-              ),
-              value: ru.org_role.organization.name,
-            },
-            { content: formatDateYMD(new Date(ru.org_role.created_at)) },
-            { content: ru.org_role.created_by ? getFullName(ru.org_role.created_by) : '' },
-          ],
+          content: (
+            <>
+              {t(KEY.recruitment_organization)}: {ru.org_role.organization.name}
+            </>
+          ),
+          value: ru.org_role.organization.name,
         };
       }
+
       if (ru.gang_role) {
         return {
-          cells: [
-            { content: fullName, value: fullName },
-            { content: '', value: '' },
-            {
-              content: (
-                <Link
-                  url={reverse({
-                    pattern: ROUTES_FRONTEND.admin_gangs_edit,
-                    urlParams: { gangId: ru.gang_role.gang.id },
-                  })}
-                >
-                  {t(KEY.common_gang)}: {dbT(ru.gang_role.gang, 'name')}
-                </Link>
-              ),
-              value: dbT(ru.gang_role.gang, 'name'),
-            },
-            { content: formatDateYMD(new Date(ru.gang_role.created_at)) },
-            { content: ru.gang_role.created_by ? getFullName(ru.gang_role.created_by) : '' },
-          ],
+          content: (
+            <Link
+              url={reverse({
+                pattern: ROUTES_FRONTEND.admin_gangs_edit,
+                urlParams: { gangId: ru.gang_role.gang.id },
+              })}
+            >
+              {t(KEY.common_gang)}: {dbT(ru.gang_role.gang, 'name')}
+            </Link>
+          ),
+          value: dbT(ru.gang_role.gang, 'name'),
+        };
+      }
+
+      if (ru.section_role) {
+        return {
+          content: (
+            <>
+              {t(KEY.common_section)}: {dbT(ru.section_role.section, 'name')}
+            </>
+          ),
+          value: dbT(ru.section_role.section, 'name'),
         };
       }
-      // There is no other possibility at this stage, section_role is guaranteed to be present here
-      const sectionRole = ru.section_role as UserGangSectionRoleDto;
+
+      // We'll never end up here, but just in case the API changes...
+      return { content: '', value: '' };
+    },
+    [t],
+  );
+
+  const usersData = useMemo(() => {
+    if (!data) {
+      return [];
+    }
+    return data.map((ru) => {
+      const fullName = getFullDisplayName(ru.user);
+      const roleInfo = getRoleInfo(ru);
+      const { createdAt, createdBy } = getCreatedInfo(ru);
+
       return {
         cells: [
           { content: fullName, value: fullName },
-          { content: '', value: '' },
-          {
-            content: (
-              <>
-                {t(KEY.common_section)}: {dbT(sectionRole.section, 'name')}
-              </>
-            ),
-            value: dbT(sectionRole.section, 'name'),
-          },
-          { content: formatDateYMD(new Date(sectionRole.created_at)) },
-          { content: sectionRole.created_by ? getFullName(sectionRole.created_by) : '' },
+          { content: roleInfo.content, value: roleInfo.value },
+          { content: createdAt, value: createdAt },
+          { content: createdBy, value: createdBy },
         ],
       };
     });
-  }, [data, t]);
+  }, [data, getRoleInfo]);
 
   return (
     <AdminPageLayout title={title}>

diff --git a/frontend/src/i18n/constants.ts b/frontend/src/i18n/constants.ts
@@ -422,6 +422,9 @@ export const KEY = {
   admin_saksdokumenter_cannot_reupload: 'admin_saksdokumenter_cannot_reupload',
   admin_impersonate: 'admin_impersonate',
   admin_stop_impersonate: 'admin_stop_impersonate',
+  admin_role_page_orggangsection: 'admin_role_page_orggangsection',
+  admin_role_page_role_since: 'admin_role_page_role_since',
+  admin_role_page_given_by: 'admin_role_page_given_by',
 
   // CommandMenu:
   command_menu_label: 'command_menu_label',

diff --git a/frontend/src/i18n/translations.ts b/frontend/src/i18n/translations.ts
@@ -205,6 +205,9 @@ export const nb = prepareTranslations({
   [KEY.role_content_type]: 'Hierarkinivå',
   [KEY.admin_impersonate]: 'Stjel identitet',
   [KEY.admin_stop_impersonate]: 'Stopp identitetstyveri',
+  [KEY.admin_role_page_orggangsection]: 'Org/Gjeng/Seksjon',
+  [KEY.admin_role_page_role_since]: 'Hatt rollen siden',
+  [KEY.admin_role_page_given_by]: 'Gitt av',
 
   // LoginPage:
   [KEY.loginpage_register]: 'Lag bruker',
@@ -691,6 +694,9 @@ export const en = prepareTranslations({
   [KEY.role_content_type]: 'Hierarchical level',
   [KEY.admin_impersonate]: 'Impersonate',
   [KEY.admin_stop_impersonate]: 'Stop impersonation',
+  [KEY.admin_role_page_orggangsection]: 'Org/Gang/Section',
+  [KEY.admin_role_page_role_since]: 'Had role since',
+  [KEY.admin_role_page_given_by]: 'Given by',
 
   // LoginPage:
   [KEY.loginpage_register]: 'Create user',

diff --git a/frontend/src/queryKeys.ts b/frontend/src/queryKeys.ts
@@ -4,6 +4,7 @@ export const roleKeys = {
   list: (filters: unknown[]) => [...roleKeys.lists(), { filters }] as const,
   details: () => [...roleKeys.all, 'detail'] as const,
   detail: (id: number) => [...roleKeys.details(), id] as const,
+  users: (id: number) => [...roleKeys.detail(id), 'users'] as const,
 };
 
 export const infoPageKeys = {