145 lines
5.9 KiB
TypeScript
145 lines
5.9 KiB
TypeScript
import { useQuery, useQueryClient } from "react-query";
|
|
import { fetchGuildChannels, fetchGuildReminders } from "../../api";
|
|
import { EditReminder } from "../Reminder/EditReminder";
|
|
import { CreateReminder } from "../Reminder/CreateReminder";
|
|
import { useCallback, useState } from "preact/hooks";
|
|
import { Loader } from "../Loader";
|
|
import { useGuild } from "../App/useGuild";
|
|
|
|
enum Sort {
|
|
Time = "time",
|
|
Name = "name",
|
|
Channel = "channel",
|
|
}
|
|
|
|
export const GuildReminders = () => {
|
|
const guild = useGuild();
|
|
|
|
const {
|
|
isSuccess,
|
|
isFetching,
|
|
isFetched,
|
|
data: guildReminders,
|
|
} = useQuery(fetchGuildReminders(guild));
|
|
const { data: channels } = useQuery(fetchGuildChannels(guild));
|
|
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
const [sort, _setSort] = useState(Sort.Time);
|
|
const queryClient = useQueryClient();
|
|
|
|
let prevReminder = null;
|
|
|
|
const setSort = useCallback((sort) => {
|
|
queryClient.invalidateQueries(["GUILD_REMINDERS"]);
|
|
_setSort(sort);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
{!isFetched && <Loader />}
|
|
|
|
<strong>Create Reminder</strong>
|
|
<div id={"reminderCreator"}>
|
|
<CreateReminder />
|
|
</div>
|
|
<br />
|
|
<div class={"field"}>
|
|
<div class={"columns is-mobile"}>
|
|
<div class={"column"}>
|
|
<strong>Reminders</strong>
|
|
</div>
|
|
<div class={"column is-narrow"}>
|
|
<div class="control has-icons-left">
|
|
<div class="select is-small">
|
|
<select
|
|
id="orderBy"
|
|
onInput={(ev) => {
|
|
setSort(ev.currentTarget.value as Sort);
|
|
}}
|
|
>
|
|
<option value={Sort.Time} selected={sort == Sort.Time}>
|
|
Time
|
|
</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">
|
|
<i class="fas fa-sort-amount-down"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class={"column is-narrow"}>
|
|
<div class="control has-icons-left">
|
|
<div class="select is-small">
|
|
<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>
|
|
</select>
|
|
</div>
|
|
<div class="icon is-small is-left">
|
|
<i class="fas fa-expand-arrows"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id={"guildReminders"} className={isFetching ? "loading" : ""}>
|
|
{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 = <div class={"channel-tag"}>#{channel.name}</div>;
|
|
}
|
|
}
|
|
|
|
prevReminder = reminder;
|
|
|
|
return (
|
|
<>
|
|
{breaker}
|
|
<EditReminder
|
|
key={reminder.uid}
|
|
reminder={reminder}
|
|
globalCollapse={collapsed}
|
|
/>
|
|
</>
|
|
);
|
|
})}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|