65 lines
2.7 KiB
TypeScript
65 lines
2.7 KiB
TypeScript
import { useParams } from "wouter";
|
|
import { useQuery } from "react-query";
|
|
import { fetchGuildReminders } from "../../api";
|
|
import { QueryKeys } from "../../consts";
|
|
import { EditReminder } from "../Reminder/EditReminder";
|
|
import { CreateReminder } from "../Reminder/CreateReminder";
|
|
|
|
export const GuildReminders = () => {
|
|
const { guild } = useParams();
|
|
|
|
const { isSuccess, data } = useQuery(fetchGuildReminders(guild));
|
|
|
|
return (
|
|
<div style={{ margin: "0 12px 12px 12px" }}>
|
|
<strong>Create Reminder</strong>
|
|
<div id={"reminderCreator"}>
|
|
<CreateReminder></CreateReminder>
|
|
</div>
|
|
<br></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">
|
|
<option value="time" selected>
|
|
Time
|
|
</option>
|
|
<option value="name">Name</option>
|
|
<option value="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">
|
|
<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"}>
|
|
{isSuccess &&
|
|
data.map((reminder) => <EditReminder reminder={reminder}></EditReminder>)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|