added checkboxes to task rubric dropdown

Author: rmfay1

graphql.schema.json

@@ -45,8 +45,11 @@ export default function Content() {
             <Route path="/singleMissionOverview/:name">
                <SingleMissionOverview />
             </Route>
-            <Route path="/viewTask">
+            {/* <Route path="/viewTask">
                <TaskView taskId="90e0c730e56" />
+            </Route> */}
+            <Route path="/viewTask/:taskId">
+               <TaskView />
             </Route>
             <Route path="/classMastery">
                <ClassMastery />

src/Components/Content/Content.tsx

@@ -94,7 +94,7 @@ export default function TargetDropDown({ name, tasks }: ObjectiveDropDownProps)
 
          <Collapse in={open} timeout="auto" unmountOnExit>
             {tasks.map((task: TaskObjectiveProgress) => (
-               <Link to="/viewTask">
+               <Link to={`/viewTask/${task.task.id}`}>
                   <List component="div" disablePadding>
                      <div style={{ display: 'flex', flexDirection: 'row' }}>
                         <DoublePaddedDiv>

src/Components/LinearProgressWithLabel/ObjectiveDropDown.tsx

@@ -180,7 +180,7 @@ function SingleMissionOverview() {
          <TaskRowDiv className="row">
             <LeftColumnDiv className="col-12" style={{ justifyContent: 'right' }}>
                {missionProgressData?.map((task: TaskStats) => (
-                  <Link to="/viewTask" data-testid="task-btn">
+                  <Link to={`/viewTask/${task.taskId}`} data-testid="task-btn">
                      <List
                         component="div"
                         disablePadding

src/Components/SingleStudentOverview/SingleMissionOverview.tsx

@@ -23,6 +23,9 @@ function BlockPageHandler({
    taskInformation: GetTaskByIdQuery;
    page: number;
 }) {
+   if (taskInformation.task.pages[page] === undefined) {
+      return <>Quiz is Not Yet Defined</>;
+   }
    const pageBlocks = taskInformation.task.pages[page].blocks;
 
    type TaskBlock =

src/Screens/TaskView/BlockPageHandler/BlockPageHandler.tsx

@@ -0,0 +1,28 @@
+import { Checkbox, MenuItem } from '@material-ui/core';
+import { useState } from 'react';
+import { Navbar, Nav, Form, Button, Dropdown } from 'react-bootstrap';
+import { RubricRequirement } from '../../../__generated__/types';
+
+function Rubric({ requirement }: { requirement: RubricRequirement }) {
+   const [complete, setComplete] = useState(requirement.isComplete);
+   console.log(requirement);
+   const handleChange = () => {
+      setComplete(!complete);
+   };
+   return (
+      <MenuItem>
+         <Form.Group>
+            <Checkbox
+               checked={complete}
+               onChange={handleChange}
+               inputProps={{ 'aria-label': 'primary checkbox' }}
+               color="default"
+            />
+            {/* <Form.Check required checked={requirement.isComplete} /> */}
+            <Form.Label>{requirement.description}</Form.Label>
+         </Form.Group>
+      </MenuItem>
+   );
+}
+
+export default Rubric;

src/Screens/TaskView/Rubric/Rubric.tsx

@@ -1,9 +1,14 @@
 import { faCaretLeft, faHandPaper } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Navbar, Nav, Form, Button, NavDropdown } from 'react-bootstrap';
+import { Dispatch, SetStateAction } from 'react';
+import { Navbar, Nav, Form, Button, NavDropdown, Dropdown } from 'react-bootstrap';
+import { RubricRequirement } from '../../../__generated__/types';
+import Rubric from '../Rubric/Rubric';
 import './TaskNavbar.css';
 
-function TaskNavbar() {
+function handleToggle() {}
+
+function TaskNavbar({ rubric }: { rubric: RubricRequirement[] }) {
    return (
       <Navbar collapseOnSelect expand="sm" bg="primary" variant="light">
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
@@ -19,10 +24,16 @@ function TaskNavbar() {
                      <FontAwesomeIcon icon={faHandPaper} />
                   </Button>
                </Form>
-               <NavDropdown title="Task Rubric" id="rubric-dropdown" className="ml-2">
-                  <NavDropdown.Item href="">Task Rubric</NavDropdown.Item>
-                  <Form inline>
-                     <Button type="submit">Submit Task</Button>
+
+               <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>

src/Screens/TaskView/TaskNavbar/TaskNavbar.tsx

@@ -1,15 +1,35 @@
 import { useState } from 'react';
-import { useGetTaskByIdQuery } from '../../__generated__/types';
+import { useParams } from 'react-router-dom';
+import {
+   RubricRequirement,
+   useGetTaskByIdQuery,
+   useTaskSubmissionResultQuery,
+} from '../../__generated__/types';
 import TaskNavbar from './TaskNavbar/TaskNavbar';
 import TaskProgress from './TaskProgress/TaskProgress';
 import BlockPageHandler from './BlockPageHandler/BlockPageHandler';
 
-function TaskView({ taskId }: { taskId: string }) {
+// function TaskView({ taskId }: { taskId: string }) {
+function TaskView() {
+   const [page, setPage] = useState(0);
+   const { taskId } = useParams<Record<string, string | undefined>>();
+   let { username } = useParams<Record<string, string | undefined>>();
+   username = 'bob';
+   const { data: taskSubmissionQuery } = useTaskSubmissionResultQuery({
+      variables: {
+         taskId: '4f681550ba9',
+         username: 'bob',
+      },
+   });
+   if (taskId === undefined) {
+      return <>Task Undefined</>;
+   }
+
    const { data: taskByIdQuery } = useGetTaskByIdQuery({
       variables: { taskId },
    });
 
-   const [page, setPage] = useState(0);
+   console.log(taskSubmissionQuery?.retrieveTaskSubmission);
 
    const maxPage: number =
       taskByIdQuery === undefined || taskByIdQuery.task.pages === undefined
@@ -20,9 +40,11 @@ function TaskView({ taskId }: { taskId: string }) {
       return <></>;
    }
 
+   const requirements = taskByIdQuery.task.requirements as RubricRequirement[];
+
    return (
       <div>
-         <TaskNavbar />
+         <TaskNavbar rubric={requirements} />
          <div>
             <TaskProgress
                taskInformation={taskByIdQuery}

src/Screens/TaskView/TaskView.tsx

@@ -177,12 +177,14 @@ export const mockTask: Task = {
 };
 
 const ansone: Answer = {
+   graded: false,
    questionId: 'fakemcqid',
    pointsAwarded: 50,
    answer: 'All of us!',
 };
 
 const anstwo: Answer = {
+   graded: false,
    questionId: 'fakefrqid',
    pointsAwarded: 50,
    answer: 'Dr. Janzen',