Implement filtering on companies and company interests

app/actions/CompanyActions.ts

@@ -4,8 +4,8 @@ import {
   companySemesterSchema,
   eventSchema,
 } from 'app/reducers';
+import { semesterToText } from 'app/routes/bdb/components/companyInterest/utils';
 import createQueryString from 'app/utils/createQueryString';
-import { semesterToText } from '../routes/companyInterest/utils';
 import { Company, Event } from './ActionTypes';
 import type { EntityId } from '@reduxjs/toolkit';
 import type { FormValues as CompanyContactEditorFormValues } from 'app/routes/bdb/components/CompanyContactEditor';
@@ -18,18 +18,25 @@ import type {
   SemesterStatus,
 } from 'app/store/models/Company';
 import type CompanySemester from 'app/store/models/CompanySemester';
+import type { ParsedQs } from 'qs';
 
-export const fetchAll = ({ fetchMore }: { fetchMore: boolean }) => {
+export const fetchAll = ({
+  fetchMore,
+  query,
+}: {
+  fetchMore: boolean;
+  query: ParsedQs;
+}) => {
   return callAPI<ListCompany[]>({
     types: Company.FETCH,
     endpoint: '/companies/',
     schema: [companySchema],
+    query,
     pagination: {
       fetchNext: fetchMore,
     },
     meta: {
       errorMessage: 'Henting av bedrifter feilet',
-      queryString: '',
     },
     propagateError: true,
   });

app/components/Search/Search.module.css

@@ -2,7 +2,7 @@
 
 .wrapper {
   position: fixed;
-  inset: var(--development-banner-height) 0 0;
+  inset: 0;
   z-index: 200;
   overflow-y: auto;
   display: flex;
@@ -29,7 +29,7 @@
 }
 
 .inputContainer {
-  margin: 0 var(--spacing-md);
+  margin: var(--development-banner-height) var(--spacing-md) 0;
   height: var(--lego-header-height);
   border-bottom: 1.5px solid var(--border-gray);
 }

app/reducers/companies.ts

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

app/reducers/companySemesters.ts

@@ -1,6 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { createSelector } from 'reselect';
-import { sortSemesterChronologically } from 'app/routes/companyInterest/utils';
+import { sortSemesterChronologically } from 'app/routes/bdb/components/companyInterest/utils';
 import { EntityType } from 'app/store/models/entities';
 import createLegoAdapter from 'app/utils/legoAdapter/createLegoAdapter';
 import { Company } from '../actions/ActionTypes';

app/routes/admin/email/components/EmailLists.tsx

@@ -7,6 +7,7 @@ import Tag from 'app/components/Tags/Tag';
 import { selectEmailLists } from 'app/reducers/emailLists';
 import { selectPaginationNext } from 'app/reducers/selectors';
 import { useAppDispatch, useAppSelector } from 'app/store/hooks';
+import { EntityType } from 'app/store/models/entities';
 import useQuery from 'app/utils/useQuery';
 
 const emailListsDefaultQuery = {
@@ -21,7 +22,7 @@ const EmailLists = () => {
   const { pagination } = useAppSelector((state) =>
     selectPaginationNext({
       endpoint: '/email-lists/',
-      entity: 'emailLists',
+      entity: EntityType.EmailLists,
       query,
     })(state),
   );

app/routes/admin/email/components/EmailUsers.tsx

@@ -11,6 +11,7 @@ import { selectTransformedEmailUsers } from 'app/reducers/emailUsers';
 import { selectGroupsByType } from 'app/reducers/groups';
 import { selectPaginationNext } from 'app/reducers/selectors';
 import { useAppDispatch, useAppSelector } from 'app/store/hooks';
+import { EntityType } from 'app/store/models/entities';
 import useQuery from 'app/utils/useQuery';
 import type { ColumnProps } from 'app/components/Table';
 
@@ -35,7 +36,7 @@ const EmailUsers = () => {
   const { pagination } = useAppSelector((state) =>
     selectPaginationNext({
       endpoint: '/email-users/',
-      entity: 'emailUsers',
+      entity: EntityType.EmailUsers,
       query,
     })(state),
   );

app/routes/articles/components/ArticleList.tsx

@@ -13,6 +13,7 @@ import { selectPaginationNext } from 'app/reducers/selectors';
 import { selectPopularTags } from 'app/reducers/tags';
 import { selectUsersByIds } from 'app/reducers/users';
 import { useAppDispatch, useAppSelector } from 'app/store/hooks';
+import { EntityType } from 'app/store/models/entities';
 import useQuery from 'app/utils/useQuery';
 import styles from '../articles.module.css';
 import type { PublicArticle } from 'app/store/models/Article';
@@ -76,7 +77,7 @@ const ArticleList = () => {
     selectPaginationNext({
       endpoint: `/articles/`,
       query,
-      entity: 'articles',
+      entity: EntityType.Articles,
     })(state),
   );
   const articles: PublicArticle[] = useAppSelector((state) =>

app/routes/bdb/components/BdbPage.tsx

@@ -1,7 +1,6 @@
-import { Card, Flex, LinkButton, Page } from '@webkom/lego-bricks';
+import { Card, Flex } 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';
@@ -12,7 +11,6 @@ import { useAppDispatch, useAppSelector } from 'app/store/hooks';
 import { guardLogin } from 'app/utils/replaceUnlessLoggedIn';
 import useQuery from 'app/utils/useQuery';
 import {
-  BdbTabs,
   getClosestCompanySemester,
   getCompanySemesterBySlug,
   getSemesterSlugById,
@@ -139,16 +137,8 @@ const BdbPage = () => {
     },
   ];
 
-  const title = 'Bedriftsdatabase';
-
   return (
-    <Page
-      title={title}
-      actionButtons={<LinkButton href="/bdb/add">Ny bedrift</LinkButton>}
-      tabs={<BdbTabs />}
-    >
-      <Helmet title={title} />
-
+    <>
       <Card severity="info">
         <Card.Header>Tips</Card.Header>
         Du kan endre semesterstatuser ved å trykke på dem i listen!
@@ -195,7 +185,7 @@ const BdbPage = () => {
         loading={fetching}
         hasMore={false}
       />
-    </Page>
+    </>
   );
 };
 

app/routes/companyInterest/components/CompanyInterestList.tsx → app/routes/bdb/components/companyInterest/components/CompanyInterestList.tsx

@@ -4,7 +4,6 @@ import {
   Flex,
   Icon,
   LinkButton,
-  Page,
 } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
 import { FileDown, Trash2 } from 'lucide-react';
@@ -22,7 +21,6 @@ import { selectCompanyInterests } from 'app/reducers/companyInterest';
 import { selectAllCompanySemesters } from 'app/reducers/companySemesters';
 import { selectPaginationNext } from 'app/reducers/selectors';
 import {
-  BdbTabs,
   getClosestCompanySemester,
   getCompanySemesterBySlug,
   getSemesterSlugById,
@@ -46,20 +44,25 @@ type SemesterOptionType = {
 const defaultCompanyInterestsQuery = {
   semester: '',
   event: CompanyInterestEventType.All,
+  companyName: '',
 };
 
 const CompanyInterestList = () => {
   const [generatedCSV, setGeneratedCSV] = useState<
     { url: string; filename: string } | undefined
   >(undefined);
 
-  const { query, setQueryValue } = useQuery(defaultCompanyInterestsQuery);
+  const { query, setQuery, setQueryValue } = useQuery(
+    defaultCompanyInterestsQuery,
+  );
   const companySemesters = useAppSelector(selectAllCompanySemesters);
 
   const resolveCurrentSemester = (
     slug: string | undefined,
     companySemesters: CompanySemester[],
   ) => {
+    if (slug === '') return null;
+
     if (slug) {
       const companySemester = getCompanySemesterBySlug(slug, companySemesters);
       if (companySemester) return companySemester;
@@ -115,10 +118,10 @@ const CompanyInterestList = () => {
       ),
     [query],
   );
+
   usePreparedEffect(
     'fetchCompanyInterestListSemesters',
     () => dispatch(fetchSemesters()),
-
     [],
   );
 
@@ -150,8 +153,10 @@ const CompanyInterestList = () => {
     {
       title: 'Bedriftsnavn',
       dataIndex: 'companyName',
+      search: true,
+      inlineFiltering: true,
       render: (companyName: string, companyInterest) => (
-        <Link to={`/company-interest/${companyInterest.id}/edit`}>
+        <Link to={`/bdb/company-interest/${companyInterest.id}/edit`}>
           {companyInterest.company ? companyInterest.company.name : companyName}
         </Link>
       ),
@@ -180,7 +185,12 @@ const CompanyInterestList = () => {
             }}
           >
             {({ openConfirmModal }) => (
-              <Icon onPress={openConfirmModal} iconNode={<Trash2 />} danger />
+              <Icon
+                onPress={openConfirmModal}
+                iconNode={<Trash2 />}
+                size={18}
+                danger
+              />
             )}
           </ConfirmModal>
         </Flex>
@@ -216,15 +226,7 @@ const CompanyInterestList = () => {
   });
 
   return (
-    <Page
-      title="Bedriftsinteresser"
-      actionButtons={
-        <LinkButton href="/company-interest/create">
-          Ny bedriftsinteresse
-        </LinkButton>
-      }
-      tabs={<BdbTabs />}
-    >
+    <>
       <Flex column gap="var(--spacing-md)">
         <p>
           Her finner du all praktisk informasjon knyttet til bedriftsinteresser
@@ -257,7 +259,7 @@ const CompanyInterestList = () => {
               isClearable={false}
             />
           </Flex>
-          <LinkButton href="/company-interest/semesters">
+          <LinkButton href="/bdb/company-interest/semesters">
             Endre aktive semestre
           </LinkButton>
         </Flex>
@@ -315,10 +317,12 @@ const CompanyInterestList = () => {
           }}
           hasMore={hasMore}
           loading={fetching}
+          filters={query}
+          onChange={setQuery}
           data={companyInterestList}
         />
       </Flex>
-    </Page>
+    </>
   );
 };
 

app/routes/companyInterest/components/CompanyInterestPage.tsx → app/routes/bdb/components/companyInterest/components/CompanyInterestPage.tsx

@@ -437,7 +437,7 @@ const CompanyInterestPage = () => {
         : createCompanyInterest(newData, isEnglish),
     ).then(() => {
       navigate(
-        allowedBdb ? '/company-interest' : '/pages/bedrifter/for-bedrifter',
+        allowedBdb ? '/bdb/company-interest' : '/pages/bedrifter/for-bedrifter',
       );
     });
   };
@@ -506,7 +506,7 @@ const CompanyInterestPage = () => {
   return (
     <Page
       title={title}
-      back={edit ? { href: '/company-interest' } : undefined}
+      back={edit ? { href: '/bdb/company-interest' } : undefined}
       actionButtons={
         !edit && (
           <Link to={isEnglish ? '/interesse' : '/register-interest'}>

app/routes/companyInterest/components/CompanySemesterGUI.tsx → app/routes/bdb/components/companyInterest/components/CompanySemesterGUI.tsx

@@ -40,7 +40,10 @@ const validate = createValidator({
 
 const CompanySemesterGUI = () => {
   return (
-    <Page title="Endre aktive semestre" back={{ href: '/company-interest' }}>
+    <Page
+      title="Endre aktive semestre"
+      back={{ href: '/bdb/company-interest' }}
+    >
       <Flex wrap gap="var(--spacing-xl)">
         <Flex column>
           <AddSemesterForm />