implement subreddit list refresh (fix #36)

OctoNezd · Jul 11, 2023 · b2c922d · b2c922d
1 parent cb0875b
commit b2c922d
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 20 deletions.
diff --git a/css/userSidebar.css b/css/userSidebar.css
@@ -101,15 +101,39 @@
 }
 .sidebar-headline {
     padding-left: 28px;
+    padding-right: 28px;
     margin-top: 16px;
     margin-bottom: 16px;
     font-family: var(--md-sys-typescale-title-small-font-family-name);
     line-height: var(--md-sys-typescale-title-small-line-height);
     font-size: var(--md-sys-typescale-title-small-font-size);
     font-weight: var(--md-sys-typescale-title-small-font-weight);
     color: var(--md-sys-color-on-surface-variant);
+    height: 24px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+}
+.sidebar-headline button {
+    border: 0;
+    background: none;
+    color: var(--md-sys-color-primary);
+    width: 24px;
+    height: 24px;
+    padding: 0;
 }
 #user-sidebar img {
     border-radius: 100%;
     margin-left: -8px;
 }
+.spin {
+    animation: spin 0.5s forwards infinite;
+}
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
diff --git a/js/sidebar/userSidebar.js b/js/sidebar/userSidebar.js
@@ -3,8 +3,11 @@ import localforage from "localforage";
 import querySelectorAsync from "../utility/querySelectorAsync";
 import buildSidebar from "./buildSidebar";
 
-function createSidebarItem(text, link, icon, isActive) {
+function createSidebarItem(text, link, icon, isActive, cls) {
     const item = document.createElement("a");
+    if (cls !== undefined) {
+        item.classList.add(cls);
+    }
     item.href = link;
     item.innerHTML = `<span class="material-symbols-outlined">forum</span>
                       <span class="sidebar-text">test</span>`;
@@ -30,10 +33,15 @@ function createSidebarItem(text, link, icon, isActive) {
     return item;
 }
 
-function createSidebarSubheading(text) {
+function createSidebarSubheading(text, button) {
     const item = document.createElement("p");
-    item.innerText = text;
+    const textel = document.createElement("span");
+    textel.innerText = text;
+    item.appendChild(textel);
     item.classList.add("sidebar-headline");
+    if (button !== undefined) {
+        item.appendChild(button);
+    }
     return item;
 }
 
@@ -58,11 +66,24 @@ async function setupMultireddits(container) {
     }
 }
 
-async function setupSubreddits(container) {
+async function setupSubreddits(parent_container) {
     const age = parseInt(await localforage.getItem("subredditcache_age"));
     const now = Math.floor(Date.now() / 1000);
     const cached = JSON.parse(await localforage.getItem("subredditcache_act"));
     let subs = [];
+    const container = document.createElement("span");
+    container.id = "oldlander-subredditlist";
+    const refreshButton = document.createElement("button");
+    refreshButton.classList.add("material-symbols-outlined");
+    refreshButton.innerText = "refresh";
+    const refreshHandler = () => {
+        refreshButton.removeEventListener("click", refreshHandler);
+        console.log("refresh");
+        refreshButton.classList.add("spin");
+        setupSubreddits(parent_container);
+    };
+    refreshButton.addEventListener("click", refreshHandler);
+
     if (age + 60 * 60 < now || isNaN(age) || cached === null) {
         console.log("Updating subreddit cache");
         let after = "";
@@ -97,30 +118,56 @@ async function setupSubreddits(container) {
         console.log("Subreddit cache is up to date, created at", age, subs);
     }
     container.appendChild(document.createElement("hr"));
-    container.appendChild(createSidebarSubheading("Subreddits"));
+    container.appendChild(createSidebarSubheading("Subreddits", refreshButton));
     container.appendChild(
-        createSidebarItem("Random", "/r/random", "shuffle", false)
+        createSidebarItem(
+            "Random",
+            "/r/random",
+            "shuffle",
+            false,
+            "oldlander-subreddit"
+        )
     );
     container.appendChild(
-        createSidebarItem("Random NSFW", "/r/randnsfw", "18_up_rating", false)
+        createSidebarItem(
+            "Random NSFW",
+            "/r/randnsfw",
+            "18_up_rating",
+            false,
+            "oldlander-subreddit"
+        )
     );
     for (const subreddit of subs) {
         container.appendChild(
             createSidebarItem(
                 subreddit.data.display_name,
                 subreddit.data.url,
                 subreddit.data.icon_img,
-                location.pathname === subreddit.url
+                location.pathname === subreddit.url,
+                "oldlander-subreddit"
             )
         );
     }
+    document
+        .querySelectorAll("#oldlander-subredditlist")
+        .forEach((el) => el.remove());
+    parent_container.appendChild(container);
 }
 
 async function buildHeaderItems(container) {
     const rheader = await querySelectorAsync("#header-bottom-right");
 
     container.appendChild(document.createElement("hr"));
-
+    if (document.body.classList.contains("res")) {
+        container.appendChild(
+            createSidebarItem(
+                "RES settings console",
+                location.href + "#res:settings",
+                "settings_applications",
+                false
+            )
+        );
+    }
     const userlink = rheader.querySelector(".user a");
     if (userlink.innerText.includes("Log in")) {
         const loginitem = createSidebarItem(
@@ -145,7 +192,9 @@ async function buildHeaderItems(container) {
         )
     );
     const mail = rheader.querySelector("#mail");
-    let mailicon = mail.classList.contains("nohavemail") ? "mail" : "mark_email_unread";
+    let mailicon = mail.classList.contains("nohavemail")
+        ? "mail"
+        : "mark_email_unread";
     container.appendChild(
         createSidebarItem(
             "Messages",
@@ -163,16 +212,7 @@ async function buildHeaderItems(container) {
             location.href === prefslink
         )
     );
-    if (document.body.classList.contains("res")) {
-        container.appendChild(
-            createSidebarItem(
-                "RES settings console",
-                location.href + "#res:settings",
-                "settings_applications",
-                location.href === prefslink
-            )
-        );
-    }
+
     const logoutItem = createSidebarItem(
         "Log out",
         "javascript:void(0)",