Skip to content

Edit Page for Students plus tests and stories #109

@github-actions

Description

@github-actions

Dependencies

Complete the following issues first:

  • Create fixtures for Students
  • Form Component for Students
  • Copy Placeholders for Students pages; add to App.js/AppNavbar.js

Acceptance Criteria:

  • When the user navigates to /students/edit/:id where :id
    is the id field of a valid record in the table, the page will be populated
    with data from that row of the database, and will be able to edit fields
    from that database record.

  • Valid changes made on the page are saved to the database when the user clicks
    the submit button.

  • Changes made on the page are NOT saved when the page contains invalid data; instead,
    appropriate error messages are shown.

  • Changes made on the page are NOT saved when the user clicks the cancel button,
    and the user is routed back to the previous page they were on (like the "back button").

  • The PR description where the code addressing this issue is submitted contains
    a screenshot of the new page (since this is a frontend change).

  • The PR description where the code addressing this issue is submitted contains
    a link to the published storybook for the PR, linking directly to the story
    for the new StudentsEditPage component.

Implementation Details

  • Before starting, refamiliarize yourself with the backend CRUD API endpoints for
    Students by looking at the swagger page. You are going to be copy/pasting
    code from the Restaurant and UCSBDates components. Those use backend api endpoints
    that are similar to the ones for Students, but not identical. You will need
    to know the exact name of the API endpoints for Students in order to
    be sure that your frontend code is calling the correct backend endpoints.

  • Replace the placeholder content in StudentsEditPage.js
    with appropriate content from RestaurantEditPage.js and/or
    UCSBDatesEditPage.js. Be sure to get the API endpoint names correct for your Students table.

  • Replace the placeholder content in StudentsEditPage.test.js
    with appropriate content from RestaurantEditPage.test.js and/or
    UCSBDatesEditPage.test.js. Be sure to get the API endpoint names correct for your Students table.

  • Under frontend/src/stories/pages/Students/ create a file
    called StudentsEditPage.stories.js modelled after
    the files RestaurantEditPage.stories.js and/or UCSBDatesEditPage.stories.js.

Reminders (all from frontend directory):

  • Always start by setting the 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/pages/Students/StudentsEditPage.js

What to do next

When you are done with this issue, you are finished with the frontend CRUD
operations for Students. Now, please give your full attention to
helping others on your team to complete the sprint, so that the team
is ready to submit on Canvas by the deadline.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Studentsteam02 issues for Students

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions