+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 {
- QueryParams,
- RouteDataResponse,
- editCommunity,
- getPageFromString,
- getQueryParams,
- getQueryString,
- 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>
- </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 async fetchInitialData({