+import {
+ editCommunity,
+ myAuth,
+ myAuthRequired,
+ setIsoData,
+ showLocal,
+} from "@utils/app";
+import {
+ getPageFromString,
+ getQueryParams,
+ getQueryString,
+ numToSI,
+} from "@utils/helpers";
+import type { QueryParams } from "@utils/types";
+import { RouteDataResponse } from "@utils/types";
import { Component, linkEvent } from "inferno";
import {
CommunityResponse,
ListCommunitiesResponse,
ListingType,
} from "lemmy-js-client";
-import { i18n } from "../../i18next";
import { InitialFetchRequest } from "../../interfaces";
-import { FirstLoadService } from "../../services/FirstLoadService";
+import { FirstLoadService, I18NextService } from "../../services";
import { HttpService, RequestState } from "../../services/HttpService";
-import {
- editCommunity,
- getPageFromString,
- myAuth,
- myAuthRequired,
- numToSI,
- setIsoData,
- showLocal,
-} from "../../utils";
-import { getQueryParams } from "../../utils/helpers/get-query-params";
-import { getQueryString } from "../../utils/helpers/get-query-string";
-import type { QueryParams } from "../../utils/types/query-params";
import { HtmlTags } from "../common/html-tags";
import { Spinner } from "../common/icon";
import { ListingTypeSelect } from "../common/listing-type-select";
const communityLimit = 50;
+type CommunitiesData = RouteDataResponse<{
+ listCommunitiesResponse: ListCommunitiesResponse;
+}>;
+
interface CommunitiesState {
listCommunitiesResponse: RequestState<ListCommunitiesResponse>;
siteRes: GetSiteResponse;
}
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,
// 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,
};
}
}
get documentTitle(): string {
- return `${i18n.t("communities")} - ${
+ return `${I18NextService.i18n.t("communities")} - ${
this.state.siteRes.site_view.site.name
}`;
}
const { listingType, page } = this.getCommunitiesQueryParams();
return (
<div>
- <div className="row">
- <div className="col-md-6">
- <h4>{i18n.t("list_of_communities")}</h4>
- <span className="mb-2">
- <ListingTypeSelect
- type_={listingType}
- showLocal={showLocal(this.isoData)}
- showSubscribed
- onChange={this.handleListingTypeChange}
- />
- </span>
- </div>
- <div className="col-md-6">
- <div className="float-md-right">{this.searchForm()}</div>
+ <h1 className="h4 mb-4">
+ {I18NextService.i18n.t("list_of_communities")}
+ </h1>
+ <div className="row g-2 justify-content-between">
+ <div className="col-auto">
+ <ListingTypeSelect
+ type_={listingType}
+ showLocal={showLocal(this.isoData)}
+ showSubscribed
+ onChange={this.handleListingTypeChange}
+ />
</div>
+ <div className="col-auto">{this.searchForm()}</div>
</div>
<div className="table-responsive">
>
<thead className="pointer">
<tr>
- <th>{i18n.t("name")}</th>
- <th className="text-right">{i18n.t("subscribers")}</th>
+ <th>{I18NextService.i18n.t("name")}</th>
+ <th className="text-right">
+ {I18NextService.i18n.t("subscribers")}
+ </th>
<th className="text-right">
- {i18n.t("users")} / {i18n.t("month")}
+ {I18NextService.i18n.t("users")} /{" "}
+ {I18NextService.i18n.t("month")}
</th>
<th className="text-right d-none d-lg-table-cell">
- {i18n.t("posts")}
+ {I18NextService.i18n.t("posts")}
</th>
<th className="text-right d-none d-lg-table-cell">
- {i18n.t("comments")}
+ {I18NextService.i18n.t("comments")}
</th>
<th></th>
</tr>
this.handleFollow
)}
>
- {i18n.t("unsubscribe")}
+ {I18NextService.i18n.t("unsubscribe")}
</button>
)}
{cv.subscribed === "NotSubscribed" && (
this.handleFollow
)}
>
- {i18n.t("subscribe")}
+ {I18NextService.i18n.t("subscribe")}
</button>
)}
{cv.subscribed === "Pending" && (
<div className="text-warning d-inline-block">
- {i18n.t("subscribe_pending")}
+ {I18NextService.i18n.t("subscribe_pending")}
</div>
)}
</td>
render() {
return (
- <div className="container-lg">
+ <div className="communities container-lg">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
searchForm() {
return (
<form
- className="form-inline"
+ className="row mb-2"
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"
+ value={this.state.searchText}
+ placeholder={`${I18NextService.i18n.t("search")}...`}
+ onInput={linkEvent(this, this.handleSearchChange)}
+ required
+ minLength={3}
+ />
+ </div>
+ <div className="col-auto">
+ <label className="visually-hidden" htmlFor="communities-search">
+ {I18NextService.i18n.t("search")}
+ </label>
+ <button type="submit" className="btn btn-secondary">
+ <span>{I18NextService.i18n.t("search")}</span>
+ </button>
+ </div>
</form>
);
}
handleSearchSubmit(i: Communities, event: any) {
event.preventDefault();
const searchParamEncoded = encodeURIComponent(i.state.searchText);
- i.context.router.history.push(`/search?q=${searchParamEncoded}`);
+ i.context.router.history.push(
+ `/search?q=${searchParamEncoded}&type=Communities`
+ );
}
- 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",
auth: auth,
};
- return [client.listCommunities(listCommunitiesForm)];
+ return {
+ listCommunitiesResponse: await client.listCommunities(
+ listCommunitiesForm
+ ),
+ };
}
getCommunitiesQueryParams() {