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 /diningcommonsmenuitem
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 UCSBDiningCommonsMenuItem
that takes the user to the UCSBDiningCommonsMenuItemIndexPage page (a placeholder for now)
at the url /diningcommonsmenuitem.
[ ] The UCSBDiningCommonsMenuItemIndexPage page has a link to the UCSBDiningCommonsMenuItemCreatePage page
at the url /diningcommonsmenuitem/create.
[ ] The UCSBDiningCommonsMenuItemIndexPage page has a link to the UCSBDiningCommonsMenuItemEditPage page
at the url /diningcommonsmenuitem/edit/1.
Implementation Steps
[ ] Under frontend/src/main/pages/UCSBDiningCommonsMenuItem/ create three files
called UCSBDiningCommonsMenuItemCreatePage.js, UCSBDiningCommonsMenuItemEditPage.js, UCSBDiningCommonsMenuItemIndexPage.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/UCSBDiningCommonsMenuItem/ create three files called UCSBDiningCommonsMenuItemCreatePage.test.js, UCSBDiningCommonsMenuItemEditPage.test.js, UCSBDiningCommonsMenuItemIndexPage.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 UCSBDiningCommonsMenuItem components that looks similar to the ones for Restaurants, UCSBDates, and the Placeholder. Copy/paste this code, changing, Restaurant to UCSBDiningCommonsMenuItem, and /restaurants to /diningcommonsmenuitem
[ ] In frontend/src/main/components/Nav/AppNavbar.js,add a section of code that establishes the navbar link for UCSBDiningCommonsMenuItem. It should look similar to this code that establishes the link for Restaurants. Copy/paste this code, changing /restaurants to /diningcommonsmenuitem, and Restaurants to UCSBDiningCommonsMenuItem
[ ] Fire up the app on localhost and make sure that you can navigate to the pages for UCSBDiningCommonsMenuItem. 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 UCSBDiningCommonsMenuItem
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 /diningcommonsmenuitem and Restaurant to UCSBDiningCommonsMenuItem
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/diningcommonsmenuitem
name in to the Navigation Bar of the app infrontend/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
andAppNavbar.js
will be permanent.The reason for the placeholder code is that we can't really test the changes to
App.js
andAppNavbar.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
UCSBDiningCommonsMenuItem
that takes the user to theUCSBDiningCommonsMenuItemIndexPage
page (a placeholder for now) at the url/diningcommonsmenuitem
.UCSBDiningCommonsMenuItemIndexPage
page has a link to theUCSBDiningCommonsMenuItemCreatePage
page at the url/diningcommonsmenuitem/create
.UCSBDiningCommonsMenuItemIndexPage
page has a link to theUCSBDiningCommonsMenuItemEditPage
page at the url/diningcommonsmenuitem/edit/1
.Implementation Steps
[ ] Under
frontend/src/main/pages/UCSBDiningCommonsMenuItem/
create three files calledUCSBDiningCommonsMenuItemCreatePage.js
,UCSBDiningCommonsMenuItemEditPage.js
,UCSBDiningCommonsMenuItemIndexPage.js
, modelled afterPlaceholderCreatePage.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/UCSBDiningCommonsMenuItem/
create three files calledUCSBDiningCommonsMenuItemCreatePage.test.js
,UCSBDiningCommonsMenuItemEditPage.test.js
,UCSBDiningCommonsMenuItemIndexPage.test.js
modelled afterPlaceholderCreatePage.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 theUCSBDiningCommonsMenuItem
components that looks similar to the ones forRestaurants
,UCSBDates
, and thePlaceholder
. Copy/paste this code, changing,Restaurant
toUCSBDiningCommonsMenuItem
, and/restaurants
to/diningcommonsmenuitem
[ ] In
frontend/src/main/components/Nav/AppNavbar.js
,add a section of code that establishes the navbar link forUCSBDiningCommonsMenuItem
. It should look similar to this code that establishes the link forRestaurants
. Copy/paste this code, changing/restaurants
to/diningcommonsmenuitem
, andRestaurants
toUCSBDiningCommonsMenuItem
[ ] Fire up the app on localhost and make sure that you can navigate to the pages for UCSBDiningCommonsMenuItem. 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
toUCSBDiningCommonsMenuItem
In
App.js
, you will need to:/restaurants
to/diningcommonsmenuitem
andRestaurant
toUCSBDiningCommonsMenuItem
In
AppNavbar.js
, copy/paste this section of code, and change/restaurants
to/diningcommonsmenuitem
andRestaurants
toUCSBDiningCommonsMenuItem
:Reminders (all from
frontend
directory):npm run storybook
.npm test
.npm run coverage
npx eslint --fix .
npx stryker run
npx stryker run -m src/main/components/Nav/AppNavbar.js
What to do next
UCSBDiningCommonsMenuItem
plus tests and stories" (following the usual steps for a new issue)