AdminPurgeCommunityView,
AdminPurgePersonView,
AdminPurgePostView,
- CommunityModeratorView,
GetCommunity,
GetCommunityResponse,
GetModlog,
ModRemovePostView,
ModTransferCommunityView,
ModlogActionType,
- PersonSafe,
- UserOperation,
- wsJsonToRes,
- wsUserOp,
+ Person,
} from "lemmy-js-client";
import moment from "moment";
-import { Subscription } from "rxjs";
import { i18n } from "../i18next";
import { InitialFetchRequest } from "../interfaces";
-import { WebSocketService } from "../services";
+import { FirstLoadService } from "../services/FirstLoadService";
+import { HttpService, RequestState } from "../services/HttpService";
import {
Choice,
QueryParams,
+ RouteDataResponse,
amAdmin,
amMod,
debounce,
getQueryParams,
getQueryString,
getUpdatedSearchId,
- isBrowser,
myAuth,
personToChoice,
setIsoData,
- toast,
- wsClient,
- wsSubscribe,
} from "../utils";
import { HtmlTags } from "./common/html-tags";
import { Icon, Spinner } from "./common/icon";
| AdminPurgePostView
| AdminPurgeCommentView;
+type ModlogData = RouteDataResponse<{
+ res: GetModlogResponse;
+ communityRes: GetCommunityResponse;
+ modUserResponse: GetPersonDetailsResponse;
+ userResponse: GetPersonDetailsResponse;
+}>;
+
interface ModlogType {
id: number;
type_: ModlogActionType;
- moderator?: PersonSafe;
+ moderator?: Person;
view: View;
when_: string;
}
});
interface ModlogState {
- res?: GetModlogResponse;
- communityMods?: CommunityModeratorView[];
- communityName?: string;
- loadingModlog: boolean;
+ res: RequestState<GetModlogResponse>;
+ communityRes: RequestState<GetCommunityResponse>;
loadingModSearch: boolean;
loadingUserSearch: boolean;
modSearchOptions: Choice[];
actionType: ModlogActionType;
}
-const getActionFromString = (action?: string) =>
- action
- ? ModlogActionType[action] ?? ModlogActionType.All
- : ModlogActionType.All;
+function getActionFromString(action?: string): ModlogActionType {
+ return action !== undefined ? (action as ModlogActionType) : "All";
+}
const getModlogActionMapper =
(
actionType: ModlogActionType,
getAction: (view: View) => { id: number; when_: string }
) =>
- (view: View & { moderator?: PersonSafe; admin?: PersonSafe }): ModlogType => {
+ (view: View & { moderator?: Person; admin?: Person }): ModlogType => {
const { id, when_ } = getAction(view);
return {
const combined = removed_posts
.map(
getModlogActionMapper(
- ModlogActionType.ModRemovePost,
+ "ModRemovePost",
({ mod_remove_post }: ModRemovePostView) => mod_remove_post
)
)
.concat(
locked_posts.map(
getModlogActionMapper(
- ModlogActionType.ModLockPost,
+ "ModLockPost",
({ mod_lock_post }: ModLockPostView) => mod_lock_post
)
)
.concat(
featured_posts.map(
getModlogActionMapper(
- ModlogActionType.ModFeaturePost,
+ "ModFeaturePost",
({ mod_feature_post }: ModFeaturePostView) => mod_feature_post
)
)
.concat(
removed_comments.map(
getModlogActionMapper(
- ModlogActionType.ModRemoveComment,
+ "ModRemoveComment",
({ mod_remove_comment }: ModRemoveCommentView) => mod_remove_comment
)
)
.concat(
removed_communities.map(
getModlogActionMapper(
- ModlogActionType.ModRemoveCommunity,
+ "ModRemoveCommunity",
({ mod_remove_community }: ModRemoveCommunityView) =>
mod_remove_community
)
.concat(
banned_from_community.map(
getModlogActionMapper(
- ModlogActionType.ModBanFromCommunity,
+ "ModBanFromCommunity",
({ mod_ban_from_community }: ModBanFromCommunityView) =>
mod_ban_from_community
)
.concat(
added_to_community.map(
getModlogActionMapper(
- ModlogActionType.ModAddCommunity,
+ "ModAddCommunity",
({ mod_add_community }: ModAddCommunityView) => mod_add_community
)
)
.concat(
transferred_to_community.map(
getModlogActionMapper(
- ModlogActionType.ModTransferCommunity,
+ "ModTransferCommunity",
({ mod_transfer_community }: ModTransferCommunityView) =>
mod_transfer_community
)
)
.concat(
added.map(
- getModlogActionMapper(
- ModlogActionType.ModAdd,
- ({ mod_add }: ModAddView) => mod_add
- )
+ getModlogActionMapper("ModAdd", ({ mod_add }: ModAddView) => mod_add)
)
)
.concat(
banned.map(
- getModlogActionMapper(
- ModlogActionType.ModBan,
- ({ mod_ban }: ModBanView) => mod_ban
- )
+ getModlogActionMapper("ModBan", ({ mod_ban }: ModBanView) => mod_ban)
)
)
.concat(
admin_purged_persons.map(
getModlogActionMapper(
- ModlogActionType.AdminPurgePerson,
+ "AdminPurgePerson",
({ admin_purge_person }: AdminPurgePersonView) => admin_purge_person
)
)
.concat(
admin_purged_communities.map(
getModlogActionMapper(
- ModlogActionType.AdminPurgeCommunity,
+ "AdminPurgeCommunity",
({ admin_purge_community }: AdminPurgeCommunityView) =>
admin_purge_community
)
.concat(
admin_purged_posts.map(
getModlogActionMapper(
- ModlogActionType.AdminPurgePost,
+ "AdminPurgePost",
({ admin_purge_post }: AdminPurgePostView) => admin_purge_post
)
)
.concat(
admin_purged_comments.map(
getModlogActionMapper(
- ModlogActionType.AdminPurgeComment,
+ "AdminPurgeComment",
({ admin_purge_comment }: AdminPurgeCommentView) =>
admin_purge_comment
)
function renderModlogType({ type_, view }: ModlogType) {
switch (type_) {
- case ModlogActionType.ModRemovePost: {
+ case "ModRemovePost": {
const mrpv = view as ModRemovePostView;
const {
mod_remove_post: { reason, removed },
);
}
- case ModlogActionType.ModLockPost: {
+ case "ModLockPost": {
const {
mod_lock_post: { locked },
post: { id, name },
);
}
- case ModlogActionType.ModFeaturePost: {
+ case "ModFeaturePost": {
const {
mod_feature_post: { featured, is_featured_community },
post: { id, name },
</>
);
}
- case ModlogActionType.ModRemoveComment: {
+ case "ModRemoveComment": {
const mrc = view as ModRemoveCommentView;
const {
mod_remove_comment: { reason, removed },
);
}
- case ModlogActionType.ModRemoveCommunity: {
+ case "ModRemoveCommunity": {
const mrco = view as ModRemoveCommunityView;
const {
mod_remove_community: { reason, expires, removed },
);
}
- case ModlogActionType.ModBanFromCommunity: {
+ case "ModBanFromCommunity": {
const mbfc = view as ModBanFromCommunityView;
const {
mod_ban_from_community: { reason, expires, banned },
);
}
- case ModlogActionType.ModAddCommunity: {
+ case "ModAddCommunity": {
const {
mod_add_community: { removed },
modded_person,
);
}
- case ModlogActionType.ModTransferCommunity: {
- const {
- mod_transfer_community: { removed },
- community,
- modded_person,
- } = view as ModTransferCommunityView;
+ case "ModTransferCommunity": {
+ const { community, modded_person } = view as ModTransferCommunityView;
return (
<>
- <span>{removed ? "Removed " : "Transferred "}</span>
+ <span>Transferred</span>
<span>
<CommunityLink community={community} />
</span>
);
}
- case ModlogActionType.ModBan: {
+ case "ModBan": {
const {
mod_ban: { reason, expires, banned },
banned_person,
);
}
- case ModlogActionType.ModAdd: {
+ case "ModAdd": {
const {
mod_add: { removed },
modded_person,
</>
);
}
- case ModlogActionType.AdminPurgePerson: {
+ case "AdminPurgePerson": {
const {
admin_purge_person: { reason },
} = view as AdminPurgePersonView;
);
}
- case ModlogActionType.AdminPurgeCommunity: {
+ case "AdminPurgeCommunity": {
const {
admin_purge_community: { reason },
} = view as AdminPurgeCommunityView;
);
}
- case ModlogActionType.AdminPurgePost: {
+ case "AdminPurgePost": {
const {
admin_purge_post: { reason },
community,
);
}
- case ModlogActionType.AdminPurgeComment: {
+ case "AdminPurgeComment": {
const {
admin_purge_comment: { reason },
post: { id, name },
options: Choice[];
loading: boolean;
}) => (
- <div className="col-sm-6 form-group">
- <label className="col-form-label" htmlFor={`filter-${filterType}`}>
+ <div className="col-sm-6 mb-3">
+ <label className="mb-2" htmlFor={`filter-${filterType}`}>
{i18n.t(`filter_by_${filterType}` as NoOptionI18nKeys)}
</label>
<SearchableSelect
if (text.length > 0) {
newOptions.push(
- ...(await fetchUsers(text)).users
- .slice(0, fetchLimit)
+ ...(await fetchUsers(text))
+ .slice(0, Number(fetchLimit))
.map<Choice>(personToChoice)
);
}
RouteComponentProps<{ communityId?: string }>,
ModlogState
> {
- private isoData = setIsoData(this.context);
- private subscription?: Subscription;
+ private isoData = setIsoData<ModlogData>(this.context);
state: ModlogState = {
- loadingModlog: true,
+ res: { state: "empty" },
+ communityRes: { state: "empty" },
loadingModSearch: false,
loadingUserSearch: false,
userSearchOptions: [],
this.handleUserChange = this.handleUserChange.bind(this);
this.handleModChange = this.handleModChange.bind(this);
- this.parseMessage = this.parseMessage.bind(this);
- this.subscription = wsSubscribe(this.parseMessage);
-
// Only fetch the data if coming from another route
- if (this.isoData.path === this.context.router.route.match.url) {
- this.state = {
- ...this.state,
- res: this.isoData.routeData[0] as GetModlogResponse,
- };
+ if (FirstLoadService.isFirstLoad) {
+ const { res, communityRes, modUserResponse, userResponse } =
+ this.isoData.routeData;
- const communityRes: GetCommunityResponse | undefined =
- this.isoData.routeData[1];
-
- // Getting the moderators
this.state = {
...this.state,
- communityMods: communityRes?.moderators,
+ res,
+ communityRes,
};
- const filteredModRes: GetPersonDetailsResponse | undefined =
- this.isoData.routeData[2];
- if (filteredModRes) {
+ if (modUserResponse.state === "success") {
this.state = {
...this.state,
- modSearchOptions: [personToChoice(filteredModRes.person_view)],
+ modSearchOptions: [personToChoice(modUserResponse.data.person_view)],
};
}
- const filteredUserRes: GetPersonDetailsResponse | undefined =
- this.isoData.routeData[3];
- if (filteredUserRes) {
+ if (userResponse.state === "success") {
this.state = {
...this.state,
- userSearchOptions: [personToChoice(filteredUserRes.person_view)],
+ userSearchOptions: [personToChoice(userResponse.data.person_view)],
};
}
-
- this.state = { ...this.state, loadingModlog: false };
- } else {
- this.refetch();
- }
- }
-
- componentWillUnmount() {
- if (isBrowser()) {
- this.subscription?.unsubscribe();
}
}
get combined() {
const res = this.state.res;
- const combined = res ? buildCombined(res) : [];
+ const combined = res.state == "success" ? buildCombined(res.data) : [];
return (
<tbody>
}
get amAdminOrMod(): boolean {
- return amAdmin() || amMod(this.state.communityMods);
+ const amMod_ =
+ this.state.communityRes.state == "success" &&
+ amMod(this.state.communityRes.data.moderators);
+ return amAdmin() || amMod_;
}
- modOrAdminText(person?: PersonSafe): string {
+ modOrAdminText(person?: Person): string {
return person &&
this.isoData.site_res.admins.some(
({ person: { id } }) => id === person.id
render() {
const {
- communityName,
- loadingModlog,
loadingModSearch,
loadingUserSearch,
userSearchOptions,
modSearchOptions,
} = this.state;
- const { actionType, page, modId, userId } = getModlogQueryParams();
+ 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}
<Icon
icon="alert-triangle"
inline
- classes="mr-sm-2 mx-auto d-sm-inline d-block"
+ classes="me-sm-2 mx-auto d-sm-inline d-block"
/>
<T i18nKey="modlog_content_warning" class="d-inline">
#<strong>#</strong>#
</T>
</div>
- <h5>
- {communityName && (
- <Link className="text-body" to={`/c/${communityName}`}>
- /c/{communityName}{" "}
+ {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">
- <select
- value={actionType}
- onChange={linkEvent(this, this.handleFilterActionChange)}
- className="custom-select col-sm-6"
- aria-label="action"
- >
- <option disabled aria-hidden="true">
- {i18n.t("filter_by_action")}
- </option>
- <option value={ModlogActionType.All}>{i18n.t("all")}</option>
- <option value={ModlogActionType.ModRemovePost}>
- Removing Posts
- </option>
- <option value={ModlogActionType.ModLockPost}>
- Locking Posts
- </option>
- <option value={ModlogActionType.ModFeaturePost}>
- Featuring Posts
- </option>
- <option value={ModlogActionType.ModRemoveComment}>
- Removing Comments
- </option>
- <option value={ModlogActionType.ModRemoveCommunity}>
- Removing Communities
- </option>
- <option value={ModlogActionType.ModBanFromCommunity}>
- Banning From Communities
- </option>
- <option value={ModlogActionType.ModAddCommunity}>
- Adding Mod to Community
- </option>
- <option value={ModlogActionType.ModTransferCommunity}>
- Transferring Communities
- </option>
- <option value={ModlogActionType.ModAdd}>
- Adding Mod to Site
- </option>
- <option value={ModlogActionType.ModBan}>Banning From Site</option>
- </select>
+ <span>{i18n.t("modlog")}</span>
+ </h5>
+ )}
+ <div className="row mb-2">
+ <div className="col-sm-6">
+ <select
+ value={actionType}
+ onChange={linkEvent(this, this.handleFilterActionChange)}
+ className="form-select"
+ aria-label="action"
+ >
+ <option disabled aria-hidden="true">
+ {i18n.t("filter_by_action")}
+ </option>
+ <option value={"All"}>{i18n.t("all")}</option>
+ <option value={"ModRemovePost"}>Removing Posts</option>
+ <option value={"ModLockPost"}>Locking Posts</option>
+ <option value={"ModFeaturePost"}>Featuring Posts</option>
+ <option value={"ModRemoveComment"}>Removing Comments</option>
+ <option value={"ModRemoveCommunity"}>
+ Removing Communities
+ </option>
+ <option value={"ModBanFromCommunity"}>
+ Banning From Communities
+ </option>
+ <option value={"ModAddCommunity"}>
+ Adding Mod to Community
+ </option>
+ <option value={"ModTransferCommunity"}>
+ Transferring Communities
+ </option>
+ <option value={"ModAdd"}>Adding Mod to Site</option>
+ <option value={"ModBan"}>Banning From Site</option>
+ </select>
+ </div>
</div>
- <div className="form-row mb-2">
+ <div className="row mb-2">
<Filter
filterType="user"
onChange={this.handleUserChange}
/>
)}
</div>
- <div className="table-responsive">
- {loadingModlog ? (
- <h5>
- <Spinner large />
- </h5>
- ) : (
- <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>
- </tr>
- </thead>
- {this.combined}
- </table>
- )}
- <Paginator page={page} onChange={this.handlePageChange} />
- </div>
+ {this.renderModlogTable()}
</div>
</div>
);
}
+ renderModlogTable() {
+ switch (this.state.res.state) {
+ case "loading":
+ return (
+ <h5>
+ <Spinner large />
+ </h5>
+ );
+ case "success": {
+ const page = getModlogQueryParams().page;
+ return (
+ <div className="table-responsive">
+ <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>
+ </tr>
+ </thead>
+ {this.combined}
+ </table>
+ <Paginator page={page} onChange={this.handlePageChange} />
+ </div>
+ );
+ }
+ }
+ }
+
handleFilterActionChange(i: Modlog, event: any) {
i.updateUrl({
- actionType: ModlogActionType[event.target.value],
+ actionType: event.target.value as ModlogActionType,
page: 1,
});
}
});
});
- updateUrl({ actionType, modId, page, userId }: Partial<ModlogProps>) {
+ async updateUrl({ actionType, modId, page, userId }: Partial<ModlogProps>) {
const {
page: urlPage,
actionType: urlActionType,
)}`
);
- this.setState({
- loadingModlog: true,
- res: undefined,
- });
-
- this.refetch();
+ await this.refetch();
}
- refetch() {
- const auth = myAuth(false);
+ async refetch() {
+ const auth = myAuth();
const { actionType, page, modId, userId } = getModlogQueryParams();
const { communityId: urlCommunityId } = this.props.match.params;
const communityId = getIdFromString(urlCommunityId);
- const modlogForm: GetModlog = {
- community_id: communityId,
- page,
- limit: fetchLimit,
- type_: actionType,
- other_person_id: userId ?? undefined,
- mod_person_id: !this.isoData.site_res.site_view.local_site
- .hide_modlog_mod_names
- ? modId ?? undefined
- : undefined,
- auth,
- };
-
- WebSocketService.Instance.send(wsClient.getModlog(modlogForm));
-
- if (communityId) {
- const communityForm: GetCommunity = {
- id: communityId,
+ this.setState({ res: { state: "loading" } });
+ this.setState({
+ res: await HttpService.client.getModlog({
+ community_id: communityId,
+ page,
+ limit: fetchLimit,
+ type_: actionType,
+ other_person_id: userId ?? undefined,
+ mod_person_id: !this.isoData.site_res.site_view.local_site
+ .hide_modlog_mod_names
+ ? modId ?? undefined
+ : undefined,
auth,
- };
+ }),
+ });
- WebSocketService.Instance.send(wsClient.getCommunity(communityForm));
+ if (communityId) {
+ this.setState({ communityRes: { state: "loading" } });
+ this.setState({
+ communityRes: await HttpService.client.getCommunity({
+ id: communityId,
+ auth,
+ }),
+ });
}
}
- static fetchInitialData({
+ static async fetchInitialData({
client,
path,
query: { modId: urlModId, page, userId: urlUserId, actionType },
auth,
site,
- }: InitialFetchRequest<QueryParams<ModlogProps>>): Promise<any>[] {
+ }: InitialFetchRequest<QueryParams<ModlogProps>>): Promise<ModlogData> {
const pathSplit = path.split("/");
- const promises: Promise<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());
+
+ 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());
+ 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());
+ userResponse = await client.getPersonDetails(getPersonForm);
}
- return promises;
- }
-
- parseMessage(msg: any) {
- const op = wsUserOp(msg);
- console.log(msg);
-
- if (msg.error) {
- toast(i18n.t(msg.error), "danger");
- } else {
- switch (op) {
- case UserOperation.GetModlog: {
- const res = wsJsonToRes<GetModlogResponse>(msg);
- window.scrollTo(0, 0);
- this.setState({ res, loadingModlog: false });
-
- break;
- }
-
- case UserOperation.GetCommunity: {
- const {
- moderators,
- community_view: {
- community: { name },
- },
- } = wsJsonToRes<GetCommunityResponse>(msg);
- this.setState({
- communityMods: moderators,
- communityName: name,
- });
-
- break;
- }
- }
- }
+ return {
+ res: await client.getModlog(modlogForm),
+ communityRes: communityResponse,
+ modUserResponse,
+ userResponse,
+ };
}
}