Don't show empty channels

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 ? (