updated graphql

Author: zzheng07

src/Components/CourseHome/ClassMissionMastery.graphql

@@ -0,0 +1,29 @@
+query ClassMissionMastery {
+   classMissionMastery(missionId: "4df2cfa5710") {
+      mission {
+         ...CMMissionFields
+      }
+      studentMissionMasteryList {
+         ...CMStudentFields
+      }
+   }
+}
+
+fragment CMMissionFields on Mission {
+   name
+   description
+}
+
+fragment CMStudentFields on StudentMissionMastery {
+   student {
+      studentId
+      lastName
+      firstName
+      email
+      team
+   }
+   currentTaskId
+   currentTaskName
+   level
+   progress
+}

src/Components/CourseHome/ListView.tsx

@@ -11,31 +11,43 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import TableComponent from '../TableComponent/TableComponent';
+import { CmStudentFieldsFragment } from '../../__generated__/types';
+
+interface MissionMasteryRow {
+   row: {
+      name: string;
+      recent: string;
+      masteryLevel: string;
+      lastLogOn: string;
+      studentId: string;
+   };
+}
 
 function ListView(classMissionMasterydata: any) {
    const history = useHistory();
-   const rowClicked = (userName: string) => {
+   const rowClicked = (row: MissionMasteryRow) => {
+      console.log(row);
       history.push({
-         pathname: '/singleStudentOverview',
-         state: { id: '', firstName: userName, lastName: ' ' },
+         pathname: `/singleStudentOverview/${row.row.studentId}`,
       });
    };
 
-   const data: any[] = [];
-   classMissionMasterydata.classMissionMasterydata.studentMissionMasteryList.map(
-      (studentMissionMastery: any) =>
-         data.push({
+   const data: MissionMasteryRow[] = classMissionMasterydata.classMissionMasterydata.studentMissionMasteryList.map(
+      (studentMissionMastery: CmStudentFieldsFragment) => {
+         return {
             row: {
                name: `${studentMissionMastery.student.lastName} ${studentMissionMastery.student.firstName}`,
                recent: studentMissionMastery.currentTaskName,
                masteryLevel: studentMissionMastery.level,
                lastLogOn: 'Jan. 7, 2021',
+               studentId: studentMissionMastery.student.studentId,
             },
-         })
+         };
+      }
    );
 
    // TODO remove when names are populated
-   data.forEach((dataEntry) => {
+   data.forEach((dataEntry: MissionMasteryRow) => {
       if (dataEntry.row.name.indexOf('null') !== -1) {
          dataEntry.row.name = 'Mary Lee';
       }

src/Components/TableComponent/TableComponent.tsx

@@ -41,9 +41,7 @@ function TableComponent({ columns, data, rowClickFunction }: any) {
                      className={rowClickFunction !== undefined ? 'hoverRow' : ''}
                      {...row.getRowProps()}
                      onClick={() =>
-                        rowClickFunction !== undefined
-                           ? rowClickFunction(row.values['row.name'])
-                           : undefined
+                        rowClickFunction !== undefined ? rowClickFunction(row.original) : undefined
                      }
                   >
                      {row.cells.map((cell) => {