Add delete/patch todos

reminder-dashboard/src/components/Guild/GuildTodos.tsx

@@ -15,7 +15,9 @@ export const GuildTodos = () => {
         return <Loader />;
     }
 
-    const sortedTodos = guildTodos.sort((a, b) => (a.channel_id < b.channel_id ? 0 : 1));
+    const sortedTodos = guildTodos
+        .sort((a, b) => (a.id > b.id ? -1 : 1))
+        .sort((a, b) => (a.channel_id < b.channel_id ? 0 : 1));
     let prevChannel;
 
     return (

reminder-dashboard/src/components/Todo/CreateTodo.tsx

@@ -29,7 +29,7 @@ export const CreateTodo = () => {
                     type: "success",
                 });
                 queryClient.invalidateQueries({
-                    queryKey: ["GUILD_TODO"],
+                    queryKey: ["GUILD_TODOS", guild],
                 });
                 setRecentlyCreated(true);
                 setTimeout(() => {
@@ -39,8 +39,6 @@ export const CreateTodo = () => {
         },
     });
 
-    console.log(newTodo);
-
     return (
         <div class="todo">
             <textarea

reminder-dashboard/src/components/Todo/index.tsx

@@ -1,21 +1,79 @@
-import { Todo as TodoT } from "../../api";
+import { deleteGuildTodo, patchGuildTodo, Todo as TodoT, UpdateTodo } from "../../api";
 
 import "./index.scss";
+import { useMutation, useQueryClient } from "react-query";
+import { useFlash } from "../App/FlashContext";
+import { useGuild } from "../App/useGuild";
+import { useState } from "preact/hooks";
+import { ICON_FLASH_TIME } from "../../consts";
 
 type Props = {
     todo: TodoT;
 };
 
 export const Todo = ({ todo }: Props) => {
+    const guild = useGuild();
+
+    const [updatedTodo, setUpdatedTodo] = useState<UpdateTodo>({ value: todo.value });
+    const [recentlySaved, setRecentlySaved] = useState(false);
+
+    const flash = useFlash();
+
+    const queryClient = useQueryClient();
+    const deleteMutation = useMutation({
+        ...deleteGuildTodo(guild),
+        onSuccess: () => {
+            flash({
+                message: "Todo deleted",
+                type: "success",
+            });
+            queryClient.invalidateQueries({
+                queryKey: ["GUILD_TODOS", guild],
+            });
+        },
+    });
+
+    const patchMutation = useMutation({
+        ...patchGuildTodo(guild),
+        onError: (error) => {
+            flash({
+                message: `An error occurred: ${error}`,
+                type: "error",
+            });
+        },
+        onSuccess: (response) => {
+            if (response.data.error) {
+                setRecentlySaved(false);
+                flash({ message: response.data.error, type: "error" });
+            } else {
+                setRecentlySaved(true);
+                setTimeout(() => {
+                    setRecentlySaved(false);
+                }, ICON_FLASH_TIME);
+            }
+        },
+    });
+
     return (
         <div class="todo">
-            <textarea class="input todo-input" value={todo.value} onInput={() => null} />
-            <button onClick={() => null} class="button is-success save-btn">
+            <textarea
+                class="input todo-input"
+                value={updatedTodo.value}
+                onInput={(ev) =>
+                    setUpdatedTodo({
+                        value: ev.currentTarget.value,
+                    })
+                }
+            />
+            <button
+                onClick={() => patchMutation.mutate({ id: todo.id, todo: updatedTodo })}
+                class="button is-success save-btn"
+            >
                 <span class="icon">
-                    <i class="fa fa-save"></i>
+                    {recentlySaved ? <i class="fa fa-check"></i> : <i class="fa fa-save"></i>}
                 </span>
             </button>
-            <button onClick={() => null} class="button is-danger">
+            <button onClick={() => deleteMutation.mutate(todo.id)} class="button is-danger">
                 <span class="icon">
                     <i class="fa fa-trash"></i>
                 </span>