Overview

The profile tab houses a user's personal information and the communities they are a member of. The personal information includes their name and phone number, and can easily be edited by the user. The communities portion of the profile displays all of the communities a user is a member of. From their profile users can join additional communities and even create their own.

Front End

Users can view their profile information and edit by pressing the "Edit My Information" button. They can then save any changes they make. Users can also tap to join new communities or create new communities. Returning to the profile and hitting the refresh button they will see these communities listed in the "My Communities" section.

The editable information uses the react native text input component. This component has a boolean prop that determines whether or not the text is "editable." When the profile is loaded this bool is set to false, but tapping the "Edit My Information" button changes it to true. This change is made clear to the user by changing the background color of the text input fields from grey to white.

The communities below are listed using the react native flat list component. This component has a prop that sets the data to be stored in the list. This data is a state variable that is a map from list index to community names. The map is updated by pulling data from AWS with a SQL query every time the refresh button is clicked.

The join a community page uses the react native material dropdown component. This is a cross-platform picker that allows users to select from a range of options. It is also populated via data from a SQL query.

Screenshots:

Back End

This page connects to our AWS database to pull relevant information. A user's name and phone number is queried from the database based on their SUID by sending a POST message with the tag "/profile_mount." When the user updates this information, a SQL query publishes this new information to the database using the POST message "/update_profile."

The create and join community pages operate similarly by querying the database and using SQL to update the membership table as new communities are joined. In our code base, these SQL queries and POST messages are maintained in backend/routes.js.