component classes v2

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

diff --git a/src/shared/components/community/communities.tsx b/src/shared/components/community/communities.tsx
index 623269439f8642444aad0fcaa6cb8cdb0649d02d..0126ab11101dfab58c6605057a12c7e9145541d7 100644 (file)
--- a/src/shared/components/community/communities.tsx
+++ b/src/shared/components/community/communities.tsx
@@ -12,6 +12,7 @@ import { FirstLoadService } from "../../services/FirstLoadService";
 import { HttpService, RequestState } from "../../services/HttpService";
 import {
   QueryParams,
+  RouteDataResponse,
   editCommunity,
   getPageFromString,
   getQueryParams,
@@ -30,6 +31,10 @@ import { CommunityLink } from "./community-link";
 
 const communityLimit = 50;
 
+type CommunitiesData = RouteDataResponse<{
+  listCommunitiesResponse: ListCommunitiesResponse;
+}>;
+
 interface CommunitiesState {
   listCommunitiesResponse: RequestState<ListCommunitiesResponse>;
   siteRes: GetSiteResponse;
@@ -47,7 +52,7 @@ function getListingTypeFromQuery(listingType?: string): ListingType {
 }
 
 export class Communities extends Component<any, CommunitiesState> {
-  private isoData = setIsoData(this.context);
+  private isoData = setIsoData<CommunitiesData>(this.context);
   state: CommunitiesState = {
     listCommunitiesResponse: { state: "empty" },
     siteRes: this.isoData.site_res,
@@ -62,9 +67,11 @@ export class Communities extends Component<any, CommunitiesState> {
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
+      const { listCommunitiesResponse } = this.isoData.routeData;
+
       this.state = {
         ...this.state,
-        listCommunitiesResponse: this.isoData.routeData[0],
+        listCommunitiesResponse,
         isIsomorphic: true,
       };
     }
@@ -106,9 +113,7 @@ export class Communities extends Component<any, CommunitiesState> {
                   />
                 </span>
               </div>
-              <div className="col-md-6">
-                <div className="float-md-right">{this.searchForm()}</div>
-              </div>
+              <div className="col-md-6">{this.searchForm()}</div>
             </div>
 
             <div className="table-responsive">
@@ -203,7 +208,7 @@ export class Communities extends Component<any, CommunitiesState> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="communities container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -216,25 +221,29 @@ export class Communities extends Component<any, CommunitiesState> {
   searchForm() {
     return (
       <form
-        className="form-inline"
+        className="row justify-content-end"
         onSubmit={linkEvent(this, this.handleSearchSubmit)}
       >
-        <input
-          type="text"
-          id="communities-search"
-          className="form-control mr-2 mb-2"
-          value={this.state.searchText}
-          placeholder={`${i18n.t("search")}...`}
-          onInput={linkEvent(this, this.handleSearchChange)}
-          required
-          minLength={3}
-        />
-        <label className="sr-only" htmlFor="communities-search">
-          {i18n.t("search")}
-        </label>
-        <button type="submit" className="btn btn-secondary mr-2 mb-2">
-          <span>{i18n.t("search")}</span>
-        </button>
+        <div className="col-auto">
+          <input
+            type="text"
+            id="communities-search"
+            className="form-control me-2 mb-2"
+            value={this.state.searchText}
+            placeholder={`${i18n.t("search")}...`}
+            onInput={linkEvent(this, this.handleSearchChange)}
+            required
+            minLength={3}
+          />
+        </div>
+        <div className="col-auto">
+          <label className="visually-hidden" htmlFor="communities-search">
+            {i18n.t("search")}
+          </label>
+          <button type="submit" className="btn btn-secondary mb-2">
+            <span>{i18n.t("search")}</span>
+          </button>
+        </div>
       </form>
     );
   }
@@ -274,13 +283,13 @@ export class Communities extends Component<any, CommunitiesState> {
     i.context.router.history.push(`/search?q=${searchParamEncoded}`);
   }
 
-  static fetchInitialData({
+  static async fetchInitialData({
     query: { listingType, page },
     client,
     auth,
-  }: InitialFetchRequest<QueryParams<CommunitiesProps>>): Promise<
-    RequestState<any>
-  >[] {
+  }: InitialFetchRequest<
+    QueryParams<CommunitiesProps>
+  >): Promise<CommunitiesData> {
     const listCommunitiesForm: ListCommunities = {
       type_: getListingTypeFromQuery(listingType),
       sort: "TopMonth",
@@ -289,7 +298,11 @@ export class Communities extends Component<any, CommunitiesState> {
       auth: auth,
     };
 
-    return [client.listCommunities(listCommunitiesForm)];
+    return {
+      listCommunitiesResponse: await client.listCommunities(
+        listCommunitiesForm
+      ),
+    };
   }
 
   getCommunitiesQueryParams() {