+import {
+ fetchUsers,
+ getUpdatedSearchId,
+ myAuth,
+ personToChoice,
+ setIsoData,
+} from "@utils/app";
+import {
+ debounce,
+ formatPastDate,
+ getIdFromString,
+ getPageFromString,
+ getQueryParams,
+ getQueryString,
+} from "@utils/helpers";
+import { amAdmin, amMod } from "@utils/roles";
+import type { QueryParams } from "@utils/types";
+import { Choice, RouteDataResponse } from "@utils/types";
import { NoOptionI18nKeys } from "i18next";
import { Component, linkEvent } from "inferno";
import { T } from "inferno-i18next-dess";
GetModlog,
GetModlogResponse,
GetPersonDetails,
+ GetPersonDetailsResponse,
ModAddCommunityView,
ModAddView,
ModBanFromCommunityView,
ModlogActionType,
Person,
} from "lemmy-js-client";
-import moment from "moment";
-import { i18n } from "../i18next";
+import { fetchLimit } from "../config";
import { InitialFetchRequest } from "../interfaces";
-import { FirstLoadService } from "../services/FirstLoadService";
+import { FirstLoadService, I18NextService } from "../services";
import { HttpService, RequestState } from "../services/HttpService";
-import {
- Choice,
- QueryParams,
- amAdmin,
- amMod,
- debounce,
- fetchLimit,
- fetchUsers,
- getIdFromString,
- getPageFromString,
- getQueryParams,
- getQueryString,
- getUpdatedSearchId,
- myAuth,
- personToChoice,
- setIsoData,
-} from "../utils";
import { HtmlTags } from "./common/html-tags";
import { Icon, Spinner } from "./common/icon";
import { MomentTime } from "./common/moment-time";
| AdminPurgePostView
| AdminPurgeCommentView;
+type ModlogData = RouteDataResponse<{
+ res: GetModlogResponse;
+ communityRes: GetCommunityResponse;
+ modUserResponse: GetPersonDetailsResponse;
+ userResponse: GetPersonDetailsResponse;
+}>;
+
interface ModlogType {
id: number;
type_: ModlogActionType;
)}
{expires && (
<span>
- <div>expires: {moment.utc(expires).fromNow()}</div>
+ <div>expires: {formatPastDate(expires)}</div>
</span>
)}
</>
)}
{expires && (
<span>
- <div>expires: {moment.utc(expires).fromNow()}</div>
+ <div>expires: {formatPastDate(expires)}</div>
</span>
)}
</>
)}
{expires && (
<span>
- <div>expires: {moment.utc(expires).fromNow()}</div>
+ <div>expires: {formatPastDate(expires)}</div>
</span>
)}
</>
options: Choice[];
loading: boolean;
}) => (
- <div className="col-sm-6 form-group">
- <label className="col-form-label" htmlFor={`filter-${filterType}`}>
- {i18n.t(`filter_by_${filterType}` as NoOptionI18nKeys)}
+ <div className="col-sm-6 mb-3">
+ <label className="mb-2" htmlFor={`filter-${filterType}`}>
+ {I18NextService.i18n.t(`filter_by_${filterType}` as NoOptionI18nKeys)}
</label>
<SearchableSelect
id={`filter-${filterType}`}
value={value ?? 0}
options={[
{
- label: i18n.t("all"),
+ label: I18NextService.i18n.t("all"),
value: "0",
},
].concat(options)}
RouteComponentProps<{ communityId?: string }>,
ModlogState
> {
- private isoData = setIsoData(this.context);
+ private isoData = setIsoData<ModlogData>(this.context);
state: ModlogState = {
res: { state: "empty" },
// Only fetch the data if coming from another route
if (FirstLoadService.isFirstLoad) {
- const [res, communityRes, filteredModRes, filteredUserRes] =
+ const { res, communityRes, modUserResponse, userResponse } =
this.isoData.routeData;
+
this.state = {
...this.state,
res,
communityRes,
};
- if (filteredModRes.state === "success") {
+ if (modUserResponse.state === "success") {
this.state = {
...this.state,
- modSearchOptions: [personToChoice(filteredModRes.data.person_view)],
+ modSearchOptions: [personToChoice(modUserResponse.data.person_view)],
};
}
- if (filteredUserRes.state === "success") {
+ if (userResponse.state === "success") {
this.state = {
...this.state,
- userSearchOptions: [personToChoice(filteredUserRes.data.person_view)],
+ userSearchOptions: [personToChoice(userResponse.data.person_view)],
};
}
}
}
+ async componentDidMount() {
+ await this.refetch();
+ }
+
get combined() {
const res = this.state.res;
const combined = res.state == "success" ? buildCombined(res.data) : [];
this.isoData.site_res.admins.some(
({ person: { id } }) => id === person.id
)
- ? i18n.t("admin")
- : i18n.t("mod");
+ ? I18NextService.i18n.t("admin")
+ : I18NextService.i18n.t("mod");
}
get documentTitle(): string {
const { actionType, modId, userId } = getModlogQueryParams();
return (
- <div className="container-lg">
+ <div className="modlog container-lg">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
/>
- <div>
- <div
- className="alert alert-warning text-sm-start text-xs-center"
- role="alert"
- >
- <Icon
- icon="alert-triangle"
- inline
- classes="mr-sm-2 mx-auto d-sm-inline d-block"
- />
- <T i18nKey="modlog_content_warning" class="d-inline">
- #<strong>#</strong>#
- </T>
- </div>
- {this.state.communityRes.state === "success" && (
- <h5>
- <Link
- className="text-body"
- to={`/c/${this.state.communityRes.data.community_view.community.name}`}
- >
- /c/{this.state.communityRes.data.community_view.community.name}{" "}
- </Link>
- <span>{i18n.t("modlog")}</span>
- </h5>
- )}
- <div className="form-row">
+ <h1 className="h4 mb-4">{I18NextService.i18n.t("modlog")}</h1>
+
+ <div
+ className="alert alert-warning text-sm-start text-xs-center"
+ role="alert"
+ >
+ <Icon
+ icon="alert-triangle"
+ inline
+ classes="me-sm-2 mx-auto d-sm-inline d-block"
+ />
+ <T i18nKey="modlog_content_warning" class="d-inline">
+ #<strong>#</strong>#
+ </T>
+ </div>
+ {this.state.communityRes.state === "success" && (
+ <h5>
+ <Link
+ className="text-body"
+ to={`/c/${this.state.communityRes.data.community_view.community.name}`}
+ >
+ /c/{this.state.communityRes.data.community_view.community.name}{" "}
+ </Link>
+ <span>{I18NextService.i18n.t("modlog")}</span>
+ </h5>
+ )}
+ <div className="row mb-2">
+ <div className="col-sm-6">
<select
value={actionType}
onChange={linkEvent(this, this.handleFilterActionChange)}
- className="custom-select col-sm-6"
+ className="form-select"
aria-label="action"
>
<option disabled aria-hidden="true">
- {i18n.t("filter_by_action")}
+ {I18NextService.i18n.t("filter_by_action")}
</option>
- <option value={"All"}>{i18n.t("all")}</option>
+ <option value={"All"}>{I18NextService.i18n.t("all")}</option>
<option value={"ModRemovePost"}>Removing Posts</option>
<option value={"ModLockPost"}>Locking Posts</option>
<option value={"ModFeaturePost"}>Featuring Posts</option>
<option value={"ModBan"}>Banning From Site</option>
</select>
</div>
- <div className="form-row mb-2">
+ </div>
+ <div className="row mb-2">
+ <Filter
+ filterType="user"
+ onChange={this.handleUserChange}
+ onSearch={this.handleSearchUsers}
+ value={userId}
+ options={userSearchOptions}
+ loading={loadingUserSearch}
+ />
+ {!this.isoData.site_res.site_view.local_site
+ .hide_modlog_mod_names && (
<Filter
- filterType="user"
- onChange={this.handleUserChange}
- onSearch={this.handleSearchUsers}
- value={userId}
- options={userSearchOptions}
- loading={loadingUserSearch}
+ filterType="mod"
+ onChange={this.handleModChange}
+ onSearch={this.handleSearchMods}
+ value={modId}
+ options={modSearchOptions}
+ loading={loadingModSearch}
/>
- {!this.isoData.site_res.site_view.local_site
- .hide_modlog_mod_names && (
- <Filter
- filterType="mod"
- onChange={this.handleModChange}
- onSearch={this.handleSearchMods}
- value={modId}
- options={modSearchOptions}
- loading={loadingModSearch}
- />
- )}
- </div>
- {this.renderModlogTable()}
+ )}
</div>
+ {this.renderModlogTable()}
</div>
);
}
<table id="modlog_table" className="table table-sm table-hover">
<thead className="pointer">
<tr>
- <th> {i18n.t("time")}</th>
- <th>{i18n.t("mod")}</th>
- <th>{i18n.t("action")}</th>
+ <th> {I18NextService.i18n.t("time")}</th>
+ <th>{I18NextService.i18n.t("mod")}</th>
+ <th>{I18NextService.i18n.t("action")}</th>
</tr>
</thead>
{this.combined}
}
}
- static fetchInitialData({
+ static async fetchInitialData({
client,
path,
query: { modId: urlModId, page, userId: urlUserId, actionType },
auth,
site,
- }: InitialFetchRequest<QueryParams<ModlogProps>>): Promise<
- RequestState<any>
- >[] {
+ }: InitialFetchRequest<QueryParams<ModlogProps>>): Promise<ModlogData> {
const pathSplit = path.split("/");
- const promises: Promise<RequestState<any>>[] = [];
const communityId = getIdFromString(pathSplit[2]);
const modId = !site.site_view.local_site.hide_modlog_mod_names
? getIdFromString(urlModId)
auth,
};
- promises.push(client.getModlog(modlogForm));
+ let communityResponse: RequestState<GetCommunityResponse> = {
+ state: "empty",
+ };
if (communityId) {
const communityForm: GetCommunity = {
id: communityId,
auth,
};
- promises.push(client.getCommunity(communityForm));
- } else {
- promises.push(Promise.resolve({ state: "empty" }));
+
+ communityResponse = await client.getCommunity(communityForm);
}
+ let modUserResponse: RequestState<GetPersonDetailsResponse> = {
+ state: "empty",
+ };
+
if (modId) {
const getPersonForm: GetPersonDetails = {
person_id: modId,
auth,
};
- promises.push(client.getPersonDetails(getPersonForm));
- } else {
- promises.push(Promise.resolve({ state: "empty" }));
+ modUserResponse = await client.getPersonDetails(getPersonForm);
}
+ let userResponse: RequestState<GetPersonDetailsResponse> = {
+ state: "empty",
+ };
+
if (userId) {
const getPersonForm: GetPersonDetails = {
person_id: userId,
auth,
};
- promises.push(client.getPersonDetails(getPersonForm));
- } else {
- promises.push(Promise.resolve({ state: "empty" }));
+ userResponse = await client.getPersonDetails(getPersonForm);
}
- return promises;
+ return {
+ res: await client.getModlog(modlogForm),
+ communityRes: communityResponse,
+ modUserResponse,
+ userResponse,
+ };
}
}