diff --git a/app/components/Form/SelectInput.tsx b/app/components/Form/SelectInput.tsx index 1530142726..419a03f9cc 100644 --- a/app/components/Form/SelectInput.tsx +++ b/app/components/Form/SelectInput.tsx @@ -80,7 +80,8 @@ const NO_OPTIONS_MESSAGE = 'Ingen treff'; const LOADING_MESSAGE = 'Laster inn ...'; const SelectInput = < - Option extends { label: string; value: number }, + T, + Option extends { label: string; value: T }, IsMulti extends boolean = false, >({ name, diff --git a/app/routes/companyInterest/components/CompanyInterestList.tsx b/app/routes/companyInterest/components/CompanyInterestList.tsx index 1be2817618..8885d78064 100644 --- a/app/routes/companyInterest/components/CompanyInterestList.tsx +++ b/app/routes/companyInterest/components/CompanyInterestList.tsx @@ -16,15 +16,17 @@ import { fetchAll, } from 'app/actions/CompanyInterestActions'; import SelectInput from 'app/components/Form/SelectInput'; -import Table from 'app/components/Table'; +import Table, { type ColumnProps } from 'app/components/Table'; import Tooltip from 'app/components/Tooltip'; import { selectCompanyInterests } from 'app/reducers/companyInterest'; -import { - selectAllCompanySemesters, - selectCompanySemesterById, -} from 'app/reducers/companySemesters'; +import { selectAllCompanySemesters } from 'app/reducers/companySemesters'; import { selectPaginationNext } from 'app/reducers/selectors'; -import { BdbTabs } from 'app/routes/bdb/utils'; +import { + BdbTabs, + getClosestCompanySemester, + getCompanySemesterBySlug, + getSemesterSlugById, +} from 'app/routes/bdb/utils'; import { useAppDispatch, useAppSelector } from 'app/store/hooks'; import { CompanyInterestEventType } from 'app/store/models/CompanyInterest'; import { EntityType } from 'app/store/models/entities'; @@ -36,13 +38,13 @@ import type CompanySemester from 'app/store/models/CompanySemester'; type SemesterOptionType = { id: number; + year: number; semester: string; - year: string; label: string; }; const defaultCompanyInterestsQuery = { - semesters: '', + semester: '', event: CompanyInterestEventType.All, }; @@ -52,34 +54,35 @@ const CompanyInterestList = () => { >(undefined); const { query, setQueryValue } = useQuery(defaultCompanyInterestsQuery); - const semesters = useAppSelector(selectAllCompanySemesters); - const filterSemester = useAppSelector((state) => - selectCompanySemesterById(state, query.semesters), - ); - const selectedSemesterFilterOption = useMemo( - () => ({ - id: Number(query.semesters), - semester: filterSemester?.semester ?? '', - year: filterSemester?.year ?? '', - label: filterSemester - ? semesterToText({ - semester: filterSemester.semester, - year: filterSemester.year, - language: 'norwegian', - }) - : 'Vis alle semestre', - }), - [query.semesters, filterSemester], + const companySemesters = useAppSelector(selectAllCompanySemesters); + + const resolveCurrentSemester = ( + slug: string | undefined, + companySemesters: CompanySemester[], + ) => { + if (slug) { + const companySemester = getCompanySemesterBySlug(slug, companySemesters); + if (companySemester) return companySemester; + } + + return getClosestCompanySemester(companySemesters); + }; + + const currentCompanySemester = useMemo( + () => resolveCurrentSemester(query.semester, companySemesters), + [companySemesters, query.semester], ); + const selectedEventOption: CompanyInterestEventTypeOption = { value: query.event, label: EVENT_TYPE_OPTIONS.find((eventType) => eventType.value === query.event) ?.label ?? 'Vis alle arrangementstyper', }; + const companyInterestList = useAppSelector((state) => selectCompanyInterests(state, { - semesterId: selectedSemesterFilterOption.id, + semesterId: currentCompanySemester?.id ?? 0, eventType: selectedEventOption.value, }), ); @@ -91,6 +94,7 @@ const CompanyInterestList = () => { query, }), ); + const hasMore = pagination.hasMore; const fetching = useAppSelector((state) => state.companyInterest.fetching); const authToken = useAppSelector((state) => state.auth.token); @@ -99,7 +103,7 @@ const CompanyInterestList = () => { useEffect(() => { setGeneratedCSV(undefined); - }, [selectedSemesterFilterOption]); + }, [currentCompanySemester]); usePreparedEffect( 'fetchCompanyInterestList', @@ -119,10 +123,13 @@ const CompanyInterestList = () => { ); const exportInterestList = async (event?: string) => { + if (!currentCompanySemester) { + return; + } const blob = await fetch( getCsvUrl( - selectedSemesterFilterOption.year, - selectedSemesterFilterOption.semester, + currentCompanySemester.year, + currentCompanySemester.semester, event, ), { @@ -133,17 +140,17 @@ const CompanyInterestList = () => { ).then((response) => response.blob()); return { url: URL.createObjectURL(blob), - filename: `company-interests-${selectedSemesterFilterOption.year}-${ - selectedSemesterFilterOption.semester + filename: `company-interests-${currentCompanySemester.year}-${ + currentCompanySemester.semester }${selectedEventOption.value ? `-${selectedEventOption.value}` : ''}.csv`, }; }; - const columns = [ + const columns: ColumnProps<(typeof companyInterestList)[number]>[] = [ { title: 'Bedriftsnavn', dataIndex: 'companyName', - render: (companyName: string, companyInterest: Record) => ( + render: (companyName: string, companyInterest) => ( {companyInterest.company ? companyInterest.company.name : companyName} @@ -188,7 +195,7 @@ const CompanyInterestList = () => { semester: '', label: 'Vis alle semestre', }, - ...semesters.map((semesterObj: CompanySemester) => { + ...companySemesters.map((semesterObj: CompanySemester) => { const { id, year, semester } = semesterObj; return { id, @@ -226,9 +233,25 @@ const CompanyInterestList = () => { - setQueryValue('semesters')(String(clickedOption.id ?? '')) + value={{ + label: currentCompanySemester + ? semesterToText({ + semester: currentCompanySemester.semester, + year: currentCompanySemester.year, + language: 'norwegian', + }) + : 'Vis alle semestre', + value: Number(currentCompanySemester?.id), + year: Number(currentCompanySemester?.year), + semester: currentCompanySemester?.semester ?? '', + }} + onChange={(e) => + setQueryValue('semester')( + getSemesterSlugById( + (e as SemesterOptionType).id, + companySemesters, + ) ?? '', + ) } options={semesterOptions} isClearable={false} @@ -244,8 +267,10 @@ const CompanyInterestList = () => { - setQueryValue('event')(clickedOption.value) + onChange={(e) => + setQueryValue('event')( + (e as CompanyInterestEventTypeOption).value, + ) } options={EVENT_TYPE_OPTIONS} isClearable={false} @@ -263,14 +288,14 @@ const CompanyInterestList = () => { ) : (