Copy Placeholders for `MenuItemReview` 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 /menuitemreview 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

• [x] On the main navigation bar, there is a link to MenuItemReview that takes the user to the MenuItemReviewIndexPage page (a placeholder for now) at the url /menuitemreview.
• [x] The MenuItemReviewIndexPage page has a link to the MenuItemReviewCreatePage page at the url /menuitemreview/create.
• [x] The MenuItemReviewIndexPage page has a link to the MenuItemReviewEditPage page at the url /menuitemreview/edit/1.

Implementation Steps

• [x] Under frontend/src/main/pages/MenuItemReview/ create three files called MenuItemReviewCreatePage.js, MenuItemReviewEditPage.js, MenuItemReviewIndexPage.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)

• [x] Under frontend/src/tests/pages/MenuItemReview/ create three files called MenuItemReviewCreatePage.test.js, MenuItemReviewEditPage.test.js, MenuItemReviewIndexPage.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.

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

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

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

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 /menuitemreview and Restaurant to MenuItemReview

{
      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 /menuitemreview and Restaurants to MenuItemReview:

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

Reminders (all from frontend directory):

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