diff --git a/reminder-dashboard/src/api.ts b/reminder-dashboard/src/api.ts index c61549a..086b7bc 100644 --- a/reminder-dashboard/src/api.ts +++ b/reminder-dashboard/src/api.ts @@ -1,5 +1,4 @@ import axios from "axios"; -import { DateTime } from "luxon"; type UserInfo = { name: string; diff --git a/reminder-dashboard/src/components/App/index.tsx b/reminder-dashboard/src/components/App/index.tsx index d8230f0..a1f7bc3 100644 --- a/reminder-dashboard/src/components/App/index.tsx +++ b/reminder-dashboard/src/components/App/index.tsx @@ -20,28 +20,30 @@ export function App() {
- - - ( - - - - )} - > - - - - } - > - - - - +
+ + + ( + + + + )} + > + ( + + + + )} + > + + + + +
diff --git a/reminder-dashboard/src/components/Guild/GuildReminders.tsx b/reminder-dashboard/src/components/Guild/GuildReminders.tsx index 31612c7..a20590e 100644 --- a/reminder-dashboard/src/components/Guild/GuildReminders.tsx +++ b/reminder-dashboard/src/components/Guild/GuildReminders.tsx @@ -37,111 +37,107 @@ export const GuildReminders = () => { return ( <> {!isFetched && } -
- Create Reminder -
- -
-

-
-
-
- Reminders -
-
-
-
- -
-
- -
+ + Create Reminder +
+ +
+
+
+
+
+ Reminders +
+
+
+
+ +
+
+
-
-
-
- -
-
- -
+
+
+
+
+ +
+
+
+
-
- {isSuccess && - guildReminders - .sort((r1, r2) => { - if (sort === Sort.Time) { - return r1.utc_time > r2.utc_time ? 1 : -1; - } else if (sort === Sort.Name) { - return r1.name > r2.name ? 1 : -1; - } else { - return r1.channel > r2.channel ? 1 : -1; - } - }) - .map((reminder) => { - let breaker = <>; - if (sort === Sort.Channel && channels) { - if ( - prevReminder === null || - prevReminder.channel !== reminder.channel - ) { - const channel = channels.find( - (ch) => ch.id === reminder.channel, - ); - breaker =
#{channel.name}
; - } +
+ {isSuccess && + guildReminders + .sort((r1, r2) => { + if (sort === Sort.Time) { + return r1.utc_time > r2.utc_time ? 1 : -1; + } else if (sort === Sort.Name) { + return r1.name > r2.name ? 1 : -1; + } else { + return r1.channel > r2.channel ? 1 : -1; + } + }) + .map((reminder) => { + let breaker = <>; + if (sort === Sort.Channel && channels) { + if ( + prevReminder === null || + prevReminder.channel !== reminder.channel + ) { + const channel = channels.find( + (ch) => ch.id === reminder.channel, + ); + breaker =
#{channel.name}
; } + } - prevReminder = reminder; + prevReminder = reminder; - return ( - <> - {breaker} - - - ); - })} -
+ return ( + <> + {breaker} + + + ); + })}
); diff --git a/reminder-dashboard/src/components/Guild/GuildTodos.tsx b/reminder-dashboard/src/components/Guild/GuildTodos.tsx index 22b72bd..c51402e 100644 --- a/reminder-dashboard/src/components/Guild/GuildTodos.tsx +++ b/reminder-dashboard/src/components/Guild/GuildTodos.tsx @@ -1,21 +1,52 @@ -import { useQuery, useQueryClient } from "react-query"; +import { useQuery } from "react-query"; import { fetchGuildChannels, fetchGuildTodos } from "../../api"; -import { useState } from "preact/hooks"; import { useGuild } from "../App/useGuild"; +import { Todo } from "../Todo"; +import { Loader } from "../Loader"; +import { CreateTodo } from "../Todo/CreateTodo"; export const GuildTodos = () => { const guild = useGuild(); - const { - isSuccess, - isFetching, - isFetched, - data: guildReminders, - } = useQuery(fetchGuildTodos(guild)); + const { isFetched, data: guildTodos } = useQuery(fetchGuildTodos(guild)); const { data: channels } = useQuery(fetchGuildChannels(guild)); - const [collapsed, setCollapsed] = useState(false); - const queryClient = useQueryClient(); + if (!isFetched || !channels) { + return ; + } - return <>; + const sortedTodos = guildTodos.sort((a, b) => (a.channel_id < b.channel_id ? 0 : 1)); + let prevChannel; + + return ( + <> + Create Todo + +
+ Todo list + {sortedTodos.map((todo) => { + if (prevChannel !== todo.channel_id) { + prevChannel = todo.channel_id; + if (todo.channel_id === null) { + return ( + <> +

Server Todos

+ + + ); + } else { + const channel = channels.find((ch) => ch.id === todo.channel_id); + return ( + <> +

#{channel.name} Todos

+ + + ); + } + } + + return ; + })} + + ); }; diff --git a/reminder-dashboard/src/components/Guild/index.scss b/reminder-dashboard/src/components/Guild/index.scss new file mode 100644 index 0000000..f608b31 --- /dev/null +++ b/reminder-dashboard/src/components/Guild/index.scss @@ -0,0 +1,5 @@ +.page-links { + > * { + margin: 2px; + } +} \ No newline at end of file diff --git a/reminder-dashboard/src/components/Guild/index.tsx b/reminder-dashboard/src/components/Guild/index.tsx index 487154f..957f6cd 100644 --- a/reminder-dashboard/src/components/Guild/index.tsx +++ b/reminder-dashboard/src/components/Guild/index.tsx @@ -4,6 +4,9 @@ import { GuildError } from "./GuildError"; import { createPortal, PropsWithChildren } from "preact/compat"; import { Import } from "../Import"; import { useGuild } from "../App/useGuild"; +import { Link } from "wouter"; + +import "./index.scss"; export const Guild = ({ children }: PropsWithChildren) => { const guild = useGuild(); @@ -19,6 +22,23 @@ export const Guild = ({ children }: PropsWithChildren) => { return ( <> {importModal} +
+ + Reminders + + + + + + Todo lists + + + + +
{children} ); diff --git a/reminder-dashboard/src/components/Reminder/ChannelSelector.tsx b/reminder-dashboard/src/components/Reminder/ChannelSelector.tsx index a57ba96..eeb7020 100644 --- a/reminder-dashboard/src/components/Reminder/ChannelSelector.tsx +++ b/reminder-dashboard/src/components/Reminder/ChannelSelector.tsx @@ -1,9 +1,9 @@ import { useQuery } from "react-query"; -import { useParams } from "wouter"; import { fetchGuildChannels } from "../../api"; +import { useGuild } from "../App/useGuild"; export const ChannelSelector = ({ channel, setChannel }) => { - const { guild } = useParams(); + const guild = useGuild(); const { isSuccess, data } = useQuery(fetchGuildChannels(guild)); return ( diff --git a/reminder-dashboard/src/components/Reminder/CreateReminder.tsx b/reminder-dashboard/src/components/Reminder/CreateReminder.tsx index 780b555..b5fada2 100644 --- a/reminder-dashboard/src/components/Reminder/CreateReminder.tsx +++ b/reminder-dashboard/src/components/Reminder/CreateReminder.tsx @@ -61,6 +61,7 @@ export const CreateReminder = () => {
{ setCollapsed(!collapsed); }} diff --git a/reminder-dashboard/src/components/Reminder/EditReminder.tsx b/reminder-dashboard/src/components/Reminder/EditReminder.tsx index ee1f240..f715ca1 100644 --- a/reminder-dashboard/src/components/Reminder/EditReminder.tsx +++ b/reminder-dashboard/src/components/Reminder/EditReminder.tsx @@ -34,6 +34,7 @@ export const EditReminder = ({ reminder: initialReminder, globalCollapse }: Prop id={`reminder-${reminder.uid.slice(0, 12)}`} > { setCollapsed(!collapsed); }} diff --git a/reminder-dashboard/src/components/Reminder/TopBar/Guild.tsx b/reminder-dashboard/src/components/Reminder/TopBar/Guild.tsx index 0002e0c..a4785ec 100644 --- a/reminder-dashboard/src/components/Reminder/TopBar/Guild.tsx +++ b/reminder-dashboard/src/components/Reminder/TopBar/Guild.tsx @@ -6,7 +6,7 @@ import { useCallback } from "preact/hooks"; import { DateTime } from "luxon"; import { Name } from "../Name"; -export const Guild = ({ toggleCollapsed }) => { +export const Guild = ({ toggleCollapsed, isCreating }) => { const guild = useGuild(); const [reminder] = useReminder(); @@ -55,7 +55,7 @@ export const Guild = ({ toggleCollapsed }) => {
{isSuccess &&
#{channelName(reminder)}
} -
in {string}
+ {!isCreating &&
in {string}
}