1 import { Component } from "inferno";
2 import { RouteComponentProps } from "inferno-router/dist/Route";
11 } from "lemmy-js-client";
12 import { Subscription } from "rxjs";
13 import { InitialFetchRequest, PostFormParams } from "shared/interfaces";
14 import { i18n } from "../../i18next";
15 import { WebSocketService } from "../../services";
31 import { HtmlTags } from "../common/html-tags";
32 import { Spinner } from "../common/icon";
33 import { PostForm } from "./post-form";
35 export interface CreatePostProps {
39 interface CreatePostData {
40 communityResponse?: GetCommunityResponse;
43 function getCreatePostQueryParams() {
44 return getQueryParams<CreatePostProps>({
45 communityId: getIdFromString,
49 interface CreatePostState {
50 siteRes: GetSiteResponse;
52 selectedCommunityChoice?: Choice;
55 export class CreatePost extends Component<
56 RouteComponentProps<Record<string, never>>,
59 private isoData = setIsoData<CreatePostData>(this.context);
60 private subscription?: Subscription;
61 state: CreatePostState = {
62 siteRes: this.isoData.site_res,
66 constructor(props: RouteComponentProps<Record<string, never>>, context: any) {
67 super(props, context);
69 this.handlePostCreate = this.handlePostCreate.bind(this);
70 this.handleSelectedCommunityChange =
71 this.handleSelectedCommunityChange.bind(this);
73 this.parseMessage = this.parseMessage.bind(this);
74 this.subscription = wsSubscribe(this.parseMessage);
76 // Only fetch the data if coming from another route
77 if (this.isoData.path === this.context.router.route.match.url) {
78 const { communityResponse } = this.isoData.routeData;
80 if (communityResponse) {
81 const communityChoice: Choice = {
82 label: communityResponse.community_view.community.title,
83 value: communityResponse.community_view.community.id.toString(),
88 selectedCommunityChoice: communityChoice,
97 this.fetchCommunity();
102 const { communityId } = getCreatePostQueryParams();
103 const auth = myAuth(false);
106 const form: GetCommunity = {
111 WebSocketService.Instance.send(wsClient.getCommunity(form));
115 componentDidMount(): void {
116 const { communityId } = getCreatePostQueryParams();
118 if (communityId?.toString() !== this.state.selectedCommunityChoice?.value) {
119 this.fetchCommunity();
120 } else if (!communityId) {
122 selectedCommunityChoice: undefined,
128 componentWillUnmount() {
130 this.subscription?.unsubscribe();
134 get documentTitle(): string {
135 return `${i18n.t("create_post")} - ${
136 this.state.siteRes.site_view.site.name
141 const { selectedCommunityChoice } = this.state;
143 const locationState = this.props.history.location.state as
148 <div className="container-lg">
150 title={this.documentTitle}
151 path={this.context.router.route.match.url}
153 {this.state.loading ? (
158 <div className="row">
159 <div className="col-12 col-lg-6 offset-lg-3 mb-4">
160 <h5>{i18n.t("create_post")}</h5>
162 onCreate={this.handlePostCreate}
163 params={locationState}
164 enableDownvotes={enableDownvotes(this.state.siteRes)}
165 enableNsfw={enableNsfw(this.state.siteRes)}
166 allLanguages={this.state.siteRes.all_languages}
167 siteLanguages={this.state.siteRes.discussion_languages}
168 selectedCommunityChoice={selectedCommunityChoice}
169 onSelectCommunity={this.handleSelectedCommunityChange}
178 updateUrl({ communityId }: Partial<CreatePostProps>) {
179 const { communityId: urlCommunityId } = getCreatePostQueryParams();
181 const locationState = this.props.history.location.state as
185 const url = new URL(location.href);
187 const newId = (communityId ?? urlCommunityId)?.toString();
189 if (newId !== undefined) {
190 url.searchParams.set("communityId", newId);
192 url.searchParams.delete("communityId");
195 history.replaceState(locationState, "", url);
197 this.fetchCommunity();
200 handleSelectedCommunityChange(choice: Choice) {
202 communityId: getIdFromString(choice?.value),
206 handlePostCreate(post_view: PostView) {
207 this.props.history.replace(`/post/${post_view.post.id}`);
210 static fetchInitialData({
212 query: { communityId },
214 }: InitialFetchRequest<
215 QueryParams<CreatePostProps>
216 >): WithPromiseKeys<CreatePostData> {
217 const data: WithPromiseKeys<CreatePostData> = {};
220 const form: GetCommunity = {
222 id: getIdFromString(communityId),
225 data.communityResponse = client.getCommunity(form);
231 parseMessage(msg: any) {
232 const op = wsUserOp(msg);
235 toast(i18n.t(msg.error), "danger");
239 if (op === UserOperation.GetCommunity) {
242 community: { title, id },
244 } = wsJsonToRes<GetCommunityResponse>(msg);
247 selectedCommunityChoice: { label: title, value: id.toString() },