toggle and delete use case made ready

Author: FullstackCodingGuy

src/app/api/task/route.ts

@@ -8,10 +8,10 @@ export async function PUT(request) {
   const searchParams = request.nextUrl.searchParams;
   const id = searchParams.get('id');
 
-  console.log('deleting task..', id, form)
-  // await connectToDatabase();
-  //  const updatedTask: ITask | null = await Task.findByIdAndUpdate(id, req.body, { new: true });
-  return NextResponse.json({}, { status: 200 });
+  console.log('toggling task..', id, form)
+  await connectToDatabase();
+   const updatedTask: ITask | null = await Task.findByIdAndUpdate(id, form, { new: true });
+  return NextResponse.json(updatedTask, { status: 200 });
 }
 
 

src/app/page.tsx

@@ -1,8 +1,19 @@
-"use client"
-import { useState, useEffect } from 'react';
-import axios from 'axios';
-import { Container, Typography, TextField, Button, List, ListItem, ListItemText, IconButton, Checkbox } from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete';
+"use client";
+import { useState, useEffect } from "react";
+import axios from "axios";
+import {
+  Container,
+  Typography,
+  TextField,
+  Button,
+  List,
+  ListItem,
+  ListItemText,
+  IconButton,
+  Checkbox,
+} from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import Snackbar, { SnackbarCloseReason } from "@mui/material/Snackbar";
 
 interface Task {
   _id: string;
@@ -12,34 +23,65 @@ interface Task {
 
 export default function Home() {
   const [tasks, setTasks] = useState<Task[]>([]);
-  const [newTask, setNewTask] = useState<string>('');
+  const [newTask, setNewTask] = useState<string>("");
+  const [openSnackBar, setOpenSnackBar] = useState(false);
+  const [snackBarMsg, setSnackBarMsg] = useState("");
+
+  const showSnackBar = (msg: string) => {
+    setSnackBarMsg(msg);
+    setOpenSnackBar(true);
+  };
+
+  const hideSnackBar = () => {
+    setSnackBarMsg("");
+    setOpenSnackBar(false);
+  };
 
   useEffect(() => {
-    axios.get('/api/tasks').then((res) => setTasks(res.data));
+    axios.get("/api/tasks").then((res) => setTasks(res.data));
   }, []);
 
   const addTask = async () => {
     if (!newTask) return;
-    const form = { title: newTask }
+    const form = { title: newTask };
     // console.log('addtask:', form)
-    const res = await axios.post<Task>('/api/tasks', form);
+    const res = await axios.post<Task>("/api/tasks", form);
     setTasks([...tasks, res.data]);
-    setNewTask('');
+    setNewTask("");
+    showSnackBar("Task added!");
   };
 
   const toggleTask = async (task: Task) => {
-    const res = await axios.put<Task>(`/api/task?id=${task._id}`, { completed: !task.completed });
+    const res = await axios.put<Task>(`/api/task?id=${task._id}`, {
+      completed: !task.completed,
+    });
     setTasks(tasks.map((t) => (t._id === task._id ? res.data : t)));
+    showSnackBar("Task done!");
   };
 
   const deleteTask = async (id: string) => {
     await axios.delete(`/api/task?id=${id}`);
-    setTasks(tasks.filter((t) => t._id !== id));
+    const list = tasks.filter((t) => t._id !== id);
+    // console.log('after.deletion:', list)
+    showSnackBar("Task deleted!");
+    setTasks(list);
+  };
+
+  const handleClose = (
+    event: React.SyntheticEvent | Event,
+    reason?: SnackbarCloseReason
+  ) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    hideSnackBar();
   };
 
   return (
     <Container maxWidth="sm" sx={{ mt: 5 }}>
-      <Typography variant="h4" gutterBottom>Task Manager</Typography>
+      <Typography variant="h5" gutterBottom>
+        Task Manager
+      </Typography>
       <TextField
         fullWidth
         label="New Task"
@@ -48,19 +90,38 @@ export default function Home() {
         onChange={(e) => setNewTask(e.target.value)}
         sx={{ mb: 2 }}
       />
-      <Button variant="contained" onClick={addTask}>Add Task</Button>
+      <Button variant="contained" onClick={addTask}>
+        Add Task
+      </Button>
       <List>
         {tasks.map((task) => (
-          <ListItem key={task._id} secondaryAction={
-            <IconButton edge="end" onClick={() => deleteTask(task._id)}>
-              <DeleteIcon />
-            </IconButton>
-          }>
-            <Checkbox checked={task.completed} onChange={() => toggleTask(task)} />
-            <ListItemText primary={task.title} sx={{ textDecoration: task.completed ? 'line-through' : 'none' }} />
+          <ListItem
+            key={task._id}
+            secondaryAction={
+              <IconButton edge="end" onClick={() => deleteTask(task._id)}>
+                <DeleteIcon />
+              </IconButton>
+            }
+          >
+            <Checkbox
+              checked={task.completed}
+              onChange={() => toggleTask(task)}
+            />
+            <ListItemText
+              primary={task.title}
+              sx={{ textDecoration: task.completed ? "line-through" : "none" }}
+            />
           </ListItem>
         ))}
       </List>
+      <Snackbar
+        open={openSnackBar}
+        autoHideDuration={3000}
+        onClose={handleClose}
+        message={snackBarMsg}
+        anchorOrigin={{ vertical: "top", horizontal: "center" }}
+        // action={action}
+      />
     </Container>
   );
 }