Add create todo under each channel

Sort channels for consistency

reminder-dashboard/src/api.ts

@@ -129,9 +129,13 @@ export const fetchGuildInfo = (guild: string) => ({
 export const fetchGuildChannels = (guild: string) => ({
     queryKey: ["GUILD_CHANNELS", guild],
     queryFn: () =>
-        axios.get(`/dashboard/api/guild/${guild}/channels`).then((resp) => resp.data) as Promise<
-            ChannelInfo[]
-        >,
+        axios
+            .get(`/dashboard/api/guild/${guild}/channels`)
+            .then((resp) =>
+                resp.data.sort((a: ChannelInfo, b: ChannelInfo) =>
+                    a.name == b.name ? 0 : a.name > b.name ? 1 : -1,
+                ),
+            ) as Promise<ChannelInfo[]>,
     staleTime: GUILD_INFO_STALE_TIME,
 });
 

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

@@ -19,10 +19,6 @@ export const GuildTodos = () => {
 
     return (
         <>
-            <strong>Create Todo</strong>
-            <CreateTodo />
-            <br />
-            <strong>Todo list</strong>
             <h2>Server</h2>
             {channels.map((channel) => {
                 return (
@@ -35,6 +31,7 @@ export const GuildTodos = () => {
                                     <Todo todo={todo} key={todo.id} />
                                 </>
                             ))}
+                        <CreateTodo channel={channel.id} />
                     </>
                 );
             })}

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

@@ -1,20 +1,19 @@
-import { useMutation, useQuery, useQueryClient } from "react-query";
-import { fetchGuildChannels, postGuildTodo } from "../../api";
+import { useMutation, useQueryClient } from "react-query";
+import { 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 = () => {
+export const CreateTodo = ({ channel }) => {
     const guild = useGuild();
 
     const [recentlyCreated, setRecentlyCreated] = useState(false);
-    const [newTodo, setNewTodo] = useState({ value: "", channel_id: null });
+    const [newTodo, setNewTodo] = useState({ value: "", channel_id: channel });
 
     const flash = useFlash();
 
     const queryClient = useQueryClient();
-    const { isSuccess, data: channels } = useQuery(fetchGuildChannels(guild));
     const mutation = useMutation({
         ...postGuildTodo(guild),
         onSuccess: (data) => {
@@ -45,26 +44,6 @@ export const CreateTodo = () => {
                 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={(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>
-                </div>
-                <div class="icon is-small is-left">
-                    <i class="fas fa-hashtag"></i>
-                </div>
-            </div>
             <button onClick={() => mutation.mutate(newTodo)} class="button is-success save-btn">
                 <span class="icon">
                     {mutation.isLoading ? (