fix: addressing pr comments

Author: jacobo-dominguez-wgu

src/authz-module/audit-user/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import debounce from 'lodash.debounce';
 import {
@@ -24,11 +24,14 @@ const AuditUserPage = () => {
   const navigate = useNavigate();
   const { isLoading: isLoadingUser, data: user } = useUserAccount(username ?? '');
   const { querySettings, handleTableFetch } = useQuerySettings();
-  const { data: { results: userAssignments } = { results: [] } } = useUserAssignedRoles(username ?? '', querySettings);
+  const { isLoading: isLoadingUserAssignments, data: { results: userAssignments, count } = { results: [], count: 0 } } = useUserAssignedRoles(username ?? '', querySettings);
+
+  useEffect(() => {
+    if (!user && !isLoadingUser) {
+      navigate(AUTHZ_HOME_PATH);
+    }
+  }, [user, isLoadingUser, navigate]);
 
-  if (!user && !isLoadingUser) {
-    navigate(AUTHZ_HOME_PATH);
-  }
   const navLinks = [
     {
       label: formatMessage(baseMessages['authz.management.home.nav.link']),
@@ -71,7 +74,7 @@ const AuditUserPage = () => {
       disableSortBy: true,
     },
   ];
-  const pageCount = userAssignments?.length ? Math.ceil(userAssignments.length / TABLE_DEFAULT_PAGE_SIZE) : 1;
+  const pageCount = Math.ceil(count / TABLE_DEFAULT_PAGE_SIZE);
 
   const fetchData = useMemo(() => debounce(handleTableFetch, 500), [handleTableFetch]);
 
@@ -99,11 +102,12 @@ const AuditUserPage = () => {
             manualPagination
             data={userAssignments}
             fetchData={fetchData}
-            itemCount={userAssignments?.length || 0}
+            itemCount={count}
             pageCount={pageCount}
             initialState={{ pageSize: TABLE_DEFAULT_PAGE_SIZE }}
             additionalColumns={additionalColumns}
             columns={columns}
+            isLoading={isLoadingUserAssignments}
           >
             <DataTable.Table />
             <TableFooter />

src/authz-module/authz-home/index.tsx

@@ -14,7 +14,7 @@ const AuthzHome = () => {
   const pageTitle = intl.formatMessage(messages['authz.manage.page.title']);
 
   return (
-    <div className="authz-libraries">
+    <div className="authz-module">
       <AuthZLayout
         context={{ id: '', title: '', org: '' }}
         navLinks={[{ label: rootBreadcrumb }]}

src/authz-module/index.tsx

@@ -30,11 +30,11 @@ const AuthZModule = () => (
                 <Route path={ROUTES.LIBRARIES_TEAM_PATH} element={<LibrariesTeamManager />} />
               </Route>
               <Route index element={<AuthzHome />} />
-              <Route path="*" element={<NotFoundError />} />
               <Route
                 path={ROUTES.AUDIT_USER_PATH}
                 element={<AuditUserPage />}
               />
+              <Route path="*" element={<NotFoundError />} />
             </Routes>
           </Suspense>
         </ToastManagerProvider>

src/data/types.ts

@@ -1,39 +1,39 @@
 export type ProfileImage = {
-  has_image: boolean;
-  image_url_full: string;
-  image_url_large: string;
-  image_url_medium: string;
-  image_url_small: string;
+  hasImage: boolean;
+  imageUrlFull: string;
+  imageUrlLarge: string;
+  imageUrlMedium: string;
+  imageUrlSmall: string;
 };
 
 export type UserAccount = {
-  account_privacy: string;
-  profile_image: ProfileImage;
+  accountPrivacy: string;
+  profileImage: ProfileImage;
   username: string;
   bio: string | null;
-  course_certificates: unknown | null; // Type unclear from data
+  courseCertificates: unknown | null; // Type unclear from data
   country: string | null;
-  date_joined: string; // ISO date string
-  language_proficiencies: unknown[]; // Array type unclear from empty data
-  level_of_education: string | null;
-  social_links: unknown[]; // Array type unclear from empty data
-  time_zone: string | null;
+  dateJoined: string; // ISO date string
+  languageProficiencies: unknown[]; // Array type unclear from empty data
+  levelOfEducation: string | null;
+  socialLinks: unknown[]; // Array type unclear from empty data
+  timeZone: string | null;
   name: string;
   email: string;
   id: number;
-  verified_name: string | null;
-  extended_profile: unknown[]; // Array type unclear from empty data
+  verifiedName: string | null;
+  extendedProfile: unknown[]; // Array type unclear from empty data
   gender: string | null;
   state: string | null;
   goals: string;
-  is_active: boolean;
-  last_login: string; // ISO date string
-  mailing_address: string;
-  requires_parental_consent: boolean;
-  secondary_email: string | null;
-  secondary_email_enabled: boolean | null;
-  year_of_birth: number | null;
-  phone_number: string | null;
-  activation_key: string;
-  pending_name_change: string | null;
+  isActive: boolean;
+  lastLogin: string; // ISO date string
+  mailingAddress: string;
+  requiresParentalConsent: boolean;
+  secondaryEmail: string | null;
+  secondaryEmailEnabled: boolean | null;
+  yearOfBirth: number | null;
+  phoneNumber: string | null;
+  activationKey: string;
+  pendingNameChange: string | null;
 };