Create utility function for dashtable_v2.js file that creates the student objects array that get passed into the React Table

[ngillux]

[ISSUE RESERVED FOR CTI STUDENT(S)]

Issue Background Info
This issue is a 'under the hood' issue, meaning, when the change is implemented, there will be no indication of the change in the UI. This implementation will allow for more readable code (encapsulated and abstracted).

Expected New Behavior
Although there will be no visible change for the end user(s) in the UI, this change should allow for improved code readability.

Issue Objective
Create a function in api_processor.js that handles the logic to create the array of student data objects that gets stored in the rawStudentSummary variable, which is passed into the react-table.

Context for the issue
When a teacher clicks 'View Class' they are shown a snapshot of all the students' progress in the classroom (dashboard format).

This is the GlobalDashboardTable component being rendered (component code can be found in components/dashtable_v2.js), the file that calls the GlobalDashboardTable component is [id].js (found in pages/dashboard/v2/[id].js).

A third party library called 'react-table' is used to create the dashboard. The data that is passed into the react-table is stored in the rawStudentSummary variable found in the dashtable_v2.js file.
let rawStudentSummary = props.studentData.map(studentJSON => { ....

This variable stores an array of objects where each object contains the following attributes: email, activity, progress and details.

This is what the react-table ultimately uses as the data represented in the dashboard.
const data = React.useMemo( () => mapData(rawStudentSummary), [rawStudentSummary] );

Pseudocoe example:

dashtable_v2.js:
let rawStudentSummary = createArrayOfStudentDataObjectsToPassIntoReactTable(props.studentData)

api_processor.js:
function createArrayOfStudentDataObjectsToPassIntoReactTable(allStudentJSON) { let reactTableStudentDataArrayOfObjects = allStudentJSON => { individualJSON let dashboardDataObj = { email: '', activity '', progress: '', details: '' } dashboardDataObj.email = individualJSON.email dashboardDataObj.activity = getActivity(individualJSON) // create this function in api_processor.js dashboardDataObj.progress = getProgress(indivudalJSON) // create this function in api_processor.js dashboardDataObj.details = getDetailsPageLink(indivudalJSON) // create this function in api_processor.js } return reactTableStudentDataArrayOfObjects; }

Resources

1. react-table library:

   • Documentation
   • Highly informative/in depth playlist tutorial

2. Next.js Pages Documentation (not necessarily needed for the task, but may provide additional context)

[Anubhav-Vashishtha]

Hello @utsab Can you please explain the issue like i am not getting exactly what to do because of weird text wrap in pseudo code of api_processor.js

Kindly explain what exactly i need to do ?