import { HttpService, RequestState } from "../../services/HttpService";
import {
QueryParams,
+ RouteDataResponse,
editCommunity,
getPageFromString,
getQueryParams,
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,
};
}
/>
</span>
</div>
- <div className="col-md-6">
- <div className="float-md-right">{this.searchForm()}</div>
- </div>
+ <div className="col-md-6">{this.searchForm()}</div>
</div>
<div className="table-responsive">
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 justify-content-end"
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 me-2 mb-2"
+ value={this.state.searchText}
+ placeholder={`${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")}
+ </label>
+ <button type="submit" className="btn btn-secondary mb-2">
+ <span>{i18n.t("search")}</span>
+ </button>
+ </div>
</form>
);
}
i.context.router.history.push(`/search?q=${searchParamEncoded}`);
}
- 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() {