testing roberts

Author: rmfay1

src/Components/LinearProgressWithLabel/ObjectiveDropDown.tsx

@@ -174,7 +174,8 @@ 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: task }}>
+                  {console.log(task)}
                   <List component="div" disablePadding>
                      <div style={{ display: 'flex', flexDirection: 'row' }}>
                         <DoublePaddedDiv>

src/Components/SingleStudentOverview/SingleStudentOverview.tsx

@@ -142,6 +142,7 @@ function SingleStudentOverview() {
       firstName: testVal?.firstName,
       lastName: testVal?.lastName,
    };
+
    const { data } = useGetMissionProgressQuery({
       variables: {
          courseId: 'Integrated Science',

src/Navigation/Navigation.tsx

@@ -5,7 +5,7 @@ import './Navigation.css';
 export default function Navigation() {
    return (
       <Navbar collapseOnSelect expand="sm" className="nav" variant="dark">
-         <Navbar.Brand href="/">flipt.ED</Navbar.Brand>
+         <Navbar.Brand href="/">Flipt(ed)</Navbar.Brand>
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
             <Nav className="container-fluid">

src/Screens/TaskView/Rubric/ObjectiveRubric.tsx

@@ -0,0 +1,38 @@
+import { Checkbox, MenuItem, Typography } from '@material-ui/core';
+import { useState } from 'react';
+
+import { Form } from 'react-bootstrap';
+import { RubricRequirement, TaskObjectiveProgress } from '../../../__generated__/types';
+
+function ObjectiveRubric({ objective }: { objective: TaskObjectiveProgress | string }) {
+   const [complete, setComplete] = useState(false);
+   const handleChange = () => {
+      setComplete(!complete);
+   };
+
+   return (
+      <MenuItem style={{ width: '100%' }}>
+         <Form.Group>
+            {(() => {
+               if (objective !== '') {
+                  return (
+                     <div>
+                        <Checkbox
+                           checked={complete}
+                           onChange={handleChange}
+                           inputProps={{ 'aria-label': 'primary checkbox' }}
+                           color="default"
+                        />
+                        <Typography>
+                           {(objective as TaskObjectiveProgress).objective.objectiveName}
+                        </Typography>
+                     </div>
+                  );
+               }
+            })()}
+         </Form.Group>
+      </MenuItem>
+   );
+}
+
+export default ObjectiveRubric;

src/Screens/TaskView/Rubric/RubricMenu.tsx

@@ -12,8 +12,13 @@ import { Form, Button, NavDropdown } from 'react-bootstrap';
 import { ChevronLeft, ChevronRight, Menu } from '@material-ui/icons';
 import clsx from 'clsx';
 import React from 'react';
-import { RubricRequirement } from '../../../__generated__/types';
+import {
+   RubricRequirement,
+   TaskObjectiveProgress,
+   useGetObjectiveByIdQuery,
+} from '../../../__generated__/types';
 import Rubric from './Rubric';
+import ObjectiveRubric from './ObjectiveRubric';
 
 const useStyles = makeStyles((theme: Theme) =>
    createStyles({
@@ -68,11 +73,35 @@ const useStyles = makeStyles((theme: Theme) =>
    })
 );
 
-function RubricMenu({ requirements }: { requirements: RubricRequirement[] }) {
+function RubricMenu({
+   requirements,
+   objectiveProgress,
+}: {
+   requirements: RubricRequirement[];
+   objectiveProgress: TaskObjectiveProgress;
+}) {
+   const objectiveList = [];
    const classes = useStyles();
    const theme = useTheme();
    const [open, setOpen] = React.useState(false);
+   console.log(requirements);
+   // const objectiveId = '0035256d7d5';
+
+   if (objectiveProgress !== null) {
+      // const { data: objectiveQuery } = useGetObjectiveByIdQuery({
+      //    variables: {
+      //       // objectiveId,
+      //       objectiveId: '0035256d7d5',
+      //    },
+      // });
+      // console.log(objectiveQuery);
+      objectiveList.push(objectiveProgress);
+      // console.log(objectiveList);
+   } else {
+      objectiveList.push('');
+   }
 
+   console.log(objectiveList);
    const handleDrawerOpen = () => {
       setOpen(true);
    };
@@ -113,6 +142,11 @@ function RubricMenu({ requirements }: { requirements: RubricRequirement[] }) {
                   <Rubric requirement={requirement} />
                ))}
                <NavDropdown.Divider />
+               <Typography style={{ paddingLeft: '5px' }}> Learning Objectives </Typography>
+               <NavDropdown.Divider />
+               {objectiveList.map((objective: TaskObjectiveProgress | string) => (
+                  <ObjectiveRubric objective={objective} />
+               ))}
                <Button className="mx-auto" type="submit">
                   Submit Grade
                </Button>

src/Screens/TaskView/TaskNavbar/TaskNavbar.tsx

@@ -2,12 +2,18 @@ import { faCaretLeft, faHandPaper } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Dispatch, SetStateAction } from 'react';
 import { Navbar, Nav, Form, Button, NavDropdown, Dropdown } from 'react-bootstrap';
-import { RubricRequirement } from '../../../__generated__/types';
+import { RubricRequirement, TaskObjectiveProgress } from '../../../__generated__/types';
 import Rubric from '../Rubric/Rubric';
 import RubricMenu from '../Rubric/RubricMenu';
 import './TaskNavbar.css';
 
-function TaskNavbar({ rubric }: { rubric: RubricRequirement[] }) {
+function TaskNavbar({
+   rubric,
+   objectiveProgress,
+}: {
+   rubric: RubricRequirement[];
+   objectiveProgress: TaskObjectiveProgress;
+}) {
    return (
       <Navbar className="navbar-custom border-top border-light" collapseOnSelect expand="sm">
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
@@ -24,19 +30,8 @@ function TaskNavbar({ rubric }: { rubric: RubricRequirement[] }) {
                   </Button>
                </Form>
                <div className="ml-1 mr-0">
-                  <RubricMenu requirements={rubric} />
+                  <RubricMenu requirements={rubric} objectiveProgress={objectiveProgress} />
                </div>
-               {/* <NavDropdown drop="left" title="Task Rubric" id="rubric-dropdown" className="ml-2">
-                  <Form>
-                     {rubric.map((requirement: RubricRequirement) => (
-                        <Rubric requirement={requirement} />
-                     ))}
-                     <NavDropdown.Divider />
-                     <Button className="mx-auto" type="submit">
-                        Submit Task
-                     </Button>
-                  </Form>
-               </NavDropdown> */}
             </Nav>
          </Navbar.Collapse>
       </Navbar>

src/Screens/TaskView/TaskView.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useHistory, useParams } from 'react-router-dom';
 import {
    RubricRequirement,
+   TaskObjectiveProgress,
    useGetTaskByIdQuery,
    useTaskSubmissionResultQuery,
 } from '../../__generated__/types';
@@ -14,7 +15,9 @@ import './TaskView.css';
 function TaskView() {
    const [page, setPage] = useState(0);
    const { taskId } = useParams<Record<string, string | undefined>>();
-   const { username } = useParams<Record<string, string | undefined>>();
+   const history = useHistory();
+   console.log(history.location);
+   const taskObjectiveProgress = history.location.state;
    const { data: taskSubmissionQuery } = useTaskSubmissionResultQuery({
       variables: {
          taskId: '4f681550ba9',
@@ -41,10 +44,18 @@ function TaskView() {
    }
 
    const requirements = taskByIdQuery.task.requirements as RubricRequirement[];
+   const { objectiveId } = taskByIdQuery.task;
+   if (objectiveId === undefined) {
+      return <></>;
+   }
+   console.log(taskByIdQuery.task);
 
    return (
       <div className="back">
-         <TaskNavbar rubric={requirements} />
+         <TaskNavbar
+            rubric={requirements}
+            objectiveProgress={taskObjectiveProgress as TaskObjectiveProgress}
+         />
          <div>
             <TaskProgress
                taskInformation={taskByIdQuery}

src/__generated__/types.ts

@@ -0,0 +1,10 @@
+query GetObjectiveById($objectiveId: String!) {
+   objective(objectiveId: $objectiveId) {
+      objectiveId
+      objectiveName
+      description
+      targetId
+      targetName
+      course
+   }
+}