Merge pull request #49 from CPSECapstone/studentOverviewBreakdown

Student overview breakdown

Author: Robertm925

src/Components/StudentOverview/LTStudentViewTable.tsx

@@ -1,3 +1,6 @@
+/* eslint-disable no-plusplus */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-floating-promises */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable array-callback-return */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
@@ -14,11 +17,14 @@ import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
 import TableComponent from '../TableComponent/TableComponent';
 import {
    CmStudentFieldsFragment,
+   CtmObjectiveMasteryFieldsFragment,
    Target,
    useClassMissionMasteryQuery,
+   useClassTargetMasteryQuery,
 } from '../../__generated__/types';
 import { LIST_TARGETS_BY_COURSE } from '../../hooks/ListTargetsByCourse';
 import SelectedLTStudentViewTable from './SelectedLTStudentViewTable';
+import { Mastery } from '../../Screens/ClassMastery/StudentMasteryRow';
 
 interface LTStudentViewRow {
    row: {
@@ -38,6 +44,8 @@ function LTStudentViewTable() {
    const { data: missionMasteryData } = useClassMissionMasteryQuery();
 
    const [selectedLT, setSlectedLT] = useState<string | null>(null);
+   const [targetMasteryDatas, setTargetMasteryDatas] = useState<any[]>([]);
+   const [fetchOnce, setFetchOnce] = useState<boolean>(false);
 
    const handleLTSelection = (
       event: React.MouseEvent<HTMLElement>,
@@ -50,9 +58,41 @@ function LTStudentViewTable() {
 
    const { data: courseTargets } = useQuery(LIST_TARGETS_BY_COURSE);
 
-   if (!courseTargets) {
+   React.useEffect(() => {
+      if (!courseTargets || fetchOnce) {
+         return;
+      }
+      setFetchOnce(true);
+      const token = localStorage.getItem('jwt');
+
+      for (const target of courseTargets.targets) {
+         fetch('https://18wi8h43il.execute-api.us-east-1.amazonaws.com/dev-flipted/graphql', {
+            method: 'POST',
+            headers: {
+               'Content-Type': 'application/json',
+               Accept: 'application/json',
+               authorization: token ? `${token}` : '',
+            },
+            body: JSON.stringify({
+               query:
+                  'query ClassTargetMastery($targetId: String!) {\n  classTargetMastery(targetId: $targetId) {\n    target {\n      ...CTMTargetField\n      __typename\n    }\n    studentObjectiveMasteryList {\n      ...CTMStudentObjectiveMasteryFields\n      __typename\n    }\n    __typename\n  }\n}\n\nfragment CTMTargetField on Target {\n  targetId\n  targetName\n  objectives {\n    ...CTMObjectiveField\n    __typename\n  }\n  __typename\n}\n\nfragment CTMObjectiveField on Objective {\n  objectiveId\n  objectiveName\n  __typename\n}\n\nfragment CTMStudentObjectiveMasteryFields on StudentObjectiveMastery {\n  student {\n    studentId\n    email\n    __typename\n  }\n  objectiveMasteryList {\n    ...CTMObjectiveMasteryFields\n    __typename\n  }\n  __typename\n}\n\nfragment CTMObjectiveMasteryFields on ObjectiveMastery {\n  objectiveId\n  mastery\n  __typename\n}\n',
+               variables: { targetId: target.targetId },
+            }),
+         })
+            .then((r) => r.json())
+            .then((data) => {
+               // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+               setTargetMasteryDatas((cur: any[]) => [...cur, data]);
+            });
+      }
+   }, [courseTargets, targetMasteryDatas, fetchOnce]);
+
+   if (!courseTargets || targetMasteryDatas.length < courseTargets.targets.length) {
       return <div />;
    }
+   if (targetMasteryDatas.length === courseTargets.targets.length) {
+      console.log('Target Mastery Datas: ', targetMasteryDatas);
+   }
 
    const rowClicked = (row: LTStudentViewRow) => {
       history.push({
@@ -83,8 +123,6 @@ function LTStudentViewTable() {
       };
    });
 
-   console.log(data);
-
    const tableColumns = [
       {
          Header: 'Student Information',
@@ -109,10 +147,6 @@ function LTStudentViewTable() {
                Header: 'Average',
                accessor: 'row.average',
             },
-            {
-               Header: 'Progress',
-               accessor: 'row.progress',
-            },
          ],
       },
    ];
@@ -126,14 +160,37 @@ function LTStudentViewTable() {
    const learningTargetSet = new Set();
 
    courseTargets.targets.map((target: Target) => {
+      let index = 0;
+      const targetMastery = targetMasteryDatas.find(
+         (x) => x.data.classTargetMastery.target.targetId === target.targetId
+      );
+
       data.map((row: any) => {
-         row.row[target.targetName] = '';
+         let count = 0;
+         targetMastery.data.classTargetMastery.studentObjectiveMasteryList[
+            index
+         ].objectiveMasteryList.map((objectiveMastery: CtmObjectiveMasteryFieldsFragment) => {
+            if (objectiveMastery.mastery === 'MASTERED') {
+               count += 3;
+            } else if (objectiveMastery.mastery === 'NEARLY_MASTERED') {
+               count++;
+            }
+         });
+         row.row[target.targetName] = count;
+         index++;
       });
       if (!learningTargetSet.has(target.targetName)) {
          learningTargetSet.add(target.targetName);
          learningTargetGroup.columns.push({
             Header: target.description,
             accessor: `row.${target.targetName}`,
+            Cell: ({ cell: { value } }: { cell: any }) => (
+               <Mastery
+                  percentage={
+                     value / (targetMastery.data.classTargetMastery.target.objectives.length * 3)
+                  }
+               />
+            ),
          });
       }
    });

src/Components/StudentOverview/LearningTargetTab.tsx

@@ -30,9 +30,7 @@ function LearningTargetTab() {
          <TabPanel value="1">
             <LTStudentViewTable />
          </TabPanel>
-         <TabPanel value="2">
-            <LTTargetViewTable />
-         </TabPanel>
+         <TabPanel value="2">Not Implemented</TabPanel>
       </TabContext>
    );
 }

src/Components/StudentOverview/MissionsTab.tsx

@@ -31,11 +31,9 @@ function MissionsTab() {
                className={value === '3' ? 'selected-inner-tab' : 'inner-tab'}
             />
          </TabList>
-         <TabPanel value="1">
-            <MissionStudentViewTable />
-         </TabPanel>
-         <TabPanel value="2">Mission Task View Table</TabPanel>
-         <TabPanel value="3">Mission Objective View Table</TabPanel>
+         <TabPanel value="1">Not Implemented</TabPanel>
+         <TabPanel value="2">Not Implemented</TabPanel>
+         <TabPanel value="3">Not Implemented</TabPanel>
       </TabContext>
    );
 }

src/Components/StudentOverview/SelectedLTStudentViewTable.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable no-plusplus */
 /* eslint-disable array-callback-return */
@@ -165,6 +166,22 @@ function SelectedLTStudentViewTable(classMissionMastery: any, selectedLTId: stri
       }
    );
 
+   data.forEach((dataEntry) => {
+      let count = 0;
+      for (const [key, value] of Object.entries(dataEntry.row)) {
+         const value2: any = value;
+         if (typeof value === 'object' && value !== null) {
+            if (value2.status === 'MASTERED') {
+               count++;
+            }
+         }
+         dataEntry.row.progress = `${(
+            (count / targetMasteryData.classTargetMastery.target.objectives.length) *
+            100
+         ).toFixed(1)}%`;
+      }
+   });
+
    return (
       <div>
          <div className="base-table">

src/Screens/ClassMastery/StudentMasteryRow.tsx

@@ -5,10 +5,11 @@ import { color } from '../../Components/constants.json';
 type MasteryBarProps = { percentage: number };
 
 const MasteryBar = styled.div`
-   position: relative;
    border-radius: 11px;
    background-color: ${color.bgGrey};
    overflow: hidden;
+   width: 100%;
+   height: 100%;
 `;
 
 const InnerBar = styled.div<MasteryBarProps>`
@@ -18,17 +19,17 @@ const InnerBar = styled.div<MasteryBarProps>`
    bottom: 0;
    background-color: ${({ percentage }) =>
       percentage > 0.66 ? color.green : percentage > 0.33 ? color.yellow : color.red};
-   right: ${({ percentage }) => 100 - percentage * 100 + '%'};
+   right: ${({ percentage }) => `${100 - percentage * 100}%`};
    > span {
       position: absolute;
-      color: white;
+      color: black;
       top: 4px;
       font-size: 14px;
       right: ${({ percentage }) => (percentage > 0.25 ? '5px' : '-33px')};
    }
 `;
 
-function Mastery({ percentage }: MasteryBarProps) {
+export function Mastery({ percentage }: MasteryBarProps) {
    return (
       <MasteryBar>
          <InnerBar percentage={percentage}>