Dynamic medical emergency page

[r800360]

Tracking Info

Resolves #9

Changes

Changed conditions section from static rendering of documents to dynamic rendering which relies on pulling IDs from the backend database to retrieve the documents and displaying them on your device screen.

Currently, a dummy home screen is used to trigger any changes

Update from Meeting 2-15: Recursive rendering has been implemented meaning that headers, subheaders, subsubheaders, etc. and associated plaintext strings or bulleted string lists (as specified by user headers) are rendered.

Testing and Confirmation of Change

In order to test this code, be sure to follow pre-setup:

1. Backend has the .env file that connects to the database and npm install followed by npm start have been utilized
2. Use the following .env file set to reference documents from RohanTest database:

PORT=3001
# MONGODB_URI="mongodb://127.0.0.1:27017/todoList"
# FRONTEND_ORIGIN="http://localhost:3000"
DATABASE_URL=mongodb+srv://[DM Anthony or Eshaan or Rohan for this part if you don't have DB URL].mongodb.net/RohanTest?retryWrites=true&w=majority

3. You have inserted your ip address into the designated part of requests.ts (search "note to reviewers"). Make sure to use ipconfig for Windows or ifconfig for Mac/Linux.
   
   So in this case, I would insert 100.112.104.53 in the designated place after the http:// part and before the :3001 part
4. The device that you are executing code from and the device you are testing from are on the same Wifi network
5. You have run npm install and npx expo start in the frontend folder
6. Without following step 2, documents will not be retrievable which will likely cause an error
7. Without following steps 3 and 4, you will likely hit a network error

Steps for Testing:

1. Scan QR Code on Expo
2. Code is currently set to first test case as discussed in HomeScreen.tsx. Press "Navigate to Conditions Section" and play around with it.
3. Switch test cases by changing ID variable according to comments in dummy HomeScreen.tsx and saving your code
4. Make sure to navigate back and press "Navigate to Conditions Section" to trigger the update.
5. If you have mongodb compass access, there is a good interface for adding more documents to RohanTest db, so you can make more test cases and add them in if you want - be sure to follow the schema format. If the test case demonstrates an important area of improvement that isn't discussed below, be sure to commit and push the test.

Testing Screenshots:
Currently, the feature seems to be working relatively well on Android phone and iPad as shown in the screenshots below.

TODO: Points of Improvement
Dummy home page needs to be replaced by global search page
Fix styling space by adding padding below
There is some extra spacing below the title and above the first header that needs to be resolved
Potential resultant linter or package issues that may arise

Feel free to add commits and push as necessary

DM Anthony, Eshaan, or Rohan with questions

[Anthonyp0329]

Great work guys! Just a few changes I commented about - let me know if you have any clarifying questions.

[Anthonyp0329]

Good to keep this file for later use, but this shouldn't be the responsibility of the ConditionsSection

[Anthonyp0329]

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

[Anthonyp0329]

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.

[r800360]

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.

[Anthonyp0329]

get rid of this empty file

[r800360]

File has been deleted in a commit below.

[meganleongg]

Besides for the commented code, it looks good to me. Great work!

[LillianHo5]

Aside from the feedback Anthony gave, this looks good to me!

[Anthonyp0329]

Looks good to go! Just make sure to remove your changes to App.tsx for now