Navigation Bar & Project Volunteer Info Page

[Satchel05]

At a glance

You will design a navigation bar that has only two navigation links:

1. The already existing home view that features the NPO data
2. A Project Volunteer Info Page that specifies who signed up for which project.

Context In the Larger Project

Nothing too crazy here.
A navigation bar links together different parts of our application. One new page is created that references our backend.

Technical Details

In order to build the Project Volunteer Info Page there are three main components to consider:

1. Backend Component
2. Frontend Component

Backend Component

You will need access to the respective database.

You will need to query the ProjectVolunteer table that was created in #37. Since this table may not necessarily be seeded (your co-developers over at #40 are building the UI interface for querying the DB as we speak), you will need to add your own seed data. There are three ways in which you can go about this:

• Add rows using pgAdmin's UI
• Add rows using pgAdmin's SQL query tool (becomes VERY useful when you need to add rows in a large batch)
• use Postman's built in HTTP methods interface

You may find using a combination of these will be helpful.

Frontend Component

Purely Visual Details:

Reference the design in Resources using Chakra(V2)

React Details:

The way that React interacts with APIs (or in the docs' terms: external systems) (because that is in fact what our backend is – an API/external system) is through an "escape hatch". All this term means is that we will need to use a React feature that doesn't fit into the traditional React design patterns/paradigm.

In our case, this escape hatch is a hook called "useEffect". Because this feature is an escape hatch, you may encounter some complexities.

The general flow that will help is this: ensure that the data from the backend is captured by the frontend, is saved to state, and is verified to exist before being rendered (the existing part has to do with async Javascript and race conditions) Resources are linked below to help with these steps. You will need to render your data conditionally!

Because you will be rendering multiple elements in a list for the table you will be creating, React will scream at you to include a "key" attribute for each element. Please DO NOT ignore this warning because last year everybody did and it built up over time and so we had a million warnings in the console which made it difficult to debug newer features. The way to make this warning go away is by setting an attribute on the element like this: key={} where key should be equal to a unique identifier (I wonder if our database has unique identifiers build in that we could include here 🤔 ).

Acceptance Criteria

Navigation bar conforms with design including accurate dimensions and sizing.
Navigation bar links to home page and Project Volunteer Info Page
ProjectVolunteer Page conforms with design including accurate dimensions and sizing.
ProjectVolunteer Page retrieves data from backend correctly and follows expected React design pattern.

Learning Goals

What's Important To Understand:

• How to link the frontend and backend together
• How useEffect works on mount (don't worry about different mounting behaviors and cleanup functions)
• React useState updates are asynchronous
• Ternary (the use of three operators) and binary operations (the use of two operators) as tools to render components conditionally.

What's Not Important To Understand:

• The whole workflow here is very important to understand because this is a common design pattern in React as of this year.

Resources

Chakra Navbar component link here.

React Escape Hatches
Dealing with Race Conditions In React