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 { EditReminder } from "../Reminder/EditReminder";
|
||||||
import { CreateReminder } from "../Reminder/CreateReminder";
|
import { CreateReminder } from "../Reminder/CreateReminder";
|
||||||
import { useState } from "preact/hooks";
|
import { useState } from "preact/hooks";
|
||||||
|
import { Loader } from "../Loader";
|
||||||
|
|
||||||
enum Sort {
|
enum Sort {
|
||||||
Time = "time",
|
Time = "time",
|
||||||
|
|
@ -14,7 +15,12 @@ enum Sort {
|
||||||
export const GuildReminders = () => {
|
export const GuildReminders = () => {
|
||||||
const { guild } = useParams();
|
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 { data: channels } = useQuery(fetchGuildChannels(guild));
|
||||||
|
|
||||||
const [collapsed, setCollapsed] = useState(false);
|
const [collapsed, setCollapsed] = useState(false);
|
||||||
|
|
@ -23,108 +29,114 @@ export const GuildReminders = () => {
|
||||||
let prevReminder = null;
|
let prevReminder = null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ margin: "0 12px 12px 12px" }}>
|
<>
|
||||||
<strong>Create Reminder</strong>
|
{!isFetched && <Loader />}
|
||||||
<div id={"reminderCreator"}>
|
<div style={{ margin: "0 12px 12px 12px" }}>
|
||||||
<CreateReminder />
|
<strong>Create Reminder</strong>
|
||||||
</div>
|
<div id={"reminderCreator"}>
|
||||||
<br></br>
|
<CreateReminder />
|
||||||
<div class={"field"}>
|
</div>
|
||||||
<div class={"columns is-mobile"}>
|
<br></br>
|
||||||
<div class={"column"}>
|
<div class={"field"}>
|
||||||
<strong>Reminders</strong>
|
<div class={"columns is-mobile"}>
|
||||||
</div>
|
<div class={"column"}>
|
||||||
<div class={"column is-narrow"}>
|
<strong>Reminders</strong>
|
||||||
<div class="control has-icons-left">
|
</div>
|
||||||
<div class="select is-small">
|
<div class={"column is-narrow"}>
|
||||||
<select
|
<div class="control has-icons-left">
|
||||||
id="orderBy"
|
<div class="select is-small">
|
||||||
onInput={(ev) => {
|
<select
|
||||||
setSort(ev.currentTarget.value as Sort);
|
id="orderBy"
|
||||||
}}
|
onInput={(ev) => {
|
||||||
>
|
setSort(ev.currentTarget.value as Sort);
|
||||||
<option value={Sort.Time} selected={sort == Sort.Time}>
|
}}
|
||||||
Time
|
>
|
||||||
</option>
|
<option value={Sort.Time} selected={sort == Sort.Time}>
|
||||||
<option value={Sort.Name} selected={sort == Sort.Name}>
|
Time
|
||||||
Name
|
</option>
|
||||||
</option>
|
<option value={Sort.Name} selected={sort == Sort.Name}>
|
||||||
<option value={Sort.Channel} selected={sort == Sort.Channel}>
|
Name
|
||||||
Channel
|
</option>
|
||||||
</option>
|
<option
|
||||||
</select>
|
value={Sort.Channel}
|
||||||
</div>
|
selected={sort == Sort.Channel}
|
||||||
<div class="icon is-small is-left">
|
>
|
||||||
<i class="fas fa-sort-amount-down"></i>
|
Channel
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="icon is-small is-left">
|
||||||
|
<i class="fas fa-sort-amount-down"></i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class={"column is-narrow"}>
|
||||||
<div class={"column is-narrow"}>
|
<div class="control has-icons-left">
|
||||||
<div class="control has-icons-left">
|
<div class="select is-small">
|
||||||
<div class="select is-small">
|
<select
|
||||||
<select
|
id="expandAll"
|
||||||
id="expandAll"
|
onInput={(ev) => {
|
||||||
onInput={(ev) => {
|
if (ev.currentTarget.value === "expand") {
|
||||||
if (ev.currentTarget.value === "expand") {
|
setCollapsed(false);
|
||||||
setCollapsed(false);
|
} else if (ev.currentTarget.value === "collapse") {
|
||||||
} else if (ev.currentTarget.value === "collapse") {
|
setCollapsed(true);
|
||||||
setCollapsed(true);
|
}
|
||||||
}
|
}}
|
||||||
}}
|
>
|
||||||
>
|
<option value="" selected></option>
|
||||||
<option value="" selected></option>
|
<option value="expand">Expand All</option>
|
||||||
<option value="expand">Expand All</option>
|
<option value="collapse">Collapse All</option>
|
||||||
<option value="collapse">Collapse All</option>
|
</select>
|
||||||
</select>
|
</div>
|
||||||
</div>
|
<div class="icon is-small is-left">
|
||||||
<div class="icon is-small is-left">
|
<i class="fas fa-expand-arrows"></i>
|
||||||
<i class="fas fa-expand-arrows"></i>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id={"guildReminders"} className={isFetching ? "loading" : ""}>
|
<div id={"guildReminders"} className={isFetching ? "loading" : ""}>
|
||||||
{isSuccess &&
|
{isSuccess &&
|
||||||
guildReminders
|
guildReminders
|
||||||
.sort((r1, r2) => {
|
.sort((r1, r2) => {
|
||||||
if (sort === Sort.Time) {
|
if (sort === Sort.Time) {
|
||||||
return r1.utc_time > r2.utc_time ? 1 : -1;
|
return r1.utc_time > r2.utc_time ? 1 : -1;
|
||||||
} else if (sort === Sort.Name) {
|
} else if (sort === Sort.Name) {
|
||||||
return r1.name > r2.name ? 1 : -1;
|
return r1.name > r2.name ? 1 : -1;
|
||||||
} else {
|
} else {
|
||||||
return r1.channel > r2.channel ? 1 : -1;
|
return r1.channel > r2.channel ? 1 : -1;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.map((reminder) => {
|
.map((reminder) => {
|
||||||
let breaker = <></>;
|
let breaker = <></>;
|
||||||
if (sort === Sort.Channel && channels) {
|
if (sort === Sort.Channel && channels) {
|
||||||
if (
|
if (
|
||||||
prevReminder === null ||
|
prevReminder === null ||
|
||||||
prevReminder.channel !== reminder.channel
|
prevReminder.channel !== reminder.channel
|
||||||
) {
|
) {
|
||||||
const channel = channels.find(
|
const channel = channels.find(
|
||||||
(ch) => ch.id === reminder.channel,
|
(ch) => ch.id === reminder.channel,
|
||||||
);
|
);
|
||||||
breaker = <div class={"channel-tag"}>#{channel.name}</div>;
|
breaker = <div class={"channel-tag"}>#{channel.name}</div>;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
prevReminder = reminder;
|
prevReminder = reminder;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{breaker}
|
{breaker}
|
||||||
<EditReminder
|
<EditReminder
|
||||||
key={reminder.uid}
|
key={reminder.uid}
|
||||||
reminder={reminder}
|
reminder={reminder}
|
||||||
globalCollapse={collapsed}
|
globalCollapse={collapsed}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
</div>
|
||||||
</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;
|
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 */
|
/* END */
|
||||||
|
|
||||||
div.reminderError {
|
div.reminderError {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user