UX: Lazy load categories support

javascripts/discourse/api-initializers/central.gjs

@@ -1,19 +1,20 @@
 import { apiInitializer } from "discourse/lib/api";
 
 export default apiInitializer("1.0", () => {
-  let css = "";
   const categories = settings.category_icons;
-  if (categories) {
-    categories.forEach((category) => {
-      const id = category.id[0];
-      const emoji = category.emoji;
+  if (!categories) {
+    return;
+  }
 
-      css += `.badge-category__wrapper .badge-category[data-category-id="${id}"]:before { content: "${emoji}"; }\n`;
-    });
+  const css = categories.reduce((acc, category) => {
+    const id = category.id[0];
+    const emoji = category.emoji;
 
-    const styleElement = document.createElement("style");
-    styleElement.type = "text/css";
-    styleElement.appendChild(document.createTextNode(css));
-    document.head.appendChild(styleElement);
-  }
+    return `${acc}.badge-category__wrapper .badge-category[data-category-id="${id}"]:before { content: "${emoji}"; }\n`;
+  }, "");
+
+  const styleElement = document.createElement("style");
+  styleElement.type = "text/css";
+  styleElement.appendChild(document.createTextNode(css));
+  document.head.appendChild(styleElement);
 });

javascripts/discourse/api-initializers/icons.gjs

@@ -154,11 +154,7 @@ export default apiInitializer("1.0", (api) => {
 
     api.headerIcons.add("c-create", <template>
       <li class="c-create">
-        <DMenu
-          @placement="bottom-end"
-          {{!-- @modalForMobile={{true}} --}}
-          @identifier="c-create"
-        >
+        <DMenu @placement="bottom-end" @identifier="c-create">
           <:trigger>
             <div class="c-create__icon"></div>
           </:trigger>

javascripts/discourse/components/blocks/banner.gjs

@@ -1,23 +1,13 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { concat } from "@ember/helper";
-// import { eq, or } from "truth-helpers";
-
-// import UserLink from "discourse/components/user-link";
-// import avatar from "discourse/helpers/avatar";
-// import { ajax } from "discourse/lib/ajax";
-// import i18n from "discourse-common/helpers/i18n";
 
 export default class BlockBanner extends Component {
   @tracked title = this.args?.title;
   @tracked description = this.args?.description;
   @tracked ctas = this.args?.ctas;
   @tracked image = this.args?.image;
 
-  constructor() {
-    super(...arguments);
-  }
-
   <template>
     <div class="block block-banner">
       {{#if this.title}}
@@ -30,7 +20,6 @@ export default class BlockBanner extends Component {
           {{this.description}}
         </span>
       {{/if}}
-      {{!log this.ctas}}
       {{#if this.ctas}}
         <div class="block-banner__ctas">
           {{#each this.ctas as |cta|}}

javascripts/discourse/components/blocks/birthday.gjs

@@ -1,7 +1,6 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { concat } from "@ember/helper";
-// import UserLink from "discourse/components/user-link";
 import avatar from "discourse/helpers/avatar";
 import { ajax } from "discourse/lib/ajax";
 import i18n from "discourse-common/helpers/i18n";
@@ -13,6 +12,7 @@ export default class BlockBirthday extends Component {
     super(...arguments);
 
     ajax("/cakeday/birthdays/today.json").then((data) => {
+      // loading state?
       const birthdays = data.birthdays;
       this.randomBirthday =
         birthdays[Math.floor(Math.random() * birthdays.length)];

javascripts/discourse/components/blocks/cta.gjs

@@ -1,31 +1,17 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
-// eslint-disable-next-line no-unused-vars
-import { concat } from "@ember/helper";
-// eslint-disable-next-line no-unused-vars
-import { inject as service } from "@ember/service";
-// eslint-disable-next-line no-unused-vars
-import { htmlSafe } from "@ember/template";
-// import { eq, or } from "truth-helpers";
-// import avatar from "discourse/helpers/avatar";
 import concatClass from "discourse/helpers/concat-class";
-// import { ajax } from "discourse/lib/ajax";
 
 export default class BlockCta extends Component {
   @tracked title = this.args?.title;
   @tracked desc = this.args?.description;
   @tracked cta = this.args?.cta;
   @tracked url = this.args?.url;
 
-  constructor() {
-    super(...arguments);
-  }
-
   get size() {
     if (this.args.size) {
       return `block--${this.args.size}`;
     }
-    return;
   }
 
   <template>

javascripts/discourse/components/blocks/online.gjs

@@ -11,6 +11,7 @@ export default class BlockOnline extends Component {
     super(...arguments);
 
     ajax("/about.json").then((data) => {
+      // loading state?
       this.online = data.about.stats;
     });
   }

javascripts/discourse/components/blocks/profile.gjs

@@ -4,7 +4,6 @@ import { concat } from "@ember/helper";
 import { LinkTo } from "@ember/routing";
 import { inject as service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
-// import { eq, or } from "truth-helpers";
 import avatar from "discourse/helpers/avatar";
 import concatClass from "discourse/helpers/concat-class";
 import { ajax } from "discourse/lib/ajax";
@@ -21,13 +20,13 @@ export default class BlockProfile extends Component {
   constructor() {
     super(...arguments);
 
-    if (this.currentUser !== null) {
-      const currentUserUrl = "/u/" + this.currentUser.username + ".json";
-
-      ajax(currentUserUrl).then((data) => {
-        this.updateUserData(data.user);
-      });
+    if (this.currentUser === null) {
+      return;
     }
+
+    ajax(`/u/${this.currentUser.username}.json`).then((data) => {
+      this.updateUserData(data.user);
+    });
   }
 
   get size() {

javascripts/discourse/components/blocks/top-contributors.gjs

@@ -2,7 +2,6 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { concat } from "@ember/helper";
 import { action } from "@ember/object";
-// import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import { eq } from "truth-helpers";
 import avatar from "discourse/helpers/avatar";
@@ -50,24 +49,22 @@ export default class BlockTopContributors extends Component {
     }
   }
 
-  fetchTopContributors(period, count) {
-    ajax(`/leaderboard/7.json?period=${period}`)
-      .then((data) => {
-        this.topContributors = data.users.slice(0, count);
-      })
-      .catch(() => {
-        ajax(
-          `/directory_items.json?period=${period}&order=likes_received`
-        ).then((data) => {
-          data.directory_items = data.directory_items.map((item) => {
-            let user = item.user;
-            delete item.user;
-            return { ...item, ...user };
-          });
-
-          this.topContributors = data.directory_items.slice(0, count);
-        });
+  async fetchTopContributors(period, count) {
+    try {
+      const response = await ajax(`/leaderboard/7.json?period=${period}`);
+      this.topContributors = response.users.slice(0, count);
+    } catch {
+      const response = await ajax(
+        `/directory_items.json?period=${period}&order=likes_received`
+      );
+      response.directory_items = response.directory_items.map((item) => {
+        let user = item.user;
+        delete item.user;
+        return { ...item, ...user };
       });
+
+      this.topContributors = response.directory_items.slice(0, count);
+    }
   }
 
   @action
@@ -123,11 +120,11 @@ export default class BlockTopContributors extends Component {
                   href={{concat "/u/" topContributor.username}}
                   data-user-card={{topContributor.username}}
                 >
-                  {{!-- {{#if topContributor.name}}
+                  {{#if topContributor.name}}
                     {{topContributor.name}}
-                  {{else}} --}}
-                  {{htmlSafe topContributor.username}}
-                  {{!-- {{/if}} --}}
+                  {{else}}
+                    {{htmlSafe topContributor.username}}
+                  {{/if}}
                 </a>
               </div>
               <div class="block-chart__details">

javascripts/discourse/components/blocks/top-topics.gjs

@@ -1,9 +1,7 @@
-/** eslint-disable no-unused-vars */
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { concat } from "@ember/helper";
 import { action } from "@ember/object";
-// import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import { eq } from "truth-helpers";
 import UserLink from "discourse/components/user-link";
@@ -50,22 +48,20 @@ export default class BlockTopTopics extends Component {
 
   @action
   async fetchTopTopics(period, count) {
-    let data = await ajax(`/top.json?period=${period}`);
-    let topTopics = data.topic_list.topics.slice(0, count);
-    let categoryIds = topTopics.map((topic) => topic.category_id);
-    let categories = await Category.asyncFindByIds(categoryIds);
+    const data = await ajax(`/top.json?period=${period}`);
+    const topTopics = data.topic_list.topics.slice(0, count);
+    const categoryIds = topTopics.map((topic) => topic.category_id);
+    const categories = await Category.asyncFindByIds(categoryIds);
 
-    topTopics.forEach((topic) => {
-      topic["category"] = categories.find(
+    this.topTopics = topTopics.map((topic) => {
+      topic.category = categories.find(
         (category) => topic.category_id === category.id
       );
-
-      let author = data.users.find(
+      topic.author = data.users.find(
         (user) => user.id === topic.posters[0].user_id
       );
-      topic.author = author;
+      return topic;
     });
-    this.topTopics = topTopics;
   }
 
   @action

javascripts/discourse/components/like-toggle.gjs

@@ -27,7 +27,6 @@ export default class LikeToggle extends Component {
   @action
   toggleLikeDebounced(topic) {
     if (this.loading) {
-      // console.log("Action is currently loading, please wait.");
       return;
     }
 
@@ -40,34 +39,28 @@ export default class LikeToggle extends Component {
 
   async performToggleLike(topic) {
     if (this.clickCounter % 2 === 0) {
-      // console.log("Skipping redundant like.");
       this.clickCounter = 0;
       return;
     }
     this.loading = true;
+
     try {
       const topicPosts = await ajax(`/t/${topic.id}/post_ids.json`);
-      if (topicPosts && topicPosts.post_ids.length) {
-        const firstPost = topicPosts.post_ids[0];
-        if (firstPost) {
-          if (!this.likeToggled) {
-            // Adjusted the logic here to match the updated state
-            await ajax(`/post_actions/${firstPost}`, {
-              type: "DELETE",
-              data: { post_action_type_id: 2 },
-            });
-            // console.log("UNLIKED");
-          } else {
-            await ajax(`/post_actions`, {
-              type: "POST",
-              data: { id: firstPost, post_action_type_id: 2 },
-            });
-            // console.log("LIKED");
-          }
+      const firstPost = topicPosts.post_ids[0];
+      if (topicPosts && firstPost) {
+        if (this.likeToggled) {
+          await ajax(`/post_actions`, {
+            type: "POST",
+            data: { id: firstPost, post_action_type_id: 2 },
+          });
+        } else {
+          await ajax(`/post_actions/${firstPost}`, {
+            type: "DELETE",
+            data: { post_action_type_id: 2 },
+          });
         }
       }
-    } catch (error) {
-      // console.error("Error toggling like:", error);
+    } catch {
       // Rollback UI changes in case of an error
       this.likeToggled = !this.likeToggled;
       this.likeCount += this.likeToggled ? 1 : -1;

javascripts/discourse/connectors/above-discovery-categories/categories.gjs

@@ -1,24 +1,18 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
-// eslint-disable-next-line no-unused-vars
-import { concat, fn } from "@ember/helper";
+import { fn } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
-// eslint-disable-next-line no-unused-vars
-import { eq } from "truth-helpers";
 import categoryColorVariable from "discourse/helpers/category-color-variable";
 import categoryLink from "discourse/helpers/category-link";
 import concatClass from "discourse/helpers/concat-class";
 import formatDate from "discourse/helpers/format-date";
 import i18n from "discourse-common/helpers/i18n";
 
 export default class CentralCategories extends Component {
-  @service currentUser;
   @service router;
-  @service discovery;
-  @service site;
 
   @tracked categories = this.args.outletArgs.categories;
 
@@ -34,11 +28,9 @@ export default class CentralCategories extends Component {
   }
 
   <template>
-    {{!log this.categories}}
     <div class="c-categories">
       {{#each this.categories as |category|}}
         {{! template-lint-disable no-invalid-interactive }}
-
         <div
           data-notification-level={{category.notificationLevelString}}
           style={{categoryColorVariable category.color}}

javascripts/discourse/connectors/above-main-container/admin.gjs

@@ -1,25 +1,12 @@
 import Component from "@glimmer/component";
-// import { tracked } from "@glimmer/tracking";
-// import { action } from "@ember/object";
 import { LinkTo } from "@ember/routing";
 import { service } from "@ember/service";
-// import { eq } from "truth-helpers";
-// import bodyClass from "discourse/helpers/body-class";
-// import categoryLink from "discourse/helpers/category-link";
-// import concatClass from "discourse/helpers/concat-class";
-// import Category from "discourse/models/category";
 import i18n from "discourse-common/helpers/i18n";
 
 export default class CentralAdmin extends Component {
   @service currentUser;
   @service router;
-  @service site;
   @service siteSettings;
-  @service discovery;
-
-  constructor() {
-    super(...arguments);
-  }
 
   get isAdmin() {
     return this.router.currentRouteName.startsWith("admin");