Anubhav-Vashishtha
commented
10 months ago 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 ?
[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/dashtablev2.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:
_dashtablev2.js:
let rawStudentSummary = createArrayOfStudentDataObjectsToPassIntoReactTable(props.studentData)_apiprocessor.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
react-table library:
Next.js Pages Documentation (not necessarily needed for the task, but may provide additional context)