Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic medical emergency page #16

Merged
merged 10 commits into from
Feb 26, 2024
Merged

Dynamic medical emergency page #16

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9a40335
Working copy of feature that adjusts title when ID is changed in Home…
r800360 Feb 14, 2024
a62facb
Implemented the rest of the dynamic emergency page layout
eshaan-s18 Feb 15, 2024
d4ef936
Implemented recursive dynamic header rendering as discussed in 2-15 m…
r800360 Feb 16, 2024
a714136
Resolved package.json merge conflict
r800360 Feb 17, 2024
f9d24a2
Fixed frontend linter issues
r800360 Feb 17, 2024
31ae9eb
Removed extra file and comments
eshaan-s18 Feb 21, 2024
72d7bc7
Changed from passing in emergency id to passing in emergency directly…
r800360 Feb 21, 2024
a916d83
Package and package-lock fixes
r800360 Feb 21, 2024
95f995c
Fixed frontend linter issues
r800360 Feb 21, 2024
7eedb71
Replace App.tsx with main branch copy
r800360 Feb 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 46 additions & 16 deletions dfm-sideline-sidekick-app/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,51 @@
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
// import { StatusBar } from "expo-status-bar";
// import { StyleSheet, Text, View } from "react-native";
// import { StyleSheet } from "react-native";
// import { NativeRouter, Routes, Route } from "react-router-native";

export default function App() {
import ConditionsSection from "./ConditionsSection";
import HomeScreen from "./HomeScreen";

// In your App.tsx or where your navigation setup resides

const Stack = createNativeStackNavigator();

function App() {
return (
// eslint-disable-next-line @typescript-eslint/no-use-before-define
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Conditions" component={ConditionsSection} />
</Stack.Navigator>
</NavigationContainer>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
export default App;

// export default function App() {
// return (
// // eslint-disable-next-line @typescript-eslint/no-use-before-define
// <View style={styles.container}>
// {/* <Text>Open up App.js to start working on your app!</Text> */}
// {/* <ConditionsSection /> */}
// <NativeRouter>
// <Routes>
// <Route exact path="/" element={<ConditionsSection />} />
// <Route path="/emergencies/:emergencyObjectId" element={<ConditionsSection />} />
// </Routes>
// </NativeRouter>
// <StatusBar style="auto" />
// </View>
// );
// }
// const styles = StyleSheet.create({
// container: {
// flex: 1,
// backgroundColor: "#fff",
// alignItems: "center",
// justifyContent: "center",
// },
// });
288 changes: 213 additions & 75 deletions dfm-sideline-sidekick-app/ConditionsSection.tsx
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great overall, make sure to get rid of any commented code. Also, note that the Condiitons Section will be showing data that is fetched from the device's storage, not from the MongoDB database. So for the scope of this pull request, just don't worry about fetching the data, and just make the data be passed in as a prop to the component. In the future, we will have a dedicated file that fetches the correct data for a specific emergency/condition, and passes it into the Conditions Section component

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

However, the progress you have made on emergencies.ts and the fetching will be useful later, especially for admin mode stuff, so great work and feel free to keep this! Just make sure the ConditionsSection.tsx only focuses on showing data that is passed in.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes as discussed here have been addressed with the commits below by having ConditionsSection take in an Emergency as input as opposed to an id. Tests have been reconfigured accordingly.

Original file line number Diff line number Diff line change
@@ -1,13 +1,69 @@
// import { useRoute } from "@react-navigation/native";
import { ParamListBase, RouteProp } from "@react-navigation/native";
import { StackNavigationProp } from "@react-navigation/stack";
import * as Font from "expo-font";
import { useEffect, useState } from "react";
import { Image, Pressable, SafeAreaView, ScrollView, Text, View } from "react-native";

import styles from "./ConditionSectionStyles";
import StringRenderer from "./components/StringRenderer";
import { getEmergency } from "./emergencies";

export default function ConditionsSection() {
import type { Emergency } from "./emergencies";

export type RootStackParamList = {
// Define the parameters for your screens here
Conditions: { emergencyObjectId: string }; // Example parameter
} & ParamListBase;

// Define the type for the route parameters
type ConditionsScreenRouteProp = RouteProp<RootStackParamList, "Conditions">;

// Define the type for the navigation object
type ConditionsScreenNavigationProp = StackNavigationProp<RootStackParamList, "Conditions">;

type Props = {
route: ConditionsScreenRouteProp;
navigation: ConditionsScreenNavigationProp;
};

type StringValue = string | string[] | { [key: string]: StringValue };

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export default function ConditionsSection({ route, navigation }: Props) {
const [isOverviewPressed, setIsOverviewPressed] = useState<boolean>(true);
const [isTreatmentPressed, setIsTreatmentPressed] = useState<boolean>(false);
const [isFontsLoaded, setIsFontsLoaded] = useState<boolean>(false);
const [overviewHeaders, setOverviewHeaders] = useState<string[]>([]);
const [overviewValues, setOverviewValues] = useState<StringValue[]>([]);
const [treatmentHeaders, setTreatmentHeaders] = useState<string[]>([]);
const [treatmentValues, setTreatmentValues] = useState<StringValue[]>([]);
const [contentHeaders, setContentHeaders] = useState<string[]>([]);
const [contentValues, setContentValues] = useState<StringValue[]>([]);

// const route = useRoute();
const { params } = route; // Destructure params from the route object
//const { emergencyObjectId } = route.params();
const [emergency, setEmergency] = useState<Emergency>();

// Assuming emergency is of type Emergency
// if (emergency?.overview && typeof emergency.overview === "object") {
// setOverviewHeaders(Object.keys(emergency.overview));
// setOverviewValues(Object.values(emergency.overview));
// }

// if (emergency?.overview && typeof emergency.overview === "string") {
// //const overviewHeaders = Object.keys(emergency.overview);
// console.log(emergency.overview);
// }

// const mechanismArray: string[] = emergency?.overview?.["Mechanism of Injury"] ?? [];
// const diagnosisArray: string[] = emergency?.overview?.Diagnosis ?? [];
// const physicalArray: string[] = emergency?.overview?.["Physical Exam"] ?? [];

// const accuteArray: string[] = emergency?.treatment?.["Acute Management"] ?? [];
// const dispoArray: string[] = emergency?.treatment?.Dispo ?? [];
// const contentArray: string[] = emergency?.treatment?.Considerations?.Content ?? [];

useEffect(() => {
async function loadFont() {
Expand All @@ -27,20 +83,51 @@ export default function ConditionsSection() {
void loadFont();
}, []);

type BulletListProps = {
items: string[];
};
useEffect(() => {
if (params?.emergencyObjectId) {
// Check if params and emergencyObjectId exist
// eslint-disable-next-line @typescript-eslint/no-floating-promises
getEmergency(params.emergencyObjectId).then((result) => {
if (result.success) {
setEmergency(result.data);
} else {
console.error("Error fetching emergency data:", result.error);
}
});
}
}, [params]); // Include params in the dependency array

const BulletList = ({ items }: BulletListProps) => (
<View style={styles.list}>
{items.map((item: string, index: number) => (
<View key={index} style={styles.listItem}>
<Text style={styles.bullet}>{"\u2022"}</Text>
<Text style={styles.itemText}>{item}</Text>
</View>
))}
</View>
);
useEffect(() => {
if (emergency?.overview && typeof emergency.overview === "object") {
setOverviewHeaders(Object.keys(emergency.overview));
setOverviewValues(Object.values(emergency.overview) as StringValue[]);
}

if (emergency?.treatment && typeof emergency.treatment === "object") {
setTreatmentHeaders(Object.keys(emergency.treatment));
setTreatmentValues(Object.values(emergency.treatment) as StringValue[]);
}

if (emergency?.content && typeof emergency.content === "object") {
setContentHeaders(Object.keys(emergency.content));
setContentValues(Object.values(emergency.content) as StringValue[]);
}
}, [emergency]);

// type BulletListProps = {
// items: string[];
// };

// const BulletList = ({ items }: BulletListProps) => (
// <View style={styles.list}>
// {items.map((item: string, index: number) => (
// <View key={index} style={styles.listItem}>
// <Text style={styles.bullet}>{"\u2022"}</Text>
// <Text style={styles.itemText}>{item}</Text>
// </View>
// ))}
// </View>
// );

function onOverviewPress() {
if (!isOverviewPressed) {
Expand All @@ -67,7 +154,8 @@ export default function ConditionsSection() {
<Image style={styles.image} source={require("./assets/ic_caretleft.png")} />
<View style={styles.margin}>
<Text style={styles.subtitle}>Medical Emergency</Text>
<Text style={styles.title}>Cervical Spine Injury</Text>
{/* <Text style={styles.title}>Cervical Spine Injury</Text> */}
{emergency && <Text style={styles.title}>{emergency.title}</Text>}
</View>

<View style={styles.menu}>
Expand All @@ -91,69 +179,119 @@ export default function ConditionsSection() {

<View style={styles.information}>
<View style={isOverviewPressed ? styles.overview : styles.overviewHidden}>
<View style={styles.infoSection}>
<Text style={styles.descriptionTitle}>Importance</Text>
<Text style={styles.descriptionInfo}>
The cervical spine is not stabilized or protected by ribs or other surrounding
structures, so fractures are more common and can be unstable. This creates risk for
potential damage to the spinal cord resulting in quadriplegia and death and could be
made worse by moving patients without proper immobilization
</Text>
</View>

<View style={styles.infoSection}>
<Text style={styles.descriptionTitle}>Mechanism of Injury</Text>
<BulletList
items={[
"Direct blow to head/neck",
"Axial loading to spine, esp. w/neck in flexion",
]}
/>
</View>

<View style={styles.infoSection}>
<Text style={styles.descriptionTitle}>Diagnosis</Text>
<BulletList items={["Local pain", "Ecchymosis, and swelling"]} />
</View>

<View style={styles.infoSection}>
<Text style={styles.descriptionTitle}>Physical Exam</Text>
<BulletList items={["TTP over spinous process or vertebral bodies"]} />
</View>
{emergency?.overview && typeof emergency.overview === "string" && (
<View style={styles.infoSection}>
<Text style={styles.descriptionInfo}>{emergency?.overview}</Text>
</View>
)}

{emergency?.overview && typeof emergency.overview === "object" && (
<View style={styles.infoSection}>
{overviewHeaders.map((header, index) => (
<View key={index}>
<Text style={styles.descriptionTitle}>{header}</Text>
<StringRenderer data={overviewValues[index]} />
</View>
))}
</View>
)}

{/* {emergency?.overview && (
<View style={styles.infoSection}>
<Text style={styles.descriptionTitle}>Importance</Text>
<Text style={styles.descriptionInfo}>{emergency?.overview.}</Text>
</View>
)}
{emergency?.overview?.Importance && (
<View style={styles.infoSection}>
<Text style={styles.descriptionTitle}>Importance</Text>
<Text style={styles.descriptionInfo}>{emergency?.overview?.Importance}</Text>
</View>
)}

{mechanismArray.length !== 0 && (
<View style={styles.infoSection}>
<Text style={styles.descriptionTitle}>Mechanism of Injury</Text>
<BulletList items={mechanismArray} />
</View>
)}

{diagnosisArray.length !== 0 && (
<View style={styles.infoSection}>
<Text style={styles.descriptionTitle}>Diagnosis</Text>
<BulletList items={diagnosisArray} />
</View>
)}

{physicalArray.length !== 0 && (
<View style={styles.infoSection}>
<Text style={styles.descriptionTitle}>Physical Exam</Text>

<BulletList items={physicalArray} />
</View>
)} */}
</View>

<View style={isTreatmentPressed ? styles.howToTreat : styles.howToTreatHidden}>
<View style={styles.infoSection}>
<Text style={styles.descriptionTitle}>Acute Management</Text>
<BulletList
items={[
"Immobilize with spine board, cervical-collar, and barriers to lateral head movement (or whole body vacuum splint)",
"If this is not available, immobilize by placing hands on patient shoulders and using forearms to immobilize head",
]}
/>
</View>

<View style={styles.infoSection}>
<Text style={styles.descriptionTitle}>Dispo</Text>
<BulletList items={["Emergency transport to ED for CT (most accurate) +/- XR"]} />
</View>

<View style={styles.infoSection}>
<Text style={styles.descriptionTitle}>Considerations</Text>
<Text style={styles.descriptionInfo}>
If any suspicion for injury, send to ED. However, less likely if the following
criteria are met:
</Text>
<BulletList
items={[
"No cervical spine tenderness",
"Normal alertness/consciousness/GCS 15",
"No major distracting injuries",
"Normal neurologic status (full strength/sensation in all extremities)",
"Ability to actively rotate neck to 45 degrees laterally in both directions",
]}
/>
</View>
{emergency?.treatment && typeof emergency.treatment === "string" && (
<View style={styles.infoSection}>
<Text style={styles.descriptionInfo}>{emergency?.treatment}</Text>
</View>
)}

{emergency?.treatment && typeof emergency.treatment === "object" && (
<View style={styles.infoSection}>
{treatmentHeaders.map((header, index) => (
<View key={index}>
<Text style={styles.descriptionTitle}>{header}</Text>
<StringRenderer data={treatmentValues[index]} />
</View>
))}
</View>
)}

{emergency?.content && typeof emergency.content === "string" && (
<View style={styles.infoSection}>
<Text style={styles.descriptionInfo}>{emergency?.content}</Text>
</View>
)}

{emergency?.content && typeof emergency.content === "object" && (
<View style={styles.infoSection}>
{contentHeaders.map((header, index) => (
<View key={index}>
<Text style={styles.descriptionTitle}>{header}</Text>
<StringRenderer data={contentValues[index]} />
</View>
))}
</View>
)}

{/* {accuteArray.length !== 0 && (
<View style={styles.infoSection}>
<Text style={styles.descriptionTitle}>Acute Management</Text>
<BulletList items={accuteArray} />
</View>
)}

{dispoArray.length !== 0 && (
<View style={styles.infoSection}>
<Text style={styles.descriptionTitle}>Dispo</Text>
<BulletList items={dispoArray} />
</View>
)}

{contentArray.length !== 0 && (
<View style={styles.infoSection}>
<Text style={styles.descriptionTitle}>Considerations</Text>
{emergency?.treatment?.Considerations?.Header && (
<Text style={styles.descriptionInfo}>
{emergency?.treatment?.Considerations?.Header}
</Text>
)}
<BulletList items={contentArray} />
</View>
)} */}
</View>
</View>
</ScrollView>
Expand Down
Loading
Loading