From 07114290f174b3efbb5cf944a0f45a3d281c3c00 Mon Sep 17 00:00:00 2001 From: Vinayak Sharma <03vinsha@gmail.com> Date: Mon, 4 Mar 2024 22:17:41 -0800 Subject: [PATCH 01/15] adapted code to fetch data from device --- dfm-sideline-sidekick-app/App.tsx | 5 ++- .../components/viewAll.tsx | 35 +++++++++++++++++++ .../components/viewAllStyles.tsx | 11 ++++++ .../download/downloadFromAPI.ts | 2 ++ package-lock.json | 6 ++++ 5 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 dfm-sideline-sidekick-app/components/viewAll.tsx create mode 100644 dfm-sideline-sidekick-app/components/viewAllStyles.tsx create mode 100644 package-lock.json diff --git a/dfm-sideline-sidekick-app/App.tsx b/dfm-sideline-sidekick-app/App.tsx index 4840c84..832a494 100644 --- a/dfm-sideline-sidekick-app/App.tsx +++ b/dfm-sideline-sidekick-app/App.tsx @@ -12,11 +12,13 @@ import { downloadJSON } from "./download/downloadFromAPI"; import BookmarkPage from "./pages/BookmarkPage"; import SearchPage from "./pages/SearchPage"; import TabPage from "./pages/TabPage"; +import ViewAll from "./components/viewAll"; type RootStackParamList = { Bookmark: undefined; Search: undefined; Tab: undefined; + ViewAll: undefined; }; type StackNavigation = StackNavigationProp; @@ -82,7 +84,8 @@ export default function App() { return ( - + + diff --git a/dfm-sideline-sidekick-app/components/viewAll.tsx b/dfm-sideline-sidekick-app/components/viewAll.tsx new file mode 100644 index 0000000..5fc0732 --- /dev/null +++ b/dfm-sideline-sidekick-app/components/viewAll.tsx @@ -0,0 +1,35 @@ +import React, { useState , useEffect } from "react"; +import { Text, View, Platform } from "react-native"; +import * as FileSystem from "expo-file-system"; +import { downloadJSON } from "../download/downloadFromAPI"; + +import styles from "./viewAllStyles"; + +const ViewAll: React.FC = () => { + const [jsonOutput, setJsonOutput] = useState(null); + + useEffect(() => { + const fetchData = async () => { + try { + const deviceType = Platform.OS; + const result = await downloadJSON("data.json", deviceType); + setJsonOutput(result); + } catch (error) { + console.error("Error fetching data:", error); + } + }; + + fetchData(); + }, []); + + console.log("LOLOLOLOLOLOL"); + console.log(jsonOutput.emergencies[0], jsonOutput.emergencies[1]); + + return ( + + Hi + + ); + }; + + export default ViewAll; \ No newline at end of file diff --git a/dfm-sideline-sidekick-app/components/viewAllStyles.tsx b/dfm-sideline-sidekick-app/components/viewAllStyles.tsx new file mode 100644 index 0000000..deee38b --- /dev/null +++ b/dfm-sideline-sidekick-app/components/viewAllStyles.tsx @@ -0,0 +1,11 @@ +import { StyleSheet } from "react-native"; + +const styles = StyleSheet.create({ + container: { + flexDirection: "row", + alignItems: "center", + paddingTop: 15, + }, +}); + +export default styles; \ No newline at end of file diff --git a/dfm-sideline-sidekick-app/download/downloadFromAPI.ts b/dfm-sideline-sidekick-app/download/downloadFromAPI.ts index 4e47f48..9de7d2e 100644 --- a/dfm-sideline-sidekick-app/download/downloadFromAPI.ts +++ b/dfm-sideline-sidekick-app/download/downloadFromAPI.ts @@ -112,7 +112,9 @@ export const downloadJSON = async (fileName: string, OS: string) => { console.log("GENERAL PRINCIPLES JSON:"); console.log(jsonOutput.generalPrinciples); + return jsonOutput; } catch (err) { console.log("ERROR:", err); } + }; diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..e12893a --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "DFM-Sideline-Sidekick-App", + "lockfileVersion": 2, + "requires": true, + "packages": {} +} From 87cce4aa1ea155735981207f2556981cdf52aa31 Mon Sep 17 00:00:00 2001 From: Vinayak Sharma <03vinsha@gmail.com> Date: Wed, 6 Mar 2024 10:45:52 -0800 Subject: [PATCH 02/15] created home page with fetch function to pass array into view all page, made view all page with scrolling and card views that dynamically renders --- dfm-sideline-sidekick-app/App.tsx | 8 +- .../components/viewAll.tsx | 128 +++++++++++++++--- .../components/viewAllStyles.tsx | 48 ++++++- dfm-sideline-sidekick-app/pages/Home.tsx | 60 ++++++++ 4 files changed, 217 insertions(+), 27 deletions(-) create mode 100644 dfm-sideline-sidekick-app/pages/Home.tsx diff --git a/dfm-sideline-sidekick-app/App.tsx b/dfm-sideline-sidekick-app/App.tsx index 832a494..8edb32e 100644 --- a/dfm-sideline-sidekick-app/App.tsx +++ b/dfm-sideline-sidekick-app/App.tsx @@ -14,11 +14,14 @@ import SearchPage from "./pages/SearchPage"; import TabPage from "./pages/TabPage"; import ViewAll from "./components/viewAll"; +import Home from "./pages/Home"; + type RootStackParamList = { Bookmark: undefined; Search: undefined; Tab: undefined; ViewAll: undefined; + Home: undefined, }; type StackNavigation = StackNavigationProp; @@ -84,7 +87,8 @@ export default function App() { return ( - + + @@ -104,4 +108,4 @@ const styles = StyleSheet.create({ alignItems: "center", justifyContent: "center", }, -}); +}); \ No newline at end of file diff --git a/dfm-sideline-sidekick-app/components/viewAll.tsx b/dfm-sideline-sidekick-app/components/viewAll.tsx index 5fc0732..d914fc6 100644 --- a/dfm-sideline-sidekick-app/components/viewAll.tsx +++ b/dfm-sideline-sidekick-app/components/viewAll.tsx @@ -1,33 +1,117 @@ import React, { useState , useEffect } from "react"; -import { Text, View, Platform } from "react-native"; +import { Text, View, Platform, ScrollView } from "react-native"; import * as FileSystem from "expo-file-system"; import { downloadJSON } from "../download/downloadFromAPI"; +import { RouteProp } from "@react-navigation/native"; // Import RouteProp +import { StackNavigationProp } from "@react-navigation/stack"; // Import StackNavigationProp +import { Roboto_400Regular, Roboto_700Bold } from "@expo-google-fonts/roboto"; +import { useFonts } from "expo-font"; import styles from "./viewAllStyles"; -const ViewAll: React.FC = () => { - const [jsonOutput, setJsonOutput] = useState(null); - - useEffect(() => { - const fetchData = async () => { - try { - const deviceType = Platform.OS; - const result = await downloadJSON("data.json", deviceType); - setJsonOutput(result); - } catch (error) { - console.error("Error fetching data:", error); - } - }; - - fetchData(); - }, []); +const placeholder = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et"; + +// type array = { +// "How To Treat": { +// Placeholder: string; +// }; +// Overview: { +// Placeholder: string; +// }; +// __v: number; +// _id: string; +// title: string; +// // You can add other properties based on the actual data structure +// }; + +// type array = { +// "How To Treat": { Placeholder: string; }; Overview: { Placeholder: string; }; __v: number; _id: string; title: string; content?: undefined; overview?: undefined; treatment?: undefined; +// }; + + +// type array = { +// _id?: string; // Optional property since some objects lack it +// __v?: number; // Optional property since some objects lack it +// title: string; +// overview?: string; // Optional property since some lack "overview" +// treatment?: string; // Optional property since some lack "treatment" +// content?: string; // Optional property for "New Emergency" object +// // Define other optional properties for "Cervical Spine Injury" as needed +// // (e.g., Diagnosis, Importance, Mechanism of Injury, Physical Exam) +// HowToTreat?: { Placeholder: string }; // Optional property +// Overview?: { Placeholder: string }; // Optional property +// }; + +type array = { + _id: string; + __v: number; + title: string; + content?: string; + overview?: string | { [key: string]: any }; // Allow string or object for overview + treatment?: string | { [key: string]: any }; // Allow string or object for treatment + // Add other properties as needed +}; + +//({ "How To Treat": { Placeholder: string; }; Overview: { Placeholder: string; }; __v: number; _id: string; title: string; content?: undefined; overview?: undefined; treatment?: undefined; } | { __v: number; ... 6 more ...; Overview?: undefined; } | { ...; } | { ...; } | { ...; } | { ...; })[] + + + +interface SpecificProps { + arrayProp: array[]; + title: string; +} + +export type RootStackParamList = { + ViewAll: SpecificProps; +}; + +type Props = { + route: RouteProp; + navigation: StackNavigationProp; +}; + +// interface Props { +// arrayProp: any; +// title: any; +// } + + + +const Card = ({ title, description }) => { + return ( + + + {title} + {description} + + + ); +}; + +const ViewAll: React.FC = ({ navigation, route }) => { + + const { params } = route; - console.log("LOLOLOLOLOLOL"); - console.log(jsonOutput.emergencies[0], jsonOutput.emergencies[1]); - + const [fontsLoaded] = useFonts({ + "Roboto-Regular": Roboto_400Regular, + "Roboto-Bold": Roboto_700Bold, + }); + if (!fontsLoaded) { + return Loading...; + } return ( - - Hi + + {params.title} + {params.arrayProp.length} items + + {params.arrayProp.map((emergency) => ( + + ))} + ); }; diff --git a/dfm-sideline-sidekick-app/components/viewAllStyles.tsx b/dfm-sideline-sidekick-app/components/viewAllStyles.tsx index deee38b..7f67b6e 100644 --- a/dfm-sideline-sidekick-app/components/viewAllStyles.tsx +++ b/dfm-sideline-sidekick-app/components/viewAllStyles.tsx @@ -2,9 +2,51 @@ import { StyleSheet } from "react-native"; const styles = StyleSheet.create({ container: { - flexDirection: "row", - alignItems: "center", - paddingTop: 15, + flex: 1, + backgroundColor: "#fff", + paddingTop: 50, + textAlign: "left", + alignSelf: "stretch", + }, + title: { + color: "#182B49", + fontSize: 28, + fontFamily: "Roboto-Bold", + fontWeight: "700", + marginBottom: 20, + textAlign: "left", + paddingTop: 10, + }, + containerCard: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#f5f5f5', + paddingBottom: 10, + paddingTop: 30, + }, + card: { + backgroundColor: 'white', + borderRadius: 15, + padding: 16, + shadowColor: 'black', + shadowOffset: { + width: 0, + height: 4, + }, + shadowOpacity: 0.3, + shadowRadius: 6, + elevation: 14, + width: 350, + height: 100, + justifyContent: 'center', + alignItems: 'center', + }, + cardTitle: { + + }, + cardDescription: { + }, }); diff --git a/dfm-sideline-sidekick-app/pages/Home.tsx b/dfm-sideline-sidekick-app/pages/Home.tsx new file mode 100644 index 0000000..8384783 --- /dev/null +++ b/dfm-sideline-sidekick-app/pages/Home.tsx @@ -0,0 +1,60 @@ +import { useNavigation } from "@react-navigation/native"; +import { StackNavigationProp } from "@react-navigation/stack"; +import { Button, StyleSheet, View, Platform } from "react-native"; + +import { RootStackParamList } from "../components/viewAll"; + +import React, { useState , useEffect } from "react"; +import * as FileSystem from "expo-file-system"; +import { downloadJSON } from "../download/downloadFromAPI"; + +// export type RootStackParamList = { +// viewAll: { arrayProp: string; title: Content } | undefined; +// }; + +const title = "Emergency Action Plan"; + +const styles = StyleSheet.create({ + container2: { + width: "100%", + }, +}); + +// const temparray = [{"How To Treat": {"Placeholder": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do."}, "Overview": {"Placeholder": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do."}, "__v": 0, "_id": "65b1be139595a25c775c8353", "title": "Cervical Strain"}, {"How To Treat": {"Placeholder": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do."}, "Overview": {"Placeholder": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do."}, "__v": 0, "_id": "65b1be1c5e979611161aa446", "title": "Cervical Dystonia"}, {"How To Treat": {"Placeholder": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do."}, "Overview": {"Placeholder": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do."}, "__v": 0, "_id": "65b1be25a26940b07230d04b", "title": "Cervical Dysplasia"}, {"How To Treat": {"Placeholder": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do."}, "Overview": {"Placeholder": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do."}, "__v": 0, "_id": "65b1be2bcf978bb8631dac90", "title": "Cervical"}, {"__v": 0, "_id": "65b2021b2c6d799e370663f8", "content": "Additional content for the new emergency", "overview": "Overview of the new emergency", "title": "New Emergency", "treatment": "Treatment for the new emergency"}, {"__v": 0, "_id": "65b369a8e8fe96a404d4fd6b", "content": "Additional content for the new emergency", "overview": "Overview of the new emergency", "title": "To Be Deleted Emergency", "treatment": "Treatment for the new emergency"}, {"__v": 0, "_id": "65b36d110c9c60394b37f7a1", "overview": {"Diagnosis": [Array], "Importance": "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", "Mechanism of Injury": [Array], "Physical Exam": [Array]}, "title": "Cervical Spine Injury", "treatment": {"Acute Management": [Array], "Considerations": [Object], "Dispo": [Array]}}, {"__v": 0, "_id": "65b36f12640d62464e0dd129", "overview": {"Placeholder": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do."}, "title": "Cervical Strain", "treatment": {"Placeholder": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do."}}, {"__v": 0, "_id": "65b9cd3eaf25a994dd6072fb", "title": "New Emergency Placeholder Two"}, {"__v": 0, "_id": "65c2ede2a86385e517385785", "title": "New Emergency Placeholder Three"}, {"__v": 0, "_id": "65c2ef26b87b638ac61beb09", "title": "New Emergency Placeholder Four"}, {"__v": 0, "_id": "65d78c96a8ab3d54a6f067f5", "overview": {"Placeholder": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do."}, "title": "Test with a lot of bullet points", "treatment": {"Acute Management": [Array], "Dispo": [Array]}}] +const temparray = [{"How To Treat": {"Placeholder": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do."}, "Overview": {"Placeholder": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do."}, "__v": 0, "_id": "65b1be139595a25c775c8353", "title": "Cervical Strain"}] + +const fetch = () => { + const [jsonOutput, setJsonOutput] = useState(null); + + useEffect(() => { + const fetchData = async () => { + try { + const deviceType = Platform.OS; + const result = await downloadJSON("data.json", deviceType); + setJsonOutput(result); + } catch (error) { + console.error("Error fetching data:", error); + } + }; + + fetchData(); + }, []); + + return jsonOutput; +} + +export default function Home() { + const navigation = useNavigation>(); + + const data = fetch(); + + const handleNavigation = () => { + navigation.navigate("ViewAll", { arrayProp: data.emergencies, title: title }); //change this to data.emergencies wafter fixing fetching + }; + + return ( + +