jude/reminder-dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add sort options

Browse Source
This commit is contained in:
jude 2023-11-27 18:32:53 +00:00
parent 85a9a872c9
commit 4c10682de8
3 changed files with 104 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/Guild/GuildReminders.tsx
View File

@ -1,13 +1,26 @@
import { useParams } from "wouter";
import { useQuery } from "react-query";
import { fetchGuildReminders } from "../../api";
import { fetchGuildChannels, fetchGuildReminders } from "../../api";
import { EditReminder } from "../Reminder/EditReminder";
import { CreateReminder } from "../Reminder/CreateReminder";
import { useState } from "preact/hooks";
enum Sort {
Time = "time",
Name = "name",
Channel = "channel",
}
export const GuildReminders = () => {
const { guild } = useParams();
const { isSuccess, data: guildReminders } = useQuery(fetchGuildReminders(guild));
const { data: channels } = useQuery(fetchGuildChannels(guild));
const [collapsed, setCollapsed] = useState(false);
const [sort, setSort] = useState(Sort.Time);
let prevReminder = null;
return (
<div style={{ margin: "0 12px 12px 12px" }}>
@ -24,12 +37,21 @@ export const GuildReminders = () => {
<div class={"column is-narrow"}>
<div class="control has-icons-left">
<div class="select is-small">
<select id="orderBy">
<option value="time" selected>
<select
id="orderBy"
onInput={(ev) => {
setSort(ev.currentTarget.value as Sort);
}}
>
<option value={Sort.Time} selected={sort == Sort.Time}>
Time
</option>
<option value="name">Name</option>
<option value="channel">Channel</option>
<option value={Sort.Name} selected={sort == Sort.Name}>
Name
</option>
<option value={Sort.Channel} selected={sort == Sort.Channel}>
Channel
</option>
</select>
</div>
<div class="icon is-small is-left">
@ -40,7 +62,16 @@ export const GuildReminders = () => {
<div class={"column is-narrow"}>
<div class="control has-icons-left">
<div class="select is-small">
<select id="expandAll">
<select
id="expandAll"
onInput={(ev) => {
if (ev.currentTarget.value === "expand") {
setCollapsed(false);
} else if (ev.currentTarget.value === "collapse") {
setCollapsed(true);
}
}}
>
<option value="" selected></option>
<option value="expand">Expand All</option>
<option value="collapse">Collapse All</option>
@ -56,9 +87,43 @@ export const GuildReminders = () => {
<div id={"guildReminders"}>
{isSuccess &&
guildReminders.map((reminder) => (
<EditReminder reminder={reminder}></EditReminder>
))}
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 = <div class={"channel-tag"}>#{channel.name}</div>;
}
}
prevReminder = reminder;
return (
<>
{breaker}
<EditReminder
key={reminder.uid}
reminder={reminder}
globalCollapse={collapsed}
/>
</>
);
})}
</div>
</div>
);

27
src/components/Reminder/ButtonRow/EditButtonRow.tsx
View File

@ -16,24 +16,33 @@ export const EditButtonRow = () => {
const iconFlashTimeout = useRef(0);
console.log(reminder.enabled);
console.log(reminder.content);
const flash = useFlash();
const mutation = useMutation({
...patchGuildReminder(guild),
onSuccess: () => {
onSuccess: (response) => {
queryClient.invalidateQueries({
queryKey: ["GUILD_REMINDERS", guild],
});
setRecentlySaved(true);
if (iconFlashTimeout.current !== null) {
clearTimeout(iconFlashTimeout.current);
}
iconFlashTimeout.current = setTimeout(() => {
if (response.data.errors.length > 0) {
setRecentlySaved(false);
}, ICON_FLASH_TIME);
for (const error of response.data.errors) {
flash({ message: error, type: "error" });
}
} else {
setRecentlySaved(true);
iconFlashTimeout.current = setTimeout(() => {
setRecentlySaved(false);
}, ICON_FLASH_TIME);
setReminder(response.data.reminder);
}
},
});
@ -64,10 +73,6 @@ export const EditButtonRow = () => {
<button
class="button is-warning"
onClick={() => {
setReminder((r) => ({
...r,
enabled: !r.enabled,
}));
mutation.mutate({
...reminder,
enabled: !reminder.enabled,

17
src/components/Reminder/EditReminder.tsx
View File

@ -1,5 +1,5 @@
import { Reminder } from "../../api";
import { useState } from "preact/hooks";
import { useEffect, useState } from "preact/hooks";
import { EditButtonRow } from "./ButtonRow/EditButtonRow";
import { Message } from "./Message";
import { Settings } from "./Settings";
@ -8,13 +8,24 @@ import { TopBar } from "./TopBar";
type Props = {
reminder: Reminder;
globalCollapse: boolean;
};
export const EditReminder = ({ reminder: initialReminder }: Props) => {
export const EditReminder = ({ reminder: initialReminder, globalCollapse }: Props) => {
const [propReminder, setPropReminder] = useState(initialReminder);
const [reminder, setReminder] = useState(initialReminder);
const [collapsed, setCollapsed] = useState(false);
useEffect(() => {
setCollapsed(globalCollapse);
}, [globalCollapse]);
// Reminder updated from web response
if (propReminder !== initialReminder) {
setReminder(initialReminder);
setPropReminder(initialReminder);
}
return (
<ReminderContext.Provider value={[reminder, setReminder]}>
<div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>