Frontend Documentation

Overview

This section is for explaining any miscellaneous things in the frontend that may not be immediately clear why they exist. It is not organized in any particular way, recommended to just read through this section if any questions come up.

The components/Map folder is not currently used in the frontend of PRYDE Connect. We originally wanted to let users filter research partner locations by clicking on counties in an interactive map of New York, in addition to the current checkbox filters. However, because since buttons are always rectangles in HTML, there were many issues making the map actually work well since many times the buttons would overlap with each other or it wouldn't cover the whole visual area of the county. As a result we scrapped the interactive map, there may be ways of making non rectangular buttons we weren't aware of when making the website. components/Map/counties contains the shape of a county in SVG format, exported as a React component. Counties.js defines the positioning and size of the button, and Map.js iterates through the list of county buttons.

The frontend is built with ReactJS and React Router, all the pages should not be too difficult to discern how they work except for the pages for creating and editing users and projects.

Create Profile/Project

The main file driving how Create Profile works is CreateProfile.js. The Create Profile page was attempted to be designed to be expandable, where a developer could add new pages to the signup process relatively easily. The pages that Create Profile goes through is defined in the array pages on line 17 of CreateProfile.js. Similarly, the pages Edit Profile goes through is defined in the array editPages on line 43. When the user goes to the next or previous page during the signup process, CreateProfile.js increases or decreases its index in these arrays.

The index keeping track of what page the user is on in the signup process is stored in the page variable in the state. pageData is used to store the information the user entered for each page, so that the information can be persisted even if the user switches between pages in the signup process. Each section of the Create/Edit Profile page is initialized with the data in the corresponding index of pageData. pageData is also used in Edit Profile, where pageData is already populated with the data from the user's existing profile so they don't have to fill out everything again. The Edit Profile page is the same as the Create Profile page but missing the reCAPTCHA section.

The createProfile function on line 155 of CreateProfile.js takes in the information from pageData and formats it into one user object, doing any conversions that are necessary to match what the database expects. The ability to upload a profile picture while signing up was removed due to complications with sending JSON formatted data along with binary data in the form of an image file, so lines 203 to 208 are commented out in the createProfile function.

The render function of CreateProfile.js has several if branches for setting the proper display values depending on if the user is editing or creating a profile, and then passes the page content props to the section the user is on in the signup process.

FormContent.js contains all the constants that are used to populate the form information, i.e. the images, multiple choice options, and question labels. To add new options to the questions, you can use this commit as reference on how to do it: https://github.com/gnaww/pryde-connect/wiki/How-To-Guides#adding-new-options-to-create-profileproject-questions.

The rest of the files in the CreateProfile folder are each the pages/sections the user goes through while signing up. They all generally have the same structure with the following components:

• a state storing all the answers the user submits on that page
• various functions that handle changing the state on user input and validating user input
  • some pages will use helper functions from services/util.js or services/validators.js for validation and conversion of the formatting of data structures
• componentDidMount that initializes the inputs on the page with the data from pageData
• some pages like PractitionerQuestions.js and ResearcherQuestions.js use components/QAComponents.js. QAComponents.js is a helper file with a bunch of components that are common question formats used throughout Create Profile/Project (textbox questions, checkbox questions, multiple choice questions, etc). The page that uses these components generally has to pass in the question information (question text, subtitle text, question options), a handler function for state changes, the current state of the page, and a handler function for if an error occurs.

CreateProject.js basically follows the same design structure as CreateProfile.js. It has its own FormContent.js and also has two functions for categorizing the changes that were made to a project's list of collaborators/additional files.

Edit Profile/Project

As mentioned before, Edit Profile and Edit Project use the same pages as Create Profile and Create Project. The main difference is that when the user clicks the Edit button for their project or profile, the current state/information of the project or profile is saved to the browser's localStorage. This is done in the services/localStorage.js file and was necessary to support letting users open the Edit Profile/Project page in a new tab as opposed to opening it on the same tab. Edit Profile and Edit Project then format and convert the profile/project information stored in localStorage into the array pageData. As mentioned before, pageData is an array with an index for each page in Create Profile/Project and each index stores an object that represents the user inputted data for that page. Once Edit Profile/Project is finished formatting and converting the current project/profile's data, it passes it to CreateProfile or CreateProject as a prop and renders it. There are still some unresolved issues with supporting opening the Edit page in a new tab, such as if the user opens it in a new tab multiple times in quick succession. However it works well if the user does not open it in a new tab or does not do it quickly, so the problem may be with performance issues related to localStorage in the browser.