-import { getQueryParams, getQueryString } from "@utils/helpers";
+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 {
- RouteDataResponse,
- editCommunity,
- getPageFromString,
- myAuth,
- myAuthRequired,
- numToSI,
- setIsoData,
- showLocal,
-} from "../../utils";
import { HtmlTags } from "../common/html-tags";
import { Spinner } from "../common/icon";
import { ListingTypeSelect } from "../common/listing-type-select";
}
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>
+ <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-md-6">{this.searchForm()}</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">
- {i18n.t("users")} / {i18n.t("month")}
+ {I18NextService.i18n.t("subscribers")}
+ </th>
+ <th className="text-right">
+ {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="row justify-content-end"
+ className="row mb-2"
onSubmit={linkEvent(this, this.handleSearchSubmit)}
>
<div className="col-auto">
<input
type="text"
id="communities-search"
- className="form-control me-2 mb-2"
+ className="form-control"
value={this.state.searchText}
- placeholder={`${i18n.t("search")}...`}
+ 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">
- {i18n.t("search")}
+ {I18NextService.i18n.t("search")}
</label>
- <button type="submit" className="btn btn-secondary mb-2">
- <span>{i18n.t("search")}</span>
+ <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 async fetchInitialData({