More work on todo list

reminder-dashboard/src/api.ts

@@ -54,6 +54,11 @@ export type Todo = {
     value: string;
 };
 
+export type CreateTodo = {
+    channel_id: string;
+    value: string;
+};
+
 export type ChannelInfo = {
     id: string;
     name: string;
@@ -209,17 +214,12 @@ export const patchGuildTodo = (guild: string) => ({
 });
 
 export const postGuildTodo = (guild: string) => ({
-    mutationFn: (reminder: Reminder) =>
-        axios.post(`/dashboard/api/guild/${guild}/todos`, reminder).then((resp) => resp.data),
+    mutationFn: (todo: CreateTodo) =>
+        axios.post(`/dashboard/api/guild/${guild}/todos`, todo).then((resp) => resp.data),
 });
 
-export const deleteGuildTodo = () => ({
-    mutationFn: (todo: Todo) =>
-        axios.delete(`/dashboard/api/todos`, {
-            data: {
-                id: todo.id,
-            },
-        }),
+export const deleteGuildTodo = (guild: string) => ({
+    mutationFn: (todoId: number) => axios.delete(`/dashboard/api/guild/${guild}/todos/${todoId}`),
 });
 
 export const fetchUserReminders = () => ({

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

@@ -5,6 +5,7 @@ import { createPortal, PropsWithChildren } from "preact/compat";
 import { Import } from "../Import";
 import { useGuild } from "../App/useGuild";
 import { Link } from "wouter";
+import { usePathname } from "wouter/use-browser-location";
 
 import "./index.scss";
 
@@ -18,13 +19,14 @@ export const Guild = ({ children }: PropsWithChildren) => {
         return <GuildError />;
     } else {
         const importModal = createPortal(<Import />, document.getElementById("bottom-sidebar"));
+        const path = usePathname();
 
         return (
             <>
                 {importModal}
                 <div class="page-links">
                     <Link
-                        class="button is-outlined is-success is-small"
+                        class={`button is-outlined is-success is-small ${path.endsWith("reminders") && "is-focused"}`}
                         href={`/${guild}/reminders`}
                     >
                         <span>Reminders</span>
@@ -32,7 +34,10 @@ export const Guild = ({ children }: PropsWithChildren) => {
                             <i class="fa fa-chevron-right"></i>
                         </span>
                     </Link>
-                    <Link class="button is-outlined is-success is-small" href={`/${guild}/todos`}>
+                    <Link
+                        class={`button is-outlined is-success is-small ${path.endsWith("todos") && "is-focused"}`}
+                        href={`/${guild}/todos`}
+                    >
                         <span>Todo lists</span>
                         <span class="icon">
                             <i class="fa fa-chevron-right"></i>

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

@@ -1,18 +1,64 @@
-import { useQuery } from "react-query";
-import { fetchGuildChannels } from "../../api";
+import { useMutation, useQuery, useQueryClient } from "react-query";
+import { fetchGuildChannels, postGuildTodo } from "../../api";
 import { useGuild } from "../App/useGuild";
+import { useState } from "preact/hooks";
+import { useFlash } from "../App/FlashContext";
+import { ICON_FLASH_TIME } from "../../consts";
 
 export const CreateTodo = () => {
     const guild = useGuild();
 
+    const [recentlyCreated, setRecentlyCreated] = useState(false);
+    const [newTodo, setNewTodo] = useState({ value: "", channel_id: null });
+
+    const flash = useFlash();
+
+    const queryClient = useQueryClient();
     const { isSuccess, data: channels } = useQuery(fetchGuildChannels(guild));
+    const mutation = useMutation({
+        ...postGuildTodo(guild),
+        onSuccess: (data) => {
+            if (data.error) {
+                flash({
+                    message: data.error,
+                    type: "error",
+                });
+            } else {
+                flash({
+                    message: "Todo created",
+                    type: "success",
+                });
+                queryClient.invalidateQueries({
+                    queryKey: ["GUILD_TODO"],
+                });
+                setRecentlyCreated(true);
+                setTimeout(() => {
+                    setRecentlyCreated(false);
+                }, ICON_FLASH_TIME);
+            }
+        },
+    });
+
+    console.log(newTodo);
 
     return (
         <div class="todo">
-            <textarea class="input todo-input" onInput={() => null} />
+            <textarea
+                class="input todo-input"
+                onInput={(ev) => setNewTodo((todo) => ({ ...todo, value: ev.currentTarget.value }))}
+            />
             <div class="control has-icons-left">
                 <div class="select">
-                    <select name="channel" class="channel-selector" onInput={() => {}}>
+                    <select
+                        name="channel"
+                        class="channel-selector"
+                        onInput={(ev) =>
+                            setNewTodo((todo) => ({
+                                ...todo,
+                                channel_id: ev.currentTarget.value || null,
+                            }))
+                        }
+                    >
                         <option value="">(None)</option>
                         {isSuccess && channels.map((c) => <option value={c.id}>{c.name}</option>)}
                     </select>
@@ -21,9 +67,21 @@ export const CreateTodo = () => {
                     <i class="fas fa-hashtag"></i>
                 </div>
             </div>
-            <button onClick={() => null} class="button is-success save-btn">
+            <button onClick={() => mutation.mutate(newTodo)} class="button is-success save-btn">
                 <span class="icon">
-                    <i class="fa fa-sparkles"></i>
+                    {mutation.isLoading ? (
+                        <span class="icon">
+                            <i class="fas fa-spin fa-cog"></i>
+                        </span>
+                    ) : recentlyCreated ? (
+                        <span class="icon">
+                            <i class="fas fa-check"></i>
+                        </span>
+                    ) : (
+                        <span class="icon">
+                            <i class="fas fa-sparkles"></i>
+                        </span>
+                    )}
                 </span>
             </button>
         </div>