Add semester dropdown to bdb (#5127)

* Add semester dropdown to bdb * Fix lint * Apply changes from comments * Fix lint * Fix skeleton animation
webkom · Nov 6, 2024 · 01aac3d · 01aac3d
1 parent 84f5f57
commit 01aac3d
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 10 deletions.
diff --git a/app/components/Form/SelectInput.tsx b/app/components/Form/SelectInput.tsx
@@ -15,7 +15,7 @@ type Props<Option, IsMulti extends boolean = false> = {
   fetching?: boolean;
   className?: string;
   selectStyle?: StylesConfig<Option, IsMulti>;
-  onChange?: (event: ChangeEvent | string | Option[]) => void;
+  onChange?: (event: ChangeEvent | string | Option[] | Option) => void;
   onSearch?: (search: string) => void;
   isValidNewOption?: (arg0: string) => boolean;
   value?: Option | Option[] | null;

diff --git a/app/routes/bdb/components/BdbPage.tsx b/app/routes/bdb/components/BdbPage.tsx
@@ -1,9 +1,10 @@
-import { Card, LinkButton, Page } from '@webkom/lego-bricks';
+import { Card, Flex, LinkButton, Page } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
 import { useMemo } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { Link } from 'react-router-dom';
 import { fetchAllAdmin, fetchSemesters } from 'app/actions/CompanyActions';
+import { SelectInput } from 'app/components/Form';
 import Table from 'app/components/Table';
 import { selectTransformedAdminCompanies } from 'app/reducers/companies';
 import { selectAllCompanySemesters } from 'app/reducers/companySemesters';
@@ -14,18 +15,22 @@ import {
   BdbTabs,
   getClosestCompanySemester,
   getCompanySemesterBySlug,
+  getSemesterSlugById,
   getSemesterStatus,
+  semesterToHumanReadable,
 } from '../utils';
 import SemesterStatus from './SemesterStatus';
+import styles from './bdb.module.css';
 import type { ColumnProps } from 'app/components/Table';
+import type { TransformedSemesterStatus } from 'app/reducers/companies';
 import type CompanySemester from 'app/store/models/CompanySemester';
 import type { UnknownUser } from 'app/store/models/User';
 
 const companiesDefaultQuery = {
   active: '' as '' | 'true' | 'false',
   name: '',
   studentContact: '',
-  semester: undefined,
+  semester: '',
 };
 
 const BdbPage = () => {
@@ -55,22 +60,23 @@ const BdbPage = () => {
   const dispatch = useAppDispatch();
   usePreparedEffect(
     'fetchBdb',
-    () =>
-      dispatch(fetchSemesters()).then((action) => {
+    async () => {
+      if (!companySemesters.length) {
+        const action = await dispatch(fetchSemesters());
         const companySemesterEntities =
           action.payload.entities.companySemesters;
         const companySemesters = Object.values(companySemesterEntities).filter(
           (companySemester) => companySemester !== undefined,
         );
-
         const semester = resolveCurrentSemester(
           query.semester,
           companySemesters,
         );
-
         return dispatch(fetchAllAdmin(semester!.id));
-      }),
-    [],
+      }
+      return dispatch(fetchAllAdmin(currentCompanySemester!.id));
+    },
+    [query.semester, currentCompanySemester, companySemesters],
   );
 
   const columns: ColumnProps<(typeof companies)[number]>[] = [
@@ -148,9 +154,42 @@ const BdbPage = () => {
         Du kan endre semesterstatuser ved å trykke på dem i listen!
       </Card>
 
+      <Flex width="fit-content">
+        <SelectInput
+          name="semester"
+          options={companySemesters
+            .sort((a, b) => (b.semester === 'autumn' ? 1 : -1))
+            .sort((a, b) => b.year - a.year)
+            .map((semester) => ({
+              label: semesterToHumanReadable(
+                semester as TransformedSemesterStatus,
+              ),
+              value: semester.id as number,
+            }))}
+          value={{
+            label: currentCompanySemester
+              ? semesterToHumanReadable(
+                  currentCompanySemester as TransformedSemesterStatus,
+                )
+              : 'Velg semester',
+            value: currentCompanySemester?.id as number,
+          }}
+          onChange={(e) =>
+            setQuery({
+              ...query,
+              semester: getSemesterSlugById(
+                (e as { label: string; value: number }).value,
+                companySemesters,
+              ),
+            })
+          }
+        />
+      </Flex>
+
       <Table
+        className={styles.bdbTable}
         columns={columns}
-        data={companies}
+        data={fetching ? [] : companies}
         filters={query}
         onChange={setQuery}
         loading={fetching}

diff --git a/app/routes/bdb/components/bdb.module.css b/app/routes/bdb/components/bdb.module.css
@@ -48,3 +48,7 @@
 .navigateThroughTime svg {
   color: var(--color-gray-7);
 }
+
+.bdbTable {
+  margin-top: var(--spacing-md);
+}
diff --git a/app/routes/bdb/utils.tsx b/app/routes/bdb/utils.tsx
@@ -4,6 +4,7 @@ import { EventTypeConfig, colorForEventType } from 'app/routes/events/utils';
 import { NonEventContactStatus } from 'app/store/models/Company';
 import { EventType } from 'app/store/models/Event';
 import type { ConfigProperties } from '../events/utils';
+import type { EntityId } from '@reduxjs/toolkit';
 import type { Semester } from 'app/models';
 import type {
   TransformedAdminCompany,
@@ -147,6 +148,17 @@ export const getCompanySemesterBySlug = (
   );
 };
 
+export const getSemesterSlugById = (
+  id: EntityId,
+  companySemesters: CompanySemester[],
+) => {
+  const semester = companySemesters.find((semester) => semester.id === id);
+  if (!semester) {
+    return undefined;
+  }
+  return `${semester.year}${semester.semester === 'autumn' ? 'h' : 'v'}`;
+};
+
 export const httpCheck = (link: string) => {
   const httpLink =
     link.startsWith('http://') || link.startsWith('https://')