You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

774 lines
23 KiB

/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import React, { Component, useState } from 'react';
import { Prompt } from 'react-router-dom';
import { PostListings } from './post-listings';
import { MarkdownTextArea } from './markdown-textarea';
import { Subscription } from 'rxjs';
import { retryWhen, delay, take } from 'rxjs/operators';
import {
PostForm as PostFormI,
PostFormParams,
Post,
PostResponse,
UserOperation,
Community,
ListCommunitiesResponse,
ListCommunitiesForm,
SortType,
SearchForm,
SearchType,
SearchResponse,
WebSocketJsonResponse,
} from '../interfaces';
import { WebSocketService, UserService } from '../services';
import {
wsJsonToRes,
getPageTitle,
validURL,
capitalizeFirstLetter,
archiveUrl,
debounce,
isImage,
toast,
randomStr,
setupTippy,
// hostname,
pictrsDeleteToast,
validTitle,
isPostChanged,
api,
} from '../utils';
import { i18n } from '../i18next';
import { cleanURL } from '../clean-url';
import { Icon } from './icon';
import { linkEvent } from '../linkEvent';
import matchSorter from 'match-sorter';
import {
Combobox,
ComboboxInput,
ComboboxPopover,
ComboboxList,
ComboboxOption,
} from '@reach/combobox';
import '@reach/combobox/styles.css';
import { Alert, Button, Input, Textarea } from 'theme-ui';
import { AxiosError } from 'axios';
export const MAX_POST_TITLE_LENGTH = 160;
export const MAX_POST_BODY_LENGTH = 20000;
export const MAX_COMMENT_LENGTH = 10000;
function CommunityInput({
communities,
onSelect,
initialValue,
}: {
communities: Array<Community>;
onSelect: (community_id: number) => void;
initialValue?: string;
}) {
console.log({ initialValue });
const [value, setValue] = useState(initialValue ?? '');
const [visited, setVisited] = useState(false);
const results = matchSorter(communities, value, {
keys: [(item: Community) => `${item.name}`],
});
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
setValue(e.target.value);
}
function validateInput() {
// if the current value does not equal a valid community, clear it
if (
!communities.some(
community => community.name.toLowerCase() === value.toLowerCase()
)
) {
setValue('');
}
}
const invalidCommunity = !communities.some(
community => community.name.toLowerCase() === value.toLowerCase()
);
return (
<>
<Combobox
aria-label="Communities"
openOnFocus
onSelect={name => {
const community = communities.find(comm => comm.name === name);
setValue(community.name);
onSelect(community.id);
}}
onBlur={() => setVisited(true)}
>
<ComboboxInput
as={Input}
className="community-search-input"
onChange={handleChange}
value={value}
placeholder={i18n.t('select_a_community')}
/>
<ComboboxPopover
className="shadow-popup"
style={{ maxHeight: '33vh', overflowY: 'scroll' }}
>
{results.length > 0 ? (
<ComboboxList persistSelection>
{results.map((result, index) => (
<ComboboxOption key={index} value={result.name} />
))}
</ComboboxList>
) : (
<div
data-reach-combobox-popover
style={{ fontSize: '16px', padding: 8, paddingTop: 0 }}
>
No results found
</div>
)}
</ComboboxPopover>
</Combobox>
{visited && invalidCommunity && (
<Alert mt={2}>Please enter a valid community</Alert>
)}
</>
);
}
interface PostFormProps {
post?: Post; // If a post is given, that means this is an edit
params?: PostFormParams;
onCancel?(): any;
onCreate?(id: number): any;
onEdit?(post: Post): any;
enableNsfw: boolean;
enableDownvotes: boolean;
}
interface PostFormState {
postForm: PostFormI;
communities: Array<Community>;
loading: boolean;
imageLoading: boolean;
previewMode: boolean;
suggestedTitle: string;
suggestedPosts: Array<Post>;
crossPosts: Array<Post>;
crosspostCommunityId?: number;
}
export const TextAreaWithCounter = ({
maxLength,
value = '',
...props
}: { value: string; maxLength: number } & React.HTMLProps<
HTMLTextAreaElement
>) => {
const characterLimitExceeded = value && value.length > maxLength;
return (
<>
{/* @ts-ignore */}
<Textarea value={value || ''} {...props} />
{value && (
<div className="mt-2">
<span
style={{ color: characterLimitExceeded ? 'var(--red)' : 'inherit' }}
>
{value.length.toLocaleString()}{' '}
</span>{' '}
/ {maxLength.toLocaleString()}
</div>
)}
</>
);
};
export class PostForm extends Component<PostFormProps, PostFormState> {
private id = `post-form-${randomStr()}`;
private subscription: Subscription;
// private choices: Choices;
private emptyState: PostFormState = {
postForm: {
name: null,
nsfw: false,
auth: null,
community_id: null,
creator_id: UserService.Instance.user
? UserService.Instance.user.id
: null,
},
communities: [],
loading: false,
imageLoading: false,
previewMode: false,
suggestedTitle: undefined,
suggestedPosts: [],
crossPosts: [],
};
state = this.emptyState;
constructor(props: any, context: any) {
super(props, context);
this.fetchSimilarPosts = debounce(this.fetchSimilarPosts.bind(this), 2000);
// @ts-ignore
this.fetchPageTitle = debounce(this.fetchPageTitle.bind(this), 2000);
this.handlePostBodyChange = this.handlePostBodyChange.bind(this);
}
componentDidMount(): void {
if (this.props.post) {
this.state.postForm = {
body: this.props.post.body,
// NOTE: debouncing breaks both these for some reason, unless you use defaultValue
name: this.props.post.name,
community_id: this.props.post.community_id,
edit_id: this.props.post.id,
creator_id: this.props.post.creator_id,
url: this.props.post.url,
nsfw: this.props.post.nsfw,
auth: null,
};
}
const queryParams = new URLSearchParams(window.location.search);
if (this.props.params) {
this.state.postForm.name = this.props.params.name;
if (this.props.params.url) {
this.state.postForm.url = this.props.params.url;
}
if (this.props.params.body) {
this.state.postForm.body = this.props.params.body;
}
}
const crosspostCommunityId = queryParams.get('community_id');
if (crosspostCommunityId) {
this.state.crosspostCommunityId = parseInt(crosspostCommunityId, 10);
}
this.subscription = WebSocketService.Instance.subject
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
.subscribe(
msg => this.parseMessage(msg),
err => console.error(err),
() => console.log('complete')
);
this.fetchCommunityList();
setupTippy();
}
componentDidUpdate(): void {
if (
!this.state.loading &&
(this.state.postForm.name ||
this.state.postForm.url ||
this.state.postForm.body)
) {
window.onbeforeunload = () => true;
} else {
window.onbeforeunload = undefined;
}
}
componentWillUnmount(): void {
// this.choices && this.choices.destroy();
this.subscription.unsubscribe();
window.onbeforeunload = null;
}
render(): JSX.Element {
const postTitleBlank =
this.state.postForm.name === null ||
this.state.postForm.name.trim() === '';
const communities = this.state.communities.filter(community => {
// don't allow crossposting to same community as original
if (this.state.crosspostCommunityId) {
// remove main community
const MAIN_COMMUNITY_ID = 2;
return (
community.id !== this.state.crosspostCommunityId &&
community.id != MAIN_COMMUNITY_ID
);
}
return true;
});
return (
<div>
<Prompt
when={
!this.state.loading &&
(!!this.state.postForm.name ||
!!this.state.postForm.url ||
!!this.state.postForm.body)
}
message={i18n.t('block_leaving')}
/>
<form onSubmit={linkEvent(this, this.handlePostSubmit)}>
<div className="form-group row">
<label className="col-sm-2 col-form-label" htmlFor="post-url">
{i18n.t('url')}
</label>
<div className="col-sm-10">
{/* don't allow URL field to be edited after publishing */}
{!this.props.onEdit ? (
<Input
type="url"
id="post-url"
value={this.state.postForm.url}
onChange={this.handlePostUrlChange}
onPaste={linkEvent(this, this.handleImageUploadPaste)}
/>
) : (
<span>{this.state.postForm.url}</span>
)}
{this.state.suggestedTitle && (
<div
className="mt-1 text-muted small font-weight-bold pointer"
onClick={linkEvent(this, this.copySuggestedTitle)}
onKeyDown={linkEvent(this, this.copySuggestedTitle)}
>
{i18n.t('copy_suggested_title', {
title: this.state.suggestedTitle,
})}
</div>
)}
{!this.props.onEdit && (
<form>
<label
htmlFor="file-upload"
className={`${
UserService.Instance.user && 'pointer'
} d-inline-block float-right text-muted font-weight-bold image-upload-icon m-0`}
data-tippy-content={i18n.t('upload_image')}
>
<Icon name="image" size="30px" />
</label>
<input
id="file-upload"
type="file"
accept="image/*"
name="file"
className="d-none"
disabled={!UserService.Instance.user}
onChange={linkEvent(this, this.handleImageUpload)}
/>
</form>
)}
{validURL(this.state.postForm.url) && (
<a
href={`${archiveUrl}/?run=1&url=${encodeURIComponent(
this.state.postForm.url
)}`}
target="_blank"
className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
rel="noopener"
>
{i18n.t('archive_link')}
</a>
)}
{this.state.imageLoading && (
<svg className="icon icon-spinner spin">
<use xlinkHref="#icon-spinner" />
</svg>
)}
{isImage(this.state.postForm.url) && (
<img
src={this.state.postForm.url}
alt="post form thumbnail"
className="img-fluid"
/>
)}
{this.state.crossPosts.length > 0 && (
<>
<div className="my-1 text-muted small font-weight-bold">
{i18n.t('cross_posts')}
</div>
<PostListings
showCommunity
posts={this.state.crossPosts}
enableDownvotes={this.props.enableDownvotes}
enableNsfw={this.props.enableNsfw}
/>
</>
)}
</div>
</div>
<div className="form-group row">
<label className="col-sm-2 col-form-label" htmlFor="post-title">
{i18n.t('title')}
</label>
<div className="col-sm-10">
{!this.props.onEdit ? (
<>
<TextAreaWithCounter
value={this.state.postForm.name}
id="post-title"
onInput={linkEvent(this, this.handlePostNameChange)}
required
rows={2}
minLength={3}
maxLength={MAX_POST_TITLE_LENGTH}
/>
{!validTitle(this.state.postForm.name) && (
<div className="invalid-feedback">
{i18n.t('invalid_post_title')}
</div>
)}
</>
) : (
<div className="text-body">{this.state.postForm.name}</div>
)}
{this.state.suggestedPosts.length > 0 && (
<>
<div className="my-1 text-muted small font-weight-bold">
{i18n.t('related_posts')}
</div>
<PostListings
posts={this.state.suggestedPosts}
enableDownvotes={this.props.enableDownvotes}
enableNsfw={this.props.enableNsfw}
/>
</>
)}
</div>
</div>
<div className="form-group row">
<label className="col-sm-2 col-form-label" htmlFor={this.id}>
{i18n.t('body')}
</label>
<div className="col-sm-10">
<MarkdownTextArea
initialContent={this.state.postForm.body}
onContentChange={this.handlePostBodyChange}
/>
</div>
</div>
{!this.props.post && (
<div className="form-group row">
<label
className="col-sm-2 col-form-label"
htmlFor="post-community"
>
{i18n.t('community')}
</label>
<div className="col-sm-10">
<CommunityInput
initialValue={this.props.params?.community}
onSelect={this.handlePostCommunityChange}
communities={communities}
/>
</div>
</div>
)}
{this.props.enableNsfw && (
<div className="form-group row">
<div className="col-sm-10">
<div className="form-check">
<input
className="form-check-input"
id="post-nsfw"
type="checkbox"
checked={this.state.postForm.nsfw}
onChange={linkEvent(this, this.handlePostNsfwChange)}
/>
<label className="form-check-label" htmlFor="post-nsfw">
{i18n.t('nsfw')}
</label>
</div>
</div>
</div>
)}
<div className="form-group row">
<div className="col-sm-10">
<Button
mr={2}
disabled={
!this.state.postForm.community_id ||
this.state.loading ||
postTitleBlank
}
type="submit"
>
{this.state.loading ? (
<svg className="icon icon-spinner spin">
<use xlinkHref="#icon-spinner" />
</svg>
) : this.props.post ? (
capitalizeFirstLetter(i18n.t('save'))
) : (
capitalizeFirstLetter(i18n.t('create'))
)}
</Button>
{this.props.post && (
<Button
type="button"
onClick={linkEvent(this, this.handleCancel)}
>
{i18n.t('cancel')}
</Button>
)}
</div>
</div>
</form>
</div>
);
}
handlePostSubmit(i: PostForm, event: any): void {
event.preventDefault();
// make sure post title is not just whitespace
if (i.state.postForm.name.trim() === '') {
toast('Post title cannot be blank', 'danger');
return;
}
// Coerce empty url string to undefined
if (i.state.postForm.hasOwnProperty('url') && i.state.postForm.url === '') {
i.state.postForm.url = undefined;
}
if (i.state.postForm.url !== undefined && !!i.state.postForm.url) {
// remove trackers from URL
const cleanedURL = cleanURL({ url: i.state.postForm.url });
i.state.postForm.url = cleanedURL;
}
if (i.props.post) {
WebSocketService.Instance.editPost(i.state.postForm);
} else {
WebSocketService.Instance.createPost(i.state.postForm);
}
i.state.loading = true;
i.setState(i.state);
}
copySuggestedTitle(i: PostForm): void {
i.state.postForm.name = i.state.suggestedTitle.substring(
0,
MAX_POST_TITLE_LENGTH
);
i.state.suggestedTitle = undefined;
i.setState(i.state);
}
handlePostUrlChange = (event: any): void => {
// i.state.postForm.url = event.target.value;
this.setState(prev => ({
postForm: { ...prev.postForm, url: event.target.value },
}));
this.fetchPageTitle();
};
async fetchPageTitle(): Promise<void> {
if (validURL(this.state.postForm.url)) {
let form: SearchForm = {
q: this.state.postForm.url,
type_: SearchType[SearchType.Url],
sort: SortType[SortType.TopAll],
page: 1,
limit: 6,
};
WebSocketService.Instance.search(form);
// Fetch the page title
const title = await getPageTitle(this.state.postForm.url);
if (title !== null) {
this.setState({ suggestedTitle: title });
}
} else {
this.setState({ suggestedTitle: undefined, crossPosts: [] });
}
}
handlePostNameChange(i: PostForm): void {
i.setState(i.state);
i.fetchSimilarPosts();
}
fetchSimilarPosts(): void {
let form: SearchForm = {
q: this.state.postForm.name,
type_: SearchType[SearchType.Posts],
sort: SortType[SortType.TopAll],
community_id: this.state.postForm.community_id,
page: 1,
limit: 6,
};
if (this.state.postForm.name !== '') {
WebSocketService.Instance.search(form);
} else {
this.setState({ suggestedPosts: [] });
}
}
handlePostBodyChange = (val: string): void => {
this.setState(prev => ({ postForm: { ...prev.postForm, body: val } }));
};
handlePostCommunityChange = (community_id: number): void => {
this.setState(prev => ({ postForm: { ...prev.postForm, community_id } }));
};
handlePostNsfwChange(i: PostForm, event: any): void {
i.state.postForm.nsfw = event.target.checked;
i.setState(i.state);
}
handleCancel(i: PostForm): void {
i.props.onCancel();
}
handlePreviewToggle(i: PostForm, event: any): void {
event.preventDefault();
i.state.previewMode = !i.state.previewMode;
i.setState(i.state);
}
handleImageUploadPaste(i: PostForm, event: any): void {
let image = event.clipboardData.files[0];
if (image) {
i.handleImageUpload(i, image);
}
}
handleImageUpload(i: PostForm, event: any): void {
let file: any;
if (event.target) {
event.preventDefault();
file = event.target.files[0];
} else {
file = event;
}
const imageUploadUrl = `/pictrs/image`;
const formData = new FormData();
formData.append('images[]', file);
i.state.imageLoading = true;
i.setState(i.state);
fetch(imageUploadUrl, {
method: 'POST',
body: formData,
})
.then(res => res.json())
.then(res => {
console.log('pictrs upload:');
console.log(res);
if (res.msg == 'ok') {
let hash = res.files[0].file;
let url = `${window.location.origin}/pictrs/image/${hash}`;
let deleteToken = res.files[0].delete_token;
let deleteUrl = `${window.location.origin}/pictrs/image/delete/${deleteToken}/${hash}`;
i.state.postForm.url = url;
i.state.imageLoading = false;
i.setState(i.state);
pictrsDeleteToast(
i18n.t('click_to_delete_picture'),
i18n.t('picture_deleted'),
deleteUrl
);
} else {
i.state.imageLoading = false;
i.setState(i.state);
toast(JSON.stringify(res), 'danger');
}
})
.catch(error => {
i.state.imageLoading = false;
i.setState(i.state);
toast(error, 'danger');
});
}
async fetchCommunityList(): Promise<void> {
const params = new URLSearchParams({
sort: SortType[SortType.Hot],
limit: 9999,
} as any);
api
.get<ListCommunitiesResponse>(`community/list?${params.toString()}`)
.then(res => {
const data = res.data;
this.setState(
{
communities: data.communities,
},
() => {
if (this.props.post) {
this.setState(prev => ({
postForm: {
...prev.postForm,
community_id: this.props.post.community_id,
},
}));
} else if (this.props.params && this.props.params.community) {
let foundCommunityId = data.communities.find(
r => r.name == this.props.params.community
).id;
this.setState(prev => ({
postForm: { ...prev.postForm, community_id: foundCommunityId },
}));
} else {
// By default, the null valued 'Select a Community'
}
}
);
})
.catch((err: Error | AxiosError) => {
const res = (err as AxiosError).response;
if (res) {
const data = res.data as { error: string };
toast(i18n.t(data.error), 'danger');
} else {
console.log(err);
}
});
}
parseMessage(msg: WebSocketJsonResponse): void {
let res = wsJsonToRes(msg);
if (msg.error) {
toast(i18n.t(msg.error), 'danger');
this.setState({ loading: false });
return;
} else if (res.op == UserOperation.CreatePost) {
let data = res.data as PostResponse;
if (data.post.creator_id == UserService.Instance.user.id) {
this.setState({ loading: false });
this.props.onCreate(data.post.id);
}
} else if (isPostChanged(res.op)) {
let data = res.data as PostResponse;
if (data.post.creator_id == UserService.Instance.user.id) {
this.setState({ loading: false });
this.props.onEdit(data.post);
}
} else if (res.op == UserOperation.Search) {
let data = res.data as SearchResponse;
if (data.type_ == SearchType[SearchType.Posts]) {
this.setState({ suggestedPosts: data.posts });
} else if (data.type_ == SearchType[SearchType.Url]) {
this.setState({ crossPosts: data.posts });
}
}
}
}