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

Add overlay when data fetching

Browse Source
This commit is contained in:
jude
2024-02-24 17:23:31 +00:00
parent a8ef3d03f9
commit 79e6498245
13 changed files with 168 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
reminder-dashboard/README.md
View File

@ -4,16 +4,16 @@ The re-re-rewrite of the dashboard.
## Why
The existing beta variant of the dashboard is written using vanilla JavaScript. This is fine,
but annoying to update. This would've been okay if I was more dedicated to updating the vanilla
The existing beta variant of the dashboard is written using vanilla JavaScript. This is fine,
but annoying to update. This would've been okay if I was more dedicated to updating the vanilla
JavaScript too, but I want to experiment with "new" things.
This also allows me to expand my frontend skills, which is relevant to part of my job.
## Developing
1. Download the parent repo: https://gitea.jellypro.xyz/jude/reminder-bot
2. Initialise the submodules: `git pull --recurse-submodules`
3. Run both `npm run dev` and `cargo run`
4. Symlink assets: assuming cloned into `$HOME`, `ln -s $HOME/reminder-bot/reminder-dashboard/dist/index.html $HOME/reminder-bot/web/static/index.html` and
`ln -s $HOME/reminder-bot/reminder-dashboard/dist/static/assets $HOME/reminder-bot/web/static/assets`
1. Run both `npm run dev` and `cargo run`
2. Symlink assets: assuming cloned
into `$HOME`, `ln -s $HOME/reminder-bot/reminder-dashboard/dist/index.html $HOME/reminder-bot/web/static/index.html`
and
`ln -s $HOME/reminder-bot/reminder-dashboard/dist/static/assets $HOME/reminder-bot/web/static/assets`

4
reminder-dashboard/src/components/Guild/GuildReminders.tsx
View File

@ -14,7 +14,7 @@ enum Sort {
export const GuildReminders = () => {
const { guild } = useParams();
const { isSuccess, data: guildReminders } = useQuery(fetchGuildReminders(guild));
const { isSuccess, isFetching, data: guildReminders } = useQuery(fetchGuildReminders(guild));
const { data: channels } = useQuery(fetchGuildChannels(guild));
const [collapsed, setCollapsed] = useState(false);
@ -85,7 +85,7 @@ export const GuildReminders = () => {
</div>
</div>
<div id={"guildReminders"}>
<div id={"guildReminders"} className={isFetching ? "loading" : ""}>
{isSuccess &&
guildReminders
.sort((r1, r2) => {