Make bdb paginated

app/actions/CompanyActions.ts

@@ -35,15 +35,21 @@ export const fetchAll = ({ fetchMore }: { fetchMore: boolean }) => {
   });
 };
 
-export function fetchAllAdmin(semesterId: EntityId) {
+export function fetchAllAdmin(semesterId: EntityId, fetchMore: boolean) {
   return callAPI<AdminListCompany[]>({
     types: Company.FETCH,
-    endpoint: `/bdb/?semester_id=${semesterId}`,
+    endpoint: `/bdb/`,
     schema: [companySchema],
     meta: {
       errorMessage: 'Henting av bedrifter feilet',
     },
     propagateError: true,
+    query: {
+      semester_id: semesterId,
+    },
+    pagination: {
+      fetchNext: fetchMore,
+    },
   });
 }
 

app/reducers/companies.ts

@@ -105,8 +105,10 @@ const companiesSlice = createSlice({
 
 export default companiesSlice.reducer;
 
-export const { selectAll: selectAllCompanies, selectById: selectCompanyById } =
-  legoAdapter.getSelectors((state: RootState) => state.companies);
+export const {
+  selectAllPaginated: selectAllCompanies,
+  selectById: selectCompanyById,
+} = legoAdapter.getSelectors((state: RootState) => state.companies);
 
 export type TransformedSemesterStatus = Overwrite<
   SemesterStatus,

app/routes/bdb/components/BdbPage.tsx

@@ -8,7 +8,9 @@ import { SelectInput } from 'app/components/Form';
 import Table from 'app/components/Table';
 import { selectTransformedAdminCompanies } from 'app/reducers/companies';
 import { selectAllCompanySemesters } from 'app/reducers/companySemesters';
+import { selectPaginationNext } from 'app/reducers/selectors';
 import { useAppDispatch, useAppSelector } from 'app/store/hooks';
+import { EntityType } from 'app/store/models/entities';
 import { guardLogin } from 'app/utils/replaceUnlessLoggedIn';
 import useQuery from 'app/utils/useQuery';
 import {
@@ -36,9 +38,7 @@ const companiesDefaultQuery = {
 const BdbPage = () => {
   const { query, setQuery } = useQuery(companiesDefaultQuery);
 
-  const companies = useAppSelector(selectTransformedAdminCompanies);
   const companySemesters = useAppSelector(selectAllCompanySemesters);
-  const fetching = useAppSelector((state) => state.companies.fetching);
 
   const resolveCurrentSemester = (
     slug: string | undefined,
@@ -57,6 +57,23 @@ const BdbPage = () => {
     [companySemesters, query.semester],
   );
 
+  console.log(currentCompanySemester);
+  const { pagination } = useAppSelector(
+    selectPaginationNext({
+      endpoint: '/bdb/',
+      entity: EntityType.Companies,
+      query: {
+        semester_id: currentCompanySemester?.id,
+      },
+    }),
+  );
+
+  const companies = useAppSelector((state) =>
+    selectTransformedAdminCompanies(state, { pagination }),
+  );
+
+  const fetching = useAppSelector((state) => state.companies.fetching);
+
   const dispatch = useAppDispatch();
   usePreparedEffect(
     'fetchBdb',
@@ -72,9 +89,9 @@ const BdbPage = () => {
           query.semester,
           companySemesters,
         );
-        return dispatch(fetchAllAdmin(semester!.id));
+        return dispatch(fetchAllAdmin(semester!.id, false));
       }
-      return dispatch(fetchAllAdmin(currentCompanySemester!.id));
+      return dispatch(fetchAllAdmin(currentCompanySemester!.id, false));
     },
     [query.semester, currentCompanySemester, companySemesters],
   );
@@ -193,7 +210,10 @@ const BdbPage = () => {
         filters={query}
         onChange={setQuery}
         loading={fetching}
-        hasMore={false}
+        onLoad={() => {
+          dispatch(fetchAllAdmin(currentCompanySemester?.id, true));
+        }}
+        hasMore={pagination.hasMore}
       />
     </Page>
   );