Merge pull request #42 from swiftss-org/staging

feat: integrate with api and add login API functionality

Author: whosyourtaco

.eslintrc.json

@@ -1,7 +1,16 @@
 {
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
-  "plugins": ["react", "@typescript-eslint", "react-hooks"],
-
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "plugins": [
+    "react",
+    "@typescript-eslint",
+    "react-hooks",
+    "import",
+    "better-styled-components"
+  ],
   "env": {
     "node": true,
     "browser": true,
@@ -10,11 +19,54 @@
     "es6": true
   },
   "rules": {
+    "better-styled-components/sort-declarations-alphabetically": 2,
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          [
+            "internal",
+            "parent",
+            "sibling",
+            "index",
+            "object"
+          ]
+        ],
+        "pathGroups": [
+          {
+            "pattern": "react",
+            "group": "external",
+            "position": "before"
+          },
+          {
+            "pattern": "src/**",
+            "group": "internal"
+          },
+          {
+            "pattern": "theme/**",
+            "group": "internal"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": [
+          "react"
+        ],
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        },
+        "newlines-between": "always"
+      }
+    ],
     "@typescript-eslint/naming-convention": [
       "error",
       {
         "selector": "typeLike",
-        "format": ["PascalCase", "UPPER_CASE"]
+        "format": [
+          "PascalCase",
+          "UPPER_CASE"
+        ]
       }
     ],
     "react-hooks/rules-of-hooks": "error",
@@ -23,6 +75,7 @@
     "no-unused-expressions": "off",
     "@typescript-eslint/no-unused-expressions": "error",
     "no-unused-vars": "off",
+    "@typescript-eslint/explicit-module-boundary-types": 0,
     "@typescript-eslint/no-unused-vars": [
       "error",
       {

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",
@@ -73,6 +74,8 @@
     "babel-plugin-styled-components": "^1.12.0",
     "cross-env": "^7.0.3",
     "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-better-styled-components": "^1.1.2",
+    "eslint-plugin-import": "^2.23.4",
     "husky": "^6.0.0",
     "lint-staged": "^10.5.4",
     "prettier": "^2.2.1",

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.style.ts

@@ -3,22 +3,22 @@ import styled from '@emotion/styled';
 import theme from 'theme/globals';
 
 export const AppWrapper = styled.div`
-  width: 100%;
-  height: calc(100vh);
   background-color: ${theme.defaultBackgroundColor};
-  font-family: ${theme.fontFamily};
   color: ${theme.defaultTextColor};
-  position: relative;
+  font-family: ${theme.fontFamily};
+  height: calc(100vh);
   overflow: hidden;
+  position: relative;
+  width: 100%;
 `;
 
 export const TopBar = styled.div`
-  width: 100%;
-  position: sticky;
-  display: flex;
-  flex-direction: row;
   align-items: center;
+  border-bottom: 1px black solid;
   color: black;
+  display: flex;
+  flex-direction: row;
   font-weight: 700;
-  border-bottom: 1px black solid;
+  position: sticky;
+  width: 100%;
 `;

src/App.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
+
 import { ThemeProvider } from '@orfium/ictinus';
 import { QueryClient, QueryClientProvider } from 'react-query';
+import { BrowserRouter as Router } from 'react-router-dom';
 
-import theme from 'theme/globals';
 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/api/userAPI/userAPI.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { LoginResponse } from '../../models/apiTypes';
 import { METHODS, request } from '../axiosInstances';
-import { SignInParams } from '../../models/apiTypes';
 
 export default {
-  signIn: (params: SignInParams) => request(METHODS.POST, '/sign-in/', { params }),
+  signIn: (params: LoginResponse) => request(METHODS.POST, '/sign-in/', { params }),
 };

src/common.style.tsx

@@ -1,7 +1,8 @@
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { grid } from '@orfium/ictinus/dist/theme/functions';
+
 import { flex } from './theme/functions';
-import { css } from '@emotion/react';
 
 export const PageWrapper = styled.div`
   ${flex};
@@ -44,26 +45,26 @@ export const CheckBoxContainer = styled.div<{ error?: boolean; checked?: boolean
 
 export const FieldsContainer = styled.div<{ withMargin?: boolean }>`
   ${grid};
-  grid-template-columns: 1fr 1fr;
   column-gap: 38px;
-  row-gap: 24px;
+  grid-template-columns: 1fr 1fr;
   margin-bottom: ${(props) => (props.withMargin ? '24px' : null)};
+  row-gap: 24px;
 `;
 
 export const LongFieldWrapper = styled.div`
   grid-column: 1 / 3;
 `;
 
 export const FieldWrapper = styled.div`
-  width: 100%;
   box-sizing: border-box;
+  width: 100%;
 `;
 
 export const RadioText = styled.span`
-  min-height: 48px;
-  display: inline-flex;
   align-items: center;
+  display: inline-flex;
   margin-left: 8px;
+  min-height: 48px;
 `;
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment

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);
+      },
+    }
+  );
+};