added TaskListView (#43)

Author: zzheng07

codegen.yml

@@ -8,7 +8,7 @@ schema:
    ]
 
 documents:
-   - src/hooks/*.graphql
+   - src/**/*.graphql
 generates:
    src/__generated__/types.ts:
       plugins:
@@ -42,6 +42,7 @@ generates:
          nonOptionalTypename: true
          useTypeImports: false
          withHooks: true
+         preResolveTypes: true
    ./graphql.schema.json:
       plugins:
          - 'introspection'

src/Components/Content/Content.tsx

@@ -11,6 +11,7 @@ import SingleTargetOverview from '../SingleTargetOverview/SingleTargetOverview';
 import SingleMissionOverview from '../SingleStudentOverview/SingleMissionOverview';
 
 import TaskView from '../../Screens/TaskView/TaskView';
+import TaskListView from '../TaskListView';
 import { ClassMastery } from '../../Screens/ClassMastery';
 import './Content.css';
 
@@ -45,9 +46,9 @@ export default function Content() {
             <Route path="/singleMissionOverview/:name">
                <SingleMissionOverview />
             </Route>
-            {/* <Route path="/viewTask">
-               <TaskView taskId="90e0c730e56" />
-            </Route> */}
+            <Route path="/taskList">
+               <TaskListView />
+            </Route>
             <Route path="/viewTask/:taskId">
                <TaskView />
             </Route>

src/Components/Sidebar/Sidebar.tsx

@@ -39,7 +39,7 @@ const sideBarItems = [
    },
    {
       name: 'Task',
-      link: '/viewTask',
+      link: '/taskList',
       Icon: IconPeople,
    },
    {

src/Components/TaskListView/TaskListTable.css

@@ -0,0 +1,11 @@
+.cell-taskname {
+   width: 25%;
+   text-overflow: ellipsis;
+}
+.cell-instructions {
+   width: 65%;
+   text-overflow: ellipsis;
+}
+.cell-view {
+   width: 10%;
+}

src/Components/TaskListView/TaskListTable.tsx

@@ -0,0 +1,59 @@
+import { Link } from 'react-router-dom';
+import { TaskListTaskFieldsFragment } from '../../__generated__/types';
+
+import './TaskListTable.css';
+
+type HeadProps = {
+   headers: Array<string>;
+};
+
+type RowProps = {
+   data: Array<TaskListTaskFieldsFragment>;
+};
+
+type TaskTableProps = HeadProps & RowProps;
+
+const TaskListTableHead = ({ headers }: HeadProps): JSX.Element => {
+   return (
+      <thead>
+         <tr>
+            {headers.map((header) => (
+               <th>{header}</th>
+            ))}
+         </tr>
+      </thead>
+   );
+};
+
+const TaskListTableBody = ({ data }: RowProps): JSX.Element => {
+   const rows = data.map((task) => {
+      return (
+         <tr key={task.id} className="hoverRow">
+            <td className="cell-taskname">{task.name}</td>
+            <td className="cell-instructions">{task.instructions}</td>
+            <td className="cell-view">
+               <Link
+                  to={{
+                     pathname: `/viewTask/${task.id}`,
+                  }}
+               >
+                  view
+               </Link>
+            </td>
+         </tr>
+      );
+   });
+
+   return <tbody>{rows}</tbody>;
+};
+
+const TaskListTable = ({ headers: columns, data }: TaskTableProps): JSX.Element => {
+   return (
+      <table>
+         <TaskListTableHead headers={columns} />
+         <TaskListTableBody data={data} />
+      </table>
+   );
+};
+
+export default TaskListTable;

src/Components/TaskListView/TaskListView.tsx

@@ -0,0 +1,21 @@
+import { useTaskListQuery } from '../../__generated__/types';
+import TaskListTable from './TaskListTable';
+
+function TaskList() {
+   const { data } = useTaskListQuery({
+      variables: {
+         course: 'Integrated Science',
+      },
+   });
+
+   const tasks = data?.tasksByCourse || [];
+   const headers = ['Task Name', 'Instructions', 'Submissions'];
+
+   return (
+      <div className="base-table">
+         <TaskListTable headers={headers} data={tasks} />
+      </div>
+   );
+}
+
+export default TaskList;

src/Components/TaskListView/index.ts

@@ -0,0 +1 @@
+export { default } from './TaskListView';

src/Components/TaskListView/taskList.graphql

@@ -0,0 +1,11 @@
+query TaskList($course: String!) {
+   tasksByCourse(course: $course) {
+      ...TaskListTaskFields
+   }
+}
+
+fragment TaskListTaskFields on Task {
+   id
+   name
+   instructions
+}