Skip to content

Commit

Permalink
fix log update sections not compliant with vite hmr update rules
Browse files Browse the repository at this point in the history
  • Loading branch information
@rithviknishad
rithviknishad committed Aug 1, 2024
1 parent 803dcc3 commit 1d7bcd7
Show file tree
Hide file tree
Showing 12 changed files with 1,185 additions and 1,182 deletions.
32 changes: 19 additions & 13 deletions src/Components/LogUpdate/CriticalCareEditor.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import useQuery from "../../Utils/request/useQuery";
import routes from "../../Redux/api";
import LogUpdateSections from "./Sections";
import { useState } from "react";
import React, { useState } from "react";
import Loading from "../Common/Loading";
import { DailyRoundsModel } from "../Patient/models";
import ButtonV2, { Submit } from "../Common/components/ButtonV2";
Expand All @@ -20,7 +20,7 @@ type Props = {
id: string;
};

type Section = (typeof LogUpdateSections)[keyof typeof LogUpdateSections];
type SectionKey = keyof typeof LogUpdateSections;

export default function CriticalCareEditor(props: Props) {
const { t } = useTranslation();
Expand All @@ -29,8 +29,8 @@ export default function CriticalCareEditor(props: Props) {
pathParams: { consultationId: props.consultationId, id: props.id },
});

const [completed, setCompleted] = useState<Section[]>([]);
const [current, setCurrent] = useState<Section>();
const [completed, setCompleted] = useState<SectionKey[]>([]);
const [current, setCurrent] = useState<SectionKey>();

if (query.loading || !query.data) {
return <Loading />;
Expand Down Expand Up @@ -61,7 +61,9 @@ export default function CriticalCareEditor(props: Props) {
</div>
<Card className="shadow-lg md:rounded-xl lg:p-8">
<h3 className="mb-6 text-black">
{current?.title ?? t("record_updates")}
{current
? LogUpdateSections[current].meta.title
: t("record_updates")}
</h3>
{current ? (
<SectionEditor
Expand Down Expand Up @@ -94,8 +96,10 @@ export default function CriticalCareEditor(props: Props) {
<CareIcon icon="l-check-circle" className="text-2xl" />
</ButtonV2>
</li>
{Object.entries(LogUpdateSections).map(([key, section]) => {
const isCompleted = completed.some((o) => o === section);
{Object.keys(LogUpdateSections).map((key) => {
const isCompleted = completed.includes(key as SectionKey);
const section = LogUpdateSections[key as SectionKey];

return (
<li key={key}>
<ButtonV2
Expand All @@ -106,11 +110,11 @@ export default function CriticalCareEditor(props: Props) {
isCompleted && "bg-primary-100/50",
)}
border
onClick={() => setCurrent(section)}
onClick={() => setCurrent(key as SectionKey)}
>
{section.icon && (
{section.meta.icon && (
<CareIcon
icon={section.icon}
icon={section.meta.icon}
className={classNames(
"mr-2 text-2xl",
isCompleted
Expand All @@ -120,7 +124,7 @@ export default function CriticalCareEditor(props: Props) {
/>
)}
<span className="mr-auto text-lg font-semibold">
{section.title}
{section.meta.title}
</span>
<CareIcon
icon="l-check-circle"
Expand Down Expand Up @@ -151,19 +155,21 @@ export default function CriticalCareEditor(props: Props) {
type SectionEditorProps = {
log: DailyRoundsModel;
onComplete: () => void;
section: Section;
section: SectionKey;
};

const SectionEditor = ({ log, onComplete, section }: SectionEditorProps) => {
const [consultationId, id] = useSlugs("consultation", "daily_rounds");
const [diff, setDiff] = useState<Partial<DailyRoundsModel>>({});
const [isProcessing, setIsProcessing] = useState(false);

const Section = LogUpdateSections[section];

return (
<div
className={classNames(isProcessing && "pointer-events-none opacity-50")}
>
<section.component
<Section
log={{ ...log, ...diff }}
onChange={(changes) => setDiff((base) => ({ ...base, ...changes }))}
/>
Expand Down
255 changes: 128 additions & 127 deletions src/Components/LogUpdate/Sections/ABGAnalysis.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,132 +1,133 @@
import RangeFormField, {
ValueDescription,
} from "../../Form/FormFields/RangeFormField";
import { logUpdateSection } from "../utils";
import { LogUpdateSectionProps } from "../utils";

export default logUpdateSection(
{
title: "ABG Analysis",
icon: "l-tear",
},
({ log, onChange }) => {
const fields = [
{
key: "po2",
label: "PO2 (mm Hg)",
min: 10,
max: 400,
valueDescription: [
{ till: 49, text: "Low", className: "text-red-500" },
{ till: 200, text: "Normal", className: "text-green-500" },
{ text: "High", className: "text-red-500" },
],
},
{
key: "pco2",
label: "PCO2 (mm Hg)",
min: 10,
max: 200,
valueDescription: [
{ till: 34, text: "Low", className: "text-red-500" },
{ till: 45, text: "Normal", className: "text-green-500" },
{ text: "High", className: "text-red-500" },
],
},
{
key: "ph",
label: "PH",
min: 0,
max: 10,
step: 0.1,
valueDescription: [
{ till: 7.35, text: "Low", className: "text-red-500" },
{ till: 7.45, text: "Normal", className: "text-green-500" },
{ text: "High", className: "text-red-500" },
],
},
{
key: "hco3",
label: "HCO3 (mmol/L)",
min: 5,
max: 80,
step: 0.1,
valueDescription: [
{ till: 21.9, text: "Low", className: "text-red-500" },
{ till: 26, text: "Normal", className: "text-green-500" },
{ text: "High", className: "text-red-500" },
],
},
{
key: "base_excess",
label: "Base Excess (mmol/L)",
min: -20,
max: 20,
valueDescription: [
{ till: -3, text: "Low", className: "text-red-500" },
{ till: 2, text: "Normal", className: "text-green-500" },
{ text: "High", className: "text-red-500" },
],
},
{
key: "lactate",
label: "Lactate (mmol/L)",
min: 0,
max: 20,
step: 0.1,
valueDescription: [
{ till: 2, text: "Normal", className: "text-green-500" },
{ text: "High", className: "text-red-500" },
],
},
{
key: "sodium",
label: "Sodium (mmol/L)",
min: 100,
max: 170,
step: 0.1,
valueDescription: [
{ till: 134.9, text: "Low", className: "text-red-500" },
{ till: 145, text: "Normal", className: "text-green-500" },
{ text: "High", className: "text-red-500" },
],
},
{
key: "potassium",
label: "Potassium (mmol/L)",
min: 0,
max: 10,
step: 0.1,
valueDescription: [
{ till: 3.4, text: "Low", className: "text-red-500" },
{ till: 5.5, text: "Normal", className: "text-green-500" },
{ text: "High", className: "text-red-500" },
],
},
] satisfies {
key: keyof typeof log;
label: string;
min: number;
max: number;
step?: number;
valueDescription: ValueDescription[];
}[];
const ABGAnalysis = ({ log, onChange }: LogUpdateSectionProps) => {
const fields = [
{
key: "po2",
label: "PO2 (mm Hg)",
min: 10,
max: 400,
valueDescription: [
{ till: 49, text: "Low", className: "text-red-500" },
{ till: 200, text: "Normal", className: "text-green-500" },
{ text: "High", className: "text-red-500" },
],
},
{
key: "pco2",
label: "PCO2 (mm Hg)",
min: 10,
max: 200,
valueDescription: [
{ till: 34, text: "Low", className: "text-red-500" },
{ till: 45, text: "Normal", className: "text-green-500" },
{ text: "High", className: "text-red-500" },
],
},
{
key: "ph",
label: "PH",
min: 0,
max: 10,
step: 0.1,
valueDescription: [
{ till: 7.35, text: "Low", className: "text-red-500" },
{ till: 7.45, text: "Normal", className: "text-green-500" },
{ text: "High", className: "text-red-500" },
],
},
{
key: "hco3",
label: "HCO3 (mmol/L)",
min: 5,
max: 80,
step: 0.1,
valueDescription: [
{ till: 21.9, text: "Low", className: "text-red-500" },
{ till: 26, text: "Normal", className: "text-green-500" },
{ text: "High", className: "text-red-500" },
],
},
{
key: "base_excess",
label: "Base Excess (mmol/L)",
min: -20,
max: 20,
valueDescription: [
{ till: -3, text: "Low", className: "text-red-500" },
{ till: 2, text: "Normal", className: "text-green-500" },
{ text: "High", className: "text-red-500" },
],
},
{
key: "lactate",
label: "Lactate (mmol/L)",
min: 0,
max: 20,
step: 0.1,
valueDescription: [
{ till: 2, text: "Normal", className: "text-green-500" },
{ text: "High", className: "text-red-500" },
],
},
{
key: "sodium",
label: "Sodium (mmol/L)",
min: 100,
max: 170,
step: 0.1,
valueDescription: [
{ till: 134.9, text: "Low", className: "text-red-500" },
{ till: 145, text: "Normal", className: "text-green-500" },
{ text: "High", className: "text-red-500" },
],
},
{
key: "potassium",
label: "Potassium (mmol/L)",
min: 0,
max: 10,
step: 0.1,
valueDescription: [
{ till: 3.4, text: "Low", className: "text-red-500" },
{ till: 5.5, text: "Normal", className: "text-green-500" },
{ text: "High", className: "text-red-500" },
],
},
] satisfies {
key: keyof typeof log;
label: string;
min: number;
max: number;
step?: number;
valueDescription: ValueDescription[];
}[];

return (
<div className="flex flex-col gap-4">
{fields.map((field, index) => (
<RangeFormField
key={index}
label={<b>{field.label}</b>}
name={field.key}
onChange={(c) => onChange({ [field.key]: c.value })}
value={log[field.key] as number}
start={field.min}
end={field.max}
step={field.step || 1}
valueDescriptions={field.valueDescription}
/>
))}
</div>
);
},
);
return (
<div className="flex flex-col gap-4">
{fields.map((field, index) => (
<RangeFormField
key={index}
label={<b>{field.label}</b>}
name={field.key}
onChange={(c) => onChange({ [field.key]: c.value })}
value={log[field.key] as number}
start={field.min}
end={field.max}
step={field.step || 1}
valueDescriptions={field.valueDescription}
/>
))}
</div>
);
};

ABGAnalysis.meta = {
title: "ABG Analysis",
icon: "l-tear",
} as const;

export default ABGAnalysis;
Loading

0 comments on commit 1d7bcd7

Please sign in to comment.