Skip to content

Index Page for Students plus tests and stories #108

@github-actions

Description

@github-actions

Dependencies

Complete the following issues first:

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

Acceptance Criteria:

  • When the user navigates to /students the page will be populated
    with data all rows in the database, and the user will be able to see
    all of the data in the table.

  • When the index page is accessed by an admin user, they will be able to
    see a button to create a new record, and a button to edit each record,
    and a button to delete each record.

  • When the index page is accessed by an regular logged in user,
    the buttons to create a new record, edit a record, and delete a record
    will not be visible in the table. Logged in users will be able to see
    the data in the table, but that is all.

  • When the index page is accessed by an admin user, the edit button will
    navigate to the URL for the edit page for that record. (The page should display
    if the issue to implement it is already completed, or a blank page with the correct
    URL if it is not.)

  • When the index page is accessed by an admin user, the delete button will
    call the endpoint to delete the record from the database, and then refresh
    the page. The refreshed page will not show the deleted record.

  • 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 StudentsIndexPage 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.

  • Modify the StudentsIndexPage, replacing the placeholder
    content with content modelled after the files RestaurantIndexPage.js
    and/or UCSBDatesIndexPage.js. Be sure to get the API endpoint names correct for your Students table.

  • Modify StudentsIndexPage.test.js replacing the placeholder
    content with content modelled after the files RestaurantIndexPage.test.js
    and/or UCSBDatesIndexPage.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 StudentsIndexPage.stories.js modelled after
    the files RestaurantIndexPage.stories.js and UCSBDatesIndexPage.stories.js.

Reminders (all in 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/pages/Students/StudentsIndexPage.js

What to do next

  • Do a PR (following the usual steps).
  • Check for other PRs
  • Start work on "Edit Page for Students plus tests and stories" (following the usual steps for a new issue)

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