[SPENCER | MADELINE] CLASS PAGE LEVELS & ADMIN VIEW STUDENT INFO

[lillian-tran]

Task Description:

YAY CLASS LEVELS AND ADMIN VIEWS!
The first part of this ticket is to make some changes to the class page. We’re getting rid of the “Other Levels” section and replacing it with “Previous Level” and “Next Level” buttons. At the bottom of ClassPage.jsx, remove the “Other Levels” div and add the two buttons using the existing Button component that redirect to the class pages for the previous or next level respectively. To do this, note how the Classes page determines what level to show by accessing the number from the URL parameters and storing it in the levelNum variable (so if we’re on the page for level 1, then levelNum=1). This means to navigate to the previous or next page, all we have to do is decrement or increment the level number in the parameter and navigate to the new URL. For examples on how to form the URL, you can look at LevelsPage.jsx and see how the hrefs for each class was made. For the first level, there should only be a “Next Level” button and for the last level there should only be a “Previous Level” button. To check if the current level is the last level, please don’t just hardcode the last level (because that could change in the future) and instead get and use the length of the allLevels array.
The second part of this ticket involves displaying user info on the admin page. Log into the admin account (in the users collection in MongoDB find the account with the privilege field set to “admin”) which will take you to the admin page. In AdminView.jsx, fetch all the users using the getUsers() function in user-wrapper.js and display their info in a table with columns for their name, email, password, and privilege (you don’t show their enrolled classes for now).

Acceptance Criteria:

• Did you link the ticket/issue number with your branch using the pull request template?
• On each class page, are there appropriate buttons that direct to the level before/after?
• Are all users displayed with the required information on the AdminView page?

References and Resources:

Helpful for first part of ticket: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
Helpful for displaying table in second part of ticket:
https://tailwindcss.com/docs/display
https://tailwindcss.com/docs/table-layout