VKT(Frontend): ExaminerExamEvent filtering

frontend/packages/vkt/src/components/examinerExamEvent/listing/ExaminerExamEventToggleFilters.tsx

@@ -3,23 +3,25 @@ import { ToggleFilterGroup } from 'shared/components';
 import { useExaminerTranslation } from 'configs/i18n';
 import { useAppDispatch, useAppSelector } from 'configs/redux';
 import { ExamEventToggleFilter } from 'enums/app';
-import { setExamEventToggleFilter } from 'redux/reducers/clerkListExamEvent';
-import { clerkListExamEventsSelector } from 'redux/selectors/clerkListExamEvent';
+import { setExaminerExamEventToggleFilter } from 'redux/reducers/examinerDetails';
+import { examinerDetailsSelector } from 'redux/selectors/examinerDetails';
 import { ExamEventUtils } from 'utils/examEvent';
 
 export const ExaminerExamEventToggleFilters = () => {
   const { t } = useExaminerTranslation({
     keyPrefix: 'vkt.component.examinerExamEventListing.toggleFilters',
   });
 
-  const { examEvents, toggleFilter } = useAppSelector(
-    clerkListExamEventsSelector,
-  );
+  const { toggleFilter } = useAppSelector(
+    examinerDetailsSelector,
+  ).examEventFilters;
+  const { examiner } = useAppSelector(examinerDetailsSelector);
   const dispatch = useAppDispatch();
 
   const setToggleFilter = (status: ExamEventToggleFilter) => {
-    dispatch(setExamEventToggleFilter(status));
+    dispatch(setExaminerExamEventToggleFilter(status));
   };
+  const examEvents = examiner?.examEvents || [];
 
   const filterData = [
     {

frontend/packages/vkt/src/interfaces/examinerDetails.ts

@@ -1,6 +1,7 @@
 import { APIResponseStatus } from 'shared/enums';
 import { WithId } from 'shared/interfaces';
 
+import { ExamEventToggleFilter, ExamLanguage } from 'enums/app';
 import {
   ExaminerExamEvent,
   ExaminerExamEventResponse,
@@ -12,6 +13,10 @@ export interface ExaminerDetailsState {
   examiner?: ExaminerDetails;
   oid?: string;
   initialized?: boolean;
+  examEventFilters: {
+    languageFilter: ExamLanguage;
+    toggleFilter: ExamEventToggleFilter;
+  };
 }
 
 export interface ExaminerDetails extends WithId {

frontend/packages/vkt/src/pages/examiner/ExaminerHomePage.tsx

@@ -1,21 +1,26 @@
-import { Box, Divider, Grid, Paper } from '@mui/material';
+import { Box, Divider, Grid, Paper, SelectChangeEvent } from '@mui/material';
 import { FC, Fragment, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { CustomButtonLink, H1, H2, Text } from 'shared/components';
 import { APIResponseStatus, Color, Variant } from 'shared/enums';
 import { DateUtils } from 'shared/utils';
 
+import { LanguageFilter } from 'components/common/LanguageFilter';
 import { ExaminerExamEventToggleFilters } from 'components/examinerExamEvent/listing/ExaminerExamEventToggleFilters';
 import {
   useCommonTranslation,
   useExaminerTranslation,
   useKoodistoMunicipalitiesTranslation,
 } from 'configs/i18n';
 import { useAppDispatch, useAppSelector } from 'configs/redux';
-import { AppRoutes } from 'enums/app';
-import { loadExaminerDetails } from 'redux/reducers/examinerDetails';
+import { AppRoutes, ExamLanguage } from 'enums/app';
+import {
+  loadExaminerDetails,
+  setExaminerExamEventLanguageFilter,
+} from 'redux/reducers/examinerDetails';
 import { clerkUserSelector } from 'redux/selectors/clerkUser';
 import { examinerDetailsSelector } from 'redux/selectors/examinerDetails';
+import { selectFilteredExaminerExamEvents } from 'redux/selectors/examinerListExamEvent';
 import { ExaminerUtils } from 'utils/examiner';
 
 const PublicInformation = () => {
@@ -115,17 +120,32 @@ const ExamEvents = () => {
   const { t } = useExaminerTranslation({
     keyPrefix: 'vkt.component.examinerOverview.examEvents',
   });
-  // TODO Get exam events from redux state & render them
-  const examEvents = [];
+
+  const filteredExamEvents = useAppSelector(selectFilteredExaminerExamEvents);
+  const { examEventFilters } = useAppSelector(examinerDetailsSelector);
+  const dispatch = useAppDispatch();
+
+  const handleLanguageFilterChange = (event: SelectChangeEvent) => {
+    dispatch(
+      setExaminerExamEventLanguageFilter(event.target.value as ExamLanguage),
+    );
+  };
 
   return (
     <div className="examiner-homepage__exam-events rows gapped-xl">
       <H2>{t('heading')}</H2>
       <Divider />
       <ExaminerExamEventToggleFilters />
-      {examEvents.length === 0 && (
+      <LanguageFilter
+        value={examEventFilters.languageFilter}
+        onChange={handleLanguageFilterChange}
+      />
+      {filteredExamEvents.length === 0 && (
         <Text className="empty-results">{t('labels.noExamEvents')}</Text>
       )}
+      {filteredExamEvents.length > 0 && (
+        <Text>Tuloksia on, pitäis vissiin rendaa????</Text>
+      )}
     </div>
   );
 };

frontend/packages/vkt/src/redux/reducers/examinerDetails.ts

@@ -1,13 +1,18 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { APIResponseStatus } from 'shared/enums';
 
+import { ExamEventToggleFilter, ExamLanguage } from 'enums/app';
 import {
   ExaminerDetails,
   ExaminerDetailsState,
 } from 'interfaces/examinerDetails';
 
 const initialState: ExaminerDetailsState = {
   status: APIResponseStatus.NotStarted,
+  examEventFilters: {
+    languageFilter: ExamLanguage.ALL,
+    toggleFilter: ExamEventToggleFilter.Upcoming,
+  },
 };
 
 const examinerDetailsSlice = createSlice({
@@ -30,6 +35,18 @@ const examinerDetailsSlice = createSlice({
     setExaminerOid(state, action: PayloadAction<string>) {
       state.oid = action.payload;
     },
+    setExaminerExamEventLanguageFilter(
+      state,
+      action: PayloadAction<ExamLanguage>,
+    ) {
+      state.examEventFilters.languageFilter = action.payload;
+    },
+    setExaminerExamEventToggleFilter(
+      state,
+      action: PayloadAction<ExamEventToggleFilter>,
+    ) {
+      state.examEventFilters.toggleFilter = action.payload;
+    },
   },
 });
 
@@ -39,4 +56,6 @@ export const {
   rejectExaminerDetails,
   storeExaminerDetails,
   setExaminerOid,
+  setExaminerExamEventLanguageFilter,
+  setExaminerExamEventToggleFilter,
 } = examinerDetailsSlice.actions;

frontend/packages/vkt/src/redux/selectors/examinerListExamEvent.ts

@@ -0,0 +1,36 @@
+import { createSelector } from 'reselect';
+
+import { RootState } from 'configs/redux';
+import { ExamEventToggleFilter, ExamLanguage } from 'enums/app';
+import { ExaminerDetails } from 'interfaces/examinerDetails';
+import { ExaminerExamEvent } from 'interfaces/examinerExamEvent';
+import { ExamEventUtils } from 'utils/examEvent';
+
+export const examinerListExamEventsSelector = (state: RootState) =>
+  state.clerkListExamEvent;
+
+export const selectFilteredExaminerExamEvents = createSelector(
+  (state: RootState) => state.examinerDetails.examEventFilters.languageFilter,
+  (state: RootState) => state.examinerDetails.examEventFilters.toggleFilter,
+  (state: RootState) => state.examinerDetails.examiner,
+  (
+    languageFilter: ExamLanguage,
+    toggleFilter: ExamEventToggleFilter,
+    examiner?: ExaminerDetails,
+  ) => {
+    const examEvents = examiner?.examEvents || [];
+    let filteredExamEvents = examEvents;
+
+    if (languageFilter !== ExamLanguage.ALL) {
+      filteredExamEvents = filteredExamEvents.filter(
+        (e: ExaminerExamEvent) => e.language === languageFilter,
+      );
+    }
+
+    if (toggleFilter === ExamEventToggleFilter.Upcoming) {
+      return ExamEventUtils.getUpcomingExamEvents(filteredExamEvents);
+    } else {
+      return ExamEventUtils.getPassedExamEvents(filteredExamEvents);
+    }
+  },
+);

frontend/packages/vkt/src/utils/examEvent.ts

@@ -5,6 +5,7 @@ import { EnrollmentStatus, ExamLanguage, ExamLevel } from 'enums/app';
 import { ClerkEnrollment } from 'interfaces/clerkEnrollment';
 import { ClerkExamEvent } from 'interfaces/clerkExamEvent';
 import { ClerkListExamEvent } from 'interfaces/clerkListExamEvent';
+import { ExaminerExamEvent } from 'interfaces/examinerExamEvent';
 import { PublicExamEvent } from 'interfaces/publicExamEvent';
 
 export class ExamEventUtils {
@@ -30,13 +31,17 @@ export class ExamEventUtils {
     return isSeatsAvailable && isQueue;
   }
 
-  static getUpcomingExamEvents(examEvents: Array<ClerkListExamEvent>) {
+  static getUpcomingExamEvents(
+    examEvents: Array<ClerkListExamEvent | ExaminerExamEvent>,
+  ) {
     return examEvents.filter(
       (e) => !DateUtils.isDatePartBefore(e.date, dayjs()),
     );
   }
 
-  static getPassedExamEvents(examEvents: Array<ClerkListExamEvent>) {
+  static getPassedExamEvents(
+    examEvents: Array<ClerkListExamEvent | ExaminerExamEvent>,
+  ) {
     return examEvents.filter((e) =>
       DateUtils.isDatePartBefore(e.date, dayjs()),
     );