Added MUI to Main Page

src/components/TaskForm.tsx

@@ -1,21 +1,34 @@
 import React from "react";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import type { Task } from "../utils/types";
 import { useRef } from "react";
 import { useContext } from "react";
 import { UserContext } from "../contexts/userContext";
 import { TaskContext } from "../contexts/taskContext";
+import {
+	Autocomplete,
+	Button,
+	Card,
+	CardHeader,
+	TextField,
+} from "@mui/material";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { validateDueDate } from "../utils/validation";
+import type { Dayjs } from "dayjs";
 
 type FormValues = {
 	text: string;
 	assignedTo: number;
+	dueDate: Dayjs;
 };
 
 const TaskForm: React.FC = () => {
 	const {
 		register,
 		handleSubmit,
-		// formState: { errors: formErrors }
+		control,
+		reset,
+		formState: { errors: formErrors },
 	} = useForm<FormValues>();
 
 	const { users, loading, error } = useContext(UserContext);
@@ -26,17 +39,18 @@ const TaskForm: React.FC = () => {
 	function addTask(data: FormValues) {
 		const currentIdMaxId = Math.max(...tasks.map((task) => task.id)) + 1;
 		const newId = Math.max(currentIdMaxId, 1);
-		console.log("NEW ID: ", newId);
 
 		const newTask: Task = {
 			id: newId,
 			assignedTo: Number(data.assignedTo),
+			due: data.dueDate.format("YYYY-MM-DD"),
 			text: data.text,
 			createdAt: creationDate,
 			finished: false,
 		};
 
 		setTasks((prev) => [...prev, newTask]);
+		reset();
 	}
 
 	// TODO make a skeleton
@@ -46,17 +60,75 @@ const TaskForm: React.FC = () => {
 	if (users == null) return <div>{error}</div>;
 
 	return (
-		<form onSubmit={handleSubmit(addTask)}>
-			<input {...register("text", { required: true, minLength: 2 })} />
-			<select {...register("assignedTo", { required: true })}>
-				{users.map((user) => (
-					<option key={user.id} value={user.id}>
-						{user.name}
-					</option>
-				))}
-			</select>
-			<input type="submit" value="Submit" />
-		</form>
+		<Card>
+			<CardHeader title="Create new task" />
+			<form className="task-form" onSubmit={handleSubmit(addTask)}>
+				<TextField
+					id="outlined-basic"
+					label="Task text"
+					variant="outlined"
+					error={!!formErrors.text}
+					helperText={formErrors.text?.message}
+					{...register("text", {
+						required: "Task text is required",
+						minLength: {
+							value: 2,
+							message: "Must be at least 2 characters",
+						},
+					})}
+				/>
+
+				<Controller
+					name="assignedTo"
+					control={control}
+					rules={{ required: "Assignee is required" }}
+					render={({ field }) => (
+						<Autocomplete
+							disablePortal
+							options={users.map((user) => ({
+								label: user.name,
+								id: user.id,
+							}))}
+							getOptionLabel={(option) => option.label}
+							onChange={(_, data) => field.onChange(data?.id || "")}
+							renderInput={(params) => (
+								<TextField
+									{...params}
+									label="Assign To"
+									error={!!formErrors.assignedTo}
+									helperText={formErrors.assignedTo?.message}
+								/>
+							)}
+						/>
+					)}
+				/>
+				<Controller
+					name="dueDate"
+					control={control}
+					rules={{
+						required: "Due date is required",
+						validate: validateDueDate,
+					}}
+					render={({ field }) => (
+						<DatePicker
+							label="Due Date"
+							onChange={(date) => field.onChange(date)}
+							slotProps={{
+								textField: {
+									fullWidth: true,
+									error: !!formErrors.dueDate,
+									helperText: formErrors.dueDate?.message,
+								},
+							}}
+						/>
+					)}
+				/>
+
+				<Button type="submit" variant="outlined">
+					Add
+				</Button>
+			</form>
+		</Card>
 	);
 };