Copy Placeholders for `Students` pages; add to App.js/AppNavbar.js

[github-actions]

Dependencies

None: can be done in parallel with other issues

Discussion

In this issue, you'll set up placeholders for the three pages you are adding to the app.

These placeholder components are temporary, but they are necessary so that you can
add routes to the pages in frontend/src/App.js and add a link to the /students
name in to the Navigation Bar of the app in frontend/src/components/AppNavbar.js.

Note that the contents of the placeholder pages and tests are temporary,
and will be replaced in a later issue. However, the changes you make in App.js
and AppNavbar.js will be permanent.

The reason for the placeholder code is that we can't really test the
changes to App.js and AppNavbar.js until at least some placeholder
component for the pages exists, and we can't really test the new pages unless they
are routed to in the app. The placeholder solves this "chicken/egg" problem.

Acceptance Criteria

• On the main navigation bar, there is a link to Students
  that takes the user to the StudentsIndexPage page (a placeholder for now)
  at the url /students.
• The StudentsIndexPage page has a link to the StudentsCreatePage page
  at the url /students/create.
• The StudentsIndexPage page has a link to the StudentsEditPage page
  at the url /students/edit/1.

Implementation Steps

• Under frontend/src/main/pages/Students/ create three files
  called StudentsCreatePage.js, StudentsEditPage.js, StudentsIndexPage.js, modelled after
  PlaceholderCreatePage.js, PlaceholderEditPage.js, PlaceholderIndexPage.js.
  The only change that should be needed is the name of the component
  (see "Notes" below)

• Under frontend/src/tests/pages/Students/ create three files called StudentsCreatePage.test.js, StudentsEditPage.test.js, StudentsIndexPage.test.js modelled after PlaceholderCreatePage.test.js, PlaceholderEditPage.test.js, PlaceholderIndexPage.test.js. The only change that should be needed is the name of the component
  being imported.

• In frontend/src/App.js, there is a section of code that establishes the routes to the pages for the Students components that looks similar to the ones for Restaurants, UCSBDates, and the Placeholder. Copy/paste this code, changing, Restaurant to Students, and /restaurants to /students

• In frontend/src/main/components/Nav/AppNavbar.js,add a section of code that establishes the navbar link for Students. It should look similar to this code that establishes the link for Restaurants. Copy/paste this code, changing /restaurants to /students, and Restaurants to Students

• Fire up the app on localhost and make sure that you can navigate to the pages for Students. You should see pages similar to the ones at the Placeholder link on the navbar.

Notes

The changes you will need to make from the examples are minimal.

In the three page components, typically you will only need to change the
name of the default export, changing Placeholder to Students

export default function PlaceholderCreatePage() {

In App.js, you will need to:

• Add import statements for the three page components
• Copy/paste the section of code below, changing /restaurants to /students and Restaurant to Students

{
      hasRole(currentUser, "ROLE_USER") && (
        <>
          <Route exact path="/restaurants" element={<RestaurantIndexPage />} />
        </>
      )
}
{
      hasRole(currentUser, "ROLE_ADMIN") && (
        <>
          <Route exact path="/restaurants/edit/:id" element={<RestaurantEditPage />} />
          <Route exact path="/restaurants/create" element={<RestaurantCreatePage />} />
        </>
      )
}

In AppNavbar.js, copy/paste this section of code, and change /restaurants to /students and Restaurants to Students:

{
      hasRole(currentUser, "ROLE_USER") && (
        <>
          <Nav.Link as={NavLink} to="/restaurants">Restaurants</Nav.Link>
        </>
      )
}

Reminders (all from frontend directory):

• Always start by setting your node version with nvm use 20.17.0
• To run storybook locally: npm run storybook.
• To run tests locally: npm test.
• Quickly test coverage locally: npm run coverage
• Check linting locally: npx eslint --fix .
• Check mutation coverage locally (slow): npx stryker run
• Check mutation coverage of single file (faster): npx stryker run -m src/main/components/Nav/AppNavbar.js

What to do next

• Do a PR (following the usual steps).
• Check for other PRs
• Start work on "Create Page for Students plus tests and stories" (following the usual steps for a new issue)