Refactor company contact editor to support react-router v6

webkom · Dec 17, 2023 · 47991b1 · 47991b1
1 parent da6ad76
commit 47991b1
Show file tree

Hide file tree

Showing 7 changed files with 146 additions and 267 deletions.
diff --git a/app/actions/CompanyActions.ts b/app/actions/CompanyActions.ts
@@ -11,6 +11,7 @@ import createQueryString from 'app/utils/createQueryString';
 import { semesterToText } from '../routes/companyInterest/utils';
 import { Company, Event, Joblistings } from './ActionTypes';
 import type { CompanySemesterEntity } from 'app/reducers/companySemesters';
+import type { FormValues as CompanyContactEditorFormValues } from 'app/routes/bdb/components/CompanyContactEditor';
 import type { AppDispatch } from 'app/store/createStore';
 import type { ID } from 'app/store/models';
 import type {
@@ -212,39 +213,33 @@ export function fetchCompanyContacts({ companyId }: { companyId: ID }) {
   });
 }
 
+type CompanyContactEditorSubmitBody = {
+  companyId: ID;
+  companyContactId: ID;
+} & CompanyContactEditorFormValues;
+
 export function addCompanyContact({
   companyId,
   name,
   role,
   mail,
   phone,
-}: Record<string, any>) {
-  return (dispatch: AppDispatch) => {
-    return dispatch(
-      callAPI<CompanyContact>({
-        types: Company.ADD_COMPANY_CONTACT,
-        endpoint: `/companies/${companyId}/company-contacts/`,
-        method: 'POST',
-        body: {
-          name,
-          role,
-          mail,
-          phone,
-        },
-        meta: {
-          errorMessage: 'Legg til bedriftskontakt feilet',
-          companyId,
-        },
-      })
-    ).then(() => {
-      dispatch(
-        addToast({
-          message: 'Bedriftskontakt lagt til.',
-        })
-      );
-      dispatch(push(`/bdb/${companyId}/`));
-    });
-  };
+}: CompanyContactEditorSubmitBody) {
+  return callAPI<CompanyContact>({
+    types: Company.ADD_COMPANY_CONTACT,
+    endpoint: `/companies/${companyId}/company-contacts/`,
+    method: 'POST',
+    body: {
+      name,
+      role,
+      mail,
+      phone,
+    },
+    meta: {
+      errorMessage: 'Legg til bedriftskontakt feilet',
+      companyId,
+    },
+  });
 }
 
 export function editCompanyContact({
@@ -254,33 +249,22 @@ export function editCompanyContact({
   role,
   mail,
   phone,
-}: Record<string, any>) {
-  return (dispatch: AppDispatch) => {
-    return dispatch(
-      callAPI<CompanyContact>({
-        types: Company.EDIT_COMPANY_CONTACT,
-        endpoint: `/companies/${companyId}/company-contacts/${companyContactId}/`,
-        method: 'PATCH',
-        body: {
-          name,
-          role,
-          mail,
-          phone,
-        },
-        meta: {
-          errorMessage: 'Endring av bedriftskontakt feilet',
-          companyId,
-        },
-      })
-    ).then(() => {
-      dispatch(
-        addToast({
-          message: 'Bedriftskontakt endret.',
-        })
-      );
-      dispatch(push(`/bdb/${companyId}`));
-    });
-  };
+}: CompanyContactEditorSubmitBody) {
+  return callAPI<CompanyContact>({
+    types: Company.EDIT_COMPANY_CONTACT,
+    endpoint: `/companies/${companyId}/company-contacts/${companyContactId}/`,
+    method: 'PATCH',
+    body: {
+      name,
+      role,
+      mail,
+      phone,
+    },
+    meta: {
+      errorMessage: 'Endring av bedriftskontakt feilet',
+      companyId,
+    },
+  });
 }
 
 export function deleteCompanyContact(companyId: ID, companyContactId: ID) {

diff --git a/app/reducers/companies.ts b/app/reducers/companies.ts
@@ -224,7 +224,7 @@ export const selectCompanyContactById = createSelector(
   (company, companyContactId) => {
     if (!company || !company.companyContacts) return {};
     return company.companyContacts.find(
-      (contact) => contact.id === companyContactId
+      (contact) => contact.id === Number(companyContactId)
     );
   }
 );

diff --git a/app/routes/bdb/AddCompanyContactRoute.ts b/app/routes/bdb/AddCompanyContactRoute.ts
diff --git a/app/routes/bdb/EditCompanyContactRoute.ts b/app/routes/bdb/EditCompanyContactRoute.ts
diff --git a/app/routes/bdb/components/BdbDetail.tsx b/app/routes/bdb/components/BdbDetail.tsx
@@ -7,6 +7,7 @@ import {
   LoadingIndicator,
 } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
+import cx from 'classnames';
 import { useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom-v5-compat';
@@ -54,8 +55,6 @@ const queryString = (companyId) =>
   });
 
 const BdbDetail = () => {
-  const { currentUser, loggedIn } = useUserContext();
-
   const { companyId } = useParams<{ companyId: string }>();
   const company = useAppSelector((state) =>
     selectCompanyById(state, { companyId })
@@ -178,15 +177,6 @@ const BdbDetail = () => {
       : '';
   };
 
-    const {
-      company,
-      comments,
-      companyEvents,
-      fetching,
-      showFetchMoreEvents,
-      fetchMoreEvents,
-    } = props;
-
   if (fetching || !company.semesterStatuses) {
     return <LoadingIndicator loading={fetching} />;
   }
@@ -308,8 +298,13 @@ const BdbDetail = () => {
         />
       )}
       <DetailNavigation title={title} companyId={company.id} />
-      <div className={styles.description}>
-        {company.description || 'Ingen beskrivelse tilgjengelig.'}
+      <div
+        className={cx(
+          styles.description,
+          !company.description && 'secondaryFontColor'
+        )}
+      >
+        {company.description || 'Ingen beskrivelse tilgjengelig'}
       </div>
       <div className={styles.infoBubbles}>
         <InfoBubble
@@ -516,14 +511,15 @@ const BdbDetail = () => {
         <span className="secondaryFontColor">Ingen arrangementer</span>
       )}
 
-        {company.contentTarget && (
-          <CommentView
-            contentTarget={company.contentTarget}
-            comments={comments}
-            newOnTop
-          />
-        )}
-      </Content>
-    );
-  }
-}
+      {company.contentTarget && (
+        <CommentView
+          contentTarget={company.contentTarget}
+          comments={comments}
+          newOnTop
+        />
+      )}
+    </Content>
+  );
+};
+
+export default BdbDetail;