Copy Placeholders for `UCSBOrganization` 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 /ucsborganization 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 UCSBOrganization that takes the user to the UCSBOrganizationIndexPage page (a placeholder for now) at the url /ucsborganization.
• [ ] The UCSBOrganizationIndexPage page has a link to the UCSBOrganizationCreatePage page at the url /ucsborganization/create.
• [ ] The UCSBOrganizationIndexPage page has a link to the UCSBOrganizationEditPage page at the url /ucsborganization/edit/1.

Implementation Steps

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

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

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

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 /ucsborganization and Restaurant to UCSBOrganization

{
      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 /ucsborganization and Restaurants to UCSBOrganization:

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