pushing this stuff up so carter can take a look

src/tasks/TaskDrawer.tsx

@@ -22,17 +22,21 @@ import NotesIcon from "@mui/icons-material/Notes";
 import DeleteIcon from "@mui/icons-material/Delete";
 import Chat from "chat/Chat";
 import { pond } from "protobuf-ts/pond";
-import { useMobile, useUserAPI } from "hooks";
+import { useMobile, usePermissionAPI, useUserAPI } from "hooks";
 import { getThemeType } from "theme";
 import { makeStyles } from "@mui/styles";
+import ObjectTeamsIcon from "@mui/icons-material/SupervisedUserCircle";
+import TaskActions from "./taskActions";
+import { useGlobalState } from "providers";
 
 interface Props {
   task: Task;
   open: boolean;
   closeCallback: () => void;
-  editTask: (task: Task) => void;
   deleteTask: (task: Task) => void;
   completeTask: (task: Task) => void;
+  keys: string[]
+  types: string[]
 }
 
 // interface TabPanelProps {
@@ -103,17 +107,23 @@ export default function TaskDrawer(props: Props) {
     "Nov",
     "Dec"
   ];
-  const { task, open, closeCallback, completeTask, deleteTask, editTask } = props;
+  const { task, open, closeCallback, completeTask, deleteTask } = props;
   const [month, setMonth] = useState(0);
   const [day, setDay] = useState(0);
-  const [menuAnchorEl, setMenuAnchorEl] = useState<Element | null>(null);
+  const [permissions, setPermissions] = useState<pond.Permission[]>([])
+  const [{user}] = useGlobalState();
+  // const [menuAnchorEl, setMenuAnchorEl] = useState<Element | null>(null);
   const [openNote, setOpenNote] = useState(false);
   const isMobile = useMobile();
   const classes = useStyles();
   const userAPI = useUserAPI();
+  const permissionAPI = usePermissionAPI();
   const [worker, setWorker] = useState<pond.UserProfile>();
 
   useEffect(() => {
+    permissionAPI.getPermissions(user.id(), [task.key], ["task"]).then(resp => {
+      setPermissions(pond.EvaluatePermissionsResponse.fromObject(resp.data).permissions)
+    })
     if (task.start()) {
       let date = new Date(task.start());
       setMonth(date.getUTCMonth());
@@ -122,40 +132,40 @@ export default function TaskDrawer(props: Props) {
     userAPI.getProfile(task.worker()).then(resp => {
       setWorker(resp);
     });
-  }, [task, userAPI]);
+  }, [user, task, userAPI, permissionAPI]);
 
-  const taskActions = () => {
-    return (
-      <Menu
-        id="viewMenu"
-        anchorEl={menuAnchorEl ? menuAnchorEl : null}
-        open={menuAnchorEl !== null}
-        onClose={() => setMenuAnchorEl(null)}
-        disableAutoFocusItem>
-        <MenuItem
-          onClick={() => {
-            editTask(props.task);
-            setMenuAnchorEl(null);
-          }}>
-          <ListItemIcon>
-            <Edit />
-          </ListItemIcon>
-          <ListItemText primary="Edit" />
-        </MenuItem>
-        <MenuItem
-          onClick={() => {
-            deleteTask(props.task);
-            setMenuAnchorEl(null);
-            closeCallback();
-          }}>
-          <ListItemIcon>
-            <DeleteIcon style={{ color: "red" }} />
-          </ListItemIcon>
-          <ListItemText primary="Delete" />
-        </MenuItem>
-      </Menu>
-    );
-  };
+  // const taskActions = () => {
+  //   return (
+  //     <Menu
+  //       id="viewMenu"
+  //       anchorEl={menuAnchorEl ? menuAnchorEl : null}
+  //       open={menuAnchorEl !== null}
+  //       onClose={() => setMenuAnchorEl(null)}
+  //       disableAutoFocusItem>
+  //       <MenuItem
+  //         onClick={() => {
+  //           editTask(props.task);
+  //           setMenuAnchorEl(null);
+  //         }}>
+  //         <ListItemIcon>
+  //           <Edit />
+  //         </ListItemIcon>
+  //         <ListItemText primary="Edit" />
+  //       </MenuItem>
+  //       <MenuItem
+  //         onClick={() => {
+  //           deleteTask(props.task);
+  //           setMenuAnchorEl(null);
+  //           closeCallback();
+  //         }}>
+  //         <ListItemIcon>
+  //           <DeleteIcon style={{ color: "red" }} />
+  //         </ListItemIcon>
+  //         <ListItemText primary="Delete" />
+  //       </MenuItem>
+  //     </Menu>
+  //   );
+  // };
 
   const bodyButtons = () => {
     return (
@@ -175,11 +185,20 @@ export default function TaskDrawer(props: Props) {
             </IconButton>
           </Tooltip>
           <Tooltip title="More">
-            <IconButton
+            {/* <IconButton
               className={classes.avatar}
               onClick={event => setMenuAnchorEl(event.currentTarget)}>
               <MoreVert />
-            </IconButton>
+            </IconButton> */}
+        <TaskActions 
+          markComplete={(t) => completeTask(t)}
+          permissions={permissions}
+          task={task}
+          removeTask={deleteTask}
+          refreshCallback={closeCallback}
+          keys={props.keys}
+          types={props.types}
+        />
           </Tooltip>
         </Grid>
       </Grid>
@@ -303,7 +322,7 @@ export default function TaskDrawer(props: Props) {
           {taskTime()}
           {assignees()}
         </Box>
-        {taskActions()}
+        {/* {taskActions()} */}
         {noteDrawer()}
       </Box>
     );