feat: add forms page and routing

src/shared/containers/Forms/FormTabs/ContractForms/ContractForms.tsx

@@ -0,0 +1,37 @@
+import React, { memo, useEffect, useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { areEqual } from 'Utils/equalityChecks';
+import { contractFormsSelector, fetchingContractFormsSelector, companyIdSelector } from 'Containers/Forms/selectors';
+import { ContractForms } from 'Components/Forms';
+import { listCompanyContractForms } from 'Containers/Forms/actions';
+
+const ContractFormsContainer = () => {
+  const dispatch = useDispatch();
+  const contractForms = useSelector(contractFormsSelector, areEqual);
+  const fetching = useSelector(fetchingContractFormsSelector, areEqual);
+  const companyId = useSelector(companyIdSelector, areEqual);
+
+  const getContractForms = useCallback(() => {
+    if (companyId) {
+      dispatch(listCompanyContractForms(companyId));
+    }
+  }, [dispatch, companyId]);
+
+  useEffect(() => {
+    getContractForms();
+  }, [getContractForms]);
+
+  return (
+    <ContractForms
+      forms={contractForms}
+      fetching={fetching}
+      onAdd={console.log}
+      onDelete={console.log}
+      onClickRow={console.log}
+    />
+  );
+};
+
+const ContractFormsContainerMemo = memo(ContractFormsContainer, areEqual);
+
+export { ContractFormsContainerMemo as ContractFormsContainer };

src/shared/containers/Forms/FormTabs/ContractForms/index.ts

@@ -0,0 +1 @@
+export { ContractFormsContainer as ContractForms } from './ContractForms';

src/shared/containers/Forms/FormTabs/FormTabs/FormTabs.tsx

@@ -0,0 +1,16 @@
+import React, { memo } from 'react';
+import { FormTabs } from 'Components/Tabs';
+import { areEqual } from 'Utils/equalityChecks';
+import { ContractForms } from '../ContractForms';
+
+const FormTabsContainer = () => (
+  <>
+    <FormTabs id="form-tabs">
+      <ContractForms />
+    </FormTabs>
+  </>
+);
+
+const FormTabsContainerMemo = memo(FormTabsContainer, areEqual);
+
+export { FormTabsContainerMemo as FormTabs };

src/shared/containers/Forms/FormTabs/FormTabs/index.ts

@@ -0,0 +1 @@
+export { FormTabs } from './FormTabs';

src/shared/containers/Forms/FormTabs/index.ts

@@ -0,0 +1,2 @@
+export { FormTabs } from './FormTabs';
+export { ContractForms } from './ContractForms';

src/shared/containers/Forms/Forms.tsx

@@ -0,0 +1,9 @@
+import React, { memo } from 'react';
+import { areEqual } from 'Utils/equalityChecks';
+import { FormTabs } from './FormTabs';
+
+const FormsContainer = () => <FormTabs />;
+
+const FormsContainerMemo = memo(FormsContainer, areEqual);
+
+export { FormsContainerMemo as FormsContainer };

src/shared/containers/Forms/Models/FormsModel/FormModel.ts

@@ -0,0 +1,18 @@
+/* eslint-disable */
+
+export type FormTemplate = {
+  company_id: number;
+  name: string;
+  replacement_tags: string;
+  template: string;
+  has_signature: boolean;
+  status: string;
+  created_at: string;
+  updated_at: string;
+  deleted_at: string | null;
+  id: number;
+};
+
+export type FormTemplateResponse = {
+  data: FormTemplate[];
+};

src/shared/containers/Forms/Models/FormsModel/index.ts

@@ -0,0 +1 @@
+export type { FormTemplate, FormTemplateResponse } from './FormModel';

src/shared/containers/Forms/Models/index.ts

@@ -0,0 +1 @@
+export type { FormTemplate, FormTemplateResponse } from './FormsModel';

src/shared/containers/Forms/actions.ts

@@ -0,0 +1,33 @@
+import { handleApiRequest } from 'Utils/handleApiRequest';
+import { Api } from 'Utils/api';
+import { FormTemplateResponse } from 'Containers/Forms/Models';
+
+export const CONTRACT_FORMS = 'CONTRACT_FORMS';
+export const FETCHING_CONTRACT_FORMS = 'FETCHING_CONTRACT_FORMS';
+
+interface FormsActionTypes {
+  CONTRACT_FORMS: FormTemplateResponse;
+  FETCHING_CONTRACT_FORMS: boolean;
+}
+
+interface MessageAction {
+  type: keyof FormsActionTypes;
+  payload: any;
+}
+
+export type SetFormsActionTypes = MessageAction;
+
+// Thunk to fetch contract forms for a company
+export const listCompanyContractForms = (companyId: number) => async (dispatch: any) => {
+  const response = await handleApiRequest(
+    dispatch,
+    Api.get(`companies/${companyId}/contract-forms`),
+    '',
+    FETCHING_CONTRACT_FORMS
+  );
+
+  dispatch({
+    type: CONTRACT_FORMS,
+    payload: response,
+  });
+};

src/shared/containers/Forms/index.ts

@@ -0,0 +1 @@
+export { FormsContainer as Forms } from './Forms';

src/shared/containers/Forms/reducer.ts

@@ -0,0 +1,25 @@
+import { CONTRACT_FORMS, FETCHING_CONTRACT_FORMS, SetFormsActionTypes } from './actions';
+
+const initialState = {
+  data: [],
+  fetchingContractForms: false,
+};
+
+export const formsReducer = (state = initialState, action: SetFormsActionTypes) => {
+  switch (action.type) {
+    case CONTRACT_FORMS: {
+      return {
+        ...state,
+        data: action.payload,
+      };
+    }
+    case FETCHING_CONTRACT_FORMS: {
+      return {
+        ...state,
+        fetchingContractForms: action.payload,
+      };
+    }
+    default:
+      return state;
+  }
+};

src/shared/containers/Forms/selectors.ts

@@ -0,0 +1,4 @@
+// Contract Forms selectors
+export const contractFormsSelector = ({ forms }: any) => forms?.data || [];
+export const fetchingContractFormsSelector = ({ forms }: any) => forms?.fetchingContractForms || false;
+export { firstCompanyIdSelector as companyIdSelector } from '../Projects/selectors';