+import {
+ editComment,
+ editPost,
+ editWith,
+ enableDownvotes,
+ enableNsfw,
+ getCommentParentId,
+ myAuth,
+ myAuthRequired,
+ setIsoData,
+ updatePersonBlock,
+} from "@utils/app";
+import { restoreScrollPosition, saveScrollPosition } from "@utils/browser";
+import {
+ capitalizeFirstLetter,
+ futureDaysToUnixTime,
+ getPageFromString,
+ getQueryParams,
+ getQueryString,
+ numToSI,
+} from "@utils/helpers";
+import { canMod, isAdmin, isBanned } from "@utils/roles";
+import type { QueryParams } from "@utils/types";
+import { RouteDataResponse } from "@utils/types";
import classNames from "classnames";
+import format from "date-fns/format";
+import parseISO from "date-fns/parseISO";
import { NoOptionI18nKeys } from "i18next";
import { Component, linkEvent } from "inferno";
import { Link } from "inferno-router";
import { RouteComponentProps } from "inferno-router/dist/Route";
import {
- AddAdminResponse,
+ AddAdmin,
+ AddModToCommunity,
+ BanFromCommunity,
+ BanFromCommunityResponse,
BanPerson,
BanPersonResponse,
BlockPerson,
- BlockPersonResponse,
+ CommentId,
+ CommentReplyResponse,
CommentResponse,
Community,
CommunityModeratorView,
+ CreateComment,
+ CreateCommentLike,
+ CreateCommentReport,
+ CreatePostLike,
+ CreatePostReport,
+ DeleteComment,
+ DeletePost,
+ DistinguishComment,
+ EditComment,
+ EditPost,
+ FeaturePost,
GetPersonDetails,
GetPersonDetailsResponse,
GetSiteResponse,
+ LockPost,
+ MarkCommentReplyAsRead,
+ MarkPersonMentionAsRead,
+ PersonView,
PostResponse,
+ PurgeComment,
PurgeItemResponse,
+ PurgePerson,
+ PurgePost,
+ RemoveComment,
+ RemovePost,
+ SaveComment,
+ SavePost,
SortType,
- UserOperation,
- wsJsonToRes,
- wsUserOp,
+ TransferCommunity,
} from "lemmy-js-client";
-import moment from "moment";
-import { Subscription } from "rxjs";
-import { i18n } from "../../i18next";
+import { fetchLimit, relTags } from "../../config";
import { InitialFetchRequest, PersonDetailsView } from "../../interfaces";
-import { UserService, WebSocketService } from "../../services";
-import {
- QueryParams,
- canMod,
- capitalizeFirstLetter,
- createCommentLikeRes,
- createPostLikeFindRes,
- editCommentRes,
- editPostFindRes,
- enableDownvotes,
- enableNsfw,
- fetchLimit,
- futureDaysToUnixTime,
- getPageFromString,
- getQueryParams,
- getQueryString,
- isAdmin,
- isBanned,
- mdToHtml,
- myAuth,
- numToSI,
- relTags,
- restoreScrollPosition,
- saveCommentRes,
- saveScrollPosition,
- setIsoData,
- setupTippy,
- toast,
- updatePersonBlock,
- wsClient,
- wsSubscribe,
-} from "../../utils";
+import { mdToHtml } from "../../markdown";
+import { FirstLoadService, I18NextService, UserService } from "../../services";
+import { HttpService, RequestState } from "../../services/HttpService";
+import { setupTippy } from "../../tippy";
+import { toast } from "../../toast";
import { BannerIconHeader } from "../common/banner-icon-header";
import { HtmlTags } from "../common/html-tags";
import { Icon, Spinner } from "../common/icon";
import { MomentTime } from "../common/moment-time";
import { SortSelect } from "../common/sort-select";
+import { UserBadges } from "../common/user-badges";
import { CommunityLink } from "../community/community-link";
import { PersonDetails } from "./person-details";
import { PersonListing } from "./person-listing";
+type ProfileData = RouteDataResponse<{
+ personResponse: GetPersonDetailsResponse;
+}>;
+
interface ProfileState {
- personRes?: GetPersonDetailsResponse;
- loading: boolean;
+ personRes: RequestState<GetPersonDetailsResponse>;
personBlocked: boolean;
banReason?: string;
banExpireDays?: number;
showBanDialog: boolean;
removeData: boolean;
siteRes: GetSiteResponse;
+ finished: Map<CommentId, boolean | undefined>;
+ isIsomorphic: boolean;
}
interface ProfileProps {
: PersonDetailsView.Overview;
}
-function toggleBlockPerson(recipientId: number, block: boolean) {
- const auth = myAuth();
-
- if (auth) {
- const blockUserForm: BlockPerson = {
- person_id: recipientId,
- block,
- auth,
- };
-
- WebSocketService.Instance.send(wsClient.blockPerson(blockUserForm));
- }
-}
-
-const handleUnblockPerson = (personId: number) =>
- toggleBlockPerson(personId, false);
-
-const handleBlockPerson = (personId: number) =>
- toggleBlockPerson(personId, true);
-
const getCommunitiesListing = (
translationKey: NoOptionI18nKeys,
communityViews?: { community: Community }[]
communityViews.length > 0 && (
<div className="card border-secondary mb-3">
<div className="card-body">
- <h5>{i18n.t(translationKey)}</h5>
+ <h5>{I18NextService.i18n.t(translationKey)}</h5>
<ul className="list-unstyled mb-0">
{communityViews.map(({ community }) => (
<li key={community.id}>
RouteComponentProps<{ username: string }>,
ProfileState
> {
- private isoData = setIsoData(this.context);
- private subscription?: Subscription;
+ private isoData = setIsoData<ProfileData>(this.context);
state: ProfileState = {
- loading: true,
+ personRes: { state: "empty" },
personBlocked: false,
siteRes: this.isoData.site_res,
showBanDialog: false,
removeData: false,
+ finished: new Map(),
+ isIsomorphic: false,
};
constructor(props: RouteComponentProps<{ username: string }>, context: any) {
this.handleSortChange = this.handleSortChange.bind(this);
this.handlePageChange = this.handlePageChange.bind(this);
- this.parseMessage = this.parseMessage.bind(this);
- this.subscription = wsSubscribe(this.parseMessage);
+ this.handleBlockPerson = this.handleBlockPerson.bind(this);
+ this.handleUnblockPerson = this.handleUnblockPerson.bind(this);
+
+ this.handleCreateComment = this.handleCreateComment.bind(this);
+ this.handleEditComment = this.handleEditComment.bind(this);
+ this.handleSaveComment = this.handleSaveComment.bind(this);
+ this.handleBlockPersonAlt = this.handleBlockPersonAlt.bind(this);
+ this.handleDeleteComment = this.handleDeleteComment.bind(this);
+ this.handleRemoveComment = this.handleRemoveComment.bind(this);
+ this.handleCommentVote = this.handleCommentVote.bind(this);
+ this.handleAddModToCommunity = this.handleAddModToCommunity.bind(this);
+ this.handleAddAdmin = this.handleAddAdmin.bind(this);
+ this.handlePurgePerson = this.handlePurgePerson.bind(this);
+ this.handlePurgeComment = this.handlePurgeComment.bind(this);
+ this.handleCommentReport = this.handleCommentReport.bind(this);
+ this.handleDistinguishComment = this.handleDistinguishComment.bind(this);
+ this.handleTransferCommunity = this.handleTransferCommunity.bind(this);
+ this.handleCommentReplyRead = this.handleCommentReplyRead.bind(this);
+ this.handlePersonMentionRead = this.handlePersonMentionRead.bind(this);
+ this.handleBanFromCommunity = this.handleBanFromCommunity.bind(this);
+ this.handleBanPerson = this.handleBanPerson.bind(this);
+ this.handlePostVote = this.handlePostVote.bind(this);
+ this.handlePostEdit = this.handlePostEdit.bind(this);
+ this.handlePostReport = this.handlePostReport.bind(this);
+ this.handleLockPost = this.handleLockPost.bind(this);
+ this.handleDeletePost = this.handleDeletePost.bind(this);
+ this.handleRemovePost = this.handleRemovePost.bind(this);
+ this.handleSavePost = this.handleSavePost.bind(this);
+ this.handlePurgePost = this.handlePurgePost.bind(this);
+ this.handleFeaturePost = this.handleFeaturePost.bind(this);
+ this.handleModBanSubmit = this.handleModBanSubmit.bind(this);
// Only fetch the data if coming from another route
- if (this.isoData.path === this.context.router.route.match.url) {
+ if (FirstLoadService.isFirstLoad) {
this.state = {
...this.state,
- personRes: this.isoData.routeData[0] as GetPersonDetailsResponse,
- loading: false,
+ personRes: this.isoData.routeData.personResponse,
+ isIsomorphic: true,
};
- } else {
- this.fetchUserData();
}
}
- fetchUserData() {
- const { page, sort, view } = getProfileQueryParams();
+ async componentDidMount() {
+ if (!this.state.isIsomorphic) {
+ await this.fetchUserData();
+ }
+ setupTippy();
+ }
- const form: GetPersonDetails = {
- username: this.props.match.params.username,
- sort,
- saved_only: view === PersonDetailsView.Saved,
- page,
- limit: fetchLimit,
- auth: myAuth(false),
- };
+ componentWillUnmount() {
+ saveScrollPosition(this.context);
+ }
+
+ async fetchUserData() {
+ const { page, sort, view } = getProfileQueryParams();
- WebSocketService.Instance.send(wsClient.getPersonDetails(form));
+ this.setState({ personRes: { state: "empty" } });
+ this.setState({
+ personRes: await HttpService.client.getPersonDetails({
+ username: this.props.match.params.username,
+ sort,
+ saved_only: view === PersonDetailsView.Saved,
+ page,
+ limit: fetchLimit,
+ auth: myAuth(),
+ }),
+ });
+ restoreScrollPosition(this.context);
+ this.setPersonBlock();
}
get amCurrentUser() {
- return (
- UserService.Instance.myUserInfo?.local_user_view.person.id ===
- this.state.personRes?.person_view.person.id
- );
+ if (this.state.personRes.state === "success") {
+ return (
+ UserService.Instance.myUserInfo?.local_user_view.person.id ===
+ this.state.personRes.data.person_view.person.id
+ );
+ } else {
+ return false;
+ }
}
setPersonBlock() {
const mui = UserService.Instance.myUserInfo;
const res = this.state.personRes;
- if (mui && res) {
+ if (mui && res.state === "success") {
this.setState({
personBlocked: mui.person_blocks.some(
- ({ target: { id } }) => id === res.person_view.person.id
+ ({ target: { id } }) => id === res.data.person_view.person.id
),
});
}
}
- static fetchInitialData({
+ static async fetchInitialData({
client,
path,
query: { page, sort, view: urlView },
auth,
- }: InitialFetchRequest<QueryParams<ProfileProps>>): Promise<any>[] {
+ }: InitialFetchRequest<QueryParams<ProfileProps>>): Promise<ProfileData> {
const pathSplit = path.split("/");
const username = pathSplit[2];
auth,
};
- return [client.getPersonDetails(form)];
- }
-
- componentDidMount() {
- this.setPersonBlock();
- setupTippy();
- }
-
- componentWillUnmount() {
- this.subscription?.unsubscribe();
- saveScrollPosition(this.context);
+ return {
+ personResponse: await client.getPersonDetails(form),
+ };
}
get documentTitle(): string {
+ const siteName = this.state.siteRes.site_view.site.name;
const res = this.state.personRes;
- return res
- ? `@${res.person_view.person.name} - ${this.state.siteRes.site_view.site.name}`
- : "";
+ return res.state == "success"
+ ? `@${res.data.person_view.person.name} - ${siteName}`
+ : siteName;
}
- render() {
- const { personRes, loading, siteRes } = this.state;
- const { page, sort, view } = getProfileQueryParams();
-
- return (
- <div className="container-lg">
- {loading ? (
+ renderPersonRes() {
+ switch (this.state.personRes.state) {
+ case "loading":
+ return (
<h5>
<Spinner large />
</h5>
- ) : (
- personRes && (
- <div className="row">
- <div className="col-12 col-md-8">
- <HtmlTags
- title={this.documentTitle}
- path={this.context.router.route.match.url}
- description={personRes.person_view.person.bio}
- image={personRes.person_view.person.avatar}
- />
-
- {this.userInfo}
-
- <hr />
-
- {this.selects}
-
- <PersonDetails
- personRes={personRes}
- admins={siteRes.admins}
- sort={sort}
- page={page}
- limit={fetchLimit}
- enableDownvotes={enableDownvotes(siteRes)}
- enableNsfw={enableNsfw(siteRes)}
- view={view}
- onPageChange={this.handlePageChange}
- allLanguages={siteRes.all_languages}
- siteLanguages={siteRes.discussion_languages}
- />
- </div>
+ );
+ case "success": {
+ const siteRes = this.state.siteRes;
+ const personRes = this.state.personRes.data;
+ const { page, sort, view } = getProfileQueryParams();
+
+ return (
+ <div className="row">
+ <div className="col-12 col-md-8">
+ <HtmlTags
+ title={this.documentTitle}
+ path={this.context.router.route.match.url}
+ description={personRes.person_view.person.bio}
+ image={personRes.person_view.person.avatar}
+ />
+
+ {this.userInfo(personRes.person_view)}
+
+ <hr />
+
+ {this.selects}
+
+ <PersonDetails
+ personRes={personRes}
+ admins={siteRes.admins}
+ sort={sort}
+ page={page}
+ limit={fetchLimit}
+ finished={this.state.finished}
+ enableDownvotes={enableDownvotes(siteRes)}
+ enableNsfw={enableNsfw(siteRes)}
+ view={view}
+ onPageChange={this.handlePageChange}
+ allLanguages={siteRes.all_languages}
+ siteLanguages={siteRes.discussion_languages}
+ // TODO all the forms here
+ onSaveComment={this.handleSaveComment}
+ onBlockPerson={this.handleBlockPersonAlt}
+ onDeleteComment={this.handleDeleteComment}
+ onRemoveComment={this.handleRemoveComment}
+ onCommentVote={this.handleCommentVote}
+ onCommentReport={this.handleCommentReport}
+ onDistinguishComment={this.handleDistinguishComment}
+ onAddModToCommunity={this.handleAddModToCommunity}
+ onAddAdmin={this.handleAddAdmin}
+ onTransferCommunity={this.handleTransferCommunity}
+ onPurgeComment={this.handlePurgeComment}
+ onPurgePerson={this.handlePurgePerson}
+ onCommentReplyRead={this.handleCommentReplyRead}
+ onPersonMentionRead={this.handlePersonMentionRead}
+ onBanPersonFromCommunity={this.handleBanFromCommunity}
+ onBanPerson={this.handleBanPerson}
+ onCreateComment={this.handleCreateComment}
+ onEditComment={this.handleEditComment}
+ onPostEdit={this.handlePostEdit}
+ onPostVote={this.handlePostVote}
+ onPostReport={this.handlePostReport}
+ onLockPost={this.handleLockPost}
+ onDeletePost={this.handleDeletePost}
+ onRemovePost={this.handleRemovePost}
+ onSavePost={this.handleSavePost}
+ onPurgePost={this.handlePurgePost}
+ onFeaturePost={this.handleFeaturePost}
+ />
+ </div>
- <div className="col-12 col-md-4">
- <Moderates moderates={personRes.moderates} />
- {this.amCurrentUser && <Follows />}
- </div>
+ <div className="col-12 col-md-4">
+ <Moderates moderates={personRes.moderates} />
+ {this.amCurrentUser && <Follows />}
</div>
- )
- )}
+ </div>
+ );
+ }
+ }
+ }
+
+ render() {
+ return (
+ <div className="person-profile container-lg">
+ {this.renderPersonRes()}
</div>
);
}
>
<input
type="radio"
+ className="btn-check"
value={view}
checked={active}
onChange={linkEvent(this, this.handleViewChange)}
/>
- {i18n.t(view.toLowerCase() as NoOptionI18nKeys)}
+ {I18NextService.i18n.t(view.toLowerCase() as NoOptionI18nKeys)}
</label>
);
}
return (
<div className="mb-2">
- <span className="mr-3">{this.viewRadios}</span>
+ <span className="me-3">{this.viewRadios}</span>
<SortSelect
sort={sort}
onChange={this.handleSortChange}
);
}
- get userInfo() {
- const pv = this.state.personRes?.person_view;
+ userInfo(pv: PersonView) {
const {
personBlocked,
siteRes: { admins },
hideAvatar
/>
</li>
- {isBanned(pv.person) && (
- <li className="list-inline-item badge badge-danger">
- {i18n.t("banned")}
- </li>
- )}
- {pv.person.deleted && (
- <li className="list-inline-item badge badge-danger">
- {i18n.t("deleted")}
- </li>
- )}
- {pv.person.admin && (
- <li className="list-inline-item badge badge-light">
- {i18n.t("admin")}
- </li>
- )}
- {pv.person.bot_account && (
- <li className="list-inline-item badge badge-light">
- {i18n.t("bot_account").toLowerCase()}
- </li>
- )}
+ <li className="list-inline-item">
+ <UserBadges
+ classNames="ms-1"
+ isBanned={isBanned(pv.person)}
+ isDeleted={pv.person.deleted}
+ isAdmin={pv.person.admin}
+ isBot={pv.person.bot_account}
+ />
+ </li>
</ul>
</div>
- {this.banDialog}
+ {this.banDialog(pv)}
<div className="flex-grow-1 unselectable pointer mx-2"></div>
{!this.amCurrentUser && UserService.Instance.myUserInfo && (
<>
<a
- className={`d-flex align-self-start btn btn-secondary mr-2 ${
+ className={`d-flex align-self-start btn btn-secondary me-2 ${
!pv.person.matrix_user_id && "invisible"
}`}
rel={relTags}
href={`https://matrix.to/#/${pv.person.matrix_user_id}`}
>
- {i18n.t("send_secure_message")}
+ {I18NextService.i18n.t("send_secure_message")}
</a>
<Link
className={
- "d-flex align-self-start btn btn-secondary mr-2"
+ "d-flex align-self-start btn btn-secondary me-2"
}
to={`/create_private_message/${pv.person.id}`}
>
- {i18n.t("send_message")}
+ {I18NextService.i18n.t("send_message")}
</Link>
{personBlocked ? (
<button
className={
- "d-flex align-self-start btn btn-secondary mr-2"
+ "d-flex align-self-start btn btn-secondary me-2"
}
- onClick={linkEvent(pv.person.id, handleUnblockPerson)}
+ onClick={linkEvent(
+ pv.person.id,
+ this.handleUnblockPerson
+ )}
>
- {i18n.t("unblock_user")}
+ {I18NextService.i18n.t("unblock_user")}
</button>
) : (
<button
className={
- "d-flex align-self-start btn btn-secondary mr-2"
+ "d-flex align-self-start btn btn-secondary me-2"
}
- onClick={linkEvent(pv.person.id, handleBlockPerson)}
+ onClick={linkEvent(
+ pv.person.id,
+ this.handleBlockPerson
+ )}
>
- {i18n.t("block_user")}
+ {I18NextService.i18n.t("block_user")}
</button>
)}
</>
(!isBanned(pv.person) ? (
<button
className={
- "d-flex align-self-start btn btn-secondary mr-2"
+ "d-flex align-self-start btn btn-secondary me-2"
}
onClick={linkEvent(this, this.handleModBanShow)}
- aria-label={i18n.t("ban")}
+ aria-label={I18NextService.i18n.t("ban")}
>
- {capitalizeFirstLetter(i18n.t("ban"))}
+ {capitalizeFirstLetter(I18NextService.i18n.t("ban"))}
</button>
) : (
<button
className={
- "d-flex align-self-start btn btn-secondary mr-2"
+ "d-flex align-self-start btn btn-secondary me-2"
}
onClick={linkEvent(this, this.handleModBanSubmit)}
- aria-label={i18n.t("unban")}
+ aria-label={I18NextService.i18n.t("unban")}
>
- {capitalizeFirstLetter(i18n.t("unban"))}
+ {capitalizeFirstLetter(I18NextService.i18n.t("unban"))}
</button>
))}
</div>
)}
<div>
<ul className="list-inline mb-2">
- <li className="list-inline-item badge badge-light">
- {i18n.t("number_of_posts", {
+ <li className="list-inline-item badge text-bg-light">
+ {I18NextService.i18n.t("number_of_posts", {
count: Number(pv.counts.post_count),
formattedCount: numToSI(pv.counts.post_count),
})}
</li>
- <li className="list-inline-item badge badge-light">
- {i18n.t("number_of_comments", {
+ <li className="list-inline-item badge text-bg-light">
+ {I18NextService.i18n.t("number_of_comments", {
count: Number(pv.counts.comment_count),
formattedCount: numToSI(pv.counts.comment_count),
})}
</ul>
</div>
<div className="text-muted">
- {i18n.t("joined")}{" "}
+ {I18NextService.i18n.t("joined")}{" "}
<MomentTime
published={pv.person.published}
showAgo
</div>
<div className="d-flex align-items-center text-muted mb-2">
<Icon icon="cake" />
- <span className="ml-2">
- {i18n.t("cake_day_title")}{" "}
- {moment
- .utc(pv.person.published)
- .local()
- .format("MMM DD, YYYY")}
+ <span className="ms-2">
+ {I18NextService.i18n.t("cake_day_title")}{" "}
+ {format(parseISO(pv.person.published), "PPP")}
</span>
</div>
{!UserService.Instance.myUserInfo && (
<div className="alert alert-info" role="alert">
- {i18n.t("profile_not_logged_in_alert")}
+ {I18NextService.i18n.t("profile_not_logged_in_alert")}
</div>
)}
</div>
);
}
- get banDialog() {
- const pv = this.state.personRes?.person_view;
+ banDialog(pv: PersonView) {
const { showBanDialog } = this.state;
return (
- pv && (
- <>
- {showBanDialog && (
- <form onSubmit={linkEvent(this, this.handleModBanSubmit)}>
- <div className="form-group row col-12">
- <label className="col-form-label" htmlFor="profile-ban-reason">
- {i18n.t("reason")}
- </label>
- <input
- type="text"
- id="profile-ban-reason"
- className="form-control mr-2"
- placeholder={i18n.t("reason")}
- value={this.state.banReason}
- onInput={linkEvent(this, this.handleModBanReasonChange)}
- />
- <label className="col-form-label" htmlFor={`mod-ban-expires`}>
- {i18n.t("expires")}
- </label>
+ showBanDialog && (
+ <form onSubmit={linkEvent(this, this.handleModBanSubmit)}>
+ <div className="mb-3 row col-12">
+ <label className="col-form-label" htmlFor="profile-ban-reason">
+ {I18NextService.i18n.t("reason")}
+ </label>
+ <input
+ type="text"
+ id="profile-ban-reason"
+ className="form-control me-2"
+ placeholder={I18NextService.i18n.t("reason")}
+ value={this.state.banReason}
+ onInput={linkEvent(this, this.handleModBanReasonChange)}
+ />
+ <label className="col-form-label" htmlFor="mod-ban-expires">
+ {I18NextService.i18n.t("expires")}
+ </label>
+ <input
+ type="number"
+ id="mod-ban-expires"
+ className="form-control me-2"
+ placeholder={I18NextService.i18n.t("number_of_days")}
+ value={this.state.banExpireDays}
+ onInput={linkEvent(this, this.handleModBanExpireDaysChange)}
+ />
+ <div className="input-group mb-3">
+ <div className="form-check">
<input
- type="number"
- id={`mod-ban-expires`}
- className="form-control mr-2"
- placeholder={i18n.t("number_of_days")}
- value={this.state.banExpireDays}
- onInput={linkEvent(this, this.handleModBanExpireDaysChange)}
+ className="form-check-input"
+ id="mod-ban-remove-data"
+ type="checkbox"
+ checked={this.state.removeData}
+ onChange={linkEvent(this, this.handleModRemoveDataChange)}
/>
- <div className="form-group">
- <div className="form-check">
- <input
- className="form-check-input"
- id="mod-ban-remove-data"
- type="checkbox"
- checked={this.state.removeData}
- onChange={linkEvent(this, this.handleModRemoveDataChange)}
- />
- <label
- className="form-check-label"
- htmlFor="mod-ban-remove-data"
- title={i18n.t("remove_content_more")}
- >
- {i18n.t("remove_content")}
- </label>
- </div>
- </div>
- </div>
- {/* TODO hold off on expires until later */}
- {/* <div class="form-group row"> */}
- {/* <label class="col-form-label">Expires</label> */}
- {/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
- {/* </div> */}
- <div className="form-group row">
- <button
- type="reset"
- className="btn btn-secondary mr-2"
- aria-label={i18n.t("cancel")}
- onClick={linkEvent(this, this.handleModBanSubmitCancel)}
+ <label
+ className="form-check-label"
+ htmlFor="mod-ban-remove-data"
+ title={I18NextService.i18n.t("remove_content_more")}
>
- {i18n.t("cancel")}
- </button>
- <button
- type="submit"
- className="btn btn-secondary"
- aria-label={i18n.t("ban")}
- >
- {i18n.t("ban")} {pv.person.name}
- </button>
+ {I18NextService.i18n.t("remove_content")}
+ </label>
</div>
- </form>
- )}
- </>
+ </div>
+ </div>
+ {/* TODO hold off on expires until later */}
+ {/* <div class="mb-3 row"> */}
+ {/* <label class="col-form-label">Expires</label> */}
+ {/* <input type="date" class="form-control me-2" placeholder={I18NextService.i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
+ {/* </div> */}
+ <div className="mb-3 row">
+ <button
+ type="reset"
+ className="btn btn-secondary me-2"
+ aria-label={I18NextService.i18n.t("cancel")}
+ onClick={linkEvent(this, this.handleModBanSubmitCancel)}
+ >
+ {I18NextService.i18n.t("cancel")}
+ </button>
+ </div>
+ <div className="mb-3 row">
+ <button
+ type="submit"
+ className="btn btn-secondary"
+ aria-label={I18NextService.i18n.t("ban")}
+ >
+ {I18NextService.i18n.t("ban")} {pv.person.name}
+ </button>
+ </div>
+ </form>
)
);
}
- updateUrl({ page, sort, view }: Partial<ProfileProps>) {
+
async updateUrl({ page, sort, view }: Partial<ProfileProps>) {
const {
page: urlPage,
sort: urlSort,
const { username } = this.props.match.params;
this.props.history.push(`/u/${username}${getQueryString(queryParams)}`);
-
- this.setState({ loading: true });
- this.fetchUserData();
+ await this.fetchUserData();
}
handlePageChange(page: number) {
i.setState({ removeData: event.target.checked });
}
- handleModBanSubmitCancel(i: Profile, event?: any) {
- event.preventDefault();
+ handleModBanSubmitCancel(i: Profile) {
i.setState({ showBanDialog: false });
}
- handleModBanSubmit(i: Profile, event?: any) {
- if (event) event.preventDefault();
- const { personRes, removeData, banReason, banExpireDays } = i.state;
+ async handleModBanSubmit(i: Profile, event: any) {
+ event.preventDefault();
+ const { removeData, banReason, banExpireDays } = i.state;
- const person = personRes?.person_view.person;
- const auth = myAuth();
+ const personRes = i.state.personRes;
- if (person && auth) {
+ if (personRes.state == "success") {
+ const person = personRes.data.person_view.person;
const ban = !person.banned;
// If its an unban, restore all their data
i.setState({ removeData: false });
}
- const form: BanPerson = {
+ const res = await HttpService.client.banPerson({
person_id: person.id,
ban,
remove_data: removeData,
reason: banReason,
expires: futureDaysToUnixTime(banExpireDays),
- auth,
- };
- WebSocketService.Instance.send(wsClient.banPerson(form));
-
+ auth: myAuthRequired(),
+ });
+ // TODO
+ this.updateBan(res);
i.setState({ showBanDialog: false });
}
}
- parseMessage(msg: any) {
- const op = wsUserOp(msg);
- console.log(msg);
+ async toggleBlockPerson(recipientId: number, block: boolean) {
+ const res = await HttpService.client.blockPerson({
+ person_id: recipientId,
+ block,
+ auth: myAuthRequired(),
+ });
+ if (res.state == "success") {
+ updatePersonBlock(res.data);
+ }
+ }
- if (msg.error) {
- toast(i18n.t(msg.error), "danger");
+ handleUnblockPerson(personId: number) {
+ this.toggleBlockPerson(personId, false);
+ }
- if (msg.error === "couldnt_find_that_username_or_email") {
- this.context.router.history.push("/");
- }
- } else if (msg.reconnect) {
- this.fetchUserData();
- } else {
- switch (op) {
- case UserOperation.GetPersonDetails: {
- // Since the PersonDetails contains posts/comments as well as some general user info we listen here as well
- // and set the parent state if it is not set or differs
- // TODO this might need to get abstracted
- const data = wsJsonToRes<GetPersonDetailsResponse>(msg);
- this.setState({ personRes: data, loading: false });
- this.setPersonBlock();
- restoreScrollPosition(this.context);
-
- break;
- }
+ handleBlockPerson(personId: number) {
+ this.toggleBlockPerson(personId, true);
+ }
- case UserOperation.AddAdmin: {
- const { admins } = wsJsonToRes<AddAdminResponse>(msg);
- this.setState(s => ((s.siteRes.admins = admins), s));
+ async handleAddModToCommunity(form: AddModToCommunity) {
+ // TODO not sure what to do here
+ await HttpService.client.addModToCommunity(form);
+ }
- break;
- }
+ async handlePurgePerson(form: PurgePerson) {
+ const purgePersonRes = await HttpService.client.purgePerson(form);
+ this.purgeItem(purgePersonRes);
+ }
- case UserOperation.CreateCommentLike: {
- const { comment_view } = wsJsonToRes<CommentResponse>(msg);
- createCommentLikeRes(comment_view, this.state.personRes?.comments);
- this.setState(this.state);
+ async handlePurgeComment(form: PurgeComment) {
+ const purgeCommentRes = await HttpService.client.purgeComment(form);
+ this.purgeItem(purgeCommentRes);
+ }
- break;
- }
+ async handlePurgePost(form: PurgePost) {
+ const purgeRes = await HttpService.client.purgePost(form);
+ this.purgeItem(purgeRes);
+ }
- case UserOperation.EditComment:
- case UserOperation.DeleteComment:
- case UserOperation.RemoveComment: {
- const { comment_view } = wsJsonToRes<CommentResponse>(msg);
- editCommentRes(comment_view, this.state.personRes?.comments);
- this.setState(this.state);
+ async handleBlockPersonAlt(form: BlockPerson) {
+ const blockPersonRes = await HttpService.client.blockPerson(form);
+ if (blockPersonRes.state === "success") {
+ updatePersonBlock(blockPersonRes.data);
+ }
+ }
- break;
- }
+ async handleCreateComment(form: CreateComment) {
+ const createCommentRes = await HttpService.client.createComment(form);
+ this.createAndUpdateComments(createCommentRes);
- case UserOperation.CreateComment: {
- const {
- comment_view: {
- creator: { id },
- },
- } = wsJsonToRes<CommentResponse>(msg);
- const mui = UserService.Instance.myUserInfo;
+ return createCommentRes;
+ }
- if (id === mui?.local_user_view.person.id) {
- toast(i18n.t("reply_sent"));
- }
+ async handleEditComment(form: EditComment) {
+ const editCommentRes = await HttpService.client.editComment(form);
+ this.findAndUpdateComment(editCommentRes);
- break;
- }
+ return editCommentRes;
+ }
- case UserOperation.SaveComment: {
- const { comment_view } = wsJsonToRes<CommentResponse>(msg);
- saveCommentRes(comment_view, this.state.personRes?.comments);
- this.setState(this.state);
+ async handleDeleteComment(form: DeleteComment) {
+ const deleteCommentRes = await HttpService.client.deleteComment(form);
+ this.findAndUpdateComment(deleteCommentRes);
+ }
- break;
- }
+ async handleDeletePost(form: DeletePost) {
+ const deleteRes = await HttpService.client.deletePost(form);
+ this.findAndUpdatePost(deleteRes);
+ }
- case UserOperation.EditPost:
- case UserOperation.DeletePost:
- case UserOperation.RemovePost:
- case UserOperation.LockPost:
- case UserOperation.FeaturePost:
- case UserOperation.SavePost: {
- const { post_view } = wsJsonToRes<PostResponse>(msg);
- editPostFindRes(post_view, this.state.personRes?.posts);
- this.setState(this.state);
-
- break;
- }
+ async handleRemovePost(form: RemovePost) {
+ const removeRes = await HttpService.client.removePost(form);
+ this.findAndUpdatePost(removeRes);
+ }
+
+ async handleRemoveComment(form: RemoveComment) {
+ const removeCommentRes = await HttpService.client.removeComment(form);
+ this.findAndUpdateComment(removeCommentRes);
+ }
+
+ async handleSaveComment(form: SaveComment) {
+ const saveCommentRes = await HttpService.client.saveComment(form);
+ this.findAndUpdateComment(saveCommentRes);
+ }
+
+ async handleSavePost(form: SavePost) {
+ const saveRes = await HttpService.client.savePost(form);
+ this.findAndUpdatePost(saveRes);
+ }
- case UserOperation.CreatePostLike: {
- const { post_view } = wsJsonToRes<PostResponse>(msg);
- createPostLikeFindRes(post_view, this.state.personRes?.posts);
- this.setState(this.state);
+ async handleFeaturePost(form: FeaturePost) {
+ const featureRes = await HttpService.client.featurePost(form);
+ this.findAndUpdatePost(featureRes);
+ }
+
+ async handleCommentVote(form: CreateCommentLike) {
+ const voteRes = await HttpService.client.likeComment(form);
+ this.findAndUpdateComment(voteRes);
+ }
- break;
+ async handlePostVote(form: CreatePostLike) {
+ const voteRes = await HttpService.client.likePost(form);
+ this.findAndUpdatePost(voteRes);
+ }
+
+ async handlePostEdit(form: EditPost) {
+ const res = await HttpService.client.editPost(form);
+ this.findAndUpdatePost(res);
+ }
+
+ async handleCommentReport(form: CreateCommentReport) {
+ const reportRes = await HttpService.client.createCommentReport(form);
+ if (reportRes.state === "success") {
+ toast(I18NextService.i18n.t("report_created"));
+ }
+ }
+
+ async handlePostReport(form: CreatePostReport) {
+ const reportRes = await HttpService.client.createPostReport(form);
+ if (reportRes.state === "success") {
+ toast(I18NextService.i18n.t("report_created"));
+ }
+ }
+
+ async handleLockPost(form: LockPost) {
+ const lockRes = await HttpService.client.lockPost(form);
+ this.findAndUpdatePost(lockRes);
+ }
+
+ async handleDistinguishComment(form: DistinguishComment) {
+ const distinguishRes = await HttpService.client.distinguishComment(form);
+ this.findAndUpdateComment(distinguishRes);
+ }
+
+ async handleAddAdmin(form: AddAdmin) {
+ const addAdminRes = await HttpService.client.addAdmin(form);
+
+ if (addAdminRes.state == "success") {
+ this.setState(s => ((s.siteRes.admins = addAdminRes.data.admins), s));
+ }
+ }
+
+ async handleTransferCommunity(form: TransferCommunity) {
+ await HttpService.client.transferCommunity(form);
+ toast(I18NextService.i18n.t("transfer_community"));
+ }
+
+ async handleCommentReplyRead(form: MarkCommentReplyAsRead) {
+ const readRes = await HttpService.client.markCommentReplyAsRead(form);
+ this.findAndUpdateCommentReply(readRes);
+ }
+
+ async handlePersonMentionRead(form: MarkPersonMentionAsRead) {
+ // TODO not sure what to do here. Maybe it is actually optional, because post doesn't need it.
+ await HttpService.client.markPersonMentionAsRead(form);
+ }
+
+ async handleBanFromCommunity(form: BanFromCommunity) {
+ const banRes = await HttpService.client.banFromCommunity(form);
+ this.updateBanFromCommunity(banRes);
+ }
+
+ async handleBanPerson(form: BanPerson) {
+ const banRes = await HttpService.client.banPerson(form);
+ this.updateBan(banRes);
+ }
+
+ updateBanFromCommunity(banRes: RequestState<BanFromCommunityResponse>) {
+ // Maybe not necessary
+ if (banRes.state === "success") {
+ this.setState(s => {
+ if (s.personRes.state == "success") {
+ s.personRes.data.posts
+ .filter(c => c.creator.id === banRes.data.person_view.person.id)
+ .forEach(
+ c => (c.creator_banned_from_community = banRes.data.banned)
+ );
+
+ s.personRes.data.comments
+ .filter(c => c.creator.id === banRes.data.person_view.person.id)
+ .forEach(
+ c => (c.creator_banned_from_community = banRes.data.banned)
+ );
}
+ return s;
+ });
+ }
+ }
- case UserOperation.BanPerson: {
- const data = wsJsonToRes<BanPersonResponse>(msg);
- const res = this.state.personRes;
- res?.comments
- .filter(c => c.creator.id === data.person_view.person.id)
- .forEach(c => (c.creator.banned = data.banned));
- res?.posts
- .filter(c => c.creator.id === data.person_view.person.id)
- .forEach(c => (c.creator.banned = data.banned));
- const pv = res?.person_view;
-
- if (pv?.person.id === data.person_view.person.id) {
- pv.person.banned = data.banned;
- }
- this.setState(this.state);
-
- break;
+ updateBan(banRes: RequestState<BanPersonResponse>) {
+ // Maybe not necessary
+ if (banRes.state == "success") {
+ this.setState(s => {
+ if (s.personRes.state == "success") {
+ s.personRes.data.posts
+ .filter(c => c.creator.id == banRes.data.person_view.person.id)
+ .forEach(c => (c.creator.banned = banRes.data.banned));
+ s.personRes.data.comments
+ .filter(c => c.creator.id == banRes.data.person_view.person.id)
+ .forEach(c => (c.creator.banned = banRes.data.banned));
+ s.personRes.data.person_view.person.banned = banRes.data.banned;
}
+ return s;
+ });
+ }
+ }
- case UserOperation.BlockPerson: {
- const data = wsJsonToRes<BlockPersonResponse>(msg);
- updatePersonBlock(data);
- this.setPersonBlock();
+ purgeItem(purgeRes: RequestState<PurgeItemResponse>) {
+ if (purgeRes.state == "success") {
+ toast(I18NextService.i18n.t("purge_success"));
+ this.context.router.history.push(`/`);
+ }
+ }
- break;
- }
+ findAndUpdateComment(res: RequestState<CommentResponse>) {
+ this.setState(s => {
+ if (s.personRes.state == "success" && res.state == "success") {
+ s.personRes.data.comments = editComment(
+ res.data.comment_view,
+ s.personRes.data.comments
+ );
+ s.finished.set(res.data.comment_view.comment.id, true);
+ }
+ return s;
+ });
+ }
- case UserOperation.PurgePerson:
- case UserOperation.PurgePost:
- case UserOperation.PurgeComment:
- case UserOperation.PurgeCommunity: {
- const { success } = wsJsonToRes<PurgeItemResponse>(msg);
+ createAndUpdateComments(res: RequestState<CommentResponse>) {
+ this.setState(s => {
+ if (s.personRes.state == "success" && res.state == "success") {
+ s.personRes.data.comments.unshift(res.data.comment_view);
+ // Set finished for the parent
+ s.finished.set(
+ getCommentParentId(res.data.comment_view.comment) ?? 0,
+ true
+ );
+ }
+ return s;
+ });
+ }
- if (success) {
- toast(i18n.t("purge_success"));
- this.context.router.history.push(`/`);
- }
- }
+ findAndUpdateCommentReply(res: RequestState<CommentReplyResponse>) {
+ this.setState(s => {
+ if (s.personRes.state == "success" && res.state == "success") {
+ s.personRes.data.comments = editWith(
+ res.data.comment_reply_view,
+ s.personRes.data.comments
+ );
}
- }
+ return s;
+ });
+ }
+
+ findAndUpdatePost(res: RequestState<PostResponse>) {
+ this.setState(s => {
+ if (s.personRes.state == "success" && res.state == "success") {
+ s.personRes.data.posts = editPost(
+ res.data.post_view,
+ s.personRes.data.posts
+ );
+ }
+ return s;
+ });
}
}
projects / lemmy-ui.git / blobdiff