Implement filtering company interests by event

webkom · Mar 10, 2023 · 5e3b57b · 5e3b57b
1 parent 62cf9c2
commit 5e3b57b
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 52 deletions.
diff --git a/app/reducers/companyInterest.ts b/app/reducers/companyInterest.ts
@@ -41,17 +41,30 @@ export const selectCompanyInterestList = createSelector(
   (state) => state.companyInterest.byId,
   (state) => state.companyInterest.items,
   (state, props) => props,
-  (companyInterestById, companyInterestIds, semesterId) => {
+  (state, props, selectedEventOption) => selectedEventOption,
+  (companyInterestById, companyInterestIds, semesterId, eventValue) => {
     const companyInterests = companyInterestIds.map(
       (id) => companyInterestById[id]
     );
-
-    if (semesterId === 0) {
+    console.log(eventValue, companyInterests);
+    if (semesterId === 0 && eventValue === '') {
       return companyInterests;
     }
+    if (semesterId === 0 && eventValue !== '') {
+      return companyInterests.filter((companyInterest) =>
+        companyInterest.events.includes(eventValue)
+      );
+    }
+    if (semesterId !== 0 && eventValue === '') {
+      return companyInterests.filter((companyInterest) =>
+        companyInterest.semesters.includes(semesterId)
+      );
+    }
 
-    return companyInterests.filter((companyInterest) =>
-      companyInterest.semesters.includes(semesterId)
+    return companyInterests.filter(
+      (companyInterest) =>
+        companyInterest.semesters.includes(semesterId) &&
+        companyInterest.events.includes(eventValue)
     );
   }
 );

diff --git a/app/routes/companyInterest/CompanyInterestListRoute.ts b/app/routes/companyInterest/CompanyInterestListRoute.ts
@@ -14,7 +14,9 @@ import { selectCompanySemestersForInterestForm } from 'app/reducers/companySemes
 import type { CompanySemesterEntity } from 'app/reducers/companySemesters';
 import replaceUnlessLoggedIn from 'app/utils/replaceUnlessLoggedIn';
 import withPreparedDispatch from 'app/utils/withPreparedDispatch';
-import CompanyInterestList from './components/CompanyInterestList';
+import CompanyInterestList, {
+  event_type_options,
+} from './components/CompanyInterestList';
 import { getCsvUrl, semesterToText } from './utils';
 
 const mapStateToProps = (state, props) => {
@@ -27,6 +29,9 @@ const mapStateToProps = (state, props) => {
   const semesterObj: CompanySemesterEntity | null | undefined = semesters.find(
     (semester) => semester.id === semesterId
   );
+  const eventValue = qs.parse(props.location.search, {
+    ignoreQueryPrefix: true,
+  }).event;
   const selectedSemesterOption = {
     id: semesterId ? semesterId : 0,
     semester: semesterObj != null ? semesterObj.semester : '',
@@ -41,21 +46,30 @@ const mapStateToProps = (state, props) => {
         : 'Vis alle semestre',
   };
   const selectedEventOption = {
-    value: 'company_presentation',
-    label: 'Bedriftspresentasjon',
+    value: eventValue ? eventValue : '',
+    label: eventValue
+      ? event_type_options
+          .filter((eventType) => eventType.value === eventValue)
+          .at(0).label
+      : 'Vis alle arrangementstyper',
   };
   const companyInterestList = selectCompanyInterestList(
     state,
-    selectedSemesterOption.id
+    selectedSemesterOption.id,
+    selectedEventOption.value
   );
   const hasMore = state.companyInterest.hasMore;
   const fetching = state.companyInterest.fetching;
+  const event_string = selectedEventOption.value
+    ? `-${selectedEventOption.value}`
+    : '';
   return {
     semesters,
     companyInterestList,
     hasMore,
     fetching,
     selectedSemesterOption,
+    selectedEventOption,
 
     exportSurvey: async (event?: string) => {
       const blob = await fetch(
@@ -72,6 +86,7 @@ const mapStateToProps = (state, props) => {
       ).then((response) => response.blob());
       return {
         url: URL.createObjectURL(blob),
+        filename: `Company-interests-${selectedSemesterOption.year}-${selectedSemesterOption.semester}${event_string}.csv`,
       };
     },
   };

diff --git a/app/routes/companyInterest/components/CompanyInterest.css b/app/routes/companyInterest/components/CompanyInterest.css
@@ -105,19 +105,6 @@
   }
 }
 
-.event_section {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin: 30px auto;
-  align-items: flex-end;
-
-  @media (--small-viewport) {
-    flex-flow: column wrap;
-    align-items: center;
-  }
-}
-
 .companyInterestList {
   @media (--small-viewport) {
     display: none;
@@ -179,3 +166,7 @@ ion-icon {
 .label {
   color: rgb(194, 69, 56);
 }
+
+.selector {
+  min-width: 500px;
+}
diff --git a/app/routes/companyInterest/components/CompanyInterestList.tsx b/app/routes/companyInterest/components/CompanyInterestList.tsx
@@ -6,13 +6,11 @@ import { Content } from 'app/components/Content';
 import { selectTheme, selectStyles } from 'app/components/Form/SelectInput';
 import Flex from 'app/components/Layout/Flex';
 import Table from 'app/components/Table';
-import config from 'app/config';
 import type { CompanyInterestEntity } from 'app/reducers/companyInterest';
 import type { CompanySemesterEntity } from 'app/reducers/companySemesters';
 import { ListNavigation } from 'app/routes/bdb/utils';
 import { semesterToText } from '../utils';
 import styles from './CompanyInterest.css';
-import { getCsvUrl } from '../utils';
 
 export type SemesterOption = {
   id: number;
@@ -44,6 +42,7 @@ type State = {
   generatedCSV:
     | {
         url: string;
+        filename: string;
       }
     | null
     | undefined;
@@ -72,6 +71,19 @@ const RenderCompanyActions = ({
     {clickedCompanyInterest === id ? 'Er du sikker?' : 'Slett'}
   </Button>
 );
+export const event_type_options = [
+  { value: '', label: 'Vis alle arrangementstyper' },
+  { value: 'company_presentation', label: 'Bedriftspresentasjon' },
+  { value: 'course', label: 'Kurs' },
+  { value: 'breakfast_talk', label: 'Frokostforedrag' },
+  { value: 'lunch_presentation', label: 'Lunsjpresentasjon' },
+  { value: 'bedex', label: 'BedEx' },
+  { value: 'digital_presentation', label: 'Digital presentasjon' },
+  { value: 'other', label: 'Alternativt arrangement' },
+  { value: 'sponsor', label: 'Sponser' },
+  { value: 'start_up', label: 'Start-up kveld' },
+  { value: 'company_to_company', label: 'Bedrift-til-bedrift' },
+];
 
 class CompanyInterestList extends Component<Props, State> {
   state = {
@@ -103,20 +115,24 @@ class CompanyInterestList extends Component<Props, State> {
         },
       })
       .then(() => {
-        this.props.push(`/companyInterest?semesters=${clickedOption.id}`);
+        this.props.push(
+          `/companyInterest?semesters=${clickedOption.id}&event=${this.state.selectedEvent}`
+        );
       });
   };
   handleEventChange = (clickedOption: EventOption): void => {
-    // const { value } = clickedOption;
-    // this.props
-    //   .fetch({
-    //     filters: {
-    //       events: value !== null ? value : null,
-    //     },
-    //   })
-    //   .then(() => {
-    //     this.props.push(`/companyInterest?events=${clickedOption.value}`);
-    //   });
+    const { value } = clickedOption;
+    this.props
+      .fetch({
+        filters: {
+          events: value !== null ? value : null,
+        },
+      })
+      .then(() => {
+        this.props.push(
+          `/companyInterest?semesters=${this.props.selectedSemesterOption.id}&event=${clickedOption.value}`
+        );
+      });
     this.setState({ selectedEvent: clickedOption.value });
   };
 
@@ -198,24 +214,12 @@ class CompanyInterestList extends Component<Props, State> {
       return Number(o1.year) > Number(o2.year) ? -1 : 1;
     });
 
-    const event_type_options = [
-      { value: 'company_presentation', label: 'Bedriftspresentasjon' },
-      { value: 'course', label: 'Kurs' },
-      { value: 'breakfast_talk', label: 'Frokostforedrag' },
-      { value: 'lunch_presentation', label: 'Lunsjpresentasjon' },
-      { value: 'bedex', label: 'BedEx' },
-      { value: 'digital_presentation', label: 'Digital presentasjon' },
-      { value: 'other', label: 'Alternativt arrangement' },
-      { value: 'sponsor', label: 'Sponser' },
-      { value: 'start_up', label: 'Start-up kveld' },
-      { value: 'company_to_company', label: 'Bedrift-til-bedrift' },
-    ];
     return (
       <Content>
         <ListNavigation title="Bedriftsinteresser" />
         <Flex className={styles.section}>
           <Flex column>
-            <p onClick={() => console.log('p', selectedEvent)}>
+            <p>
               Her finner du all praktisk informasjon knyttet til
               <strong> bedriftsinteresser</strong>.
             </p>
@@ -237,8 +241,8 @@ class CompanyInterestList extends Component<Props, State> {
           </Link>
         </Flex>
 
-        <Flex className={styles.event_section}>
-          <div style={{ minWidth: '500px' }}>
+        <Flex className={styles.section}>
+          <div className={styles.selector}>
             <Select
               name="form-field-name"
               value={this.props.selectedEventOption}
@@ -256,14 +260,17 @@ class CompanyInterestList extends Component<Props, State> {
             }}
           >
             {generatedCSV ? (
-              <a href={generatedCSV.url}>Last ned</a>
+              <a href={generatedCSV.url} download={generatedCSV.filename}>
+                Last ned
+              </a>
             ) : (
               <Button
                 onClick={async () =>
                   this.setState({
                     generatedCSV: await exportSurvey(selectedEvent),
                   })
                 }
+                disabled={!this.props.selectedSemesterOption.year}
               >
                 Eksporter til CSV
               </Button>

diff --git a/app/routes/companyInterest/utils.tsx b/app/routes/companyInterest/utils.tsx
@@ -1,9 +1,9 @@
+import qs from 'qs';
 import NavigationTab from 'app/components/NavigationTab';
 import NavigationLink from 'app/components/NavigationTab/NavigationLink';
 import config from 'app/config';
 import type { CompanySemesterEntity } from 'app/reducers/companySemesters';
 import type { ReactNode } from 'react';
-import qs from 'qs';
 
 export const sortSemesterChronologically = (
   a: CompanySemesterEntity,