Add loader
This commit is contained in:
jude
parent
79e6498245
commit
90550dc2c7
@ -4,6 +4,7 @@ import { fetchGuildChannels, fetchGuildReminders } from "../../api";
|
||||
import { EditReminder } from "../Reminder/EditReminder";
|
||||
import { CreateReminder } from "../Reminder/CreateReminder";
|
||||
import { useState } from "preact/hooks";
|
||||
import { Loader } from "../Loader";
|
||||
|
||||
enum Sort {
|
||||
Time = "time",
|
||||
@ -14,7 +15,12 @@ enum Sort {
|
||||
export const GuildReminders = () => {
|
||||
const { guild } = useParams();
|
||||
|
||||
const { isSuccess, isFetching, data: guildReminders } = useQuery(fetchGuildReminders(guild));
|
||||
const {
|
||||
isSuccess,
|
||||
isFetching,
|
||||
isFetched,
|
||||
data: guildReminders,
|
||||
} = useQuery(fetchGuildReminders(guild));
|
||||
const { data: channels } = useQuery(fetchGuildChannels(guild));
|
||||
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
@ -23,108 +29,114 @@ export const GuildReminders = () => {
|
||||
let prevReminder = null;
|
||||
|
||||
return (
|
||||
<div style={{ margin: "0 12px 12px 12px" }}>
|
||||
<strong>Create Reminder</strong>
|
||||
<div id={"reminderCreator"}>
|
||||
<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"
|
||||
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>
|
||||
<>
|
||||
{!isFetched && <Loader />}
|
||||
<div style={{ margin: "0 12px 12px 12px" }}>
|
||||
<strong>Create Reminder</strong>
|
||||
<div id={"reminderCreator"}>
|
||||
<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"
|
||||
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>
|
||||
<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 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>
|
||||
|
||||
<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>;
|
||||
<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;
|
||||
prevReminder = reminder;
|
||||
|
||||
return (
|
||||
<>
|
||||
{breaker}
|
||||
<EditReminder
|
||||
key={reminder.uid}
|
||||
reminder={reminder}
|
||||
globalCollapse={collapsed}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
return (
|
||||
<>
|
||||
{breaker}
|
||||
<EditReminder
|
||||
key={reminder.uid}
|
||||
reminder={reminder}
|
||||
globalCollapse={collapsed}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
8
reminder-dashboard/src/components/Loader/index.tsx
Normal file
8
reminder-dashboard/src/components/Loader/index.tsx
Normal file
@ -0,0 +1,8 @@
|
||||
export const Loader = () => (
|
||||
<div className={"load-screen"}>
|
||||
<div>
|
||||
<p>Loading...</p>
|
||||
<i className={"fa fa-cog fa-spin"}></i>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -714,6 +714,24 @@ li.highlight {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.load-screen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
pointer-events: none;
|
||||
z-index: 999;
|
||||
font-size: 2rem;
|
||||
font-weight: bolder;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* END */
|
||||
|
||||
div.reminderError {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user