Merge pull request #46 from CPSECapstone/add-objectives-rubric

Add objectives rubric

Author: rmfay1

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) =>
@@ -108,6 +109,20 @@ export interface ObjectiveDropDownProps {
    tasks: TaskObjectiveProgress[];
 }
 
+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) {
    if (status === 0) {
       return <NotStartedProgress />;
@@ -174,7 +189,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}`,
+                     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

src/Components/SingleStudentOverview/SingleStudentOverview.tsx

@@ -6,7 +6,7 @@ import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import styled from 'styled-components';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useParams } from 'react-router-dom';
 import { Divider } from '@material-ui/core';
 import StudentPicture from '../../assets/images/images-1.png';
 import { User } from '../../interfaces/User';
@@ -133,7 +133,7 @@ function SingleStudentOverview() {
    // const { userId } = useParams();
    const classes = useStyles();
    const history = useHistory();
-
+   const { username } = useParams<Record<string, string>>();
    const COMP_TASK_PERCENT = 100;
 
    const testVal: any = history.location.state;
@@ -142,6 +142,7 @@ function SingleStudentOverview() {
       firstName: testVal?.firstName,
       lastName: testVal?.lastName,
    };
+
    const { data } = useGetMissionProgressQuery({
       variables: {
          courseId: 'Integrated Science',
@@ -184,6 +185,7 @@ function SingleStudentOverview() {
                   progress={mission.progress as TaskStats[]}
                   status={calculateStatus(mission.progress as TaskStats[])}
                   user={inputUser}
+                  username={username}
                />
             ))}
          </RowDiv>

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) => {