mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
Tommaso CasaburiandGitHub
f1022fc2d9
* fix: consume enriched account comments directly * fix(account comments): use empty lookup patch
1089 lines
41 KiB
TypeScript
1089 lines
41 KiB
TypeScript
import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
|
|
import { Trans, useTranslation } from 'react-i18next';
|
|
import type { TFunction } from 'i18next';
|
|
import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
|
|
import { Comment, setAccount, useAccount, useAccountComment, useEditedComment } from '@bitsocial/bitsocial-react-hooks';
|
|
import getShortAddress from '../../lib/get-short-address';
|
|
import { communitiesPagesStore as useCommunitiesPagesStore } from '../../lib/bitsocial-internals/stores';
|
|
import { getDisplayMediaInfoType, getLinkMediaInfo, getTwimgMediaFilePublishUrl } from '../../lib/utils/media-utils';
|
|
import {
|
|
getExpiringMediaLinkAlert,
|
|
getPublishFileDisplayName,
|
|
getPublishLinkOptions,
|
|
isPublishFileMediaLink,
|
|
isPublishFileMediaType,
|
|
} from '../../lib/utils/media-link-validation-utils';
|
|
import {
|
|
type DiceRoll,
|
|
type FortuneEntry,
|
|
type PostOptionsValidationError,
|
|
POST_OPTIONS_VALIDATION_DELAY_MS,
|
|
getContentWithPostOptionState as getContentWithOptions,
|
|
getNonokoPendingRouteState,
|
|
getPostOptionsDirectoryCode,
|
|
getPostOptionsPublishContentLength,
|
|
getPostOptionsValidationError,
|
|
hasNonokoOption,
|
|
isPostOptionsValidationError,
|
|
} from '../../lib/utils/post-options-utils';
|
|
import { truncateWithEllipsisInMiddle } from '../../lib/utils/string-utils';
|
|
import { isValidPublishURL, isValidURL } from '../../lib/utils/url-utils';
|
|
import { getModerationPostingRoleLabel } from '../../lib/utils/author-display-utils';
|
|
import { hasModQueueAccessRole } from '../../lib/utils/mod-access';
|
|
import { getBoardPath, isDirectoryRoute } from '../../lib/utils/route-utils';
|
|
import { isAllView, isCatalogView, isModQueueView, isModView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
|
|
import { getCommentFlagOptionsForDirectory, getCommentFlagPublishOptionsForDirectory, type CommentFlagSelectOption } from '../../lib/comment-flag-selection';
|
|
import { FLASH_TAG_OPTIONS, getFlashTagPublishOptionsForDirectoryCode, isFlashDirectoryCode, type FlashTagOption } from '../../lib/flash-tags';
|
|
import { isMathDirectoryCode } from '../../lib/math-tags';
|
|
import { useAccountCommunityAddresses } from '../../hooks/use-account-community-addresses';
|
|
import { useDirectories } from '../../hooks/use-directories';
|
|
import { useDirectoryEntry } from '../../hooks/use-directory-entry';
|
|
import { useCommunityField } from '../../hooks/use-stable-community';
|
|
import useIsMobile from '../../hooks/use-is-mobile';
|
|
import { useResolvedCommunityAddress } from '../../hooks/use-resolved-community-address';
|
|
import { normalizeAccountCommentIndex } from '../../lib/utils/account-comment-index-utils';
|
|
import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
|
|
import { useYouTubeThumbnailLinkConversion } from '../../hooks/use-youtube-thumbnail-link-conversion';
|
|
import usePublishSubmissionGuard from '../../hooks/use-publish-submission-guard';
|
|
import usePublishPost from '../../hooks/use-publish-post';
|
|
import usePublishReply from '../../hooks/use-publish-reply';
|
|
import { useFileUpload } from '../../hooks/use-file-upload';
|
|
import { getShowUploadControls, isWebRuntime } from '../../lib/media-hosting/show-upload-controls';
|
|
import { OEKAKI_WEB_WARNING_TEXT } from '../../lib/oekaki/oekaki-copy';
|
|
import { isCommentArchived } from '../../lib/utils/comment-moderation-utils';
|
|
import useMediaHostingStore from '../../stores/use-media-hosting-store';
|
|
import BoardOfflineAlert from '../board-offline-alert/board-offline-alert';
|
|
import BbcodeEditorToolbar, { BbcodePreview } from '../bbcode-editor-toolbar/bbcode-editor-toolbar';
|
|
import LoadingEllipsis from '../loading-ellipsis/loading-ellipsis';
|
|
import OekakiDrawingControls from '../oekaki-drawing-controls/oekaki-drawing-controls';
|
|
import TexLogo from '../tex-logo/tex-logo';
|
|
import PostOptionsErrorMessage from '../post-options-error-message/post-options-error-message';
|
|
import styles from './post-form.module.css';
|
|
import capitalize from 'lodash/capitalize';
|
|
import debounce from 'lodash/debounce';
|
|
|
|
const FILE_LINK_PLACEHOLDER = 'https://website.com/image.jpg';
|
|
const POST_FORM_FILE_DISPLAY_MAX_LENGTH = 28;
|
|
|
|
const mergeFlairs = (...flairGroups: Array<Comment['flairs'] | undefined>): Comment['flairs'] | undefined => {
|
|
const flairs = flairGroups.flatMap((group) => (Array.isArray(group) ? group : []));
|
|
return flairs.length > 0 ? flairs : undefined;
|
|
};
|
|
|
|
const getPostFormFileDisplayLabel = (url: string, uploadedFileName: string | null | undefined, noFileLabel: string, requireFile: boolean): string => {
|
|
const raw = getPublishFileDisplayName(url, uploadedFileName, requireFile);
|
|
if (!raw) return noFileLabel;
|
|
return truncateWithEllipsisInMiddle(raw, POST_FORM_FILE_DISPLAY_MAX_LENGTH);
|
|
};
|
|
|
|
export const LinkTypePreviewer = ({ link, requireFile = false }: { link: string; requireFile?: boolean }) => {
|
|
const { t } = useTranslation();
|
|
const mediaInfo = getLinkMediaInfo(link);
|
|
let type = mediaInfo?.type;
|
|
const { status: gifFrameStatus } = useFetchGifFirstFrame(type === 'gif' ? mediaInfo?.url : undefined);
|
|
|
|
if (requireFile && isValidURL(link) && !isPublishFileMediaType(type)) {
|
|
return <span className={styles.linkTypeError}>{t('not_a_file')}</span>;
|
|
}
|
|
|
|
if (type === 'gif' && gifFrameStatus === 'ready') {
|
|
type = t('animated_gif');
|
|
} else if (type === 'gif') {
|
|
type = t('gif');
|
|
} else if (type) {
|
|
type = getDisplayMediaInfoType(type, t);
|
|
}
|
|
|
|
return isValidURL(link) ? `${t('file')}: ${type}` : t('invalid_url');
|
|
};
|
|
|
|
const PostFormActions = ({
|
|
disableReplyPublish = false,
|
|
variant,
|
|
t,
|
|
isInPostView,
|
|
onPublishReply,
|
|
onPublishPost,
|
|
handleUpload,
|
|
isPublishSubmissionInFlight,
|
|
isUploading,
|
|
showUploadControls,
|
|
}: {
|
|
disableReplyPublish?: boolean;
|
|
variant: 'reply' | 'post' | 'upload';
|
|
t: TFunction;
|
|
isInPostView: boolean;
|
|
onPublishReply: () => void | Promise<void>;
|
|
onPublishPost: () => void | Promise<void>;
|
|
handleUpload: () => void;
|
|
isPublishSubmissionInFlight: boolean;
|
|
isUploading: boolean;
|
|
showUploadControls: boolean;
|
|
}) => {
|
|
if (variant === 'reply' && isInPostView) {
|
|
return (
|
|
<button type='button' onClick={onPublishReply} disabled={disableReplyPublish || isPublishSubmissionInFlight || isUploading}>
|
|
{t('post')}
|
|
</button>
|
|
);
|
|
}
|
|
if (variant === 'post' && !isInPostView) {
|
|
return (
|
|
<button type='button' onClick={onPublishPost} disabled={isPublishSubmissionInFlight}>
|
|
{t('post')}
|
|
</button>
|
|
);
|
|
}
|
|
if (variant === 'upload' && showUploadControls) {
|
|
return (
|
|
<button type='button' onClick={handleUpload} disabled={isUploading}>
|
|
{t('choose_file')}
|
|
</button>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
interface PostFormFieldsProps {
|
|
t: TFunction;
|
|
account: ReturnType<typeof useAccount>;
|
|
displayName: string | undefined;
|
|
bbcodePreviewContent: string;
|
|
isInPostView: boolean;
|
|
isBbcodePreviewing: boolean;
|
|
postCid: string;
|
|
subjectRef: React.Ref<HTMLInputElement>;
|
|
optionsRef: React.RefObject<HTMLInputElement | null>;
|
|
flagRef: React.RefObject<HTMLSelectElement | null>;
|
|
flashTagRef: React.RefObject<HTMLSelectElement | null>;
|
|
textRef: React.RefObject<HTMLTextAreaElement | null>;
|
|
urlRef: React.Ref<HTMLInputElement>;
|
|
url: string;
|
|
handleContentChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
|
handleContentValueChange: (content: string, options?: string) => void;
|
|
handleLinkChange: (link: string) => void;
|
|
handleLinkBlur: () => void;
|
|
handleOptionsChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
disableLinkInput: boolean;
|
|
setPublishPostOptions: (opts: Record<string, unknown>) => void;
|
|
setPublishReplyOptions: (opts: Record<string, unknown>) => void;
|
|
isUploading: boolean;
|
|
uploadedFileName: string | null | undefined;
|
|
showUploadControls: boolean;
|
|
showOekakiControls: boolean;
|
|
showSpoilerForPost: boolean;
|
|
showSpoilerForReply: boolean;
|
|
isInAllView: boolean;
|
|
isInSubscriptionsView: boolean;
|
|
isInModView: boolean;
|
|
directories: ReturnType<typeof useDirectories>;
|
|
accountCommunityAddresses: string[];
|
|
subscriptions: string[];
|
|
communityAddress: string | undefined;
|
|
rulesPath: string;
|
|
requirePostLinkIsMedia: boolean;
|
|
flagOptions: CommentFlagSelectOption[];
|
|
flashTagOptions: FlashTagOption[];
|
|
showFlashTagSelector: boolean;
|
|
showFlashUploadPrompt: boolean;
|
|
showMathTagsPrompt: boolean;
|
|
showBbcodeToolbar: boolean;
|
|
onBbcodePreviewToggle: () => void;
|
|
onPublishReply: () => void | Promise<void>;
|
|
onPublishPost: () => void | Promise<void>;
|
|
handleUpload: () => void;
|
|
uploadFile: ReturnType<typeof useFileUpload>['uploadFile'];
|
|
onOekakiClearUploadedUrl: (url: string) => void;
|
|
isPublishSubmissionInFlight: boolean;
|
|
disableReplyPublish: boolean;
|
|
}
|
|
|
|
const PostFormFields = ({
|
|
t,
|
|
account,
|
|
displayName,
|
|
bbcodePreviewContent,
|
|
isInPostView,
|
|
isBbcodePreviewing,
|
|
postCid,
|
|
subjectRef,
|
|
optionsRef,
|
|
flagRef,
|
|
flashTagRef,
|
|
textRef,
|
|
urlRef,
|
|
url,
|
|
handleContentChange,
|
|
handleContentValueChange,
|
|
handleLinkChange,
|
|
handleLinkBlur,
|
|
handleOptionsChange,
|
|
disableLinkInput,
|
|
setPublishPostOptions,
|
|
setPublishReplyOptions,
|
|
isUploading,
|
|
uploadedFileName,
|
|
showUploadControls,
|
|
showOekakiControls,
|
|
showSpoilerForPost,
|
|
showSpoilerForReply,
|
|
isInAllView,
|
|
isInSubscriptionsView,
|
|
isInModView,
|
|
directories,
|
|
accountCommunityAddresses,
|
|
subscriptions,
|
|
communityAddress,
|
|
rulesPath,
|
|
requirePostLinkIsMedia,
|
|
flagOptions,
|
|
flashTagOptions,
|
|
showFlashTagSelector,
|
|
showFlashUploadPrompt,
|
|
showMathTagsPrompt,
|
|
showBbcodeToolbar,
|
|
onBbcodePreviewToggle,
|
|
onPublishReply,
|
|
onPublishPost,
|
|
handleUpload,
|
|
uploadFile,
|
|
onOekakiClearUploadedUrl,
|
|
isPublishSubmissionInFlight,
|
|
disableReplyPublish,
|
|
}: PostFormFieldsProps) => (
|
|
<>
|
|
<tr>
|
|
<td>{t('name')}</td>
|
|
<td>
|
|
<input
|
|
type='text'
|
|
aria-label={t('name')}
|
|
placeholder={!displayName ? capitalize(t('anonymous')) : undefined}
|
|
defaultValue={displayName || undefined}
|
|
onChange={(e) => {
|
|
const newDisplayName = e.target.value.trim() || undefined;
|
|
setAccount({ ...account, author: { ...account?.author, displayName: newDisplayName } });
|
|
if (isInPostView) {
|
|
setPublishReplyOptions({ displayName: newDisplayName });
|
|
} else {
|
|
setPublishPostOptions({ displayName: newDisplayName });
|
|
}
|
|
}}
|
|
/>
|
|
<PostFormActions
|
|
variant='reply'
|
|
t={t}
|
|
isInPostView={isInPostView}
|
|
onPublishReply={onPublishReply}
|
|
onPublishPost={onPublishPost}
|
|
handleUpload={handleUpload}
|
|
disableReplyPublish={disableReplyPublish}
|
|
isPublishSubmissionInFlight={isPublishSubmissionInFlight}
|
|
isUploading={isUploading}
|
|
showUploadControls={showUploadControls}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{t('options')}</td>
|
|
<td>
|
|
<input type='text' aria-label={t('options')} ref={optionsRef} autoCorrect='off' autoComplete='off' spellCheck='false' onChange={handleOptionsChange} />
|
|
</td>
|
|
</tr>
|
|
{!isInPostView && (
|
|
<tr>
|
|
<td>{t('subject')}</td>
|
|
<td>
|
|
<input
|
|
type='text'
|
|
aria-label={t('subject')}
|
|
ref={subjectRef}
|
|
onChange={(e) => {
|
|
setPublishPostOptions({ title: e.target.value });
|
|
}}
|
|
/>
|
|
<PostFormActions
|
|
variant='post'
|
|
t={t}
|
|
isInPostView={isInPostView}
|
|
onPublishReply={onPublishReply}
|
|
onPublishPost={onPublishPost}
|
|
handleUpload={handleUpload}
|
|
disableReplyPublish={disableReplyPublish}
|
|
isPublishSubmissionInFlight={isPublishSubmissionInFlight}
|
|
isUploading={isUploading}
|
|
showUploadControls={showUploadControls}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
{showBbcodeToolbar ? (
|
|
<tr>
|
|
<td>format</td>
|
|
<td>
|
|
<BbcodeEditorToolbar
|
|
textareaRef={textRef}
|
|
onChange={(content) => handleContentValueChange(content)}
|
|
isPreviewing={isBbcodePreviewing}
|
|
onPreviewToggle={onBbcodePreviewToggle}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
) : null}
|
|
<tr>
|
|
<td>{t('comment')}</td>
|
|
<td>
|
|
{showBbcodeToolbar && isBbcodePreviewing && (
|
|
<BbcodePreview content={bbcodePreviewContent} postCid={isInPostView ? postCid : undefined} communityAddress={communityAddress} />
|
|
)}
|
|
<textarea
|
|
cols={48}
|
|
rows={4}
|
|
wrap='soft'
|
|
ref={textRef}
|
|
aria-label={t('comment')}
|
|
hidden={showBbcodeToolbar && isBbcodePreviewing}
|
|
onChange={handleContentChange}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
{flagOptions.length > 0 && (
|
|
<tr>
|
|
<td>{t('flag')}</td>
|
|
<td>
|
|
<select
|
|
key={flagOptions.map((option) => option.value).join('|')}
|
|
name='flag'
|
|
aria-label={t('flag')}
|
|
className={styles.flagSelector}
|
|
ref={flagRef}
|
|
defaultValue={flagOptions[0]?.value}
|
|
>
|
|
{flagOptions.map((option) => (
|
|
<option key={option.value} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
<tr>
|
|
<td>{requirePostLinkIsMedia ? t('link_to_file') : t('link')}</td>
|
|
<td className={styles.linkField}>
|
|
<input
|
|
type='text'
|
|
aria-label={requirePostLinkIsMedia ? t('link_to_file') : t('link')}
|
|
autoCorrect='off'
|
|
autoComplete='off'
|
|
spellCheck='false'
|
|
placeholder={requirePostLinkIsMedia ? FILE_LINK_PLACEHOLDER : undefined}
|
|
ref={urlRef}
|
|
disabled={disableLinkInput}
|
|
onChange={(e) => {
|
|
handleLinkChange(e.target.value);
|
|
}}
|
|
onBlur={handleLinkBlur}
|
|
/>
|
|
<span className={styles.linkType}> {url && <LinkTypePreviewer link={url} requireFile={requirePostLinkIsMedia} />}</span>
|
|
</td>
|
|
</tr>
|
|
{showUploadControls && (
|
|
<tr className={styles.uploadButton}>
|
|
<td>{t('file')}</td>
|
|
<td>
|
|
<PostFormActions
|
|
variant='upload'
|
|
t={t}
|
|
isInPostView={isInPostView}
|
|
onPublishReply={onPublishReply}
|
|
onPublishPost={onPublishPost}
|
|
handleUpload={handleUpload}
|
|
disableReplyPublish={disableReplyPublish}
|
|
isPublishSubmissionInFlight={isPublishSubmissionInFlight}
|
|
isUploading={isUploading}
|
|
showUploadControls={showUploadControls}
|
|
/>
|
|
<span title={getPublishFileDisplayName(url, uploadedFileName, requirePostLinkIsMedia) || undefined}>
|
|
{isUploading ? <LoadingEllipsis string={t('uploading')} /> : getPostFormFileDisplayLabel(url, uploadedFileName, t('no_file_chosen'), requirePostLinkIsMedia)}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
{showFlashTagSelector && (
|
|
<tr>
|
|
<td>{t('tag')}</td>
|
|
<td>
|
|
<select name='flashTag' aria-label={t('tag')} className={styles.flagSelector} ref={flashTagRef} defaultValue=''>
|
|
<option value=''>{t('choose_one')}</option>
|
|
{flashTagOptions.map((option) => (
|
|
<option key={option.value} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
{showOekakiControls && (
|
|
<tr>
|
|
<td>Draw</td>
|
|
<td>
|
|
<OekakiDrawingControls disabled={isUploading} uploadFile={uploadFile} onClearUploadedUrl={onOekakiClearUploadedUrl} />
|
|
</td>
|
|
</tr>
|
|
)}
|
|
{((isInPostView && showSpoilerForReply) || (!isInPostView && showSpoilerForPost)) && (
|
|
<tr className={styles.spoilerButton}>
|
|
<td>{capitalize(t('spoiler'))}</td>
|
|
<td>
|
|
[
|
|
<label>
|
|
<input
|
|
type='checkbox'
|
|
aria-label={capitalize(t('spoiler'))}
|
|
onChange={(e) => (isInPostView ? setPublishReplyOptions({ spoiler: e.target.checked }) : setPublishPostOptions({ spoiler: e.target.checked }))}
|
|
/>
|
|
{capitalize(t('spoiler'))}?
|
|
</label>
|
|
]
|
|
</td>
|
|
</tr>
|
|
)}
|
|
{(isInAllView || isInSubscriptionsView || isInModView) && (
|
|
<tr>
|
|
<td>{t('board')}</td>
|
|
<td>
|
|
<select
|
|
aria-label={t('board')}
|
|
className={styles.boardSelector}
|
|
onChange={(e) => setPublishPostOptions({ communityAddress: e.target.value })}
|
|
value={communityAddress}
|
|
>
|
|
<option value=''>{t('choose_one')}</option>
|
|
{isInAllView &&
|
|
directories.map((community) =>
|
|
community.title && community.address ? (
|
|
<option key={community.address} value={community.address}>
|
|
{community.title}
|
|
</option>
|
|
) : null,
|
|
)}
|
|
{isInModView &&
|
|
accountCommunityAddresses.map((address: string) => (
|
|
<option key={address} value={address}>
|
|
{address && getShortAddress(address)}
|
|
</option>
|
|
))}
|
|
{isInSubscriptionsView &&
|
|
subscriptions.map((sub: string) => (
|
|
<option key={sub} value={sub}>
|
|
{sub}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
<tr className='rules'>
|
|
<td colSpan={2}>
|
|
<ul className='rules'>
|
|
<li>
|
|
<Trans
|
|
i18nKey='post_form_rules_faq_prompt'
|
|
components={{
|
|
rules: <Link to={rulesPath} />,
|
|
faq: <Link to='/faq' />,
|
|
}}
|
|
/>
|
|
</li>
|
|
{showFlashUploadPrompt && (
|
|
<li>
|
|
<Trans
|
|
i18nKey='post_form_flash_upload_prompt'
|
|
components={{
|
|
catbox: <a href='https://catbox.moe/' target='_blank' rel='noopener noreferrer' aria-label='Catbox' />,
|
|
}}
|
|
/>
|
|
</li>
|
|
)}
|
|
{showMathTagsPrompt && (
|
|
<>
|
|
<li>
|
|
<Trans
|
|
i18nKey='post_form_math_tags_prompt'
|
|
components={{
|
|
tex: <TexLogo />,
|
|
}}
|
|
/>
|
|
</li>
|
|
<li>{t('post_form_math_right_click_prompt')}</li>
|
|
</>
|
|
)}
|
|
{showOekakiControls && isWebRuntime() ? <li>{OEKAKI_WEB_WARNING_TEXT}</li> : null}
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</>
|
|
);
|
|
|
|
const PostFormErrorRow = ({ ariaLive, children }: { ariaLive?: 'polite'; children: ReactNode }) => (
|
|
<tr className={styles.formErrorRow}>
|
|
<td colSpan={2}>
|
|
<div className={`${styles.error} ${styles.formError}`} aria-live={ariaLive}>
|
|
{children}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
|
|
const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid: string }) => {
|
|
const { t } = useTranslation();
|
|
const params = useParams();
|
|
const account = useAccount();
|
|
const [url, setUrl] = useState('');
|
|
const author = account?.author || {};
|
|
const { displayName } = author || {};
|
|
const accountComment = useAccountComment({ commentIndex: normalizeAccountCommentIndex(params?.accountCommentIndex) });
|
|
const resolvedAddress = useResolvedCommunityAddress();
|
|
const communityAddress = resolvedAddress || accountComment?.communityAddress;
|
|
const { setPublishPostOptions, postIndex, publishPost, publishPostError, publishPostOptions, resetPublishPostOptions } = usePublishPost({
|
|
communityAddress,
|
|
});
|
|
const effectiveBoardAddress = communityAddress || publishPostOptions.communityAddress;
|
|
|
|
const textRef = useRef<HTMLTextAreaElement>(null);
|
|
const urlRef = useRef<HTMLInputElement>(null);
|
|
const subjectRef = useRef<HTMLInputElement>(null);
|
|
const optionsRef = useRef<HTMLInputElement>(null);
|
|
const flagRef = useRef<HTMLSelectElement>(null);
|
|
const flashTagRef = useRef<HTMLSelectElement>(null);
|
|
const fortuneEntryRef = useRef<FortuneEntry | null>(null);
|
|
const diceRollRef = useRef<DiceRoll | null>(null);
|
|
const nonokoRedirectPathRef = useRef<string | null>(null);
|
|
|
|
const location = useLocation();
|
|
const isInPostView = isPostPageView(location.pathname, params);
|
|
const isInAllView = isAllView(location.pathname);
|
|
const isInModView = isModView(location.pathname);
|
|
const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
|
|
const subscriptions = account?.subscriptions || [];
|
|
const directories = useDirectories();
|
|
const directoryEntry = useDirectoryEntry(effectiveBoardAddress, params?.boardIdentifier);
|
|
const effectiveBoardPath = effectiveBoardAddress ? getBoardPath(effectiveBoardAddress, directories) : undefined;
|
|
const pendingPostBoardPath = effectiveBoardPath;
|
|
const rulesPath = effectiveBoardPath && isDirectoryRoute(effectiveBoardPath, directories) ? `/rules#${effectiveBoardPath}` : '/rules';
|
|
const showSpoilerForPost = directoryEntry?.features?.noSpoilers !== true;
|
|
const showSpoilerForReply = directoryEntry?.features?.noSpoilerReplies !== true;
|
|
const postOptionsDirectoryCode = getPostOptionsDirectoryCode(directoryEntry, location.pathname);
|
|
const showOekakiControls = postOptionsDirectoryCode === 'i' || directoryEntry?.directoryCode === 'i';
|
|
const requirePostLinkIsMediaFeature = directoryEntry?.features?.requirePostLinkIsMedia;
|
|
const requirePostLinkIsMedia = requirePostLinkIsMediaFeature === true || (requirePostLinkIsMediaFeature === undefined && (isInAllView || isInSubscriptionsView));
|
|
const flagOptions = getCommentFlagOptionsForDirectory(directoryEntry);
|
|
const showFlashUploadPrompt = isFlashDirectoryCode(postOptionsDirectoryCode);
|
|
const showFlashTagSelector = showFlashUploadPrompt && !isInPostView;
|
|
const showMathTagsPrompt = isMathDirectoryCode(postOptionsDirectoryCode) || isMathDirectoryCode(directoryEntry?.directoryCode);
|
|
|
|
const accountCommunityAddresses = useAccountCommunityAddresses();
|
|
const accountAddress = account?.author?.address;
|
|
const roles = useCommunityField(effectiveBoardAddress, (community) => community?.roles);
|
|
const accountRole = accountAddress ? roles?.[accountAddress]?.role : undefined;
|
|
const showBbcodeToolbar = hasModQueueAccessRole(accountRole) || (!effectiveBoardAddress && isInModView && accountCommunityAddresses.length > 0);
|
|
const moderationPostingRoleLabel = getModerationPostingRoleLabel({ address: accountAddress, role: accountRole });
|
|
const moderationPostingWarning = showBbcodeToolbar && moderationPostingRoleLabel ? `warning: posting as ${moderationPostingRoleLabel}` : undefined;
|
|
|
|
const [lengthError, setLengthError] = useState<string | null>(null);
|
|
const [formError, setFormError] = useState<string | PostOptionsValidationError | null>(null);
|
|
const [isBbcodePreviewing, setIsBbcodePreviewing] = useState(false);
|
|
const [bbcodePreviewContent, setBbcodePreviewContent] = useState('');
|
|
const { isPublishSubmissionInFlight, runPublishSubmission } = usePublishSubmissionGuard();
|
|
|
|
const checkContentLength = useRef(
|
|
debounce((content: string, t: TFunction, options: string, directoryCode: string | undefined) => {
|
|
const length = getPostOptionsPublishContentLength(content, options, directoryCode);
|
|
if (length > 2000) {
|
|
setLengthError(`${t('error')}: ${t('comment_field_too_long', { length })}`);
|
|
} else {
|
|
setLengthError(null);
|
|
}
|
|
}, 1000),
|
|
).current;
|
|
|
|
const checkPostOptions = useRef(
|
|
debounce((options: string, directoryCode: string | undefined) => {
|
|
const nextOptionsError = getPostOptionsValidationError(options, directoryCode);
|
|
if (nextOptionsError) {
|
|
setFormError(nextOptionsError);
|
|
}
|
|
}, POST_OPTIONS_VALIDATION_DELAY_MS),
|
|
).current;
|
|
|
|
const resetFields = useCallback(() => {
|
|
if (textRef.current) {
|
|
textRef.current.value = '';
|
|
}
|
|
if (urlRef.current) {
|
|
urlRef.current.value = '';
|
|
}
|
|
if (subjectRef.current) {
|
|
subjectRef.current.value = '';
|
|
}
|
|
if (optionsRef.current) {
|
|
optionsRef.current.value = '';
|
|
}
|
|
if (flagRef.current) {
|
|
flagRef.current.value = flagRef.current.options[0]?.value ?? '';
|
|
}
|
|
if (flashTagRef.current) {
|
|
flashTagRef.current.value = '';
|
|
}
|
|
checkContentLength.cancel();
|
|
checkPostOptions.cancel();
|
|
fortuneEntryRef.current = null;
|
|
diceRollRef.current = null;
|
|
setFormError(null);
|
|
setIsBbcodePreviewing(false);
|
|
setBbcodePreviewContent('');
|
|
}, [checkContentLength, checkPostOptions]);
|
|
|
|
const getBoardIndexPath = () => {
|
|
if (effectiveBoardAddress) {
|
|
return `/${getBoardPath(effectiveBoardAddress, directories)}`;
|
|
}
|
|
|
|
return params?.boardIdentifier ? `/${params.boardIdentifier}` : null;
|
|
};
|
|
|
|
const onPublishPost = () =>
|
|
runPublishSubmission(async () => {
|
|
const appliedYouTubeConversion = await applyPendingConversion();
|
|
|
|
const currentTitle = subjectRef.current?.value.trim() || '';
|
|
const currentContent = textRef.current?.value || '';
|
|
const currentUrl = urlRef.current?.value.trim() || '';
|
|
const currentOptions = optionsRef.current?.value || '';
|
|
const currentOptionsError = getPostOptionsValidationError(currentOptions, postOptionsDirectoryCode);
|
|
const publishContent = getContentWithOptions(currentContent, currentOptions, fortuneEntryRef, diceRollRef, postOptionsDirectoryCode);
|
|
|
|
checkContentLength.cancel();
|
|
checkPostOptions.cancel();
|
|
setLengthError(null);
|
|
setFormError(null);
|
|
nonokoRedirectPathRef.current = null;
|
|
|
|
if (currentOptionsError) {
|
|
setFormError(currentOptionsError);
|
|
return;
|
|
}
|
|
|
|
if (!currentTitle && !publishContent.trim() && !currentUrl) {
|
|
setFormError(`${t('error')}: ${t('empty_comment_alert')}`);
|
|
return;
|
|
}
|
|
if (currentUrl && !isValidPublishURL(currentUrl)) {
|
|
setFormError(`${t('error')}: ${t('invalid_url_alert')}`);
|
|
return;
|
|
}
|
|
if (currentUrl && requirePostLinkIsMedia && !isPublishFileMediaLink(currentUrl)) {
|
|
setFormError(`${t('error')}: ${t('link_not_image_or_video_alert')}`);
|
|
return;
|
|
}
|
|
const expiringMediaLinkAlert = currentUrl ? getExpiringMediaLinkAlert(currentUrl, t) : null;
|
|
if (expiringMediaLinkAlert) {
|
|
setFormError(expiringMediaLinkAlert);
|
|
return;
|
|
}
|
|
|
|
if (publishContent.trim().length > 2000) {
|
|
setFormError(`${t('error')}: ${t('field_too_long')}`);
|
|
return;
|
|
}
|
|
|
|
if ((isInAllView || isInSubscriptionsView || isInModView) && !publishPostOptions.communityAddress) {
|
|
setFormError(`${t('error')}: ${t('no_board_selected_warning')}`);
|
|
return;
|
|
}
|
|
|
|
const flagPublishOptions = getCommentFlagPublishOptionsForDirectory(directoryEntry, flagRef.current?.value);
|
|
const flashTagPublishOptions = getFlashTagPublishOptionsForDirectoryCode(postOptionsDirectoryCode, flashTagRef.current?.value);
|
|
const flairs = mergeFlairs(flagPublishOptions.flairs, flashTagPublishOptions.flairs);
|
|
const publishOptions = {
|
|
...flagPublishOptions,
|
|
...(flairs ? { flairs } : {}),
|
|
};
|
|
|
|
nonokoRedirectPathRef.current = hasNonokoOption(currentOptions) ? getBoardIndexPath() : null;
|
|
await publishPost({ content: publishContent, ...getPublishLinkOptions(currentUrl, appliedYouTubeConversion), ...publishOptions });
|
|
});
|
|
|
|
// redirect to pending page when pending comment is created
|
|
const navigate = useNavigate();
|
|
useEffect(() => {
|
|
if (typeof postIndex === 'number') {
|
|
const nonokoRedirectPath = nonokoRedirectPathRef.current;
|
|
nonokoRedirectPathRef.current = null;
|
|
resetPublishPostOptions();
|
|
resetFields();
|
|
if (nonokoRedirectPath) {
|
|
navigate(nonokoRedirectPath, { state: getNonokoPendingRouteState(postIndex) });
|
|
} else {
|
|
navigate(`/pending/${postIndex}`, pendingPostBoardPath ? { state: { boardPath: pendingPostBoardPath } } : undefined);
|
|
}
|
|
}
|
|
}, [postIndex, pendingPostBoardPath, resetFields, resetPublishPostOptions, navigate]);
|
|
|
|
// in post page, publish a reply to the post
|
|
const cid = params?.commentCid || '';
|
|
const { isResolvingExternalQuotes, publishReply, publishReplyError, publishReplyStateMessage, resetPublishReplyOptions, replyIndex, setPublishReplyOptions } =
|
|
usePublishReply({ cid, communityAddress, postCid });
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
checkContentLength.cancel();
|
|
checkPostOptions.cancel();
|
|
if (isInPostView) {
|
|
resetPublishReplyOptions();
|
|
} else {
|
|
resetPublishPostOptions();
|
|
}
|
|
};
|
|
}, [checkContentLength, checkPostOptions, isInPostView, resetPublishPostOptions, resetPublishReplyOptions]);
|
|
|
|
const handleContentValueChange = (content: string, options = optionsRef.current?.value || '') => {
|
|
const publishContent = getContentWithOptions(content, options, fortuneEntryRef, diceRollRef, postOptionsDirectoryCode, { includeFortune: false });
|
|
if (isBbcodePreviewing) {
|
|
setBbcodePreviewContent(content);
|
|
}
|
|
if (isInPostView) {
|
|
setPublishReplyOptions({ content: publishContent });
|
|
} else {
|
|
setPublishPostOptions({ content: publishContent });
|
|
}
|
|
checkContentLength(publishContent, t, options, postOptionsDirectoryCode);
|
|
};
|
|
|
|
const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
|
handleContentValueChange(e.target.value);
|
|
};
|
|
|
|
const handleOptionsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const options = e.target.value;
|
|
handleContentValueChange(textRef.current?.value || '', options);
|
|
setFormError((currentError) => (isPostOptionsValidationError(currentError) ? null : currentError));
|
|
checkPostOptions(options, postOptionsDirectoryCode);
|
|
};
|
|
|
|
const handleBbcodePreviewToggle = () => {
|
|
if (isBbcodePreviewing) {
|
|
setIsBbcodePreviewing(false);
|
|
window.requestAnimationFrame(() => textRef.current?.focus());
|
|
return;
|
|
}
|
|
|
|
setBbcodePreviewContent(textRef.current?.value ?? '');
|
|
setIsBbcodePreviewing(true);
|
|
};
|
|
|
|
const onPublishReply = () =>
|
|
runPublishSubmission(async () => {
|
|
const appliedYouTubeConversion = await applyPendingConversion();
|
|
|
|
const currentUrl = urlRef.current?.value.trim() || '';
|
|
const currentOptions = optionsRef.current?.value || '';
|
|
const currentOptionsError = getPostOptionsValidationError(currentOptions, postOptionsDirectoryCode);
|
|
const publishContent = getContentWithOptions(textRef.current?.value || '', currentOptions, fortuneEntryRef, diceRollRef, postOptionsDirectoryCode);
|
|
|
|
checkContentLength.cancel();
|
|
checkPostOptions.cancel();
|
|
setLengthError(null);
|
|
setFormError(null);
|
|
nonokoRedirectPathRef.current = null;
|
|
|
|
if (currentOptionsError) {
|
|
setFormError(currentOptionsError);
|
|
return;
|
|
}
|
|
|
|
if (!publishContent.trim() && !currentUrl) {
|
|
setFormError(`${t('error')}: ${t('empty_comment_alert')}`);
|
|
return;
|
|
}
|
|
|
|
if (currentUrl && !isValidPublishURL(currentUrl)) {
|
|
setFormError(`${t('error')}: ${t('invalid_url_alert')}`);
|
|
return;
|
|
}
|
|
if (currentUrl && requirePostLinkIsMedia && !isPublishFileMediaLink(currentUrl)) {
|
|
setFormError(`${t('error')}: ${t('link_not_image_or_video_alert')}`);
|
|
return;
|
|
}
|
|
const expiringMediaLinkAlert = currentUrl ? getExpiringMediaLinkAlert(currentUrl, t) : null;
|
|
if (expiringMediaLinkAlert) {
|
|
setFormError(expiringMediaLinkAlert);
|
|
return;
|
|
}
|
|
|
|
if (publishContent.trim().length > 2000) {
|
|
setFormError(`${t('error')}: ${t('field_too_long')}`);
|
|
return;
|
|
}
|
|
|
|
const flagPublishOptions = getCommentFlagPublishOptionsForDirectory(directoryEntry, flagRef.current?.value);
|
|
|
|
nonokoRedirectPathRef.current = hasNonokoOption(currentOptions) ? getBoardIndexPath() : null;
|
|
await publishReply({ content: publishContent, ...getPublishLinkOptions(currentUrl, appliedYouTubeConversion), ...flagPublishOptions });
|
|
});
|
|
|
|
const setLinkValue = (nextUrl: string) => {
|
|
setUrl(nextUrl);
|
|
if (isInPostView) {
|
|
setPublishReplyOptions({ link: nextUrl });
|
|
} else {
|
|
setPublishPostOptions({ link: nextUrl });
|
|
}
|
|
};
|
|
|
|
const {
|
|
applyPendingConversion,
|
|
cancelPendingConversion,
|
|
noticeCountdown: youtubeThumbnailConversionCountdown,
|
|
queueLinkConversion,
|
|
} = useYouTubeThumbnailLinkConversion({
|
|
enabled: requirePostLinkIsMedia,
|
|
onContentChange: handleContentValueChange,
|
|
onLinkChange: setLinkValue,
|
|
textRef,
|
|
urlRef,
|
|
});
|
|
|
|
const handleLinkChange = (nextUrl: string) => {
|
|
setLinkValue(nextUrl);
|
|
if (queueLinkConversion(nextUrl)) {
|
|
setFormError(null);
|
|
}
|
|
};
|
|
|
|
// Normalize pbs.twimg.com `?format=` media links to their `.jpg`/`.png` form once the field
|
|
// loses focus, so the conversion that happens at publish time is visible in the input. Done on
|
|
// blur (not per keystroke) to avoid rewriting the URL while it is still being typed or pasted.
|
|
const handleLinkBlur = () => {
|
|
const currentValue = urlRef.current?.value ?? '';
|
|
const twimgPublishUrl = getTwimgMediaFilePublishUrl(currentValue);
|
|
if (twimgPublishUrl && twimgPublishUrl !== currentValue) {
|
|
if (urlRef.current) {
|
|
urlRef.current.value = twimgPublishUrl;
|
|
}
|
|
setLinkValue(twimgPublishUrl);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (typeof replyIndex === 'number') {
|
|
const nonokoRedirectPath = nonokoRedirectPathRef.current;
|
|
nonokoRedirectPathRef.current = null;
|
|
resetFields();
|
|
closeForm();
|
|
if (nonokoRedirectPath) {
|
|
navigate(nonokoRedirectPath);
|
|
}
|
|
}
|
|
}, [replyIndex, closeForm, navigate, resetFields]);
|
|
|
|
const { isUploading, uploadedFileName, handleUpload, uploadFile } = useFileUpload({
|
|
onUploadComplete: (uploadedUrl: string) => {
|
|
if (uploadedUrl) {
|
|
cancelPendingConversion();
|
|
setLinkValue(uploadedUrl);
|
|
if (urlRef.current) {
|
|
urlRef.current.value = uploadedUrl;
|
|
}
|
|
}
|
|
},
|
|
});
|
|
const handleOekakiClearUploadedUrl = (uploadedUrl: string) => {
|
|
if ((urlRef.current?.value || url) !== uploadedUrl) return;
|
|
cancelPendingConversion();
|
|
setLinkValue('');
|
|
if (urlRef.current) {
|
|
urlRef.current.value = '';
|
|
}
|
|
};
|
|
const uploadMode = useMediaHostingStore((state) => state.uploadMode);
|
|
const showUploadControls = getShowUploadControls(uploadMode, isWebRuntime());
|
|
|
|
const hasInitializedDisplayName = useRef(false);
|
|
useEffect(() => {
|
|
if (displayName && !hasInitializedDisplayName.current) {
|
|
hasInitializedDisplayName.current = true;
|
|
if (isInPostView) {
|
|
setPublishReplyOptions({ displayName });
|
|
} else {
|
|
setPublishPostOptions({ displayName });
|
|
}
|
|
}
|
|
}, [displayName, isInPostView, setPublishReplyOptions, setPublishPostOptions]);
|
|
|
|
return (
|
|
<>
|
|
<table className={styles.postFormTable}>
|
|
<tbody>
|
|
<PostFormFields
|
|
t={t}
|
|
account={account}
|
|
displayName={displayName}
|
|
bbcodePreviewContent={bbcodePreviewContent}
|
|
isInPostView={isInPostView}
|
|
isBbcodePreviewing={isBbcodePreviewing}
|
|
postCid={postCid}
|
|
subjectRef={subjectRef}
|
|
optionsRef={optionsRef}
|
|
flagRef={flagRef}
|
|
flashTagRef={flashTagRef}
|
|
textRef={textRef}
|
|
urlRef={urlRef}
|
|
url={url}
|
|
handleContentChange={handleContentChange}
|
|
handleContentValueChange={handleContentValueChange}
|
|
handleLinkChange={handleLinkChange}
|
|
handleLinkBlur={handleLinkBlur}
|
|
handleOptionsChange={handleOptionsChange}
|
|
disableLinkInput={isUploading || youtubeThumbnailConversionCountdown !== null}
|
|
setPublishPostOptions={setPublishPostOptions}
|
|
setPublishReplyOptions={setPublishReplyOptions}
|
|
isUploading={isUploading}
|
|
uploadedFileName={uploadedFileName}
|
|
showUploadControls={showUploadControls}
|
|
showOekakiControls={showOekakiControls}
|
|
showSpoilerForPost={showSpoilerForPost}
|
|
showSpoilerForReply={showSpoilerForReply}
|
|
isInAllView={isInAllView}
|
|
isInSubscriptionsView={isInSubscriptionsView}
|
|
isInModView={isInModView}
|
|
directories={directories}
|
|
accountCommunityAddresses={accountCommunityAddresses}
|
|
subscriptions={subscriptions}
|
|
communityAddress={communityAddress}
|
|
rulesPath={rulesPath}
|
|
requirePostLinkIsMedia={requirePostLinkIsMedia}
|
|
flagOptions={flagOptions}
|
|
flashTagOptions={FLASH_TAG_OPTIONS}
|
|
showFlashTagSelector={showFlashTagSelector}
|
|
showFlashUploadPrompt={showFlashUploadPrompt}
|
|
showMathTagsPrompt={showMathTagsPrompt}
|
|
showBbcodeToolbar={showBbcodeToolbar}
|
|
onBbcodePreviewToggle={handleBbcodePreviewToggle}
|
|
onPublishReply={onPublishReply}
|
|
onPublishPost={onPublishPost}
|
|
handleUpload={handleUpload}
|
|
uploadFile={uploadFile}
|
|
onOekakiClearUploadedUrl={handleOekakiClearUploadedUrl}
|
|
isPublishSubmissionInFlight={isPublishSubmissionInFlight}
|
|
disableReplyPublish={isResolvingExternalQuotes}
|
|
/>
|
|
</tbody>
|
|
<tfoot>
|
|
{moderationPostingWarning ? <PostFormErrorRow>{moderationPostingWarning}</PostFormErrorRow> : null}
|
|
{lengthError ? <PostFormErrorRow>{lengthError}</PostFormErrorRow> : null}
|
|
{youtubeThumbnailConversionCountdown !== null ? (
|
|
<PostFormErrorRow ariaLive='polite'>{t('youtube_thumbnail_link_conversion_notice', { count: youtubeThumbnailConversionCountdown })}</PostFormErrorRow>
|
|
) : formError ? (
|
|
<PostFormErrorRow>
|
|
{isPostOptionsValidationError(formError) ? <PostOptionsErrorMessage error={formError} directories={directories} /> : formError}
|
|
</PostFormErrorRow>
|
|
) : null}
|
|
{publishPostError ? <PostFormErrorRow>{publishPostError}</PostFormErrorRow> : null}
|
|
{publishReplyError ? <PostFormErrorRow>{publishReplyError}</PostFormErrorRow> : null}
|
|
</tfoot>
|
|
</table>
|
|
{publishReplyStateMessage && <div className={styles.status}>{publishReplyStateMessage}</div>}
|
|
</>
|
|
);
|
|
};
|
|
|
|
const PostForm = () => {
|
|
const { t } = useTranslation();
|
|
const location = useLocation();
|
|
const params = useParams();
|
|
const isInPostView = isPostPageView(location.pathname, params);
|
|
const isInAllView = isAllView(location.pathname);
|
|
const isInModView = isModView(location.pathname);
|
|
const isInModQueueView = isModQueueView(location.pathname);
|
|
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
|
|
const isInCatalogView = isCatalogView(location.pathname, params);
|
|
const isMobile = useIsMobile();
|
|
|
|
const commentCid = params?.commentCid;
|
|
const post = useCommunitiesPagesStore((state) => (commentCid ? state.comments[commentCid] : undefined));
|
|
let comment: Comment | undefined = post;
|
|
// handle pending mod or author edit
|
|
const { editedComment } = useEditedComment({ comment });
|
|
if (editedComment) {
|
|
comment = editedComment;
|
|
}
|
|
|
|
const { deleted, locked, removed, postCid } = comment || {};
|
|
const archived = isCommentArchived(comment);
|
|
const isThreadClosed = deleted || locked || removed || archived;
|
|
const threadStateKey = archived ? 'thread_archived' : 'thread_closed';
|
|
|
|
const [showForm, setShowForm] = useState(false);
|
|
|
|
const accountComment = useAccountComment({ commentIndex: normalizeAccountCommentIndex(params?.accountCommentIndex) });
|
|
const resolvedAddress = useResolvedCommunityAddress();
|
|
const communityAddress = resolvedAddress || accountComment?.communityAddress;
|
|
|
|
const shouldShowOfflineAlert = !(isInAllView || isInSubscriptionsView || isInModView) && showForm;
|
|
|
|
if (isMobile) {
|
|
return (
|
|
<div className={styles.postFormMobile}>
|
|
{shouldShowOfflineAlert && <BoardOfflineAlert className={styles.offlineBoard} communityAddress={communityAddress} />}
|
|
{isInModQueueView ? (
|
|
<div className={styles.modQueueTitle}>{t('moderation_queue')}</div>
|
|
) : isThreadClosed ? (
|
|
<div className={styles.closed}>
|
|
{t(threadStateKey)}
|
|
<br />
|
|
{t('may_not_reply')}
|
|
</div>
|
|
) : (
|
|
<>
|
|
<button type='button' className={`${styles.showFormButton} button`} onClick={() => setShowForm(showForm ? false : true)}>
|
|
{showForm ? t('close_post_form') : isInPostView ? t('post_a_reply') : t('start_new_thread')}
|
|
</button>
|
|
{showForm && <PostFormTable closeForm={() => setShowForm(false)} postCid={postCid} />}
|
|
</>
|
|
)}
|
|
{isInCatalogView && <hr />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={styles.postFormDesktop}>
|
|
{shouldShowOfflineAlert && <BoardOfflineAlert className={styles.offlineBoard} communityAddress={communityAddress} />}
|
|
{isInModQueueView ? (
|
|
<div className={styles.modQueueTitle}>{t('moderation_queue')}</div>
|
|
) : isThreadClosed ? (
|
|
<div className={styles.closed}>
|
|
{t(threadStateKey)}
|
|
<br />
|
|
{t('may_not_reply')}
|
|
</div>
|
|
) : !showForm ? (
|
|
<div>
|
|
[
|
|
<button type='button' className='button' onClick={() => setShowForm(true)}>
|
|
{isInPostView ? t('post_a_reply') : t('start_new_thread')}
|
|
</button>
|
|
]
|
|
</div>
|
|
) : (
|
|
<PostFormTable closeForm={() => setShowForm(false)} postCid={postCid} />
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PostForm;
|