Lift state for showPreview from CommentForm to Comments (#10320)

guardian · Jan 26, 2024 · 73bfc2f · 73bfc2f
1 parent 7675140
commit 73bfc2f
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 1 deletion.
diff --git 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={() => {}}
 		isCommentFormActive={false}
 		setIsCommentFormActive={() => {}}
 	/>
@@ -217,6 +219,8 @@ export const threadedComment = () => (
 		mutes={[]}
 		toggleMuteStatus={() => {}}
 		onPermalinkClick={() => {}}
+		showPreview={false}
+		setShowPreview={() => {}}
 		isCommentFormActive={false}
 		setIsCommentFormActive={() => {}}
 	/>
@@ -245,6 +249,8 @@ export const threadedCommentWithShowMore = () => (
 		mutes={[]}
 		toggleMuteStatus={() => {}}
 		onPermalinkClick={() => {}}
+		showPreview={false}
+		setShowPreview={() => {}}
 		isCommentFormActive={false}
 		setIsCommentFormActive={() => {}}
 	/>
@@ -273,6 +279,8 @@ export const threadedCommentWithLongUsernames = () => (
 		mutes={[]}
 		toggleMuteStatus={() => {}}
 		onPermalinkClick={() => {}}
+		showPreview={false}
+		setShowPreview={() => {}}
 		isCommentFormActive={false}
 		setIsCommentFormActive={() => {}}
 	/>
@@ -301,6 +309,8 @@ export const threadedCommentWithLongUsernamesMobile = () => (
 		mutes={[]}
 		toggleMuteStatus={() => {}}
 		onPermalinkClick={() => {}}
+		showPreview={false}
+		setShowPreview={() => {}}
 		isCommentFormActive={false}
 		setIsCommentFormActive={() => {}}
 	/>

diff --git 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={() => {}}
 				isCommentFormActive={true}
 				setIsCommentFormActive={() => {}}
 			/>,
@@ -105,6 +107,8 @@ describe('CommentContainer', () => {
 				mutes={[]}
 				toggleMuteStatus={() => {}}
 				onPermalinkClick={() => {}}
+				showPreview={false}
+				setShowPreview={() => {}}
 				isCommentFormActive={true}
 				setIsCommentFormActive={() => {}}
 			/>,
@@ -143,6 +147,8 @@ describe('CommentContainer', () => {
 				mutes={[]}
 				toggleMuteStatus={() => {}}
 				onPermalinkClick={() => {}}
+				showPreview={false}
+				setShowPreview={() => {}}
 				isCommentFormActive={true}
 				setIsCommentFormActive={() => {}}
 			/>,
@@ -182,6 +188,8 @@ describe('CommentContainer', () => {
 				mutes={[]}
 				toggleMuteStatus={() => {}}
 				onPermalinkClick={() => {}}
+				showPreview={false}
+				setShowPreview={() => {}}
 				isCommentFormActive={true}
 				setIsCommentFormActive={() => {}}
 			/>,

diff --git 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<CommentResponse>;
 	onPreview?: (body: string) => Promise<string>;
+	showPreview: boolean;
+	setShowPreview: (showPreview: boolean) => void;
 	isCommentFormActive: boolean;
 	setIsCommentFormActive: (isActive: boolean) => void;
 };
@@ -87,6 +89,8 @@ export const CommentContainer = ({
 	onComment,
 	onReply,
 	onPreview,
+	showPreview,
+	setShowPreview,
 	isCommentFormActive,
 	setIsCommentFormActive,
 }: Props) => {
@@ -226,6 +230,8 @@ export const CommentContainer = ({
 								onComment={onComment}
 								onReply={onReply}
 								onPreview={onPreview}
+								showPreview={showPreview}
+								setShowPreview={setShowPreview}
 								isActive={isCommentFormActive}
 								setIsActive={setIsCommentFormActive}
 							/>

diff --git 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={() => {}}
 		isActive={false}
 		setIsActive={() => {}}
 	/>
@@ -78,6 +80,8 @@ export const Error = () => (
 		shortUrl={'/p/g8g7v'}
 		user={aUser}
 		onAddComment={(comment) => {}}
+		showPreview={false}
+		setShowPreview={() => {}}
 		isActive={false}
 		setIsActive={() => {}}
 	/>
@@ -91,6 +95,8 @@ export const Active = () => (
 		user={aUser}
 		onAddComment={(comment) => {}}
 		commentBeingRepliedTo={aComment}
+		showPreview={false}
+		setShowPreview={() => {}}
 		isActive={true}
 		setIsActive={() => {}}
 	/>
@@ -124,6 +130,8 @@ export const Premoderated = () => (
 		}}
 		onAddComment={(comment) => {}}
 		commentBeingRepliedTo={aComment}
+		showPreview={false}
+		setShowPreview={() => {}}
 		isActive={true}
 		setIsActive={() => {}}
 	/>

diff --git 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<CommentResponse>;
 	onPreview?: (body: string) => Promise<string>;
+	showPreview: boolean;
+	setShowPreview: (showPreview: boolean) => void;
 	isActive: boolean;
 	setIsActive: (isActive: boolean) => void;
 };
@@ -217,6 +219,8 @@ export const CommentForm = ({
 	onComment,
 	onReply,
 	onPreview,
+	showPreview,
+	setShowPreview,
 	isActive,
 	setIsActive,
 }: Props) => {
@@ -225,7 +229,6 @@ export const CommentForm = ({
 	const [previewBody, setPreviewBody] = useState<string>('');
 	const [error, setError] = useState<string>('');
 	const [info, setInfo] = useState<string>('');
-	const [showPreview, setShowPreview] = useState<boolean>(false);
 	const textAreaRef = useRef<HTMLTextAreaElement>(null);
 
 	useEffect(() => {

diff --git a/dotcom-rendering/src/components/Discussion/Comments.tsx b/dotcom-rendering/src/components/Discussion/Comments.tsx
@@ -133,6 +133,7 @@ export const Comments = ({
 		useState<CommentType>();
 	const [numberOfCommentsToShow, setNumberOfCommentsToShow] = useState(10);
 	const [mutes, setMutes] = useState<string[]>(readMutes());
+	const [showPreview, setShowPreview] = useState<boolean>(false);
 	const [isCommentFormActive, setIsCommentFormActive] = useState<boolean>(
 		!!commentBeingRepliedTo,
 	);
@@ -292,6 +293,8 @@ export const Comments = ({
 											toggleMuteStatus={toggleMuteStatus}
 											onPermalinkClick={onPermalinkClick}
 											onRecommend={onRecommend}
+											showPreview={showPreview}
+											setShowPreview={setShowPreview}
 											isCommentFormActive={
 												isCommentFormActive
 											}
@@ -319,6 +322,8 @@ export const Comments = ({
 					onComment={onComment}
 					onReply={onReply}
 					onPreview={onPreview}
+					showPreview={showPreview}
+					setShowPreview={setShowPreview}
 					isActive={isCommentFormActive}
 					setIsActive={setIsCommentFormActive}
 				/>
@@ -373,6 +378,8 @@ export const Comments = ({
 									onPermalinkClick={onPermalinkClick}
 									onRecommend={onRecommend}
 									onReply={onReply}
+									showPreview={showPreview}
+									setShowPreview={setShowPreview}
 									isCommentFormActive={isCommentFormActive}
 									setIsCommentFormActive={
 										setIsCommentFormActive
@@ -402,6 +409,8 @@ export const Comments = ({
 					onComment={onComment}
 					onReply={onReply}
 					onPreview={onPreview}
+					showPreview={showPreview}
+					setShowPreview={setShowPreview}
 					isActive={isCommentFormActive}
 					setIsActive={setIsCommentFormActive}
 				/>