Breast Cancer Hub
Getting Started
Installing node
- Check if you have node and npm install by running
node -v
and npm -v
. If both are installed, skip this section.
- Download node from https://nodejs.org/en/download. Follow the steps as shown.
- Ensure that you have everything downloaded by repeating Step 1
Starting with React
- Clone the repository into a local workspace
- Open the repo in an IDE of your choice.
- Open a new terminal for the project
- Run
npm install
. You will get many warnings and vulnerabilities. Ignore these. If you get errors, you will have to debug.
- Run
npm start
. This will be the command you need to run to start the project most of the time.
Updating Dependencies and Running the Project
- Update dependencies after pulling from the remote repository by running
npm install
- Run
npm start
Branching
All commands must be run inside your project terminal. For all your tasks, you will need to create a branch for your team and submit a pull request once you are done.
Creating New Branch
Option 1: Creating a branch on GitHub
- Click the branch button on the github page of our repo. It should be right underneath the repo name and say "stage"
- Type in the name of the branch you want to create.
- Click Create Branch: [branch name]
- Open up your project
- Run
git pull
in the terminal to update your branches
- Run
git checkout [branch name]
or git switch [branch name]
to switch to the newly created branch
- Double check that you are in the correct repository by running
git branch -a
- Make your changes and push as normal while working within your branch
Option 2: Creating a branch locally
git branch [name]
to create a branch with name of [name].
git checkout [name]
to switch to branch [name].
- When you've finished making your changes locally, run
git push -u origin [name]
to create the remote branch and push to there.
Submit a Pull Request
- Navigate to the repository page.
- Click the stage branch button and navigate to the branch you worked on.
- Click the Contribute button
- Click Open Pull Request
- Click write a description of your changes
- Click Create pull request
TODO: Add conventions for:
- Routing
- Standardized components (what to use as text boxes - themedview? themedtext?, buttons, etc.)
Contributing
Standard components
Icons
Icons are bundled with Expo. Use this page and apply the filter MaterialIcons to find icons.
Import the material icons library with
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
and render them within a view or button:
<MaterialIcons name="home" size={24} color="black" />
Links
Official Expo Documentation here
Links are <Link>
elements with the href
attribute set to the destination route. All links in the app should be buttons with an icon, text, or both to indicate the destination.
This is the template that should be used everywhere a link is required, with text, an icon, or both as required:
<Link href="https://github.com/cssgunc/breast-cancer-hub/blob/stage/" asChild>
<Pressable style={styles.button}>
<Text>home</Text>
<MaterialIcons name="home" size={24} color="black" />
</Pressable>
</Link>
with customizable style in the stylesheet in each page:
button: {
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 12,
paddingHorizontal: 32,
borderRadius: 4,
elevation: 3,
borderColor: 'black',
borderWidth: 2
}
Utility Functions
In "useSettings.ts," you will find these functions:
- getSetting:
This function's argument is a string key from "SettingsMap", because of the function's generics TS and any TS powered extensions should infer the returning setting value type, use this function any time you want to request a user setting value.
- saveSetting:
This function's arguments is are a string key from "SettingsMap" and its corresponding value, because of the function's generics TS and any TS powered extensions should infer the setting value type, use this function any time you want to set a user setting value.
- backupSettings:
This function is meant to backup the user settings to a database, since this leads to a direct database call it should be called as few times as possible. Its intended use-case is to be called after a batch of saveSetting calls are made (such as when a user exits a setting menu).
- loadBackupSettings:
This function is meant to load user settings from a database, this should only be called when a user logs in