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

[github-actions[bot]]

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 /helprequest 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 HelpRequest that takes the user to the HelpRequestIndexPage page (a placeholder for now) at the url /helprequest.
• [ ] The HelpRequestIndexPage page has a link to the HelpRequestCreatePage page at the url /helprequest/create.
• [ ] The HelpRequestIndexPage page has a link to the HelpRequestEditPage page at the url /helprequest/edit/1.

Implementation Steps

• [ ] Under frontend/src/main/pages/HelpRequest/ create three files called HelpRequestCreatePage.js, HelpRequestEditPage.js, HelpRequestIndexPage.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/HelpRequest/ create three files called HelpRequestCreatePage.test.js, HelpRequestEditPage.test.js, HelpRequestIndexPage.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 HelpRequest components that looks similar to the ones for Restaurants, UCSBDates, and the Placeholder. Copy/paste this code, changing, Restaurant to HelpRequest, and /restaurants to /helprequest

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

• [ ] Fire up the app on localhost and make sure that you can navigate to the pages for HelpRequest. 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 HelpRequest

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 /helprequest and Restaurant to HelpRequest

{
      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 /helprequest and Restaurants to HelpRequest:

{
      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 HelpRequest plus tests and stories" (following the usual steps for a new issue)