Don't show empty channels

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

@@ -1,7 +1,8 @@
 import { useQuery } from "react-query";
-import { fetchGuildChannels, fetchGuildTodos } from "../../api";
+import { ChannelInfo, fetchGuildChannels, fetchGuildTodos } from "../../api";
 import { useGuild } from "../App/useGuild";
 import { Todo } from "../Todo";
+import { Todo as TodoT } from "../../api";
 import { Loader } from "../Loader";
 import { CreateTodo } from "../Todo/CreateTodo";
 
@@ -15,34 +16,47 @@ export const GuildTodos = () => {
         return <Loader />;
     }
 
-    const sortedTodos = guildTodos.sort((a, b) => (a.id > b.id ? -1 : 1));
+    const sortedTodos = guildTodos.sort((a, b) => (a.id < b.id ? -1 : 1));
+    const globalTodos = sortedTodos.filter((todo) => todo.channel_id === null);
 
     return (
         <>
-            <h2>Server</h2>
-            {sortedTodos
-                .filter((todo) => todo.channel_id === null)
-                .map((todo) => (
-                    <>
-                        <Todo todo={todo} key={todo.id} />
-                    </>
-                ))}
-            <CreateTodo channel={null} />
-            {channels.map((channel) => {
-                return (
-                    <>
-                        <h2>#{channel.name}</h2>
-                        {sortedTodos
-                            .filter((todo) => todo.channel_id === channel.id)
-                            .map((todo) => (
+            <strong>Create todo list</strong>
+            <CreateTodo channel={null} showSelector={true} />
+            <strong>Todo lists</strong>
+            {globalTodos.length > 0 && (
+                <>
+                    <h2>Server</h2>
+                    {globalTodos.map((todo) => (
+                        <>
+                            <Todo todo={todo} key={todo.id} />
+                        </>
+                    ))}
+                    <CreateTodo channel={null} />
+                </>
+            )}
+            {channels
+                .map(
+                    (channel) =>
+                        [channel, sortedTodos.filter((todo) => todo.channel_id === channel.id)] as [
+                            ChannelInfo,
+                            TodoT[],
+                        ],
+                )
+                .filter(([_, todos]) => todos.length > 0)
+                .map(([channel, todos]) => {
+                    return (
+                        <>
+                            <h2>#{channel.name}</h2>
+                            {todos.map((todo) => (
                                 <>
                                     <Todo todo={todo} key={todo.id} />
                                 </>
                             ))}
-                        <CreateTodo channel={channel.id} />
-                    </>
-                );
-            })}
+                            <CreateTodo channel={channel.id} />
+                        </>
+                    );
+                })}
         </>
     );
 };

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

@@ -1,11 +1,11 @@
-import { useMutation, useQueryClient } from "react-query";
-import { postGuildTodo } 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 = ({ channel }) => {
+export const CreateTodo = ({ showSelector = false, channel }) => {
     const guild = useGuild();
 
     const [recentlyCreated, setRecentlyCreated] = useState(false);
@@ -13,6 +13,8 @@ export const CreateTodo = ({ channel }) => {
 
     const flash = useFlash();
 
+    const { isSuccess, data: channels } = useQuery(fetchGuildChannels(guild));
+
     const queryClient = useQueryClient();
     const mutation = useMutation({
         ...postGuildTodo(guild),
@@ -44,6 +46,29 @@ export const CreateTodo = ({ channel }) => {
                 class="input todo-input"
                 onInput={(ev) => setNewTodo((todo) => ({ ...todo, value: ev.currentTarget.value }))}
             />
+            {showSelector && (
+                <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 ? (