The assessments list page component needs to be separated into individual components for better readability and maintainability

[mgasquez]

Describe the Feature / Enhancement

The assessments list page (AssessmentsPage.tsx) should be broken down into components to better fit the pattern laid out in ProgramsPage.

This issue continues the work from issue #520.

Additional Details and Resources

• The AssessmentsListTabs component should include the markup and functionality for displaying and switching between tabs.
• The AssessmentsListTable component should include the markup for displaying the table, selectively showing/hiding headers based on the current tab being selected.

AssessmentsListTable should be a child of MUI TabPanels, and AssessmentsListTabs should be a child of an MUI Box. Both the TabPanels and Box should be children of AssessmentsListPage.

Correct Project Selected

• [X] This issue is linked to the appropriate project

Labels

• [X] This issue has appropriate labels.

[mgasquez]

EOD update: Dummy data is finished in dataAssessment.ts

Overview There is one case Graded, Active and Upcoming. FacilitatorAssessmentSubmissionsSummary is commented because It gives and error when is in submissions_summary. Tomorrow I will start breaking down components.

[mgasquez]

EOD: I coded a simple Assessment List version. Tomorrow I will continue working on it, I don't think it is valuable to push them to the repository because I am still analyzing and testing a solution.

[seidior]

As per @mgasquez's request, I've helped along the process of splitting up the list page component into smaller, more management components.

The first step I took was to bring in the latest from #514 to better consolidate our example data for the list page.

Next, I took a look at the code that @mgasquez and @Paryssatis had written for component separation and used as much of it as I could in separating out the tabs component and the table component.

Here's what's left to do on the ticket:

• I'd love for the filtering logic for the table data to move out of TableRowWrapper and into the AssessmentsListPage component.
• One of the buttons is not displaying properly, so please take a look at why that's happening.

After that, I think it'll be ready for a pull request!

[mgasquez]

EOD: Tomorrow I will work on them.

[mgasquez]

EOD: Button was removed. Tomorrow I am continuing working in the logic for the table data.

[mgasquez]

EOD: Added filtering logic for the table.

Overview: I didn't delete the useEffect() originals. I want to mention that I am using numbers to reference 0-All and 2 for Past(it is Graded at the dataBase). I am not sure if there is a properties file to add these ones. When there is no data to show for one state(in this case Past Assessment). Screenshot below. Nav for Assessment List doesn't redirect to the initial Assessment List Page. So, you are forced to go to another page and click again the Assessment List Nav option if you want to see the Upcoming, Active assessments or All.

[mgasquez]

EOD: Created const and it was added to useEffect(). It kept only [currentStatusTab] as well.

[seidior]

Hi @mgasquez! Here are your remaining tasks:

• Remove the interface TableRowWrapperProps and the function component TableRowWrapper from AssessmentsListTable.tsx, replacing the <TableRowWrapper> element with a <TableRow> element. Also there's a randomly-declared variable upcom that should probably be removed.
• In AssessmentsListPage.tsx, you're still setting assessmentListSubset with assessmentListPageExampleData, rather than with assessmentList. You have a function call setCurrentStatusTab(currentStatusTab), which I do not understand, since you're setting a variable to equal itself. And your "Past Assessments" is filtering only on "Graded" but not "Submitted" or "Expired" assessments. Finally, the table data you're displaying is assessmentList and not assessmentListSubset.
• Your 537-assessments-list-page-into-components branch needs to be brought up to date with the features/assessments branch on GitHub.

Once you complete those tasks, you'll be able to open a pull request against the #520 branch, completing this task.