Start work on todo list support for dashboard

reminder-dashboard/src/api.ts

@@ -49,6 +49,12 @@ export type Reminder = {
     utc_time: string;
 };
 
+export type Todo = {
+    id: string;
+    channel_id: string;
+    value: string;
+};
+
 export type ChannelInfo = {
     id: string;
     name: string;
@@ -190,6 +196,33 @@ export const deleteGuildTemplate = (guild: string) => ({
         }),
 });
 
+export const fetchGuildTodos = (guild: string) => ({
+    queryKey: ["GUILD_TODOS", guild],
+    queryFn: () =>
+        axios.get(`/dashboard/api/guild/${guild}/todos`).then((resp) => resp.data) as Promise<
+            Todo[]
+        >,
+    staleTime: OTHER_STALE_TIME,
+});
+
+export const patchGuildTodo = (guild: string) => ({
+    mutationFn: (todo: Todo) => axios.patch(`/dashboard/api/guild/${guild}/todos`, todo),
+});
+
+export const postGuildTodo = (guild: string) => ({
+    mutationFn: (reminder: Reminder) =>
+        axios.post(`/dashboard/api/guild/${guild}/todos`, reminder).then((resp) => resp.data),
+});
+
+export const deleteGuildTodo = () => ({
+    mutationFn: (todo: Todo) =>
+        axios.delete(`/dashboard/api/todos`, {
+            data: {
+                id: todo.id,
+            },
+        }),
+});
+
 export const fetchUserReminders = () => ({
     queryKey: ["USER_REMINDERS"],
     queryFn: () =>

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

@@ -6,6 +6,8 @@ import { Guild } from "../Guild";
 import { FlashProvider } from "./FlashProvider";
 import { TimezoneProvider } from "./TimezoneProvider";
 import { User } from "../User";
+import { GuildReminders } from "../Guild/GuildReminders";
+import { GuildTodos } from "../Guild/GuildTodos";
 
 export function App() {
     const queryClient = new QueryClient();
@@ -20,7 +22,22 @@ export function App() {
                             <div class="column is-main-content">
                                 <Switch>
                                     <Route path={"/@me/reminders"} component={User}></Route>
-                                    <Route path={"/:guild/reminders"} component={Guild}></Route>
+                                    <Route
+                                        path={"/:guild/reminders"}
+                                        component={() => (
+                                            <Guild>
+                                                <GuildReminders />
+                                            </Guild>
+                                        )}
+                                    ></Route>
+                                    <Route
+                                        path={"/:guild/todos"}
+                                        component={
+                                            <Guild>
+                                                <GuildTodos />
+                                            </Guild>
+                                        }
+                                    ></Route>
                                     <Route>
                                         <Welcome />
                                     </Route>

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

@@ -0,0 +1,21 @@
+import { useQuery, useQueryClient } from "react-query";
+import { fetchGuildChannels, fetchGuildTodos } from "../../api";
+import { useState } from "preact/hooks";
+import { useGuild } from "../App/useGuild";
+
+export const GuildTodos = () => {
+    const guild = useGuild();
+
+    const {
+        isSuccess,
+        isFetching,
+        isFetched,
+        data: guildReminders,
+    } = useQuery(fetchGuildTodos(guild));
+    const { data: channels } = useQuery(fetchGuildChannels(guild));
+
+    const [collapsed, setCollapsed] = useState(false);
+    const queryClient = useQueryClient();
+
+    return <></>;
+};

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

@@ -1,12 +1,11 @@
 import { useQuery } from "react-query";
 import { fetchGuildInfo } from "../../api";
-import { GuildReminders } from "./GuildReminders";
 import { GuildError } from "./GuildError";
-import { createPortal } from "preact/compat";
+import { createPortal, PropsWithChildren } from "preact/compat";
 import { Import } from "../Import";
 import { useGuild } from "../App/useGuild";
 
-export const Guild = () => {
+export const Guild = ({ children }: PropsWithChildren) => {
     const guild = useGuild();
     const { isSuccess, data: guildInfo } = useQuery(fetchGuildInfo(guild));
 
@@ -20,7 +19,7 @@ export const Guild = () => {
         return (
             <>
                 {importModal}
-                <GuildReminders />
+                {children}
             </>
         );
     }

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

@@ -0,0 +1,23 @@
+import { Todo as TodoT } from "../../api";
+
+type Props = {
+    todo: TodoT;
+};
+
+export const Todo = ({ todo }: Props) => {
+    return (
+        <div>
+            <textarea value={todo.value} onInput={() => null} />
+            <button onClick={() => null} class="btn save-btn">
+                <span class="icon">
+                    <i class="fa fa-save"></i>
+                </span>
+            </button>
+            <button onClick={() => null} class="btn delete-btn">
+                <span class="icon">
+                    <i class="fa fa-trash"></i>
+                </span>
+            </button>
+        </div>
+    );
+};