Merge branch 'LemmyNet:main' into breakout-role-utils

[lemmy-ui.git] / src / shared / components / home / home.tsx

diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 8be983042a5ce584988bb282d928656678ddfeb0..9f7c322f720ce07d01f0505312364f4f0576d07c 100644 (file)
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -57,7 +57,6 @@ import { UserService } from "../../services";
 import { FirstLoadService } from "../../services/FirstLoadService";
 import { HttpService, RequestState } from "../../services/HttpService";
 import {
-  canCreateCommunity,
   commentsToFlatNodes,
   editComment,
   editPost,
@@ -68,13 +67,10 @@ import {
   getCommentParentId,
   getDataTypeString,
   getPageFromString,
-  getQueryParams,
-  getQueryString,
   getRandomFromList,
   mdToHtml,
   myAuth,
   postToCommentSortType,
-  QueryParams,
   relTags,
   restoreScrollPosition,
   saveScrollPosition,
@@ -85,6 +81,10 @@ import {
   trendingFetchLimit,
   updatePersonBlock,
 } from "../../utils";
+import { getQueryParams } from "../../utils/helpers/get-query-params";
+import { getQueryString } from "../../utils/helpers/get-query-string";
+import { canCreateCommunity } from "../../utils/roles/can-create-community";
+import type { QueryParams } from "../../utils/types/query-params";
 import { CommentNodes } from "../comment/comment-nodes";
 import { DataTypeSelect } from "../common/data-type-select";
 import { HtmlTags } from "../common/html-tags";
@@ -244,9 +244,10 @@ export class Home extends Component<any, HomeState> {
   }
 
   async componentDidMount() {
-    if (!this.state.isIsomorphic) {
+    if (!this.state.isIsomorphic || !this.isoData.routeData.length) {
       await Promise.all([this.fetchTrendingCommunities(), this.fetchData()]);
     }
+
     setupTippy();
   }
 
@@ -360,7 +361,6 @@ export class Home extends Component<any, HomeState> {
       siteRes: {
         site_view: { counts, site },
         admins,
-        online,
       },
       showSubscribedMobile,
       showTrendingMobile,
@@ -392,7 +392,6 @@ export class Home extends Component<any, HomeState> {
               site={site}
               admins={admins}
               counts={counts}
-              online={online}
               showLocal={showLocal(this.isoData)}
             />
           )}
@@ -416,47 +415,46 @@ export class Home extends Component<any, HomeState> {
       siteRes: {
         site_view: { counts, site },
         admins,
-        online,
       },
     } = this.state;
 
     return (
-      <div>
-        <div>
-          <div className="card border-secondary mb-3">
-            <div className="card-body">
-              {this.trendingCommunities()}
-              {canCreateCommunity(this.state.siteRes) && (
-                <LinkButton
-                  path="/create_community"
-                  translationKey="create_a_community"
-                />
-              )}
+      <div id="sidebarContainer">
+        <section id="sidebarMain" className="card border-secondary mb-3">
+          <div className="card-body">
+            {this.trendingCommunities()}
+            {canCreateCommunity(this.state.siteRes) && (
               <LinkButton
-                path="/communities"
-                translationKey="explore_communities"
+                path="/create_community"
+                translationKey="create_a_community"
               />
-            </div>
+            )}
+            <LinkButton
+              path="/communities"
+              translationKey="explore_communities"
+            />
           </div>
-          <SiteSidebar
-            site={site}
-            admins={admins}
-            counts={counts}
-            online={online}
-            showLocal={showLocal(this.isoData)}
-          />
-          {this.hasFollows && (
-            <div className="card border-secondary mb-3">
-              <div className="card-body">{this.subscribedCommunities}</div>
-            </div>
-          )}
-        </div>
+        </section>
+        <SiteSidebar
+          site={site}
+          admins={admins}
+          counts={counts}
+          showLocal={showLocal(this.isoData)}
+        />
+        {this.hasFollows && (
+          <section
+            id="sidebarSubscribed"
+            className="card border-secondary mb-3"
+          >
+            <div className="card-body">{this.subscribedCommunities}</div>
+          </section>
+        )}
       </div>
     );
   }
 
   trendingCommunities(isMobile = false) {
-    switch (this.state.trendingCommunitiesRes.state) {
+    switch (this.state.trendingCommunitiesRes?.state) {
       case "loading":
         return (
           <h5>
@@ -573,7 +571,7 @@ export class Home extends Component<any, HomeState> {
     const siteRes = this.state.siteRes;
 
     if (dataType === DataType.Post) {
-      switch (this.state.postsRes.state) {
+      switch (this.state.postsRes?.state) {
         case "loading":
           return (
             <h5>