Merge with dev.

Author: Robert Middleton

.eslintrc.js

@@ -23,5 +23,6 @@ module.exports = {
       ],
       'no-underscore-dangle': ['error', { allow: ['__typename'] }],
       'no-console': 'off',
+      'no-plusplus': 'off',
    },
 };

graphql.schema.json

@@ -5470,9 +5470,13 @@
               }
             ],
             "type": {
-              "kind": "OBJECT",
-              "name": "ClassMissionMastery",
-              "ofType": null
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "OBJECT",
+                "name": "ClassMissionMastery",
+                "ofType": null
+              }
             },
             "isDeprecated": false,
             "deprecationReason": null

src/Components/Content/Content.tsx

@@ -35,7 +35,7 @@ export default function Content() {
             <Route path="/studentOverview">
                <StudentOverview />
             </Route>
-            <Route path="/singleStudentOverview">
+            <Route path="/singleStudentOverview/:username">
                <SingleStudentOverview />
             </Route>
             <Route path="/singleStudentMasteryOverview">
@@ -44,7 +44,7 @@ export default function Content() {
             <Route path="/singleTargetOverview/:name">
                <SingleTargetOverview />
             </Route>
-            <Route path="/singleMissionOverview/:name">
+            <Route path="/singleMissionOverview/:name/:username">
                <SingleMissionOverview />
             </Route>
             <Route path="/taskList">

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/LinearProgressWithLabel/ObjectiveDropDown.tsx

@@ -14,6 +14,7 @@ import {
    Task,
    TaskObjectiveProgress,
    TaskObjectiveProgressFieldsFragment,
+   useGetTaskObjectiveProgressQuery,
 } from '../../__generated__/types';
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -106,6 +107,21 @@ const DoublePaddedDiv = styled.div`
 export interface ObjectiveDropDownProps {
    name: string;
    tasks: TaskObjectiveProgress[];
+   username: string;
+}
+
+function getTaskObjectivePorgress(task: TaskObjectiveProgress) {
+   const { data: taskObjectiveProgress } = useGetTaskObjectiveProgressQuery({
+      variables: {
+         taskId: task.task.id,
+         username: 'Google_114813486146105420824',
+      },
+   });
+   if (taskObjectiveProgress === undefined) {
+      return <></>;
+   }
+   const objectiveProgresses = (taskObjectiveProgress.getTaskObjectiveProgress as unknown) as TaskObjectiveProgress[];
+   return objectiveProgresses;
 }
 
 function getProgressBar(status: number) {
@@ -156,7 +172,7 @@ function getTaskPercent(mastery: string) {
    return 1;
 }
 
-export default function ObjectiveDropDown({ name, tasks }: ObjectiveDropDownProps) {
+export default function ObjectiveDropDown({ name, tasks, username }: ObjectiveDropDownProps) {
    const classes = useStyles();
    const [open, setOpen] = useState(false);
 
@@ -174,7 +190,13 @@ export default function ObjectiveDropDown({ name, tasks }: ObjectiveDropDownProp
 
          <Collapse in={open} timeout="auto" unmountOnExit>
             {tasks.map((task: TaskObjectiveProgress) => (
-               <Link to={`/viewTask/${task.task.id}`}>
+               <Link
+                  to={{
+                     pathname: `/viewTask/${task.task.id}/${username}`,
+                     state: getTaskObjectivePorgress(task),
+                  }}
+               >
+                  {console.log(task)}
                   <List component="div" disablePadding>
                      <div style={{ display: 'flex', flexDirection: 'row' }}>
                         <DoublePaddedDiv>

src/Components/SingleStudentMasteryOverview/SingleStudentMasteryOverview.tsx

@@ -509,12 +509,12 @@ function SingleStudentMasteryOverview() {
       firstName: test?.firstName,
       lastName: test?.lastName,
    };
-   console.log(inputUser.id);
+   console.log(inputUser.firstName);
 
    const { data } = useGetTargetProgressQuery({
       variables: {
          courseId: 'Integrated Science',
-         username: '74caa373-b13a-4a97-84d3-ba9e27236290',
+         username: 'Google_113982570160032635204',
       },
    });
 

src/Components/SingleStudentMasteryOverview/TargetMasteryCard.tsx

@@ -105,7 +105,7 @@ function getStatusTitle(status: number) {
       return 'Not Mastered';
    }
    if (status > 0.75) {
-      return 'Almost Mastered';
+      return 'Nearly Mastered';
    }
    return 'Mastered';
 }

src/Components/SingleStudentOverview/MasteryCard.tsx

@@ -83,6 +83,7 @@ type Props = {
    progress: TaskStats[];
    status: number;
    user: User;
+   username: string;
 };
 
 function getProgressBar(status: number) {
@@ -106,16 +107,15 @@ function getStatusTitle(status: number) {
       return 'Not Mastered';
    }
    if (status >= 0.75) {
-      return 'Almost Mastered';
+      return 'Nearly Mastered';
    }
    return 'Mastered';
 }
 
-export default function MasteryCard({ name, progress, status, user }: Props) {
-   console.log(status);
+export default function MasteryCard({ name, progress, status, user, username }: Props) {
    const history = useHistory();
    return (
-      <Link to={{ pathname: `/singleMissionOverview/${name}`, state: user }}>
+      <Link to={{ pathname: `/singleMissionOverview/${name}/${username}`, state: user }}>
          <div className="mission-card">
             <div className="mission-card-header" />
             <div className="mission-card-body">

src/Components/SingleStudentOverview/SingleMissionOverview.tsx

@@ -11,7 +11,13 @@ import { Divider } from '@material-ui/core';
 import StudentPicture from '../../assets/images/images-1.png';
 import { User } from '../../interfaces/User';
 import LinearProgressWithLabel from '../LinearProgressWithLabel/LinearProgressWithLabel';
-import { MissionProgress, TaskStats, useGetMissionProgressQuery } from '../../__generated__/types';
+import {
+   MissionProgress,
+   TaskObjectiveProgress,
+   TaskStats,
+   useGetMissionProgressQuery,
+   useGetTaskObjectiveProgressQuery,
+} from '../../__generated__/types';
 
 const StudentDiv = styled.div`
    height: 200px;
@@ -109,6 +115,20 @@ const useStyles = makeStyles((theme: Theme) =>
    })
 );
 
+function getTaskObjectiveProgress(task: TaskStats) {
+   const { data: taskObjectiveProgress } = useGetTaskObjectiveProgressQuery({
+      variables: {
+         taskId: task.taskId,
+         username: 'Google_114813486146105420824',
+      },
+   });
+   if (taskObjectiveProgress === undefined) {
+      return <></>;
+   }
+   const objectiveProgresses = (taskObjectiveProgress.getTaskObjectiveProgress as unknown) as TaskObjectiveProgress[];
+   return objectiveProgresses;
+}
+
 function getMissionProgress(missionData: MissionProgress[], name: string) {
    for (const mission of missionData) {
       if (mission.mission.name === name) {
@@ -120,6 +140,8 @@ function getMissionProgress(missionData: MissionProgress[], name: string) {
 function SingleMissionOverview() {
    // const { data: users } = useQuery<User>(GET_USERS);
    const { name } = useParams<Record<string, string | undefined>>();
+   // const { username } = useParams<Record<string, string | undefined>>();
+   const username = 'Google_114813486146105420824';
    const classes = useStyles();
    const history = useHistory();
    console.log(history);
@@ -176,7 +198,15 @@ function SingleMissionOverview() {
          <TaskRowDiv className="row">
             <LeftColumnDiv className="col-12" style={{ justifyContent: 'right' }}>
                {missionProgressData?.map((task: TaskStats) => (
-                  <Link to={`/viewTask/${task.taskId}`} data-testid="task-btn">
+                  // <Link to={`/viewTask/${task.taskId}`} data-testid="task-btn">
+                  <Link
+                     to={{
+                        pathname: `/viewTask/${task.taskId}/${username}`,
+                        state: getTaskObjectiveProgress(task),
+                     }}
+                     data-testid="task-btn"
+                  >
+                     {console.log(task)}
                      <List
                         component="div"
                         disablePadding