From e128b9848f833fa2951319c97a9a30e12a4cddfc Mon Sep 17 00:00:00 2001
From: jude <jude@jellywx.com>
Date: Sun, 7 Apr 2024 20:20:16 +0100
Subject: [PATCH] More work on todo list support

---
 reminder-dashboard/src/api.ts                 |   1 -
 .../src/components/App/index.tsx              |  46 ++---
 .../src/components/Guild/GuildReminders.tsx   | 186 +++++++++---------
 .../src/components/Guild/GuildTodos.tsx       |  53 +++--
 .../src/components/Guild/index.scss           |   5 +
 .../src/components/Guild/index.tsx            |  20 ++
 .../components/Reminder/ChannelSelector.tsx   |   4 +-
 .../components/Reminder/CreateReminder.tsx    |   1 +
 .../src/components/Reminder/EditReminder.tsx  |   1 +
 .../src/components/Reminder/TopBar/Guild.tsx  |   4 +-
 .../src/components/Reminder/TopBar/index.tsx  |   4 +-
 .../src/components/Sidebar/GuildEntry.tsx     |   3 -
 .../src/components/Sidebar/index.tsx          |   1 -
 .../src/components/Todo/CreateTodo.tsx        |  31 +++
 .../src/components/Todo/index.scss            |  10 +
 .../src/components/Todo/index.tsx             |  10 +-
 src/web/consts.rs                             |   1 +
 src/web/mod.rs                                |  40 ++++
 src/web/routes/dashboard/api/guild/todos.rs   |  42 +++-
 src/web/routes/dashboard/mod.rs               |  26 +--
 20 files changed, 317 insertions(+), 172 deletions(-)
 create mode 100644 reminder-dashboard/src/components/Guild/index.scss
 create mode 100644 reminder-dashboard/src/components/Todo/CreateTodo.tsx
 create mode 100644 reminder-dashboard/src/components/Todo/index.scss

diff --git a/reminder-dashboard/src/api.ts b/reminder-dashboard/src/api.ts
index c61549a..086b7bc 100644
--- a/reminder-dashboard/src/api.ts
+++ b/reminder-dashboard/src/api.ts
@@ -1,5 +1,4 @@
 import axios from "axios";
-import { DateTime } from "luxon";
 
 type UserInfo = {
     name: string;
diff --git a/reminder-dashboard/src/components/App/index.tsx b/reminder-dashboard/src/components/App/index.tsx
index d8230f0..a1f7bc3 100644
--- a/reminder-dashboard/src/components/App/index.tsx
+++ b/reminder-dashboard/src/components/App/index.tsx
@@ -20,28 +20,30 @@ export function App() {
                         <div class="columns is-gapless dashboard-frame">
                             <Sidebar />
                             <div class="column is-main-content">
-                                <Switch>
-                                    <Route path={"/@me/reminders"} component={User}></Route>
-                                    <Route
-                                        path={"/:guild/reminders"}
-                                        component={() => (
-                                            <Guild>
-                                                <GuildReminders />
-                                            </Guild>
-                                        )}
-                                    ></Route>
-                                    <Route
-                                        path={"/:guild/todos"}
-                                        component={
-                                            <Guild>
-                                                <GuildTodos />
-                                            </Guild>
-                                        }
-                                    ></Route>
-                                    <Route>
-                                        <Welcome />
-                                    </Route>
-                                </Switch>
+                                <div style={{ margin: "0 12px 12px 12px" }}>
+                                    <Switch>
+                                        <Route path={"/@me/reminders"} component={User}></Route>
+                                        <Route
+                                            path={"/:guild/reminders"}
+                                            component={() => (
+                                                <Guild>
+                                                    <GuildReminders />
+                                                </Guild>
+                                            )}
+                                        ></Route>
+                                        <Route
+                                            path={"/:guild/todos"}
+                                            component={() => (
+                                                <Guild>
+                                                    <GuildTodos />
+                                                </Guild>
+                                            )}
+                                        ></Route>
+                                        <Route>
+                                            <Welcome />
+                                        </Route>
+                                    </Switch>
+                                </div>
                             </div>
                         </div>
                     </Router>
diff --git a/reminder-dashboard/src/components/Guild/GuildReminders.tsx b/reminder-dashboard/src/components/Guild/GuildReminders.tsx
index 31612c7..a20590e 100644
--- a/reminder-dashboard/src/components/Guild/GuildReminders.tsx
+++ b/reminder-dashboard/src/components/Guild/GuildReminders.tsx
@@ -37,111 +37,107 @@ export const GuildReminders = () => {
     return (
         <>
             {!isFetched && <Loader />}
-            <div style={{ margin: "0 12px 12px 12px" }}>
-                <strong>Create Reminder</strong>
-                <div id={"reminderCreator"}>
-                    <CreateReminder />
-                </div>
-                <br></br>
-                <div class={"field"}>
-                    <div class={"columns is-mobile"}>
-                        <div class={"column"}>
-                            <strong>Reminders</strong>
-                        </div>
-                        <div class={"column is-narrow"}>
-                            <div class="control has-icons-left">
-                                <div class="select is-small">
-                                    <select
-                                        id="orderBy"
-                                        onInput={(ev) => {
-                                            setSort(ev.currentTarget.value as Sort);
-                                        }}
-                                    >
-                                        <option value={Sort.Time} selected={sort == Sort.Time}>
-                                            Time
-                                        </option>
-                                        <option value={Sort.Name} selected={sort == Sort.Name}>
-                                            Name
-                                        </option>
-                                        <option
-                                            value={Sort.Channel}
-                                            selected={sort == Sort.Channel}
-                                        >
-                                            Channel
-                                        </option>
-                                    </select>
-                                </div>
-                                <div class="icon is-small is-left">
-                                    <i class="fas fa-sort-amount-down"></i>
-                                </div>
+
+            <strong>Create Reminder</strong>
+            <div id={"reminderCreator"}>
+                <CreateReminder />
+            </div>
+            <br />
+            <div class={"field"}>
+                <div class={"columns is-mobile"}>
+                    <div class={"column"}>
+                        <strong>Reminders</strong>
+                    </div>
+                    <div class={"column is-narrow"}>
+                        <div class="control has-icons-left">
+                            <div class="select is-small">
+                                <select
+                                    id="orderBy"
+                                    onInput={(ev) => {
+                                        setSort(ev.currentTarget.value as Sort);
+                                    }}
+                                >
+                                    <option value={Sort.Time} selected={sort == Sort.Time}>
+                                        Time
+                                    </option>
+                                    <option value={Sort.Name} selected={sort == Sort.Name}>
+                                        Name
+                                    </option>
+                                    <option value={Sort.Channel} selected={sort == Sort.Channel}>
+                                        Channel
+                                    </option>
+                                </select>
+                            </div>
+                            <div class="icon is-small is-left">
+                                <i class="fas fa-sort-amount-down"></i>
                             </div>
                         </div>
-                        <div class={"column is-narrow"}>
-                            <div class="control has-icons-left">
-                                <div class="select is-small">
-                                    <select
-                                        id="expandAll"
-                                        onInput={(ev) => {
-                                            if (ev.currentTarget.value === "expand") {
-                                                setCollapsed(false);
-                                            } else if (ev.currentTarget.value === "collapse") {
-                                                setCollapsed(true);
-                                            }
-                                        }}
-                                    >
-                                        <option value="" selected></option>
-                                        <option value="expand">Expand All</option>
-                                        <option value="collapse">Collapse All</option>
-                                    </select>
-                                </div>
-                                <div class="icon is-small is-left">
-                                    <i class="fas fa-expand-arrows"></i>
-                                </div>
+                    </div>
+                    <div class={"column is-narrow"}>
+                        <div class="control has-icons-left">
+                            <div class="select is-small">
+                                <select
+                                    id="expandAll"
+                                    onInput={(ev) => {
+                                        if (ev.currentTarget.value === "expand") {
+                                            setCollapsed(false);
+                                        } else if (ev.currentTarget.value === "collapse") {
+                                            setCollapsed(true);
+                                        }
+                                    }}
+                                >
+                                    <option value="" selected></option>
+                                    <option value="expand">Expand All</option>
+                                    <option value="collapse">Collapse All</option>
+                                </select>
+                            </div>
+                            <div class="icon is-small is-left">
+                                <i class="fas fa-expand-arrows"></i>
                             </div>
                         </div>
                     </div>
                 </div>
+            </div>
 
-                <div id={"guildReminders"} className={isFetching ? "loading" : ""}>
-                    {isSuccess &&
-                        guildReminders
-                            .sort((r1, r2) => {
-                                if (sort === Sort.Time) {
-                                    return r1.utc_time > r2.utc_time ? 1 : -1;
-                                } else if (sort === Sort.Name) {
-                                    return r1.name > r2.name ? 1 : -1;
-                                } else {
-                                    return r1.channel > r2.channel ? 1 : -1;
-                                }
-                            })
-                            .map((reminder) => {
-                                let breaker = <></>;
-                                if (sort === Sort.Channel && channels) {
-                                    if (
-                                        prevReminder === null ||
-                                        prevReminder.channel !== reminder.channel
-                                    ) {
-                                        const channel = channels.find(
-                                            (ch) => ch.id === reminder.channel,
-                                        );
-                                        breaker = <div class={"channel-tag"}>#{channel.name}</div>;
-                                    }
+            <div id={"guildReminders"} className={isFetching ? "loading" : ""}>
+                {isSuccess &&
+                    guildReminders
+                        .sort((r1, r2) => {
+                            if (sort === Sort.Time) {
+                                return r1.utc_time > r2.utc_time ? 1 : -1;
+                            } else if (sort === Sort.Name) {
+                                return r1.name > r2.name ? 1 : -1;
+                            } else {
+                                return r1.channel > r2.channel ? 1 : -1;
+                            }
+                        })
+                        .map((reminder) => {
+                            let breaker = <></>;
+                            if (sort === Sort.Channel && channels) {
+                                if (
+                                    prevReminder === null ||
+                                    prevReminder.channel !== reminder.channel
+                                ) {
+                                    const channel = channels.find(
+                                        (ch) => ch.id === reminder.channel,
+                                    );
+                                    breaker = <div class={"channel-tag"}>#{channel.name}</div>;
                                 }
+                            }
 
-                                prevReminder = reminder;
+                            prevReminder = reminder;
 
-                                return (
-                                    <>
-                                        {breaker}
-                                        <EditReminder
-                                            key={reminder.uid}
-                                            reminder={reminder}
-                                            globalCollapse={collapsed}
-                                        />
-                                    </>
-                                );
-                            })}
-                </div>
+                            return (
+                                <>
+                                    {breaker}
+                                    <EditReminder
+                                        key={reminder.uid}
+                                        reminder={reminder}
+                                        globalCollapse={collapsed}
+                                    />
+                                </>
+                            );
+                        })}
             </div>
         </>
     );
diff --git a/reminder-dashboard/src/components/Guild/GuildTodos.tsx b/reminder-dashboard/src/components/Guild/GuildTodos.tsx
index 22b72bd..c51402e 100644
--- a/reminder-dashboard/src/components/Guild/GuildTodos.tsx
+++ b/reminder-dashboard/src/components/Guild/GuildTodos.tsx
@@ -1,21 +1,52 @@
-import { useQuery, useQueryClient } from "react-query";
+import { useQuery } from "react-query";
 import { fetchGuildChannels, fetchGuildTodos } from "../../api";
-import { useState } from "preact/hooks";
 import { useGuild } from "../App/useGuild";
+import { Todo } from "../Todo";
+import { Loader } from "../Loader";
+import { CreateTodo } from "../Todo/CreateTodo";
 
 export const GuildTodos = () => {
     const guild = useGuild();
 
-    const {
-        isSuccess,
-        isFetching,
-        isFetched,
-        data: guildReminders,
-    } = useQuery(fetchGuildTodos(guild));
+    const { isFetched, data: guildTodos } = useQuery(fetchGuildTodos(guild));
     const { data: channels } = useQuery(fetchGuildChannels(guild));
 
-    const [collapsed, setCollapsed] = useState(false);
-    const queryClient = useQueryClient();
+    if (!isFetched || !channels) {
+        return <Loader />;
+    }
 
-    return <></>;
+    const sortedTodos = guildTodos.sort((a, b) => (a.channel_id < b.channel_id ? 0 : 1));
+    let prevChannel;
+
+    return (
+        <>
+            <strong>Create Todo</strong>
+            <CreateTodo />
+            <br />
+            <strong>Todo list</strong>
+            {sortedTodos.map((todo) => {
+                if (prevChannel !== todo.channel_id) {
+                    prevChannel = todo.channel_id;
+                    if (todo.channel_id === null) {
+                        return (
+                            <>
+                                <h2>Server Todos</h2>
+                                <Todo todo={todo} key={todo.id} />
+                            </>
+                        );
+                    } else {
+                        const channel = channels.find((ch) => ch.id === todo.channel_id);
+                        return (
+                            <>
+                                <h2>#{channel.name} Todos</h2>
+                                <Todo todo={todo} key={todo.id} />
+                            </>
+                        );
+                    }
+                }
+
+                return <Todo todo={todo} key={todo.id} />;
+            })}
+        </>
+    );
 };
diff --git a/reminder-dashboard/src/components/Guild/index.scss b/reminder-dashboard/src/components/Guild/index.scss
new file mode 100644
index 0000000..f608b31
--- /dev/null
+++ b/reminder-dashboard/src/components/Guild/index.scss
@@ -0,0 +1,5 @@
+.page-links {
+    > * {
+        margin: 2px;
+    }
+}
\ No newline at end of file
diff --git a/reminder-dashboard/src/components/Guild/index.tsx b/reminder-dashboard/src/components/Guild/index.tsx
index 487154f..957f6cd 100644
--- a/reminder-dashboard/src/components/Guild/index.tsx
+++ b/reminder-dashboard/src/components/Guild/index.tsx
@@ -4,6 +4,9 @@ import { GuildError } from "./GuildError";
 import { createPortal, PropsWithChildren } from "preact/compat";
 import { Import } from "../Import";
 import { useGuild } from "../App/useGuild";
+import { Link } from "wouter";
+
+import "./index.scss";
 
 export const Guild = ({ children }: PropsWithChildren) => {
     const guild = useGuild();
@@ -19,6 +22,23 @@ export const Guild = ({ children }: PropsWithChildren) => {
         return (
             <>
                 {importModal}
+                <div class="page-links">
+                    <Link
+                        class="button is-outlined is-success is-small"
+                        href={`/${guild}/reminders`}
+                    >
+                        <span>Reminders</span>
+                        <span class="icon">
+                            <i class="fa fa-chevron-right"></i>
+                        </span>
+                    </Link>
+                    <Link class="button is-outlined is-success is-small" href={`/${guild}/todos`}>
+                        <span>Todo lists</span>
+                        <span class="icon">
+                            <i class="fa fa-chevron-right"></i>
+                        </span>
+                    </Link>
+                </div>
                 {children}
             </>
         );
diff --git a/reminder-dashboard/src/components/Reminder/ChannelSelector.tsx b/reminder-dashboard/src/components/Reminder/ChannelSelector.tsx
index a57ba96..eeb7020 100644
--- a/reminder-dashboard/src/components/Reminder/ChannelSelector.tsx
+++ b/reminder-dashboard/src/components/Reminder/ChannelSelector.tsx
@@ -1,9 +1,9 @@
 import { useQuery } from "react-query";
-import { useParams } from "wouter";
 import { fetchGuildChannels } from "../../api";
+import { useGuild } from "../App/useGuild";
 
 export const ChannelSelector = ({ channel, setChannel }) => {
-    const { guild } = useParams();
+    const guild = useGuild();
     const { isSuccess, data } = useQuery(fetchGuildChannels(guild));
 
     return (
diff --git a/reminder-dashboard/src/components/Reminder/CreateReminder.tsx b/reminder-dashboard/src/components/Reminder/CreateReminder.tsx
index 780b555..b5fada2 100644
--- a/reminder-dashboard/src/components/Reminder/CreateReminder.tsx
+++ b/reminder-dashboard/src/components/Reminder/CreateReminder.tsx
@@ -61,6 +61,7 @@ export const CreateReminder = () => {
         <ReminderContext.Provider value={[reminder, setReminder]}>
             <div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>
                 <TopBar
+                    isCreating={true}
                     toggleCollapsed={() => {
                         setCollapsed(!collapsed);
                     }}
diff --git a/reminder-dashboard/src/components/Reminder/EditReminder.tsx b/reminder-dashboard/src/components/Reminder/EditReminder.tsx
index ee1f240..f715ca1 100644
--- a/reminder-dashboard/src/components/Reminder/EditReminder.tsx
+++ b/reminder-dashboard/src/components/Reminder/EditReminder.tsx
@@ -34,6 +34,7 @@ export const EditReminder = ({ reminder: initialReminder, globalCollapse }: Prop
                 id={`reminder-${reminder.uid.slice(0, 12)}`}
             >
                 <TopBar
+                    isCreating={false}
                     toggleCollapsed={() => {
                         setCollapsed(!collapsed);
                     }}
diff --git a/reminder-dashboard/src/components/Reminder/TopBar/Guild.tsx b/reminder-dashboard/src/components/Reminder/TopBar/Guild.tsx
index 0002e0c..a4785ec 100644
--- a/reminder-dashboard/src/components/Reminder/TopBar/Guild.tsx
+++ b/reminder-dashboard/src/components/Reminder/TopBar/Guild.tsx
@@ -6,7 +6,7 @@ import { useCallback } from "preact/hooks";
 import { DateTime } from "luxon";
 import { Name } from "../Name";
 
-export const Guild = ({ toggleCollapsed }) => {
+export const Guild = ({ toggleCollapsed, isCreating }) => {
     const guild = useGuild();
     const [reminder] = useReminder();
 
@@ -55,7 +55,7 @@ export const Guild = ({ toggleCollapsed }) => {
         <div class="columns is-mobile column reminder-topbar">
             {isSuccess && <div class="invert-collapses channel-bar">#{channelName(reminder)}</div>}
             <Name />
-            <div class="time-bar">in {string}</div>
+            {!isCreating && <div class="time-bar">in {string}</div>}
             <div class="hide-button-bar">
                 <button class="button hide-box" onClick={toggleCollapsed}>
                     <span class="is-sr-only">Hide reminder</span>
diff --git a/reminder-dashboard/src/components/Reminder/TopBar/index.tsx b/reminder-dashboard/src/components/Reminder/TopBar/index.tsx
index 6c001fc..fc5f7cf 100644
--- a/reminder-dashboard/src/components/Reminder/TopBar/index.tsx
+++ b/reminder-dashboard/src/components/Reminder/TopBar/index.tsx
@@ -2,11 +2,11 @@ import { useGuild } from "../../App/useGuild";
 import { Guild } from "./Guild";
 import { User } from "./User";
 
-export const TopBar = ({ toggleCollapsed }) => {
+export const TopBar = ({ toggleCollapsed, isCreating }) => {
     const guild = useGuild();
 
     if (guild) {
-        return <Guild toggleCollapsed={toggleCollapsed} />;
+        return <Guild toggleCollapsed={toggleCollapsed} isCreating={isCreating} />;
     } else {
         return <User toggleCollapsed={toggleCollapsed} />;
     }
diff --git a/reminder-dashboard/src/components/Sidebar/GuildEntry.tsx b/reminder-dashboard/src/components/Sidebar/GuildEntry.tsx
index c22c8d7..73f204b 100644
--- a/reminder-dashboard/src/components/Sidebar/GuildEntry.tsx
+++ b/reminder-dashboard/src/components/Sidebar/GuildEntry.tsx
@@ -17,9 +17,6 @@ export const GuildEntry = ({ guild }: Props) => {
                         ? "is-active switch-pane"
                         : "switch-pane"
                 }
-                data-pane="guild"
-                data-guild={guild.id}
-                data-name={guild.name}
                 href={`/${guild.id}/reminders`}
             >
                 <>
diff --git a/reminder-dashboard/src/components/Sidebar/index.tsx b/reminder-dashboard/src/components/Sidebar/index.tsx
index 4003e00..acfa4e1 100644
--- a/reminder-dashboard/src/components/Sidebar/index.tsx
+++ b/reminder-dashboard/src/components/Sidebar/index.tsx
@@ -29,7 +29,6 @@ const SidebarContent = ({ guilds }: ContentProps) => {
                     <li>
                         <Link
                             class={loc.startsWith("/@me") ? "is-active switch-pane" : "switch-pane"}
-                            data-pane="guild"
                             href={"/@me/reminders"}
                         >
                             <>
diff --git a/reminder-dashboard/src/components/Todo/CreateTodo.tsx b/reminder-dashboard/src/components/Todo/CreateTodo.tsx
new file mode 100644
index 0000000..b082780
--- /dev/null
+++ b/reminder-dashboard/src/components/Todo/CreateTodo.tsx
@@ -0,0 +1,31 @@
+import { useQuery } from "react-query";
+import { fetchGuildChannels } from "../../api";
+import { useGuild } from "../App/useGuild";
+
+export const CreateTodo = () => {
+    const guild = useGuild();
+
+    const { isSuccess, data: channels } = useQuery(fetchGuildChannels(guild));
+
+    return (
+        <div class="todo">
+            <textarea class="input todo-input" onInput={() => null} />
+            <div class="control has-icons-left">
+                <div class="select">
+                    <select name="channel" class="channel-selector" onInput={() => {}}>
+                        <option value="">(None)</option>
+                        {isSuccess && channels.map((c) => <option value={c.id}>{c.name}</option>)}
+                    </select>
+                </div>
+                <div class="icon is-small is-left">
+                    <i class="fas fa-hashtag"></i>
+                </div>
+            </div>
+            <button onClick={() => null} class="button is-success save-btn">
+                <span class="icon">
+                    <i class="fa fa-sparkles"></i>
+                </span>
+            </button>
+        </div>
+    );
+};
diff --git a/reminder-dashboard/src/components/Todo/index.scss b/reminder-dashboard/src/components/Todo/index.scss
new file mode 100644
index 0000000..0b99085
--- /dev/null
+++ b/reminder-dashboard/src/components/Todo/index.scss
@@ -0,0 +1,10 @@
+.todo {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 6px 0;
+
+    > * {
+        margin: 0 3px;
+    }
+}
diff --git a/reminder-dashboard/src/components/Todo/index.tsx b/reminder-dashboard/src/components/Todo/index.tsx
index d412671..53a8ff4 100644
--- a/reminder-dashboard/src/components/Todo/index.tsx
+++ b/reminder-dashboard/src/components/Todo/index.tsx
@@ -1,19 +1,21 @@
 import { Todo as TodoT } from "../../api";
 
+import "./index.scss";
+
 type Props = {
     todo: TodoT;
 };
 
 export const Todo = ({ todo }: Props) => {
     return (
-        <div>
-            <textarea value={todo.value} onInput={() => null} />
-            <button onClick={() => null} class="btn save-btn">
+        <div class="todo">
+            <textarea class="input todo-input" value={todo.value} onInput={() => null} />
+            <button onClick={() => null} class="button is-success save-btn">
                 <span class="icon">
                     <i class="fa fa-save"></i>
                 </span>
             </button>
-            <button onClick={() => null} class="btn delete-btn">
+            <button onClick={() => null} class="button is-danger">
                 <span class="icon">
                     <i class="fa fa-trash"></i>
                 </span>
diff --git a/src/web/consts.rs b/src/web/consts.rs
index 52da25e..467f21b 100644
--- a/src/web/consts.rs
+++ b/src/web/consts.rs
@@ -45,4 +45,5 @@ lazy_static! {
         .map(|inner| inner.parse::<u32>().ok())
         .flatten()
         .unwrap_or(600);
+    pub static ref SALT: String = env::var("SALT").unwrap();
 }
diff --git a/src/web/mod.rs b/src/web/mod.rs
index cdcf600..98bc89a 100644
--- a/src/web/mod.rs
+++ b/src/web/mod.rs
@@ -5,6 +5,46 @@ mod catchers;
 mod guards;
 mod metrics;
 mod routes;
+pub mod string {
+    use std::{fmt::Display, str::FromStr};
+
+    use serde::{de, Deserialize, Deserializer, Serializer};
+
+    pub fn serialize<T, S>(value: &T, serializer: S) -> Result<S::Ok, S::Error>
+    where
+        T: Display,
+        S: Serializer,
+    {
+        serializer.collect_str(value)
+    }
+
+    pub fn deserialize<'de, T, D>(deserializer: D) -> Result<T, D::Error>
+    where
+        T: FromStr,
+        T::Err: Display,
+        D: Deserializer<'de>,
+    {
+        String::deserialize(deserializer)?.parse().map_err(de::Error::custom)
+    }
+}
+
+pub mod string_opt {
+    use std::fmt::Display;
+
+    use serde::{Deserializer, Serializer};
+
+    pub fn serialize<T, S>(value: &Option<T>, serializer: S) -> Result<S::Ok, S::Error>
+    where
+        T: Display,
+        S: Serializer,
+    {
+        if let Some(v) = value {
+            serializer.collect_str(v)
+        } else {
+            serializer.serialize_none()
+        }
+    }
+}
 
 use std::{env, path::Path};
 
diff --git a/src/web/routes/dashboard/api/guild/todos.rs b/src/web/routes/dashboard/api/guild/todos.rs
index 0342bfa..9acd4d8 100644
--- a/src/web/routes/dashboard/api/guild/todos.rs
+++ b/src/web/routes/dashboard/api/guild/todos.rs
@@ -1,3 +1,4 @@
+use log::warn;
 use rocket::{
     delete, get,
     http::CookieJar,
@@ -5,13 +6,23 @@ use rocket::{
     serde::json::{json, Json},
     State,
 };
-use serde::Deserialize;
+use serde::{Deserialize, Serialize};
 use serenity::prelude::Context;
 
-use crate::web::{check_authorization, guards::transaction::Transaction, routes::JsonResult};
+use crate::web::{
+    check_authorization, guards::transaction::Transaction, routes::JsonResult, string_opt,
+};
 
 #[derive(Deserialize)]
-struct CreateTodo {
+pub struct CreateTodo {
+    channel_id: Option<u64>,
+    value: String,
+}
+
+#[derive(Serialize)]
+struct GetTodo {
+    id: u32,
+    #[serde(with = "string_opt")]
     channel_id: Option<u64>,
     value: String,
 }
@@ -38,7 +49,30 @@ pub async fn get_todo(
 ) -> JsonResult {
     check_authorization(cookies, ctx.inner(), id).await?;
 
-    Ok(json!([]))
+    let todos = sqlx::query_as!(
+        GetTodo,
+        "
+        SELECT
+            todos.id,
+            channels.channel AS channel_id,
+            value
+        FROM todos
+        INNER JOIN guilds
+        ON guilds.id = todos.guild_id
+        LEFT JOIN channels
+        ON channels.id = todos.channel_id
+        WHERE guilds.guild = ?
+        ",
+        id
+    )
+    .fetch_all(transaction.executor())
+    .await
+    .map_err(|e| {
+        warn!("Error fetching todos: {:?}", e);
+        json!({ "errors": vec!["Unknown error"] })
+    })?;
+
+    Ok(json!(todos))
 }
 
 #[patch("/api/guild/<id>/todos")]
diff --git a/src/web/routes/dashboard/mod.rs b/src/web/routes/dashboard/mod.rs
index 231dd79..dca74a3 100644
--- a/src/web/routes/dashboard/mod.rs
+++ b/src/web/routes/dashboard/mod.rs
@@ -29,7 +29,7 @@ use crate::web::{
     },
     guards::transaction::Transaction,
     routes::JsonResult,
-    Error,
+    string, Error,
 };
 
 pub mod api;
@@ -348,30 +348,6 @@ where
     Ok(Some(Option::deserialize(deserializer)?))
 }
 
-// https://github.com/serde-rs/json/issues/329#issuecomment-305608405
-mod string {
-    use std::{fmt::Display, str::FromStr};
-
-    use serde::{de, Deserialize, Deserializer, Serializer};
-
-    pub fn serialize<T, S>(value: &T, serializer: S) -> Result<S::Ok, S::Error>
-    where
-        T: Display,
-        S: Serializer,
-    {
-        serializer.collect_str(value)
-    }
-
-    pub fn deserialize<'de, T, D>(deserializer: D) -> Result<T, D::Error>
-    where
-        T: FromStr,
-        T::Err: Display,
-        D: Deserializer<'de>,
-    {
-        String::deserialize(deserializer)?.parse().map_err(de::Error::custom)
-    }
-}
-
 #[derive(Deserialize)]
 pub struct DeleteReminder {
     uid: String,