refactor(blood-screening): make it reusable

src/components/dashboard/BloodScreeningCard/BloodScreeningCard.tsx

@@ -2,11 +2,11 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BloodScreeningChart } from './BloodScreeningChart/BloodScreeningChart';
 import { BloodScreeningTable } from './BloodScreeningTable/BloodScreeningTable';
-import { useResponsive } from 'hooks/useResponsive';
+import { useResponsive } from '@app/hooks/useResponsive';
+import { BloodTestResult, results } from '@app/constants/dashboard/bloodTestResults';
 import * as S from './BloodScreeningCard.styles';
-import { BloodTestResult, results } from '../../../constants/dashboard/bloodTestResults';
 
-export const BloodScreeningCard: React.FC = () => {
+export const BloodScreeningCard: React.FC<{ id?: string }> = ({ id }) => {
   const { t } = useTranslation();
 
   const [activeItem, setActiveItem] = useState<BloodTestResult>(results[0]);
@@ -15,6 +15,7 @@ export const BloodScreeningCard: React.FC = () => {
 
   return (
     <S.BloodScreeningCard
+      id={id}
       title={
         mobileOnly && (
           <S.TitleWrapper>

src/components/dashboard/PatientResultsCard/PatientResultsCard.styles.ts

@@ -1,16 +1,11 @@
 import styled from 'styled-components';
 import { Typography } from 'antd';
 import { CalendarOutlined } from '@ant-design/icons';
-import { DashboardCard } from '@app/components/dashboard/DashboardCard/DashboardCard';
 
 interface IconProps {
   isActive: boolean;
 }
 
-export const DashboardCardStyled = styled(DashboardCard)`
-  overflow-y: auto;
-`;
-
 export const TitleWrapper = styled.div`
   display: flex;
   align-items: center;

src/components/dashboard/PatientResultsCard/PatientResultsCard.tsx

@@ -1,19 +1,20 @@
 import React from 'react';
-import { Steps, Step } from 'components/common/Steps/Steps';
 import { BarChartOutlined, CheckOutlined, FileTextOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
-import { patientResultStatus } from '@app/constants/patientResultStatus';
-import { patientResultsData } from '@app/constants/patientResultsData';
+import { Steps, Step } from '@app/components/common/Steps/Steps';
 import { Dates } from '@app/constants/Dates';
+import { patientResultsData } from '@app/constants/patientResultsData';
+import { patientResultStatus } from '@app/constants/patientResultStatus';
+import { DashboardCard } from '@app/components/dashboard/DashboardCard/DashboardCard';
 import * as S from './PatientResultsCard.styles';
 
 const icons = [<CheckOutlined key={0} />, <BarChartOutlined key={1} />, <FileTextOutlined key={2} />];
 
-export const PatientResultsCard: React.FC = () => {
+export const PatientResultsCard: React.FC<{ id?: string }> = ({ id }) => {
   const { t } = useTranslation();
 
   return (
-    <S.DashboardCardStyled>
+    <DashboardCard id={id}>
       <Steps direction="vertical" current={0}>
         {patientResultStatus.map((status, index) => {
           const patientResult = patientResultsData.find((item) => item.status === status.id) || {
@@ -38,6 +39,6 @@ export const PatientResultsCard: React.FC = () => {
           );
         })}
       </Steps>
-    </S.DashboardCardStyled>
+    </DashboardCard>
   );
 };

src/pages/DashboardPage/DashboardPage.styles.ts

@@ -22,6 +22,10 @@ export const RightSideCol = styled(Col)`
     margin-top: -${(props) => props.theme.desktopLayout.paddingVertical};
     left: 0;
   }
+
+  #patient-timeline {
+    overflow-y: auto;
+  }
 `;
 
 export const LeftSideCol = styled(Col)`

src/pages/DashboardPage/DashboardPage.tsx

@@ -63,9 +63,9 @@ const DashboardPage: React.FC = () => {
       </S.LeftSideCol>
 
       <S.RightSideCol xl={8} xxl={8}>
-        <BloodScreeningCard />
+        <BloodScreeningCard id="blood-screening" />
         <S.Space />
-        <PatientResultsCard />
+        <PatientResultsCard id="patient-timeline" />
       </S.RightSideCol>
     </Row>
   );