swiftss-org · whosyourtaco · Feb 23, 2022 · Jul 7, 2021 · Jul 7, 2021 · Jul 7, 2021
diff --git a/.babelrc.js b/.babelrc.js
@@ -3,10 +3,10 @@ module.exports = {
   plugins: [
     '@babel/plugin-proposal-optional-chaining',
     [
-      'emotion',
+      '@emotion',
       {
         sourceMap: false,
-        autoLabel: process.env.NODE_ENV !== 'production',
+        autoLabel: process.env.NODE_ENV !== 'production' ? 'always' : undefined,
         labelFormat: '[filename]_[local]',
         cssPropOptimization: true,
       },

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -22,20 +22,20 @@ jobs:
 
     steps:
       - name: Checkout 📥
-        uses: actions/checkout@v2.3.4
+        uses: actions/checkout@v2.3.5
 
       - name: Get yarn cache 📦
         id: yarn-cache
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
-      - uses: actions/cache@v2.1.5
+      - uses: actions/cache@v2.1.6
         with:
           path: ${{ steps.yarn-cache.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
-      - uses: actions/setup-node@v2.1.5
-      - uses: actions/setup-node@v2.1.5
+      - uses: actions/setup-node@v2.4.1
+      - uses: actions/setup-node@v2.4.1
         with:
           node-version: '12'
 
@@ -50,7 +50,7 @@ jobs:
       - test
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@v2.3.4
+        uses: actions/checkout@v2.3.5
 
       - name: Push to Staging 🛠
         if: github.ref == 'refs/heads/staging'

diff --git a/package.json b/package.json
@@ -7,13 +7,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/core": "10.1.1",
     "@emotion/jest": "^11.2.1",
-    "@emotion/react": "^11.1.5",
-    "@emotion/styled": "^10.0.27",
-    "@orfium/ictinus": "^2.70.2",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "@orfium/ictinus": "^3.14.1",
     "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.5",
+    "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.1.3",
     "@types/jest": "^26.0.23",
     "@types/node": "^14.14.28",
@@ -24,12 +23,13 @@
     "axios": "^0.21.1",
     "customize-cra": "^1.0.0",
     "final-form": "^4.20.2",
-    "history": "^5.0.0",
-    "jest-emotion": "^11.0.0",
+    "final-form-arrays": "^3.0.2",
+    "history": "^4.10.1",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-final-form": "^6.5.3",
+    "react-final-form-arrays": "^3.1.3",
     "react-final-form-listeners": "^1.0.3",
     "react-query": "^3.16.0",
     "react-router-dom": "^5.2.0",
@@ -62,8 +62,8 @@
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.12.7",
     "@babel/preset-react": "^7.12.10",
-    "@commitlint/cli": "^11.0.0",
-    "@commitlint/config-conventional": "^11.0.0",
+    "@commitlint/cli": "^13.2.1",
+    "@commitlint/config-conventional": "^13.2.0",
     "@emotion/babel-plugin": "^11.3.0",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/git": "^9.0.0",
@@ -73,7 +73,7 @@
     "babel-jest": "^26.6.3",
     "babel-plugin-styled-components": "^1.12.0",
     "cross-env": "^7.0.3",
-    "eslint-config-prettier": "^7.2.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-better-styled-components": "^1.1.2",
     "eslint-plugin-import": "^2.23.4",
     "husky": "^6.0.0",

diff --git a/public/index.html b/public/index.html
@@ -29,6 +29,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="portal-root"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/App.style.ts b/src/App.style.ts
@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
 
-import theme from 'theme/globals';
+import { appTheme } from './theme/globals';
 
 export const AppWrapper = styled.div`
-  background-color: ${theme.defaultBackgroundColor};
-  color: ${theme.defaultTextColor};
-  font-family: ${theme.fontFamily};
+  background-color: white;
+  color: black;
+  font-family: ${appTheme.fontFamily};
   height: calc(100vh);
   overflow: hidden;
   position: relative;

diff --git a/src/App.tsx b/src/App.tsx
@@ -5,24 +5,27 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 import { AppWrapper } from './App.style';
+import NotificationsProvider from './providers/Notifications/NotificationProvider';
 import Routes from './routing/Routes';
-import theme from 'theme/globals';
+import { themeOverride } from './theme/globals';
 
 const queryClient = new QueryClient({
   defaultOptions: { queries: { refetchOnWindowFocus: false, refetchOnReconnect: false } },
 });
 
 const App: React.FC = () => {
   return (
-    <ThemeProvider theme={{ palette: { branded1: theme.colors.branded1 } }}>
-      <QueryClientProvider client={queryClient}>
-        <Router>
-          <AppWrapper>
-            <Routes />
-          </AppWrapper>
-        </Router>
-      </QueryClientProvider>
-    </ThemeProvider>
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={themeOverride}>
+        <NotificationsProvider>
+          <Router>
+            <AppWrapper>
+              <Routes />
+            </AppWrapper>
+          </Router>
+        </NotificationsProvider>
+      </ThemeProvider>
+    </QueryClientProvider>
   );
 };
 

diff --git a/src/api/patientsAPI/patientsAPI.tsx b/src/api/patientsAPI/patientsAPI.tsx
@@ -1,9 +1,31 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { RegisterPatientPayload } from '../../models/apiTypes';
+import {
+  RegisterPatientPayload,
+  PatientsPayload,
+  PaginationParams,
+  RegisterEpisodePayload,
+  HospitalMappingPayload,
+  DischargePayload,
+  FollowUpPayload,
+} from '../../models/apiTypes';
 import { METHODS, request } from '../axiosInstances';
 
 export default {
-  getHospitals: () => request(METHODS.GET, '/hospitals/', {}),
+  getHospitals: (params?: PaginationParams) => request(METHODS.GET, '/hospitals/', { params }),
+  getHospital: (id: string) => request(METHODS.GET, `/hospitals/${id}/`, {}),
+  getPatients: (params?: PatientsPayload) => request(METHODS.GET, '/patients/', { params }),
+  getSurgeons: (params?: PaginationParams) =>
+    request(METHODS.GET, '/medical-personnel/', { params }),
+  getPatient: (id: string) => request(METHODS.GET, `/patients/${id}/`, {}),
+  getEpisode: (id: string) => request(METHODS.GET, `/episodes/${id}/`, {}),
+  getEpisodeDischarge: (id: string) => request(METHODS.GET, `/episodes/${id}/discharge/`, {}),
+  getEpisodeFollowUps: (id: string) => request(METHODS.GET, `/episodes/${id}/follow-ups/`, {}),
   registerPatient: (params: RegisterPatientPayload) =>
     request(METHODS.POST, '/patients/', { params }),
+  registerEpisode: (params: RegisterEpisodePayload) =>
+    request(METHODS.POST, '/episodes/', { params }),
+  createHospitalMapping: (params: HospitalMappingPayload) =>
+    request(METHODS.POST, '/patient-hospital-mappings/', { params }),
+  dischargePatient: (params: DischargePayload) => request(METHODS.POST, `/discharges/`, { params }),
+  followUpPatient: (params: FollowUpPayload) => request(METHODS.POST, `/follow-ups/`, { params }),
 };
diff --git a/src/api/userAPI/userAPI.tsx b/src/api/userAPI/userAPI.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { LoginResponse } from '../../models/apiTypes';
+import { LoginFormType } from '../../models/apiTypes';
 import { METHODS, request } from '../axiosInstances';
 
 export default {
-  signIn: (params: LoginResponse) => request(METHODS.POST, '/sign-in/', { params }),
+  signIn: (params: LoginFormType) => request(METHODS.POST, '/sign-in/', { params }),
 };
diff --git a/src/assets/PatientDirectory/sortIcon.svg b/src/assets/PatientDirectory/sortIcon.svg
diff --git a/src/assets/index.ts b/src/assets/index.ts
@@ -0,0 +1,7 @@
+import SwiftSSLogo from 'assets/swiftss-logo.png';
+import TSALogo from 'assets/tsa-logo.png';
+
+export default {
+  TSALogo,
+  SwiftSSLogo,
+};
diff --git a/src/assets/swiftss-logo.png b/src/assets/swiftss-logo.png
diff --git a/src/assets/tsa-logo.png b/src/assets/tsa-logo.png
diff --git a/src/common.style.tsx b/src/common.style.tsx
@@ -12,43 +12,19 @@ export const PageWrapper = styled.div`
 `;
 
 export const CheckBoxContainer = styled.div<{ error?: boolean; checked?: boolean }>`
-  && * {
-    color: black;
-  }
-
-  //checked checkbox color
-  label:after {
-    box-shadow: 2px 0 0 black, 4px 0 0 black, 4px -2px 0 black, 4px -4px 0 black, 4px -6px 0 black,
-      4px -8px 0 black, 4px -10px 0 black !important;
-    background-color: black !important;
-  }
-
-  label:before {
-    box-shadow: inset 0px 0px 0px 0.125rem
-      ${(props) =>
-        props.checked
-          ? props.theme.utils.getColor('lightGray', 400)
-          : props.theme.utils.getColor('lightGray', 400)} !important;
-    background-color: ${(props) =>
-      props.checked ? props.theme.utils.getColor('lightGray', 400) : 'inherit'} !important;
-  }
-
-  span {
-    color: white;
-    white-space: pre-line;
-  }
+  margin-left: -12px;
 
   svg path {
-    fill: black;
+    fill: white;
   }
 `;
 
 export const FieldsContainer = styled.div<{ withMargin?: boolean }>`
   ${grid};
-  column-gap: 38px;
+  column-gap: 8px;
   grid-template-columns: 1fr 1fr;
   margin-bottom: ${(props) => (props.withMargin ? '24px' : null)};
-  row-gap: 24px;
+  row-gap: 8px;
 `;
 
 export const LongFieldWrapper = styled.div`
@@ -90,3 +66,37 @@ export const scrollBar = css`
     background: #555;
   }
 `;
+
+export const PageTitle = styled.div`
+  color: ${(props) => props.theme.utils.getColor('darkGray', 400)};
+  display: flex;
+  font-size: 24px;
+  font-weight: 700;
+  gap: 16px;
+  padding: 16px;
+`;
+
+export const PageSubtitle = styled.div`
+  color: ${(props) => props.theme.utils.getColor('darkGray', 400)};
+  display: flex;
+  font-size: 18px;
+  font-weight: 400;
+  gap: 16px;
+  padding: 16px;
+`;
+
+export const SectionTitle = styled.div`
+  color: ${(props) => props.theme.utils.getColor('blue', 500)};
+  font-size: 18px;
+  font-weight: 500;
+`;
+
+export const ButtonContainer = styled.div`
+  background: ${(props) => props.theme.utils.getColor('lightCoolGray', 400)};
+  border-top: 1px solid ${(props) => props.theme.utils.getColor('lightGray', 200)};
+  bottom: 0;
+  box-sizing: border-box;
+  padding: 16px;
+  position: fixed;
+  width: 100%;
+`;
diff --git a/src/components/ConfirmationModal/ConfirmationModal.style.tsx b/src/components/ConfirmationModal/ConfirmationModal.style.tsx
@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+import { rem } from 'polished';
+
+export const IBWRapper = styled.div`
+  pointer-events: none;
+  > button > span > svg > path {
+    fill: white;
+  }
+`;
+
+export const Title = styled.div`
+  font-size: ${(props) => props.theme.typography.fontSizes[18]};
+  font-weight: ${(props) => props.theme.typography.weights.medium};
+  line-height: ${rem(21)};
+`;
+
+export const Subtitle = styled.div`
+  color: ${(props) => props.theme.utils.getColor('lightGray', 600)};
+  font-size: ${(props) => props.theme.typography.fontSizes[16]};
+  font-weight: ${(props) => props.theme.typography.weights.regular};
+  line-height: ${rem(19)};
+`;
diff --git a/src/components/ConfirmationModal/ConfirmationModal.tsx b/src/components/ConfirmationModal/ConfirmationModal.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { Button, IconButton } from '@orfium/ictinus';
+
+import Modal from '../Modal';
+import { Portal } from '../Portal';
+import { IBWRapper, Subtitle, Title } from './ConfirmationModal.style';
+
+interface Props {
+  onClose: () => void;
+  title: string;
+  subtitle?: string;
+  onClick: () => void;
+  buttonText: string;
+}
+
+const ConfirmationModal: React.FC<Props> = ({ onClose, title, subtitle, buttonText, onClick }) => {
+  return (
+    <Portal baseComponent={Modal} onClose={onClose}>
+      <IBWRapper>
+        <IconButton
+          name={'warning'}
+          iconSize={36}
+          type={'warning'}
+          color={'orange-400'}
+          size={48}
+        />
+      </IBWRapper>
+      <Title>{title}</Title>
+      <Subtitle>{subtitle}</Subtitle>
+      <Button onClick={onClick} buttonType={'button'} type={'primary'} filled={false}>
+        {buttonText}
+      </Button>
+    </Portal>
+  );
+};
+
+export default ConfirmationModal;
diff --git a/src/components/ConfirmationModal/index.ts b/src/components/ConfirmationModal/index.ts
@@ -0,0 +1 @@
+export { default } from './ConfirmationModal';
diff --git a/src/components/Drawer/Drawer.style.ts b/src/components/Drawer/Drawer.style.ts
@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+import { transition } from '@orfium/ictinus/dist/theme/functions';
+import { rem } from 'polished';
+
+export const Container = styled.div<{
+  expanded: boolean;
+  isDesktop: boolean;
+  isSmallDesktop: boolean;
+}>`
+  ${transition(0.2)};
+  background-color: white;
+  border-right: ${rem(1)} solid ${(props) => props.theme.utils.getColor('lightGray', 200)};
+  flex-grow: 0;
+  flex-shrink: 0;
+  height: 100%;
+  min-height: 100%;
+  overflow: hidden;
+  position: ${(props) => (props.isSmallDesktop ? 'absolute' : 'relative')};
+  width: ${(props) =>
+    props.expanded ? rem('308px') : props.isDesktop ? rem('112px') : rem('0px')};
+  z-index: 100;
+`;