diff --git a/reminder-dashboard/src/components/Guild/GuildTodos.tsx b/reminder-dashboard/src/components/Guild/GuildTodos.tsx index 6165c9f..f329df8 100644 --- a/reminder-dashboard/src/components/Guild/GuildTodos.tsx +++ b/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 ; } - 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 ( <> -

Server

- {sortedTodos - .filter((todo) => todo.channel_id === null) - .map((todo) => ( - <> - - - ))} - - {channels.map((channel) => { - return ( - <> -

#{channel.name}

- {sortedTodos - .filter((todo) => todo.channel_id === channel.id) - .map((todo) => ( + Create todo list + + Todo lists + {globalTodos.length > 0 && ( + <> +

Server

+ {globalTodos.map((todo) => ( + <> + + + ))} + + + )} + {channels + .map( + (channel) => + [channel, sortedTodos.filter((todo) => todo.channel_id === channel.id)] as [ + ChannelInfo, + TodoT[], + ], + ) + .filter(([_, todos]) => todos.length > 0) + .map(([channel, todos]) => { + return ( + <> +

#{channel.name}

+ {todos.map((todo) => ( <> ))} - - - ); - })} + + + ); + })} ); }; diff --git a/reminder-dashboard/src/components/Todo/CreateTodo.tsx b/reminder-dashboard/src/components/Todo/CreateTodo.tsx index 224efd1..3a72804 100644 --- a/reminder-dashboard/src/components/Todo/CreateTodo.tsx +++ b/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 && ( +
+
+ +
+
+ +
+
+ )}