Add delete/patch todos

reminder-dashboard/src/api.ts

@@ -49,7 +49,7 @@ export type Reminder = {
 };
 
 export type Todo = {
-    id: string;
+    id: number;
     channel_id: string;
     value: string;
 };
@@ -59,6 +59,10 @@ export type CreateTodo = {
     value: string;
 };
 
+export type UpdateTodo = {
+    value: string;
+};
+
 export type ChannelInfo = {
     id: string;
     name: string;
@@ -210,7 +214,7 @@ export const fetchGuildTodos = (guild: string) => ({
 });
 
 export const patchGuildTodo = (guild: string) => ({
-    mutationFn: (todo: Todo) => axios.patch(`/dashboard/api/guild/${guild}/todos`, todo),
+    mutationFn: ({ id, todo }) => axios.patch(`/dashboard/api/guild/${guild}/todos/${id}`, todo),
 });
 
 export const postGuildTodo = (guild: string) => ({

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>

src/web/routes/dashboard/api/guild/todos.rs

@@ -167,7 +167,7 @@ pub async fn update_todo(
         "
         UPDATE todos
         SET value = ?
-        WHERE guild_id = ?
+        WHERE guild_id = (SELECT id FROM guilds WHERE guild = ?)
             AND id = ?
         ",
         todo.value,
@@ -181,6 +181,11 @@ pub async fn update_todo(
         json!({"errors": vec!["Unknown error"]})
     })?;
 
+    if let Err(e) = transaction.commit().await {
+        warn!("Couldn't commit transaction: {:?}", e);
+        return json_err!("Couldn't commit transaction.");
+    }
+
     Ok(json!({}))
 }
 
@@ -197,7 +202,7 @@ pub async fn delete_todo(
     sqlx::query!(
         "
         DELETE FROM todos
-        WHERE guild_id = ?
+        WHERE guild_id = (SELECT id FROM guilds WHERE guild = ?)
             AND id = ?
         ",
         guild_id,
@@ -210,5 +215,10 @@ pub async fn delete_todo(
         json!({"errors": vec!["Unknown error"]})
     })?;
 
+    if let Err(e) = transaction.commit().await {
+        warn!("Couldn't commit transaction: {:?}", e);
+        return json_err!("Couldn't commit transaction.");
+    }
+
     Ok(json!({}))
 }