Add overlay when data fetching

.gitignore

@@ -2,7 +2,7 @@ target
 .env
 /venv
 .cargo
-/.idea
+.idea
 web/static/index.html
 web/static/assets
 # Logs
@@ -22,7 +22,6 @@ dist-ssr
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
-.idea
 .DS_Store
 *.suo
 *.ntvs*

Cargo.lock

@@ -2358,7 +2358,7 @@ checksum = "c08c74e62047bb2de4ff487b251e4a92e24f48745648451635cec7d591162d9f"
 
 [[package]]
 name = "reminder-rs"
-version = "1.7.0-rc1"
+version = "1.7.0-rc2"
 dependencies = [
  "base64 0.21.7",
  "chrono",

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "reminder-rs"
-version = "1.7.0-rc1"
+version = "1.7.0-rc2"
 authors = ["Jude Southworth <judesouthworth@pm.me>"]
 edition = "2021"
 license = "AGPL-3.0 only"

reminder-dashboard/README.md

@@ -12,8 +12,8 @@ This also allows me to expand my frontend skills, which is relevant to part of m
 
 ## 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 
+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`

reminder-dashboard/src/components/Guild/GuildReminders.tsx

@@ -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) => {

web/src/macros.rs

@@ -97,3 +97,15 @@ macro_rules! json_err {
         Err(json!({ "error": $message }))
     };
 }
+
+macro_rules! path {
+    ($path:expr) => {{
+        use rocket::fs::relative;
+
+        if Path::new(concat!("/lib/reminder-rs/", $path)).exists() {
+            concat!("/lib/reminder-rs/", $path)
+        } else {
+            relative!($path)
+        }
+    }};
+}

web/src/routes/dashboard/mod.rs

@@ -2,12 +2,8 @@ use std::path::Path;
 
 use chrono::{naive::NaiveDateTime, Utc};
 use rand::{rngs::OsRng, seq::IteratorRandom};
-use rocket::{
-    fs::{relative, NamedFile},
-    http::CookieJar,
-    response::Redirect,
-    serde::json::json,
-};
+use rocket::{fs::NamedFile, http::CookieJar, response::Redirect, serde::json::json};
+use rocket_dyn_templates::Template;
 use secrecy::ExposeSecret;
 use serde::{de, Deserialize, Deserializer, Serialize, Serializer};
 use serenity::{
@@ -19,6 +15,7 @@ use serenity::{
 use sqlx::types::Json;
 
 use crate::{
+    catchers::internal_server_error,
     check_guild_subscription, check_subscription,
     consts::{
         CHARACTERS, DAY, DEFAULT_AVATAR, MAX_CONTENT_LENGTH, MAX_EMBED_AUTHOR_LENGTH,
@@ -672,28 +669,44 @@ async fn create_database_channel(
     Ok(row.id)
 }
 
+#[derive(Responder)]
+pub enum DashboardPage {
+    #[response(status = 200)]
+    Ok(NamedFile),
+    #[response(status = 200)]
+    Unauthorised(Redirect),
+    #[response(status = 500)]
+    NotConfigured(Template),
+}
+
 #[get("/")]
-pub async fn dashboard_home(cookies: &CookieJar<'_>) -> Result<NamedFile, Redirect> {
+pub async fn dashboard_home(cookies: &CookieJar<'_>) -> DashboardPage {
     if cookies.get_private("userid").is_some() {
-        NamedFile::open(Path::new(relative!("static/index.html"))).await.map_err(|e| {
+        match NamedFile::open(Path::new(path!("static/index.html"))).await {
+            Ok(f) => DashboardPage::Ok(f),
+            Err(e) => {
                 warn!("Couldn't render dashboard: {:?}", e);
 
-            Redirect::to("/login/discord")
-        })
+                DashboardPage::NotConfigured(internal_server_error().await)
+            }
+        }
     } else {
-        Err(Redirect::to("/login/discord"))
+        DashboardPage::Unauthorised(Redirect::to("/login/discord"))
     }
 }
 
 #[get("/<_..>")]
-pub async fn dashboard(cookies: &CookieJar<'_>) -> Result<NamedFile, Redirect> {
+pub async fn dashboard(cookies: &CookieJar<'_>) -> DashboardPage {
     if cookies.get_private("userid").is_some() {
-        NamedFile::open(Path::new(relative!("static/index.html"))).await.map_err(|e| {
+        match NamedFile::open(Path::new(path!("static/index.html"))).await {
+            Ok(f) => DashboardPage::Ok(f),
+            Err(e) => {
                 warn!("Couldn't render dashboard: {:?}", e);
 
-            Redirect::to("/login/discord")
-        })
+                DashboardPage::NotConfigured(internal_server_error().await)
+            }
+        }
     } else {
-        Err(Redirect::to("/login/discord"))
+        DashboardPage::Unauthorised(Redirect::to("/login/discord"))
     }
 }

web/static/assets

@@ -1 +1 @@
-/home/jude/reminder-dashboard/dist/static/assets
+/home/jude/reminder-bot/reminder-dashboard/dist/static/assets

web/static/css/style.css

@@ -55,6 +55,7 @@ div.reminderContent.is-collapsed .hide-box {
 div.reminderContent.is-collapsed .hide-box i {
     transform: rotate(90deg);
 }
+
 /* END */
 
 /* dashboard styles */
@@ -202,6 +203,7 @@ div.interval-group {
     flex-direction: row;
     justify-content: space-between;
 }
+
 /* !Interval inputs */
 
 .left-pad {
@@ -694,7 +696,7 @@ li.highlight {
     }
 }
 
-/* loader */
+/* loaders */
 #loader {
     position: fixed;
     top: 0;
@@ -707,6 +709,11 @@ li.highlight {
     font-size: 6rem;
 }
 
+.loading {
+    opacity: 0.2;
+    pointer-events: none;
+}
+
 /* END */
 
 div.reminderError {

web/static/index.html

@@ -1 +0,0 @@
-/home/jude/reminder-dashboard/dist/index.html

web/templates/base.html.tera

@@ -32,6 +32,7 @@
         </div>
     {% endif %}
 
+    <div style="min-height: 100vh;">
         <nav class="navbar is-dark is-spaced is-size-4" role="navigation" aria-label="main navigation">
             <div class="navbar-brand">
                 <a class="navbar-item" href="/">
@@ -146,6 +147,7 @@
 
         {% block content %}
         {% endblock %}
+    </div>
 
     <br>
     <footer class="footer">
@@ -165,25 +167,15 @@
     <script>
 
         document.addEventListener('DOMContentLoaded', () => {
-
-            // Get all "navbar-burger" elements
             const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
-
-            // Check if there are any navbar burgers
             if ($navbarBurgers.length > 0) {
-
-            // Add a click event on each of them
                 $navbarBurgers.forEach( el => {
                     el.addEventListener('click', () => {
-
-                    // Get the target from the "data-target" attribute
                         const target = el.dataset.target;
                         const $target = document.getElementById(target);
 
-                    // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
                         el.classList.toggle('is-active');
                         $target.classList.toggle('is-active');
-
                     });
                 });
             }

web/templates/errors/403.html.tera

@@ -6,5 +6,5 @@
     {% set show_contact = True %}
 
     {% set page_title = "Forbidden" %}
-    {% set page_subtitle = "You currently cannot access this page, if it exists. Sorry." %}
+    {% set page_subtitle = "You currently cannot access this page, if it exists." %}
 {% endblock %}

web/templates/errors/404.html.tera

@@ -6,5 +6,5 @@
     {% set show_contact = True %}
 
     {% set page_title = "File Not Found" %}
-    {% set page_subtitle = "This page does not exist. Sorry." %}
+    {% set page_subtitle = "This page does not exist." %}
 {% endblock %}