-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,
FollowCommunity,
ListCommunities,
SortType,
+ ListingType,
SiteView,
-} from 'lemmy-js-client';
-import { WebSocketService } from '../services';
+} from "lemmy-js-client";
+import { WebSocketService } from "../services";
import {
wsJsonToRes,
toast,
wsClient,
authField,
setOptionalAuth,
-} from '../utils';
-import { CommunityLink } from './community-link';
-import { i18n } from '../i18next';
-import { InitialFetchRequest } from 'shared/interfaces';
+} from "../utils";
+import { CommunityLink } from "./community-link";
+import { Spinner } from "./icon";
+import { i18n } from "../i18next";
+import { InitialFetchRequest } from "shared/interfaces";
const communityLimit = 100;
page: number;
loading: boolean;
site_view: SiteView;
+ searchText: string;
}
interface CommunitiesProps {
loading: true,
page: getPageFromProps(this.props),
site_view: this.isoData.site_res.site_view,
+ searchText: "",
};
constructor(props: any, context: any) {
}
get documentTitle(): string {
- return `${i18n.t('communities')} - ${this.state.site_view.site.name}`;
+ return `${i18n.t("communities")} - ${this.state.site_view.site.name}`;
}
render() {
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>
<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>
{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>
);
}
+ 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">
class="btn btn-secondary mr-1"
onClick={linkEvent(this, this.prevPage)}
>
- {i18n.t('prev')}
+ {i18n.t("prev")}
</button>
)}
class="btn btn-secondary"
onClick={linkEvent(this, this.nextPage)}
>
- {i18n.t('next')}
+ {i18n.t("next")}
</button>
)}
</div>
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,
}
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,
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;