feat: add General Information and Patient Details screen

Author: whosyourtaco

src/api/patientsAPI/patientsAPI.tsx

@@ -4,7 +4,9 @@ import { METHODS, request } from '../axiosInstances';
 
 export default {
   getHospitals: (params?: PaginationParams) => request(METHODS.GET, '/hospitals/', { params }),
+  getHospital: (id: string) => request(METHODS.GET, `/hospitals/${id}`, {}),
   getPatients: (params?: PatientsPayload) => request(METHODS.GET, '/patients/', { params }),
+  getPatient: (id: string) => request(METHODS.GET, `/patients/${id}`, {}),
   registerPatient: (params: RegisterPatientPayload) =>
     request(METHODS.POST, '/patients/', { params }),
 };

src/components/Tabs/Tabs.style.ts

@@ -0,0 +1,60 @@
+import styled from '@emotion/styled';
+import { flex } from '@orfium/ictinus/dist/theme/functions';
+import { rem } from 'polished';
+
+export const TabWrapper = styled.button<{ isActive: boolean }>`
+  background: transparent;
+  border: none;
+  color: ${({
+    theme: {
+      utils: { getColor },
+    },
+    isActive,
+  }) => (isActive ? getColor('primary', 500, 'normal') : getColor('lightGray', 600))};
+
+  cursor: pointer;
+  font-size: ${({ theme }) => theme.typography.fontSizes[18]};
+  font-weight: ${({ theme, isActive }) => theme.typography.weights[isActive ? 'bold' : 'regular']};
+  margin-right: ${rem(42)};
+  margin-top: ${({ theme }) => theme.spacing.sm};
+  padding: 0;
+  position: relative;
+  transition: color 1s;
+
+  ${({ theme, isActive }) =>
+    isActive
+      ? `:after {
+      content: ' ';
+      position: absolute;
+      top: ${rem(26)};
+      left: 0;
+      width: 100%;
+      border-bottom: 2px solid ${theme.utils.getColor('primary', 400, 'normal')};
+      animation-name: load;
+      animation-duration: 1s;
+    }`
+      : ``} {
+  }
+
+  @keyframes load {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+`;
+
+export const TabsContainer = styled.ul`
+  ${flex};
+  align-items: start;
+  justify-content: start;
+  margin: 0 0 ${({ theme }) => theme.spacing.md} 0;
+  padding: 0 0 ${({ theme }) => theme.spacing.sm} ${({ theme }) => theme.spacing.md};
+  width: 100%;
+  > li {
+    list-style: none;
+  }
+`;

src/components/Tabs/Tabs.tsx

@@ -0,0 +1,43 @@
+import React, { FC } from 'react';
+
+import Tab, { TabConfig } from 'components/Tabs/components/Tab';
+
+import { TabsContainer } from './Tabs.style';
+
+interface Props {
+  tabs: TabConfig[];
+  shouldDisplayTabs?: boolean;
+  matchActiveDataType: string;
+  onTabClick(value: string): void;
+}
+
+const Tabs: FC<Props> = ({
+  children,
+  onTabClick,
+  matchActiveDataType,
+  tabs,
+  shouldDisplayTabs = false,
+}) => {
+  return (
+    <>
+      {shouldDisplayTabs && (
+        <TabsContainer role={'tablist'}>
+          {tabs.map((tab) => (
+            <Tab
+              isActive={tab.value === matchActiveDataType}
+              key={tab.value}
+              tab={tab}
+              onClick={() => {
+                onTabClick(tab.value);
+              }}
+            />
+          ))}
+        </TabsContainer>
+      )}
+
+      {children}
+    </>
+  );
+};
+
+export default Tabs;

src/components/Tabs/components/Tab.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+
+import { TabWrapper } from 'components/Tabs/Tabs.style';
+
+export type TabConfig = {
+  label: string;
+  value: string;
+};
+
+interface Props {
+  tab: TabConfig;
+  onClick: () => void;
+  isActive: boolean;
+}
+
+const Tab: FC<Props> = ({ tab, onClick, isActive }) => {
+  const { label } = tab;
+
+  return (
+    <li role="presentation">
+      <TabWrapper
+        isActive={isActive}
+        aria-selected={isActive ? 'true' : 'false'}
+        role="tab"
+        tabIndex={0}
+        onClick={onClick}
+      >
+        {label}
+      </TabWrapper>
+    </li>
+  );
+};
+
+export default Tab;

src/components/Tabs/index.ts

@@ -0,0 +1 @@
+export { default as Tabs } from './Tabs';

src/hooks/api/patientHooks.ts

@@ -5,8 +5,10 @@ import { useHistory } from 'react-router-dom';
 
 import patientsAPI from '../../api/patientsAPI';
 import {
+  HospitalsAPI,
   HospitalsResponse,
   PaginationParams,
+  PatientAPI,
   PatientsPayload,
   PatientsResponse,
   RegisterPatientPayload,
@@ -31,6 +33,23 @@ export const useGetHospitals = (params?: PaginationParams) => {
   );
 };
 
+export const useGetHospital = (id: string) => {
+  return useQuery<HospitalsAPI, AxiosError, HospitalsAPI>(
+    [ReactQueryKeys.HospitalsQuery, id],
+    async () => {
+      const { request } = patientsAPI.single.getHospital(id);
+      return await request();
+    },
+    {
+      onError: (errors) => {
+        console.log(errors);
+      },
+
+      retry: false,
+    }
+  );
+};
+
 export const useGetPatients = (params?: PatientsPayload) => {
   return useQuery<PatientsResponse, AxiosError, PatientsResponse>(
     [
@@ -58,6 +77,22 @@ export const useGetPatients = (params?: PatientsPayload) => {
   );
 };
 
+export const useGetPatient = (id: string) => {
+  return useQuery<PatientAPI, AxiosError, PatientAPI>(
+    [ReactQueryKeys.PatientsQuery, id],
+    async () => {
+      const { request } = patientsAPI.single.getPatient(id);
+      return await request();
+    },
+    {
+      onError: (errors) => {
+        console.log(errors);
+      },
+      retry: false,
+    }
+  );
+};
+
 export const useRegisterPatient = () => {
   const history = useHistory();
 

src/models/apiTypes.tsx

@@ -36,6 +36,8 @@ export type HospitalsAPI = {
   patient_hospital_id?: number;
 };
 
+// export type EpisodesAPI = {};
+
 export interface HospitalsResponse extends PaginationResponse, PaginationParams {
   results: HospitalsAPI[];
 }
@@ -59,6 +61,7 @@ export interface PatientsPayload extends PaginationParams {
 }
 
 export type PatientAPI = {
+  id: number; // DB ID
   full_name: string;
   national_id: string;
   age: number;
@@ -70,6 +73,7 @@ export type PatientAPI = {
   phone_2: string;
   address: string;
   hospital_mappings: HospitalsAPI[];
+  // episodes: EpisodesAPI[];
 };
 
 export interface PatientsResponse extends PaginationResponse, PaginationParams {

src/pages/PatientDetails/PatientDetails.style.ts

@@ -0,0 +1,5 @@
+import styled from '@emotion/styled';
+
+export const ComponentWrapper = styled.div`
+  padding: ${({ theme }) => theme.spacing.md};
+`;

src/pages/PatientDetails/PatientDetails.tsx

@@ -0,0 +1,68 @@
+/** @jsxImportSource @emotion/react */
+import React, { useState } from 'react';
+
+import { Button, Icon } from '@orfium/ictinus';
+import { useGetHospital, useGetPatient } from 'hooks/api/patientHooks';
+import { useHistory, useRouteMatch } from 'react-router-dom';
+
+import { ButtonContainer, PageTitle, PageWrapper } from '../../common.style';
+import { Tabs } from '../../components/Tabs';
+import urls from '../../routing/urls';
+import GeneralInformation from './components/GeneralInformation';
+import { ComponentWrapper } from './PatientDetails.style';
+
+const tabs = [
+  { label: 'General Information', value: 'info' },
+  { label: 'Episodes', value: 'episodes' },
+];
+
+const PatientDetails: React.FC = () => {
+  const match = useRouteMatch<{ hospitalID?: string; patientID?: string }>();
+  const [activeTab, setActiveTab] = useState('info');
+  const history = useHistory();
+
+  const { hospitalID, patientID } = match.params;
+
+  const { data: patient, isLoading: isPatientLoading } = useGetPatient(patientID ?? '');
+  const { data: hospital, isLoading: isHospitalLoading } = useGetHospital(hospitalID ?? '');
+
+  const isLoading = isHospitalLoading || isPatientLoading;
+
+  return (
+    <PageWrapper>
+      <PageTitle>
+        <Icon
+          name="fatArrowLeft"
+          size={24}
+          color={'lightGray-700'}
+          onClick={() => {
+            history.push(urls.patients());
+          }}
+        />
+        Patient Details
+      </PageTitle>
+      <Tabs
+        matchActiveDataType={activeTab}
+        onTabClick={(tabId) => {
+          setActiveTab(tabId);
+        }}
+        tabs={tabs}
+        shouldDisplayTabs
+      />
+      <ComponentWrapper>
+        {activeTab === 'info' ? (
+          <GeneralInformation patient={patient} hospital={hospital} />
+        ) : (
+          <div>Episodes</div>
+        )}
+      </ComponentWrapper>
+      <ButtonContainer>
+        <Button color={'blue-500'} buttonType="button" disabled={isLoading} block size="md">
+          Register new episode
+        </Button>
+      </ButtonContainer>
+    </PageWrapper>
+  );
+};
+
+export default PatientDetails;

src/pages/PatientDetails/components/GeneralInformation/GeneralInformation.style.ts

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+import { flex } from 'theme/functions';
+
+export const ComponentWrapper = styled.div`
+  padding: ${({ theme }) => theme.spacing.md};
+`;
+
+export const Container = styled.div`
+  ${flex};
+  flex-direction: column;
+  gap: 8px;
+`;