Mobile app to provide information regarding medical situations for volunteers on the sideline of sports games, produced in collaboration with the Division of Sports Medicine at UCSD.
Implement this page, with the user's bookmarks being displayed rather than "Commonly Viewed". See Bookmarks pr for how to fetch bookmarks. Vinayak will be working on the "view all", so no need to worry about this page.
Also, refactor the bottom bar bookmark icon to be the home icon, and make sure this page routes to the global search page (in V2 Final in Figma):
Create a file with functions that allow creating new bookmarks, deleting existing ones, and fetching all bookmarks. These should be stored on device's local storage. The title of the page being bookmarked should be sufficient.
Make buttons on general principles main view clickable, and make them route to specific principles. See which principles are assigned to which category on Figma, and hardcode this for now.
Begin implementing the Global Search Page, don't worry about showing specific categories, principles, or commonly viewed yet. Do frontend for the search bar, and implement functionality for the search, for now just use a hardcoded array to search in. Search should just be character matching for the titles of stuff - so no need for anything complex, think command+f, and only titles of documents should be checked.
Implement this page for adding/editing an injury. Exclude the"Preview" and "Save Draft" buttons for now. Contact me if you have any questions about the backend side of things. Also, no need to do the checkboxes with the different emergency types for now, that'll be handled later.
Create this page, and make it dynamically fetch/display all the categories. Can exclude the sort order for now, and no need to make the edit button work for now, but make the delete button work as well. Note this page should be created as a component, as it also exists in the global search view by category section, so it should be able to display all the categories with type "Principles" or all categoreis with type "Emergencies". It should also be able to display all the emergency pages, not by category. Add backend routes if needed for those. Check figma for more specifics.
Once medical emergency page pull request is merged, turn this page into a component that takes in a document following the medical emergency format/schema, and renders it based on the content. I.e, as input, the page should takes in an object following the backend schema.
This is an example of this. In this case, "Importance" would be rendered as a header, and the "The cervical spine ..." description would be rendered as text under it. This would all be in the "Overview" tab. If there's an array corresponding to a header, then render this as bullet points.
Furthermore, research how to fetch from the mongo database when connected to internet, and download locally onto the device for online use. This should work also to update a user's app, whenever an admin changes anything in the documentation. This framework should do: https://docs.expo.dev/versions/latest/sdk/filesystem/
Make general principle page render documents dynamically, just modify the current tsx file to take in a general principle as input and show it correctly. Here is the schema for a general principle:
const generalPrincipleSchema = new mongoose.Schema({
title: String,
overview: {},
content: {},
});
Content is what all the page information contained inside. If content contains an array of objects, so if it looks like the following:
content: {[{ ... }, { ... }, ...]}
The following should be shown, where each array entry is its own page:
If content is simply just an object (no array in it), it should show up like the page you have already made. Let me know if you have any more questions about this!
Start by creating a new directory in the frontend folder that is responsible for interacting with the device's file system. For this task, implement the method that fetch the data from MongoDB and downloads it onto the user's device. First priority is to just make a working method that does this, then if time, implement logic to check if the user's device has the latest version and needs to fetch new data (may need to add version number to mongo database).
If a user has an outdated version, the current info stored on their device should be wiped, and all the documents should be download from mongodb onto their device again. This makes updates simpler, as rather than checking which documents have been deleted/added/newly added, can wipe and readd everything.
Make a "Category" schema with a title, and an array of titles, which are the emergencies/general principles that are in this category. Also there should be a type to distinguish whether this hsould go on the home page or the general principle page.
Example:
{
title: "Inclement Weather",
items: ["Lightning", ...etc],
type: "Emergency" or "General Principle"
}
We need routes for creating a category, deleting one, adding a principle/emergency to a category. For context, these categories will be the ones populating the home page buttons and the general principle ones.
Implement the page for showing a medical emergency - can just hardcode the page information for now. In the future, this should fetch from the user's device storage, but this will be implemented later once we know exactly how we will store it.
Implement the bottom bar using the Figma designs, ensure each icon click routes to a new page, can use dummy pages for now. Also make sure the icons are updated when a user clicks as shown in the designs.
Make the navbar dropdown menu for general principles populate with the Categories of type "General Principle". See Lillian and Edward's new backend pr for the new routes you can use for this, as well as the Category schema.
Make page to view and add items in a category, as well as the flow to add a category. Also implement logic so when anything is changed, i.e. a page is added or deleted, or a category, the version number gets changed: