feat: move profile list items into profiles

plugin-hrm-form/src/components/profile/ProfileListPage/ProfileListPage.tsx

@@ -0,0 +1,52 @@
+/**
+ * Copyright (C) 2021-2023 Technology Matters
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see https://www.gnu.org/licenses/.
+ */
+
+import React from 'react';
+
+import { CLTable, CLTableRow, CLTableCell } from '../../../styles/caseList';
+import { useProfileListLoader } from '../../../states/profile/hooks/useProfileListLoader';
+import { useProfileList } from '../../../states/profile/hooks/useProfileList';
+import ProfileListRow from './ProfileListRow';
+
+const ProfileListPage: React.FC = () => {
+  useProfileListLoader();
+  const { loading, profileIds } = useProfileList();
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <>
+      <h1>Clients</h1>
+      <CLTable>
+        <CLTableRow>
+          <CLTableCell> Client</CLTableCell>
+          <CLTableCell> Identifier(s)</CLTableCell>
+          <CLTableCell> Status</CLTableCell>
+          <CLTableCell> Blocked</CLTableCell>
+          <CLTableCell> Overview</CLTableCell>
+        </CLTableRow>
+        {profileIds?.map(profileId => (
+          <ProfileListRow key={profileId} profileId={profileId} />
+        ))}
+      </CLTable>
+    </>
+  );
+};
+
+// eslint-disable-next-line import/no-unused-modules
+export default ProfileListPage;

plugin-hrm-form/src/components/profile/ProfileListPage/ProfileListRow.tsx

@@ -0,0 +1,36 @@
+/**
+ * Copyright (C) 2021-2023 Technology Matters
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see https://www.gnu.org/licenses/.
+ */
+
+import React from 'react';
+
+import { useProfile } from '../../../states/profile/hooks/useProfile';
+import { Profile } from '../../../states/profile/types';
+import { CLTableRow, CLTableCell } from '../../../styles/caseList';
+
+type Props = {
+  profileId: Profile['id'];
+};
+
+const ProfileListRow: React.FC<Props> = ({ profileId }) => {
+  const { profile } = useProfile({ profileId });
+  return (
+    <CLTableRow>
+      <CLTableCell>{profile?.name}</CLTableCell>
+    </CLTableRow>
+  );
+};
+
+export default ProfileListRow;

plugin-hrm-form/src/components/profile/ProfileListPage/index.tsx

@@ -14,31 +14,6 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/.
  */
 
-import React from 'react';
+import ProfileListPage from './ProfileListPage';
 
-import { CLTableRow, CLTableCell } from '../../../styles/caseList';
-import { useProfileListLoader } from '../../../states/profile/hooks/useProfileListLoader';
-import { useProfileList } from '../../../states/profile/hooks/useProfileList';
-
-const ProfileListPage: React.FC = () => {
-  useProfileListLoader();
-  const { profiles } = useProfileList();
-  console.log('>>> ', profiles);
-  return (
-    <>
-      <h1>Clients</h1>
-      <div>
-        <CLTableRow>
-          <CLTableCell> Client</CLTableCell>
-          <CLTableCell> Identifier(s)</CLTableCell>
-          <CLTableCell> Status</CLTableCell>
-          <CLTableCell> Blocked</CLTableCell>
-          <CLTableCell> Overview</CLTableCell>
-        </CLTableRow>
-      </div>
-    </>
-  );
-};
-
-// eslint-disable-next-line import/no-unused-modules
 export default ProfileListPage;

plugin-hrm-form/src/states/profile/hooks/useProfileList.ts

@@ -19,15 +19,15 @@ import { Profile } from '../types';
 import * as ProfileSelectors from '../selectors';
 
 type UseProfileListReturn = {
-  profiles: Profile[] | undefined;
+  profileIds: Profile['id'][] | undefined;
   loading: boolean | undefined;
 };
 
 export const useProfileList = (): UseProfileListReturn => {
-  const profiles = useSelector((state: any) => ProfileSelectors.selectProfileListState(state)?.data);
+  const profileIds = useSelector((state: any) => ProfileSelectors.selectProfileListState(state)?.data);
   const loading = useSelector((state: any) => ProfileSelectors.selectProfileListState(state)?.loading);
   return {
-    profiles,
+    profileIds,
     loading,
   };
 };

plugin-hrm-form/src/states/profile/profileList.ts

@@ -50,9 +50,11 @@ const handleLoadProfileListRejectedAction = (state: t.ProfileListState, action:
 const handleLoadProfileListFulfilledAction = (state: t.ProfileListState, action: any) => {
   const update = {
     loading: false,
-    data: action.payload,
+    data: action.payload.profiles?.map((profile: any) => profile.id),
   };
 
+  console.log('>>>handleLoadProfileListFulfilledAction', update);
+
   return loadProfileListEntryIntoRedux(state, update);
 };
 

plugin-hrm-form/src/states/profile/profiles.ts

@@ -19,6 +19,7 @@ import { parseFetchError } from '../parseFetchError';
 import * as ProfileService from '../../services/ProfileService';
 import { loadIdentifierByIdentifierAsync } from './identifiers';
 import loadProfileEntryIntoRedux from './loadProfileEntryIntoRedux';
+import { loadProfileListAsync } from './profileList';
 import * as t from './types';
 
 export const PAGE_SIZE = 20;
@@ -323,6 +324,24 @@ export const updateProfileSectionAsync = createAsyncAction(
   (params: UpdateProfileSectionAsyncParams) => params,
 );
 
+export const handleLoadProfileListFulfilledAction = (state: t.ProfilesState, action: any) => {
+  const { profiles } = action.payload;
+  let newState = { ...state };
+  for (const profile of profiles) {
+    const profileUpdate = {
+      ...t.newProfileEntry,
+      data: {
+        ...newState[profile.id]?.data,
+        ...profile,
+      },
+    };
+
+    newState = loadProfileEntryIntoRedux(newState, profile.id, profileUpdate);
+  }
+
+  return newState;
+};
+
 const profilesReducer = (initialState: t.ProfilesState = {}) =>
   createReducer(initialState, handleAction => [
     handleAction(loadProfileAsync.pending, handleLoadProfilePendingAction),
@@ -349,6 +368,7 @@ const profilesReducer = (initialState: t.ProfilesState = {}) =>
     handleAction(updateProfileSectionAsync.pending, handleLoadProfileSectionPendingAction),
     handleAction(updateProfileSectionAsync.rejected, handleLoadProfileSectionRejectedAction),
     handleAction(updateProfileSectionAsync.fulfilled, handleLoadProfileSectionFulfilledAction),
+    handleAction(loadProfileListAsync.fulfilled, handleLoadProfileListFulfilledAction),
   ]);
 
 export default profilesReducer;

plugin-hrm-form/src/states/profile/types.ts

@@ -61,7 +61,7 @@ export const initialProfileFlagsState: ProfileFlagsState = {
 };
 
 export type ProfileListState = {
-  data?: Profile[];
+  data?: Profile['id'][];
   error?: ParseFetchErrorResult;
   loading: boolean;
 };