component classes v2

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

diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx
index 05fa55e1039d0455473f16898e567cdde0ddde7b..b833ca9a3cfb7a5ca5dadcf7381424b31a6b2a07 100644 (file)
--- a/src/shared/components/community/community.tsx
+++ b/src/shared/components/community/community.tsx
@@ -63,6 +63,7 @@ import { FirstLoadService } from "../../services/FirstLoadService";
 import { HttpService, RequestState } from "../../services/HttpService";
 import {
   QueryParams,
+  RouteDataResponse,
   commentsToFlatNodes,
   communityRSSUrl,
   editComment,
@@ -100,6 +101,12 @@ import { SiteSidebar } from "../home/site-sidebar";
 import { PostListings } from "../post/post-listings";
 import { CommunityLink } from "./community-link";
 
+type CommunityData = RouteDataResponse<{
+  communityRes: GetCommunityResponse;
+  postsRes: GetPostsResponse;
+  commentsRes: GetCommentsResponse;
+}>;
+
 interface State {
   communityRes: RequestState<GetCommunityResponse>;
   postsRes: RequestState<GetPostsResponse>;
@@ -140,7 +147,7 @@ export class Community extends Component<
   RouteComponentProps<{ name: string }>,
   State
 > {
-  private isoData = setIsoData(this.context);
+  private isoData = setIsoData<CommunityData>(this.context);
   state: State = {
     communityRes: { state: "empty" },
     postsRes: { state: "empty" },
@@ -194,13 +201,14 @@ export class Community extends Component<
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
-      const [communityRes, postsRes, commentsRes] = this.isoData.routeData;
+      const { communityRes, commentsRes, postsRes } = this.isoData.routeData;
+
       this.state = {
         ...this.state,
+        isIsomorphic: true,
+        commentsRes,
         communityRes,
         postsRes,
-        commentsRes,
-        isIsomorphic: true,
       };
     }
   }
@@ -227,23 +235,21 @@ export class Community extends Component<
     saveScrollPosition(this.context);
   }
 
-  static fetchInitialData({
+  static async fetchInitialData({
     client,
     path,
     query: { dataType: urlDataType, page: urlPage, sort: urlSort },
     auth,
   }: InitialFetchRequest<QueryParams<CommunityProps>>): Promise<
-    RequestState<any>
-  >[] {
+    Promise<CommunityData>
+  > {
     const pathSplit = path.split("/");
-    const promises: Promise<RequestState<any>>[] = [];
 
     const communityName = pathSplit[2];
     const communityForm: GetCommunity = {
       name: communityName,
       auth,
     };
-    promises.push(client.getCommunity(communityForm));
 
     const dataType = getDataTypeFromQuery(urlDataType);
 
@@ -251,6 +257,11 @@ export class Community extends Component<
 
     const page = getPageFromString(urlPage);
 
+    let postsResponse: RequestState<GetPostsResponse> = { state: "empty" };
+    let commentsResponse: RequestState<GetCommentsResponse> = {
+      state: "empty",
+    };
+
     if (dataType === DataType.Post) {
       const getPostsForm: GetPosts = {
         community_name: communityName,
@@ -261,8 +272,8 @@ export class Community extends Component<
         saved_only: false,
         auth,
       };
-      promises.push(client.getPosts(getPostsForm));
-      promises.push(Promise.resolve({ state: "empty" }));
+
+      postsResponse = await client.getPosts(getPostsForm);
     } else {
       const getCommentsForm: GetComments = {
         community_name: communityName,
@@ -273,11 +284,15 @@ export class Community extends Component<
         saved_only: false,
         auth,
       };
-      promises.push(Promise.resolve({ state: "empty" }));
-      promises.push(client.getComments(getCommentsForm));
+
+      commentsResponse = await client.getComments(getCommentsForm);
     }
 
-    return promises;
+    return {
+      communityRes: await client.getCommunity(communityForm),
+      commentsRes: commentsResponse,
+      postsRes: postsResponse,
+    };
   }
 
   get documentTitle(): string {
@@ -313,7 +328,7 @@ export class Community extends Component<
                 {this.communityInfo(res)}
                 <div className="d-block d-md-none">
                   <button
-                    className="btn btn-secondary d-inline-block mb-2 mr-3"
+                    className="btn btn-secondary d-inline-block mb-2 me-3"
                     onClick={linkEvent(this, this.handleShowSidebarMobile)}
                   >
                     {i18n.t("sidebar")}{" "}
@@ -343,7 +358,9 @@ export class Community extends Component<
   }
 
   render() {
-    return <div className="container-lg">{this.renderCommunity()}</div>;
+    return (
+      <div className="community container-lg">{this.renderCommunity()}</div>
+    );
   }
 
   sidebar(res: GetCommunityResponse) {
@@ -360,7 +377,6 @@ export class Community extends Component<
           community_view={res.community_view}
           moderators={res.moderators}
           admins={site_res.admins}
-          online={res.online}
           enableNsfw={enableNsfw(site_res)}
           editable
           allLanguages={site_res.all_languages}
@@ -497,13 +513,13 @@ export class Community extends Component<
 
     return (
       <div className="mb-3">
-        <span className="mr-3">
+        <span className="me-3">
           <DataTypeSelect
             type_={dataType}
             onChange={this.handleDataTypeChange}
           />
         </span>
-        <span className="mr-2">
+        <span className="me-2">
           <SortSelect sort={sort} onChange={this.handleSortChange} />
         </span>
         {communityRss && (