new task form

client/src/pages/Projects/components/AddTask.tsx

@@ -0,0 +1,57 @@
+import AddTaskIcon from "@mui/icons-material/AddTask";
+import { Box, Button, TextField, Toolbar } from "@mui/material";
+import { useState } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { KeyedMutator } from "swr";
+import { useAuth } from "../../../hooks/useAuth";
+import { APIProjectTasksList } from "./Project";
+
+type NewTaskForm = {
+  description: string;
+};
+
+export type AddTaskProps = {
+  projectId: number;
+  mutate: KeyedMutator<APIProjectTasksList>;
+};
+
+export const AddTask = ({ projectId, mutate }: AddTaskProps) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const { apiClient } = useAuth();
+  const { register, handleSubmit, reset } = useForm<NewTaskForm>();
+
+  const onSubmit: SubmitHandler<NewTaskForm> = (data) => {
+    setIsLoading(true);
+    apiClient(`projects/${projectId}/tasks`, {
+      method: "POST",
+      body: JSON.stringify(data),
+    }).then(() => {
+      mutate();
+      reset();
+      setIsLoading(false);
+    });
+  };
+
+  return (
+    <Box onSubmit={handleSubmit(onSubmit)} component={"form"}>
+      <Toolbar sx={{ display: "flex", justifyContent: "center" }}>
+        <TextField
+          disabled={isLoading}
+          placeholder="New task description "
+          variant="standard"
+          {...register("description")}
+        />
+        <Button
+          disabled={isLoading}
+          type="submit"
+          size="small"
+          variant="outlined"
+          sx={{ marginLeft: "1rem" }}
+          startIcon={<AddTaskIcon />}
+        >
+          Add task
+        </Button>
+      </Toolbar>
+    </Box>
+  );
+};

client/src/pages/Projects/components/Project.tsx

@@ -11,7 +11,7 @@ import useSWR from "swr";
 import { useAuth } from "../../../hooks/useAuth";
 import { createSWRFetcher } from "../../../utils/swrFetcher";
 import { TaskListProps, TasksList } from "./TasksList";
-
+import { AddTask } from "./AddTask";
 export type APIProjectTasksList = {
   data: TaskListProps["tasks"];
 };
@@ -44,6 +44,7 @@ export const Project = (props: ProjectProps) => {
         title={props.name}
       />
       <CardContent>
+        <AddTask projectId={props.id} mutate={mutate} />
         <TasksList
           projectId={props.id}
           mutate={mutate}

client/src/providers/AuthProvider.tsx

@@ -46,8 +46,10 @@ export const AuthProvider = ({ children, ...rest }: AuthProviderProps) => {
           password,
         }),
       }).then(async (res) => {
+        if (res.status === 200) {
           setToken((await res.json()).token);
           setIsLoginDialogOpen(false);
+        }
       });
     },
     [apiClient, setToken]