pushing this stuff up so carter can take a look

src/field/FieldTaskList.tsx

@@ -0,0 +1,160 @@
+import { Fab, Theme } from "@mui/material"
+import { Task } from "models"
+import { useGlobalState, useTaskAPI } from "providers"
+import React, { useCallback, useEffect, useState } from "react"
+import TaskDrawer from "tasks/TaskDrawer"
+import TaskList from "tasks/TaskList"
+import TaskSettings from "tasks/TaskSettings"
+import AddIcon from "@mui/icons-material/Add";
+import { makeStyles } from "@mui/styles";
+
+
+
+interface Props {
+  field: string
+}
+
+const useStyles = makeStyles((theme: Theme) => {
+  return ({
+    active: {
+      color: theme.palette.getContrastText(theme.palette.secondary.main),
+      backgroundColor: theme.palette.secondary.main,
+      width: theme.spacing(5),
+      height: theme.spacing(5),
+      border: 0,
+      "&:hover": {
+        backgroundColor: theme.palette.secondary.main
+      }
+    },
+    fab: {
+      zIndex: 20,
+      background: theme.palette.primary.main,
+      "&:hover": {
+        background: theme.palette.primary.main
+      },
+      "&:focus": {
+        background: theme.palette.primary.main
+      },
+      position: "absolute",
+      bottom: theme.spacing(8), //for mobile navigator
+      right: theme.spacing(2),
+      [theme.breakpoints.up("sm")]: {
+        bottom: theme.spacing(2)
+      }
+    },
+    overlayFab: {
+      zIndex: 20,
+      background: theme.palette.primary.main,
+      "&:hover": {
+        background: theme.palette.primary.main
+      },
+      "&:focus": {
+        background: theme.palette.primary.main
+      },
+      position: "fixed",
+      bottom: theme.spacing(8), //for mobile navigator
+      right: theme.spacing(2),
+      [theme.breakpoints.up("sm")]: {
+        bottom: theme.spacing(2)
+      }
+    }
+  });
+});
+
+export default function FieldTaskList(props: Props) {
+  const { field } = props
+  const [{ as }] = useGlobalState()
+  const taskAPI = useTaskAPI()
+  const classes = useStyles()
+  const [selectedTask, setSelectedTask] = useState<Task | undefined>(undefined)
+  const [openTaskDrawer, setOpenTaskDrawer] = useState(false)
+  const [opentaskSettings, setOpenTaskSettings] = useState(false)
+  const [taskMap, setTaskMap] = useState<Map<string, Task>>(new Map())
+  //load the tasks
+  const loadTasks = useCallback(() => {
+    taskAPI.listTasks(50, 0, "asc", "start", undefined, undefined, undefined, undefined, undefined, [field], ["field"]).then(resp => {
+      if(resp.data.tasks){
+        let newMap: Map<string,Task> = new Map()
+        resp.data.tasks.forEach(task => {
+          newMap.set(task.key, Task.create(task))
+        })
+        setTaskMap(newMap)
+      }
+    }).catch(err => {
+
+    })
+  },[as, field])
+
+  useEffect(()=>{
+    loadTasks()
+  },[loadTasks])
+
+  const addNewTask = (task: Task) => {
+    console.log()
+  }
+
+  const deleteTask = () => {
+
+  }
+
+  const markComplete = () => {
+
+  }
+
+  const updateTask = () => {
+
+  }
+  //return the task list
+  return (
+    <React.Fragment>
+      {selectedTask &&
+        <TaskDrawer
+          task={selectedTask}
+          open={openTaskDrawer}
+          deleteTask={deleteTask}
+          completeTask={markComplete}
+          closeCallback={() => {
+            setOpenTaskDrawer(false)
+            setSelectedTask(undefined)
+          }}
+          keys={[field]}
+          types={["field"]}
+        />
+      }
+      <TaskList 
+        deleteTask={deleteTask}
+        editTaskMethod={updateTask}
+        markComplete={markComplete}
+        openTask={id => {
+          let task = taskMap.get(id)
+          if(task){
+            setSelectedTask(task)
+            setOpenTaskDrawer(true)
+          }
+        }}
+        tasks={Array.from(taskMap.values())}
+        reLoad={() => {
+          loadTasks()
+        }}
+        keys={[field]}
+        types={["field"]}      
+      />
+      <TaskSettings 
+        open={opentaskSettings}
+        onClose={() => {
+          setOpenTaskSettings(false)
+        }}
+        keys={[field]}
+        types={["field"]}
+        task={selectedTask}
+      />
+      <Fab
+        onClick={() => {setOpenTaskSettings(true)}}
+        aria-label="Create Task"
+        className={classes.overlayFab}
+        size={"medium"}>
+        <AddIcon />
+      </Fab>
+    </React.Fragment>
+  )
+}