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 && (
+
+
+
+
+
+
+
+
+ )}