Remove categories

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

diff --git a/src/shared/components/communities.tsx b/src/shared/components/communities.tsx
index 148a41361c0c4c2bf4459b6bdbdfdb65fc901e8b..74a1ac32a27e3495cecfe5a225ca4e54e7b71d65 100644 (file)
--- a/src/shared/components/communities.tsx
+++ b/src/shared/components/communities.tsx
@@ -1,6 +1,6 @@
-import { Component, linkEvent } from 'inferno';
-import { HtmlTags } from './html-tags';
-import { Subscription } from 'rxjs';
+import { Component, linkEvent } from "inferno";
+import { HtmlTags } from "./html-tags";
+import { Subscription } from "rxjs";
 import {
   UserOperation,
   CommunityView,
@@ -9,9 +9,10 @@ import {
   FollowCommunity,
   ListCommunities,
   SortType,
+  ListingType,
   SiteView,
-} from 'lemmy-js-client';
-import { UserService, WebSocketService } from '../services';
+} from "lemmy-js-client";
+import { WebSocketService } from "../services";
 import {
   wsJsonToRes,
   toast,
@@ -20,10 +21,14 @@ import {
   setIsoData,
   wsSubscribe,
   wsUserOp,
-} from '../utils';
-import { CommunityLink } from './community-link';
-import { i18n } from '../i18next';
-import { InitialFetchRequest } from 'shared/interfaces';
+  wsClient,
+  authField,
+  setOptionalAuth,
+} from "../utils";
+import { CommunityLink } from "./community-link";
+import { Spinner } from "./icon";
+import { i18n } from "../i18next";
+import { InitialFetchRequest } from "shared/interfaces";
 
 const communityLimit = 100;
 
@@ -32,6 +37,7 @@ interface CommunitiesState {
   page: number;
   loading: boolean;
   site_view: SiteView;
+  searchText: string;
 }
 
 interface CommunitiesProps {
@@ -46,6 +52,7 @@ export class Communities extends Component<any, CommunitiesState> {
     loading: true,
     page: getPageFromProps(this.props),
     site_view: this.isoData.site_res.site_view,
+    searchText: "",
   };
 
   constructor(props: any, context: any) {
@@ -87,7 +94,7 @@ export class Communities extends Component<any, CommunitiesState> {
   }
 
   get documentTitle(): string {
-    return `${i18n.t('communities')} - ${this.state.site_view.site.name}`;
+    return `${i18n.t("communities")} - ${this.state.site_view.site.name}`;
   }
 
   render() {
@@ -98,26 +105,34 @@ export class Communities extends Component<any, CommunitiesState> {
           path={this.context.router.route.match.url}
         />
         {this.state.loading ? (
-          <h5 class="">
-            <svg class="icon icon-spinner spin">
-              <use xlinkHref="#icon-spinner"></use>
-            </svg>
+          <h5>
+            <Spinner />
           </h5>
         ) : (
           <div>
-            <h5>{i18n.t('list_of_communities')}</h5>
+            <div class="row">
+              <div class="col-md-6">
+                <h4>{i18n.t("list_of_communities")}</h4>
+              </div>
+              <div class="col-md-6">
+                <div class="float-md-right">{this.searchForm()}</div>
+              </div>
+            </div>
+
             <div class="table-responsive">
               <table id="community_table" class="table table-sm table-hover">
                 <thead class="pointer">
                   <tr>
-                    <th>{i18n.t('name')}</th>
-                    <th>{i18n.t('category')}</th>
-                    <th class="text-right">{i18n.t('subscribers')}</th>
+                    <th>{i18n.t("name")}</th>
+                    <th class="text-right">{i18n.t("subscribers")}</th>
+                    <th class="text-right">
+                      {i18n.t("users")} / {i18n.t("month")}
+                    </th>
                     <th class="text-right d-none d-lg-table-cell">
-                      {i18n.t('posts')}
+                      {i18n.t("posts")}
                     </th>
                     <th class="text-right d-none d-lg-table-cell">
-                      {i18n.t('comments')}
+                      {i18n.t("comments")}
                     </th>
                     <th></th>
                   </tr>
@@ -128,8 +143,8 @@ export class Communities extends Component<any, CommunitiesState> {
                       <td>
                         <CommunityLink community={cv.community} />
                       </td>
-                      <td>{cv.category.name}</td>
                       <td class="text-right">{cv.counts.subscribers}</td>
+                      <td class="text-right">{cv.counts.users_active_month}</td>
                       <td class="text-right d-none d-lg-table-cell">
                         {cv.counts.posts}
                       </td>
@@ -140,22 +155,24 @@ export class Communities extends Component<any, CommunitiesState> {
                         {cv.subscribed ? (
                           <span
                             class="pointer btn-link"
+                            role="button"
                             onClick={linkEvent(
                               cv.community.id,
                               this.handleUnsubscribe
                             )}
                           >
-                            {i18n.t('unsubscribe')}
+                            {i18n.t("unsubscribe")}
                           </span>
                         ) : (
                           <span
                             class="pointer btn-link"
+                            role="button"
                             onClick={linkEvent(
                               cv.community.id,
                               this.handleSubscribe
                             )}
                           >
-                            {i18n.t('subscribe')}
+                            {i18n.t("subscribe")}
                           </span>
                         )}
                       </td>
@@ -171,6 +188,32 @@ export class Communities extends Component<any, CommunitiesState> {
     );
   }
 
+  searchForm() {
+    return (
+      <form
+        class="form-inline"
+        onSubmit={linkEvent(this, this.handleSearchSubmit)}
+      >
+        <input
+          type="text"
+          id="communities-search"
+          class="form-control mr-2 mb-2"
+          value={this.state.searchText}
+          placeholder={`${i18n.t("search")}...`}
+          onInput={linkEvent(this, this.handleSearchChange)}
+          required
+          minLength={3}
+        />
+        <label class="sr-only" htmlFor="communities-search">
+          {i18n.t("search")}
+        </label>
+        <button type="submit" class="btn btn-secondary mr-2 mb-2">
+          <span>{i18n.t("search")}</span>
+        </button>
+      </form>
+    );
+  }
+
   paginator() {
     return (
       <div class="mt-2">
@@ -179,7 +222,7 @@ export class Communities extends Component<any, CommunitiesState> {
             class="btn btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            {i18n.t('prev')}
+            {i18n.t("prev")}
           </button>
         )}
 
@@ -188,7 +231,7 @@ export class Communities extends Component<any, CommunitiesState> {
             class="btn btn-secondary"
             onClick={linkEvent(this, this.nextPage)}
           >
-            {i18n.t('next')}
+            {i18n.t("next")}
           </button>
         )}
       </div>
@@ -212,40 +255,55 @@ export class Communities extends Component<any, CommunitiesState> {
     let form: FollowCommunity = {
       community_id: communityId,
       follow: false,
-      auth: UserService.Instance.authField(),
+      auth: authField(),
     };
-    WebSocketService.Instance.client.followCommunity(form);
+    WebSocketService.Instance.send(wsClient.followCommunity(form));
   }
 
   handleSubscribe(communityId: number) {
     let form: FollowCommunity = {
       community_id: communityId,
       follow: true,
-      auth: UserService.Instance.authField(),
+      auth: authField(),
     };
-    WebSocketService.Instance.client.followCommunity(form);
+    WebSocketService.Instance.send(wsClient.followCommunity(form));
+  }
+
+  handleSearchChange(i: Communities, event: any) {
+    i.setState({ searchText: event.target.value });
+  }
+
+  handleSearchSubmit(i: Communities) {
+    const searchParamEncoded = encodeURIComponent(i.state.searchText);
+    i.context.router.history.push(
+      `/search/q/${searchParamEncoded}/type/Communities/sort/TopAll/page/1`
+    );
   }
 
   refetch() {
     let listCommunitiesForm: ListCommunities = {
+      type_: ListingType.All,
       sort: SortType.TopAll,
       limit: communityLimit,
       page: this.state.page,
-      auth: UserService.Instance.authField(false),
+      auth: authField(false),
     };
 
-    WebSocketService.Instance.client.listCommunities(listCommunitiesForm);
+    WebSocketService.Instance.send(
+      wsClient.listCommunities(listCommunitiesForm)
+    );
   }
 
   static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
-    let pathSplit = req.path.split('/');
+    let pathSplit = req.path.split("/");
     let page = pathSplit[3] ? Number(pathSplit[3]) : 1;
     let listCommunitiesForm: ListCommunities = {
+      type_: ListingType.All,
       sort: SortType.TopAll,
       limit: communityLimit,
       page,
-      auth: req.auth,
     };
+    setOptionalAuth(listCommunitiesForm, req.auth);
 
     return [req.client.listCommunities(listCommunitiesForm)];
   }
@@ -253,7 +311,7 @@ export class Communities extends Component<any, CommunitiesState> {
   parseMessage(msg: any) {
     let op = wsUserOp(msg);
     if (msg.error) {
-      toast(i18n.t(msg.error), 'danger');
+      toast(i18n.t(msg.error), "danger");
       return;
     } else if (op == UserOperation.ListCommunities) {
       let data = wsJsonToRes<ListCommunitiesResponse>(msg).data;