feat: integrate api with register patient page

package.json

@@ -11,7 +11,7 @@
     "@emotion/jest": "^11.2.1",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^10.0.27",
-    "@orfium/ictinus": "^2.63.0",
+    "@orfium/ictinus": "^2.70.2",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^13.1.3",
@@ -30,6 +30,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-final-form": "^6.5.3",
+    "react-final-form-listeners": "^1.0.3",
     "react-query": "^3.16.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

server.js

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const express = require('express');
 const path = require('path');
-const serverPort = process.env.PORT || 3000;
+
+const express = require('express');
+const serverPort = process.env.PORT || 3001;
 const environment = process.env.NODE_ENV || 'development';
 
 // construct a mini server

src/App.tsx

@@ -4,12 +4,13 @@ import { ThemeProvider } from '@orfium/ictinus';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { BrowserRouter as Router } from 'react-router-dom';
 
-
 import { AppWrapper } from './App.style';
 import Routes from './routing/Routes';
 import theme from 'theme/globals';
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { refetchOnWindowFocus: false, refetchOnReconnect: false } },
+});
 
 const App: React.FC = () => {
   return (

src/api/patientsAPI/index.ts

@@ -0,0 +1,5 @@
+import patientsAPI from './patientsAPI';
+
+export default {
+  single: patientsAPI,
+};

src/api/patientsAPI/patientsAPI.tsx

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { RegisterPatientPayload } from '../../models/apiTypes';
+import { METHODS, request } from '../axiosInstances';
+
+export default {
+  getHospitals: () => request(METHODS.GET, '/hospitals/', {}),
+  registerPatient: (params: RegisterPatientPayload) =>
+    request(METHODS.POST, '/patients/', { params }),
+};

src/hooks/api/patientHooks.ts

@@ -0,0 +1,57 @@
+import { AxiosError } from 'axios';
+import { ReactQueryKeys } from 'hooks/constants';
+import { useMutation, useQuery } from 'react-query';
+import { useHistory } from 'react-router-dom';
+
+import patientsAPI from '../../api/patientsAPI';
+import { HospitalsResponse, RegisterPatientPayload } from '../../models/apiTypes';
+import { RegisterPatientFormType } from '../../pages/RegisterPatient/types';
+import urls from '../../routing/urls';
+
+export const useGetHospitals = () => {
+  return useQuery<HospitalsResponse, AxiosError, HospitalsResponse>(
+    ReactQueryKeys.HospitalsQuery,
+    async () => {
+      const { request } = patientsAPI.single.getHospitals();
+      const data = await request();
+
+      return data;
+    },
+    {
+      onError: (errors) => {
+        console.log(errors);
+      },
+
+      retry: false,
+    }
+  );
+};
+
+export const useRegisterPatient = () => {
+  const history = useHistory();
+
+  return useMutation<RegisterPatientPayload, AxiosError, RegisterPatientFormType>(
+    (params) => {
+      const { request } = patientsAPI.single.registerPatient({
+        full_name: params.name,
+        address: params.address,
+        age: params.age,
+        year_of_birth: params.yearOfBirth,
+        phone_1: params.phone1,
+        phone_2: params.phone2,
+        hospital_id: params.center.value,
+        national_id: params.nationalId,
+        gender: params.gender,
+      });
+      return request();
+    },
+    {
+      onSuccess: () => {
+        history.replace(urls.patients());
+      },
+      onError: (errors) => {
+        console.log(errors);
+      },
+    }
+  );
+};

src/hooks/constants.ts

@@ -0,0 +1,4 @@
+export const ReactQueryKeys = {
+  PatientsQuery: 'patientsQuery',
+  HospitalsQuery: 'hospitalsQuery',
+};

src/models/apiTypes.tsx

@@ -1,3 +1,19 @@
+export interface PaginationParams {
+  offset?: number; // Number of results to return per page
+  limit?: number; // The initial index from which to return the results
+}
+
+export interface PaginationResponse {
+  count: number;
+  next: string;
+  previous: string;
+}
+
+export type SelectOption = {
+  label: string;
+  value: number;
+};
+
 export interface LoginFormType {
   email: string;
   password: string;
@@ -9,3 +25,26 @@ export interface LoginResponse {
   password: string;
   token?: string;
 }
+
+export type HospitalsAPI = {
+  id: number;
+  name: string;
+  address: string;
+  patient_hospital_id: number;
+};
+
+export interface HospitalsResponse extends PaginationResponse, PaginationParams {
+  results: HospitalsAPI[];
+}
+
+export interface RegisterPatientPayload {
+  full_name: string;
+  national_id: string;
+  age: number;
+  year_of_birth: number;
+  gender: string;
+  phone_1: string;
+  phone_2: string;
+  address: string;
+  hospital_id: number;
+}

src/pages/Layout/Layout.style.ts

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import { flexCenter } from '@orfium/ictinus/dist/theme/functions';
 
-
 import { scrollBar } from '../../common.style';
 import { ResponsiveProps } from '../types';
 import { flex } from 'theme/functions';
@@ -14,7 +13,6 @@ const getWidth = ({
   isLargeDesktop,
   isXLargeDesktop,
 }: ResponsiveProps) => {
-  console.log(isSmallDesktop, isMediumDesktop, isLargeDesktop, isXLargeDesktop);
   return isSmallDesktop || isMediumDesktop || isLargeDesktop || isXLargeDesktop
     ? SIDEBAR_WIDTH_COLLAPSED
     : 0;
@@ -30,7 +28,7 @@ export const Main = styled.main`
   ${scrollBar};
 
   overflow-x: hidden;
-  overflow-y: auto;
+  overflow-y: hidden;
 
   ${flex}
 `;

src/pages/Login/components/LoginForm/LoginForm.tsx

@@ -84,7 +84,7 @@ const SignIn: React.FC = () => {
             </FormBottom>
 
             <ButtonContainer>
-              <Button color={'neutralBlack-700'} filled size="lg" onClick={handleSubmit}>
+              <Button color={'neutralBlack-700'} filled size="lg" buttonType="submit">
                 Sign In
               </Button>
             </ButtonContainer>

src/pages/RegisterPatient/RegisterPatient.tsx

@@ -4,36 +4,54 @@ import React from 'react';
 import { Button } from '@orfium/ictinus';
 import { Form } from 'react-final-form';
 
-import { LoginFormType } from '../../models/apiTypes';
+import { useGetHospitals, useRegisterPatient } from '../../hooks/api/patientHooks';
 import { ButtonContainer } from '../Login/components/LoginForm/LoginForm.style';
 import RegisterPatientForm from './components/RegisterPatientForm';
 import { FormHeading, ButtonsContainer } from './RegisterPatient.style';
+import { RegisterPatientFormType } from './types';
 
 const RegisterPatient = () => {
-  const handleSubmit = (form: LoginFormType) => {
-    // mutate(form);
-    console.log(form);
+  const { data: hospitals } = useGetHospitals();
+  const { mutate, isLoading } = useRegisterPatient();
+
+  const handleSubmit = (form: RegisterPatientFormType) => {
+    mutate(form);
   };
 
   return (
     <>
       <FormHeading>Fill in Patient Details</FormHeading>
       <Form initialValues={{ rememberMe: false }} onSubmit={handleSubmit}>
-        {({ handleSubmit }) => (
+        {({ handleSubmit, values, form }) => (
           <form
             onSubmit={handleSubmit}
-            css={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh)' }}
+            css={{
+              display: 'flex',
+              flexDirection: 'column',
+              height: 'calc(100vh)',
+              overflow: 'hidden',
+            }}
           >
-            <RegisterPatientForm />
+            <RegisterPatientForm values={values} hospitals={hospitals?.results ?? []} />
             <ButtonsContainer>
               <ButtonContainer>
-                <Button color={'neutralBlack-700'} size="lg" onClick={() => 'll'}>
+                <Button
+                  disabled={isLoading}
+                  buttonType="submit"
+                  color={'neutralBlack-700'}
+                  size="lg"
+                >
                   Save
                 </Button>
               </ButtonContainer>
 
               <ButtonContainer>
-                <Button color={'neutralBlack-700'} filled={false} size="lg" onClick={() => 'll'}>
+                <Button
+                  color={'neutralBlack-700'}
+                  filled={false}
+                  size="lg"
+                  onClick={() => form.reset()}
+                >
                   Cancel
                 </Button>
               </ButtonContainer>

src/pages/RegisterPatient/components/RegisterPatientForm/RegisterPatientForm.style.tsx

@@ -16,7 +16,7 @@ export const FormHeadingContainer = styled.div`
 
 export const FormContainer = styled.div`
   flex-grow: 1;
-  margin-bottom: 120px;
+  height: 100%;
   overflow-y: auto;
   padding: 18px;