From 3a6d4e1a6abcbc816ed7407c0e9190b63696da6a Mon Sep 17 00:00:00 2001 From: DanielCliftonGuardian <110032454+DanielCliftonGuardian@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:35:48 +0000 Subject: [PATCH 1/2] lift up showPreview --- .../components/Discussion/CommentContainer.stories.tsx | 10 ++++++++++ .../src/components/Discussion/CommentContainer.tsx | 6 ++++++ .../src/components/Discussion/CommentForm.stories.tsx | 8 ++++++++ .../src/components/Discussion/CommentForm.tsx | 5 ++++- .../src/components/Discussion/Comments.tsx | 9 +++++++++ 5 files changed, 37 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/Discussion/CommentContainer.stories.tsx b/dotcom-rendering/src/components/Discussion/CommentContainer.stories.tsx index 76321d3ef4f..444908312d6 100644 --- a/dotcom-rendering/src/components/Discussion/CommentContainer.stories.tsx +++ b/dotcom-rendering/src/components/Discussion/CommentContainer.stories.tsx @@ -189,6 +189,8 @@ export const defaultStory = () => ( mutes={[]} toggleMuteStatus={() => {}} onPermalinkClick={() => {}} + showPreview={false} + setShowPreview={() => {}} /> ); defaultStory.storyName = 'default'; @@ -215,6 +217,8 @@ export const threadedComment = () => ( mutes={[]} toggleMuteStatus={() => {}} onPermalinkClick={() => {}} + showPreview={false} + setShowPreview={() => {}} /> ); threadedComment.storyName = 'threaded'; @@ -241,6 +245,8 @@ export const threadedCommentWithShowMore = () => ( mutes={[]} toggleMuteStatus={() => {}} onPermalinkClick={() => {}} + showPreview={false} + setShowPreview={() => {}} /> ); threadedCommentWithShowMore.storyName = 'threaded with show more button'; @@ -267,6 +273,8 @@ export const threadedCommentWithLongUsernames = () => ( mutes={[]} toggleMuteStatus={() => {}} onPermalinkClick={() => {}} + showPreview={false} + setShowPreview={() => {}} /> ); threadedCommentWithLongUsernames.storyName = 'threaded with long usernames'; @@ -293,6 +301,8 @@ export const threadedCommentWithLongUsernamesMobile = () => ( mutes={[]} toggleMuteStatus={() => {}} onPermalinkClick={() => {}} + showPreview={false} + setShowPreview={() => {}} /> ); threadedCommentWithLongUsernamesMobile.storyName = diff --git a/dotcom-rendering/src/components/Discussion/CommentContainer.tsx b/dotcom-rendering/src/components/Discussion/CommentContainer.tsx index 76ef88651c2..1caa24ef315 100644 --- a/dotcom-rendering/src/components/Discussion/CommentContainer.tsx +++ b/dotcom-rendering/src/components/Discussion/CommentContainer.tsx @@ -34,6 +34,8 @@ type Props = { parentCommentId: number, ) => Promise; onPreview?: (body: string) => Promise; + showPreview: boolean; + setShowPreview: (showPreview: boolean) => void; }; const nestingStyles = css` @@ -85,6 +87,8 @@ export const CommentContainer = ({ onComment, onReply, onPreview, + showPreview, + setShowPreview, }: Props) => { // Filter logic const [expanded, setExpanded] = useState(threads === 'expanded'); @@ -222,6 +226,8 @@ export const CommentContainer = ({ onComment={onComment} onReply={onReply} onPreview={onPreview} + showPreview={showPreview} + setShowPreview={setShowPreview} /> )} diff --git a/dotcom-rendering/src/components/Discussion/CommentForm.stories.tsx b/dotcom-rendering/src/components/Discussion/CommentForm.stories.tsx index b9225b45b67..407f25907b2 100644 --- a/dotcom-rendering/src/components/Discussion/CommentForm.stories.tsx +++ b/dotcom-rendering/src/components/Discussion/CommentForm.stories.tsx @@ -65,6 +65,8 @@ export const Default = () => ( shortUrl={shortUrl} user={aUser} onAddComment={(comment) => {}} + showPreview={false} + setShowPreview={() => {}} /> ); Default.storyName = 'default'; @@ -76,6 +78,8 @@ export const Error = () => ( shortUrl={'/p/g8g7v'} user={aUser} onAddComment={(comment) => {}} + showPreview={false} + setShowPreview={() => {}} /> ); Error.storyName = 'form with errors'; @@ -87,6 +91,8 @@ export const Active = () => ( user={aUser} onAddComment={(comment) => {}} commentBeingRepliedTo={aComment} + showPreview={false} + setShowPreview={() => {}} /> ); Active.storyName = 'form is active'; @@ -118,6 +124,8 @@ export const Premoderated = () => ( }} onAddComment={(comment) => {}} commentBeingRepliedTo={aComment} + showPreview={false} + setShowPreview={() => {}} /> ); Premoderated.storyName = 'user is premoderated'; diff --git a/dotcom-rendering/src/components/Discussion/CommentForm.tsx b/dotcom-rendering/src/components/Discussion/CommentForm.tsx index b5aead8167e..91e96ad4832 100644 --- a/dotcom-rendering/src/components/Discussion/CommentForm.tsx +++ b/dotcom-rendering/src/components/Discussion/CommentForm.tsx @@ -36,6 +36,8 @@ type Props = { parentCommentId: number, ) => Promise; onPreview?: (body: string) => Promise; + showPreview: boolean; + setShowPreview: (showPreview: boolean) => void; }; const boldString = (str: string) => `${str}`; @@ -215,6 +217,8 @@ export const CommentForm = ({ onComment, onReply, onPreview, + showPreview, + setShowPreview, }: Props) => { const [isActive, setIsActive] = useState( commentBeingRepliedTo ? true : false, @@ -224,7 +228,6 @@ export const CommentForm = ({ const [previewBody, setPreviewBody] = useState(''); const [error, setError] = useState(''); const [info, setInfo] = useState(''); - const [showPreview, setShowPreview] = useState(false); const textAreaRef = useRef(null); useEffect(() => { diff --git a/dotcom-rendering/src/components/Discussion/Comments.tsx b/dotcom-rendering/src/components/Discussion/Comments.tsx index b56aa950ef2..47781a53215 100644 --- a/dotcom-rendering/src/components/Discussion/Comments.tsx +++ b/dotcom-rendering/src/components/Discussion/Comments.tsx @@ -132,6 +132,7 @@ export const Comments = ({ useState(10); const [commentCount, setCommentCount] = useState(0); const [mutes, setMutes] = useState(readMutes()); + const [showPreview, setShowPreview] = useState(false); const loadingMore = !loading && comments.length !== numberOfCommentsToShow; @@ -302,6 +303,8 @@ export const Comments = ({ toggleMuteStatus={toggleMuteStatus} onPermalinkClick={onPermalinkClick} onRecommend={onRecommend} + showPreview={showPreview} + setShowPreview={setShowPreview} /> ))} @@ -323,6 +326,8 @@ export const Comments = ({ onComment={onComment} onReply={onReply} onPreview={onPreview} + showPreview={showPreview} + setShowPreview={setShowPreview} /> )} {!!picks.length && ( @@ -375,6 +380,8 @@ export const Comments = ({ onPermalinkClick={onPermalinkClick} onRecommend={onRecommend} onReply={onReply} + showPreview={showPreview} + setShowPreview={setShowPreview} /> ))} @@ -400,6 +407,8 @@ export const Comments = ({ onComment={onComment} onReply={onReply} onPreview={onPreview} + showPreview={showPreview} + setShowPreview={setShowPreview} /> )} From 86efe07e00454d680779d6ac9cbc41fce826b722 Mon Sep 17 00:00:00 2001 From: DanielCliftonGuardian <110032454+DanielCliftonGuardian@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:46:35 +0000 Subject: [PATCH 2/2] Update CommentContainer.test.tsx --- .../src/components/Discussion/CommentContainer.test.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/dotcom-rendering/src/components/Discussion/CommentContainer.test.tsx b/dotcom-rendering/src/components/Discussion/CommentContainer.test.tsx index 13935598b54..c6148013346 100644 --- a/dotcom-rendering/src/components/Discussion/CommentContainer.test.tsx +++ b/dotcom-rendering/src/components/Discussion/CommentContainer.test.tsx @@ -66,6 +66,8 @@ describe('CommentContainer', () => { mutes={[]} toggleMuteStatus={() => {}} onPermalinkClick={() => {}} + showPreview={false} + setShowPreview={() => {}} />, ); @@ -103,6 +105,8 @@ describe('CommentContainer', () => { mutes={[]} toggleMuteStatus={() => {}} onPermalinkClick={() => {}} + showPreview={false} + setShowPreview={() => {}} />, ); @@ -139,6 +143,8 @@ describe('CommentContainer', () => { mutes={[]} toggleMuteStatus={() => {}} onPermalinkClick={() => {}} + showPreview={false} + setShowPreview={() => {}} />, ); @@ -176,6 +182,8 @@ describe('CommentContainer', () => { mutes={[]} toggleMuteStatus={() => {}} onPermalinkClick={() => {}} + showPreview={false} + setShowPreview={() => {}} />, );