diff --git a/src/app.tsx b/src/app.tsx index ffba5fae..ce795174 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,7 +1,10 @@ import { useEffect, useState } from 'react'; import { Outlet, Route, Routes, useLocation, useParams } from 'react-router-dom'; +import { useAccountComment } from '@plebbit/plebbit-react-hooks'; import { isAllView, isSubscriptionsView } from './lib/utils/view-utils'; import useIsMobile from './hooks/use-is-mobile'; +import useTheme from './hooks/use-theme'; +import { timeFilterNames } from './hooks/use-time-filter'; import styles from './app.module.css'; import Board from './views/board'; import Catalog from './views/catalog'; @@ -16,8 +19,6 @@ import ChallengeModal from './components/challenge-modal'; import PostForm from './components/post-form'; import SubplebbitStats from './components/subplebbit-stats'; import TopBar from './components/topbar'; -import { timeFilterNames } from './hooks/use-time-filter'; -import useTheme from './hooks/use-theme'; const BoardLayout = () => { const { accountCommentIndex, subplebbitAddress, timeFilterName } = useParams(); @@ -25,8 +26,9 @@ const BoardLayout = () => { const isMobile = useIsMobile(); const isInAllView = isAllView(location.pathname, useParams()); const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams()); + const pendingPost = useAccountComment({ commentIndex: accountCommentIndex ? parseInt(accountCommentIndex) : undefined }); - const isValidAccountCommentIndex = !accountCommentIndex || (!isNaN(parseInt(accountCommentIndex)) && parseInt(accountCommentIndex) >= 0); + const isValidAccountCommentIndex = !accountCommentIndex || (!isNaN(Number(accountCommentIndex)) && Number(accountCommentIndex) >= 0); if (!isValidAccountCommentIndex || (timeFilterName && !timeFilterNames.includes(timeFilterName))) { return ; @@ -42,13 +44,13 @@ const BoardLayout = () => { {isMobile - ? (subplebbitAddress || isInAllView || isInSubscriptionsView) && ( + ? (subplebbitAddress || isInAllView || isInSubscriptionsView || pendingPost?.subplebbitAddress) && ( <> ) - : (subplebbitAddress || isInAllView || isInSubscriptionsView) && ( + : (subplebbitAddress || isInAllView || isInSubscriptionsView || pendingPost?.subplebbitAddress) && ( <> {!(isInAllView || isInSubscriptionsView) && } diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx index e6a319be..064672eb 100644 --- a/src/components/board-buttons/board-buttons.tsx +++ b/src/components/board-buttons/board-buttons.tsx @@ -267,11 +267,9 @@ export const DesktopBoardButtons = () => { ] [ ] - {isInPostView && ( - - - - )} + + + ) : ( <> diff --git a/src/components/edit-menu/edit-menu.tsx b/src/components/edit-menu/edit-menu.tsx index 2cfe0e3c..70c8464e 100644 --- a/src/components/edit-menu/edit-menu.tsx +++ b/src/components/edit-menu/edit-menu.tsx @@ -1,10 +1,9 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { Trans, useTranslation } from 'react-i18next'; -import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react'; +import { autoUpdate, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react'; import { Comment, PublishCommentEditOptions, usePublishCommentEdit } from '@plebbit/plebbit-react-hooks'; import styles from './edit-menu.module.css'; import { alertChallengeVerificationFailed } from '../../lib/utils/challenge-utils'; -import { formatMarkdown } from '../../lib/utils/post-utils'; import useChallengesStore from '../../stores/use-challenges-store'; import _ from 'lodash'; import useIsMobile from '../../hooks/use-is-mobile'; @@ -90,7 +89,7 @@ const EditMenu = ({ isAccountMod, isAccountCommentAuthor, isCommentAuthorMod, po placement: 'bottom-start', open: isEditMenuOpen, onOpenChange: setIsEditMenuOpen, - middleware: [offset(2), flip({ fallbackAxisSideDirection: 'end' }), shift()], + middleware: [offset(2), shift()], whileElementsMounted: autoUpdate, }); @@ -102,6 +101,13 @@ const EditMenu = ({ isAccountMod, isAccountCommentAuthor, isCommentAuthorMod, po const headingId = useId(); + useEffect(() => { + setPublishCommentEditOptions((prevOptions) => ({ + ...prevOptions, + commentCid: cid, + })); + }, [cid]); + const _publishCommentEdit = async () => { try { await publishCommentEdit(); @@ -114,11 +120,6 @@ const EditMenu = ({ isAccountMod, isAccountCommentAuthor, isCommentAuthorMod, po setIsEditMenuOpen(false); }; - const handleContentChange = (e: React.ChangeEvent) => { - const formattedContent = formatMarkdown(e.target.value); - setPublishCommentEditOptions((state) => ({ ...state, content: formattedContent })); - }; - return ( <> @@ -146,7 +147,11 @@ const EditMenu = ({ isAccountMod, isAccountCommentAuthor, isCommentAuthorMod, po {isContentEditorOpen && (
-