Adapt discussion-rendering to DCR's directory structure

`discussion-rendering` became part of DCR in #8057. At the time, we did
not want to make too many changes at once by moving files into DCR's
folder structure, so we put everything under the `discussion-rendering`
directory.

This change moves files out of `discussion-rendering` into the
equivalent places, and deletes the `discussion-rendering` directory.

dotcom-rendering/src/components/Discussion.tsx

@@ -4,12 +4,12 @@ import { neutral, space } from '@guardian/source-foundations';
 import { SvgPlus } from '@guardian/source-react-components';
 import { EditorialButton } from '@guardian/source-react-components-development-kitchen';
 import { useEffect, useState } from 'react';
-import { Comments } from '../discussion-rendering/Comments';
-import type { SignedInUser } from '../discussion-rendering/discussionTypes';
 import { decidePalette } from '../lib/decidePalette';
 import { getCommentContext } from '../lib/getCommentContext';
 import { revealStyles } from '../lib/revealStyles';
 import { useDiscussion } from '../lib/useDiscussion';
+import type { SignedInUser } from '../types/discussion';
+import { Comments } from './Discussion/Comments';
 import { Hide } from './Hide';
 import { SignedInAs } from './SignedInAs';
 

dotcom-rendering/src/discussion-rendering/components/AbuseReportForm/AbuseReportForm.test.tsx → dotcom-rendering/src/components/Discussion/AbuseReportForm.test.tsx

@@ -2,7 +2,7 @@ import '@testing-library/jest-dom/extend-expect';
 import { Pillar } from '@guardian/libs';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { mockRESTCalls } from '../../../lib/mockRESTCalls';
+import { mockRESTCalls } from '../../lib/mockRESTCalls';
 import { AbuseReportForm } from './AbuseReportForm';
 
 const fetchMock = mockRESTCalls();

dotcom-rendering/src/discussion-rendering/components/AbuseReportForm/AbuseReportForm.tsx → dotcom-rendering/src/components/Discussion/AbuseReportForm.tsx

@@ -4,13 +4,13 @@ import { log } from '@guardian/libs';
 import { neutral, space, textSans } from '@guardian/source-foundations';
 import { Button, SvgCross } from '@guardian/source-react-components';
 import { useEffect, useRef, useState } from 'react';
+import { reportAbuse } from '../../lib/discussionApi';
+import { palette } from '../../lib/discussionPalette';
+import { pillarToString } from '../../lib/pillarToString';
 import type {
 	SignedInWithCookies,
 	SignedInWithOkta,
-} from '../../../lib/useAuthStatus';
-import { reportAbuse } from '../../lib/api';
-import { palette } from '../../lib/palette';
-import { pillarToString } from '../../lib/pillarToString';
+} from '../../lib/useAuthStatus';
 
 type FormData = {
 	categoryId: number;

dotcom-rendering/src/discussion-rendering/components/Comment/Comment.stories.tsx → dotcom-rendering/src/components/Discussion/Comment.stories.tsx

@@ -1,5 +1,5 @@
 import { Pillar } from '@guardian/libs';
-import type { CommentType, SignedInUser } from '../../discussionTypes';
+import type { CommentType, SignedInUser } from '../../types/discussion';
 import { Comment } from './Comment';
 
 export default { title: 'Discussion/Comment' };

dotcom-rendering/src/discussion-rendering/components/Comment/Comment.tsx → dotcom-rendering/src/components/Discussion/Comment.tsx

@@ -12,22 +12,18 @@ import {
 } from '@guardian/source-foundations';
 import { Button, Link, SvgIndent } from '@guardian/source-react-components';
 import { useState } from 'react';
-import type { CommentType, SignedInUser } from '../../discussionTypes';
-import { pickComment, unPickComment } from '../../lib/api';
+import { pickComment, unPickComment } from '../../lib/discussionApi';
+import { palette } from '../../lib/discussionPalette';
 import { createAuthenticationEventParams } from '../../lib/identity-component-event';
-import { palette } from '../../lib/palette';
 import { pillarToString } from '../../lib/pillarToString';
-import { AbuseReportForm } from '../AbuseReportForm/AbuseReportForm';
-import { Avatar } from '../Avatar/Avatar';
-import {
-	GuardianContributor,
-	GuardianPick,
-	GuardianStaff,
-} from '../Badges/Badges';
-import { Column } from '../Column/Column';
-import { RecommendationCount } from '../RecommendationCount/RecommendationCount';
-import { Row } from '../Row/Row';
-import { Timestamp } from '../Timestamp/Timestamp';
+import type { CommentType, SignedInUser } from '../../types/discussion';
+import { AbuseReportForm } from './AbuseReportForm';
+import { Avatar } from './Avatar';
+import { GuardianContributor, GuardianPick, GuardianStaff } from './Badges';
+import { Column } from './Column';
+import { RecommendationCount } from './RecommendationCount';
+import { Row } from './Row';
+import { Timestamp } from './Timestamp';
 
 type Props = {
 	user?: SignedInUser;

dotcom-rendering/src/discussion-rendering/components/CommentContainer/CommentContainer.stories.tsx → dotcom-rendering/src/components/Discussion/CommentContainer.stories.tsx

@@ -1,5 +1,5 @@
 import { Pillar } from '@guardian/libs';
-import type { CommentType, SignedInUser } from '../../discussionTypes';
+import type { CommentType, SignedInUser } from '../../types/discussion';
 import { CommentContainer } from './CommentContainer';
 
 export default { title: 'Discussion/CommentContainer' };

dotcom-rendering/src/discussion-rendering/components/CommentContainer/CommentContainer.test.tsx → dotcom-rendering/src/components/Discussion/CommentContainer.test.tsx

@@ -1,9 +1,9 @@
 import '@testing-library/jest-dom/extend-expect';
 import { Pillar } from '@guardian/libs';
 import { fireEvent, render, waitFor } from '@testing-library/react';
-import { comment } from '../../../../fixtures/manual/comment';
-import { mockedMessageID, mockRESTCalls } from '../../../lib/mockRESTCalls';
-import type { CommentType, SignedInUser } from '../../discussionTypes';
+import { comment } from '../../../fixtures/manual/comment';
+import { mockedMessageID, mockRESTCalls } from '../../lib/mockRESTCalls';
+import type { CommentType, SignedInUser } from '../../types/discussion';
 import { CommentContainer } from './CommentContainer';
 
 mockRESTCalls();

dotcom-rendering/src/discussion-rendering/components/CommentContainer/CommentContainer.tsx → dotcom-rendering/src/components/Discussion/CommentContainer.tsx

@@ -3,17 +3,17 @@ import type { ArticleTheme } from '@guardian/libs';
 import { border, neutral, space } from '@guardian/source-foundations';
 import { SvgPlus } from '@guardian/source-react-components';
 import { useEffect, useState } from 'react';
+import { getMoreResponses } from '../../lib/discussionApi';
 import type {
 	CommentResponse,
 	CommentType,
 	SignedInUser,
 	ThreadsType,
-} from '../../discussionTypes';
-import { getMoreResponses } from '../../lib/api';
-import { Comment } from '../Comment/Comment';
-import { CommentForm } from '../CommentForm/CommentForm';
-import { CommentReplyPreview } from '../CommentReplyPreview/CommentReplyPreview';
-import { PillarButton } from '../PillarButton/PillarButton';
+} from '../../types/discussion';
+import { Comment } from './Comment';
+import { CommentForm } from './CommentForm';
+import { CommentReplyPreview } from './CommentReplyPreview';
+import { PillarButton } from './PillarButton';
 
 type Props = {
 	comment: CommentType;

dotcom-rendering/src/discussion-rendering/components/CommentForm/CommentForm.stories.tsx → dotcom-rendering/src/components/Discussion/CommentForm.stories.tsx

@@ -1,5 +1,5 @@
 import { Pillar } from '@guardian/libs';
-import type { CommentType, SignedInUser } from '../../discussionTypes';
+import type { CommentType, SignedInUser } from '../../types/discussion';
 import { CommentForm } from './CommentForm';
 
 export default { component: CommentForm, title: 'Discussion/CommentForm' };

dotcom-rendering/src/discussion-rendering/components/CommentForm/CommentForm.tsx → dotcom-rendering/src/components/Discussion/CommentForm.tsx

@@ -2,22 +2,21 @@ import { css } from '@emotion/react';
 import type { ArticleTheme } from '@guardian/libs';
 import { neutral, space, text, textSans } from '@guardian/source-foundations';
 import { useEffect, useRef, useState } from 'react';
-import type {
-	CommentResponse,
-	CommentType,
-	SignedInUser,
-} from '../../discussionTypes';
 import {
 	addUserName,
 	comment as defaultComment,
 	preview as defaultPreview,
 	reply as defaultReply,
-} from '../../lib/api';
-import { simulateNewComment } from '../../lib/simulateNewComment';
-import { FirstCommentWelcome } from '../FirstCommentWelcome/FirstCommentWelcome';
-import { PillarButton } from '../PillarButton/PillarButton';
-import { Preview } from '../Preview/Preview';
-import { Row } from '../Row/Row';
+} from '../../lib/discussionApi';
+import type {
+	CommentResponse,
+	CommentType,
+	SignedInUser,
+} from '../../types/discussion';
+import { FirstCommentWelcome } from './FirstCommentWelcome';
+import { PillarButton } from './PillarButton';
+import { Preview } from './Preview';
+import { Row } from './Row';
 
 type Props = {
 	shortUrl: string;
@@ -150,6 +149,56 @@ const Space = ({ amount }: { amount: 1 | 2 | 3 | 4 | 5 | 6 | 9 | 12 | 24 }) => (
 	/>
 );
 
+const simulateNewComment = (
+	commentId: number,
+	body: string,
+	user: UserProfile,
+	commentBeingRepliedTo?: CommentType,
+): CommentType => {
+	// The returned object below is a simulation of the comment that was created that
+	// we add to our local state so that the reader has immediate feedback. We do
+	// this because the api has a 1 minute cache expiry so simply refreshing the
+	// main list of comments often won't return the comment just added.
+	// Edge case: If the user _does_ refresh then this local state will be overridden
+	// by the new api response and - if the refresh was within 60 seconds - the
+	// reader's comment will not be present. The same edge case exists in frontend.
+	return {
+		id: commentId,
+		body,
+		date: Date(),
+		isoDateTime: new Date().toISOString(),
+		status: 'visible',
+		webUrl: `https://discussion.theguardian.com/comment-permalink/${commentId}`,
+		apiUrl: `https://discussion.guardianapis.com/discussion-api/comment/${commentId}`,
+		numRecommends: 0,
+		isHighlighted: false,
+		userProfile: {
+			userId: user.userId,
+			displayName: user.displayName,
+			webUrl: user.webUrl,
+			apiUrl: user.apiUrl,
+			avatar: user.avatar,
+			secureAvatarUrl: user.secureAvatarUrl,
+			badge: user.badge,
+		},
+		...(commentBeingRepliedTo
+			? {
+					responseTo: {
+						displayName:
+							commentBeingRepliedTo.userProfile.displayName,
+						commentApiUrl: `https://discussion.guardianapis.com/discussion-api/comment/${commentBeingRepliedTo.id}`,
+						isoDateTime: commentBeingRepliedTo.isoDateTime,
+						date: commentBeingRepliedTo.date,
+						commentId: String(commentBeingRepliedTo.id),
+						commentWebUrl: `https://discussion.theguardian.com/comment-permalink/${commentBeingRepliedTo.id}`,
+					},
+			  }
+			: {
+					responses: [],
+			  }),
+	};
+};
+
 export const CommentForm = ({
 	shortUrl,
 	pillar,

dotcom-rendering/src/discussion-rendering/components/CommentReplyPreview/CommentReplyPreview.stories.tsx → dotcom-rendering/src/components/Discussion/CommentReplyPreview.stories.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { Pillar } from '@guardian/libs';
-import type { CommentType } from '../../discussionTypes';
+import type { CommentType } from '../../types/discussion';
 import { CommentReplyPreview, Preview } from './CommentReplyPreview';
 
 export default { title: 'Discussion/CommentReplyPreview' };

dotcom-rendering/src/discussion-rendering/components/CommentReplyPreview/CommentReplyPreview.tsx → dotcom-rendering/src/components/Discussion/CommentReplyPreview.tsx

@@ -3,10 +3,10 @@ import type { ArticleTheme } from '@guardian/libs';
 import { neutral, space, text, textSans } from '@guardian/source-foundations';
 import { Button, SvgIndent } from '@guardian/source-react-components';
 import { useState } from 'react';
-import type { CommentType } from '../../discussionTypes';
-import { palette } from '../../lib/palette';
+import { palette } from '../../lib/discussionPalette';
 import { pillarToString } from '../../lib/pillarToString';
-import { Row } from '../Row/Row';
+import type { CommentType } from '../../types/discussion';
+import { Row } from './Row';
 
 type Props = {
 	pillar: ArticleTheme;

dotcom-rendering/src/discussion-rendering/Comments.stories.tsx → dotcom-rendering/src/components/Discussion/Comments.stories.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { Pillar } from '@guardian/libs';
+import type { SignedInUser } from '../../types/discussion';
 import { Comments } from './Comments';
-import type { SignedInUser } from './discussionTypes';
 
 export default { component: Comments, title: 'Discussion/App' };
 

dotcom-rendering/src/discussion-rendering/Comments.test.tsx → dotcom-rendering/src/components/Discussion/Comments.test.tsx

@@ -5,7 +5,7 @@ import {
 	screen,
 	waitForElementToBeRemoved,
 } from '@testing-library/react';
-import { mockRESTCalls } from '../lib/mockRESTCalls';
+import { mockRESTCalls } from '../../lib/mockRESTCalls';
 import { Comments } from './Comments';
 
 mockRESTCalls();

dotcom-rendering/src/discussion-rendering/Comments.tsx → dotcom-rendering/src/components/Discussion/Comments.tsx

@@ -2,12 +2,11 @@ import { css } from '@emotion/react';
 import { type ArticleTheme, isString, storage } from '@guardian/libs';
 import { neutral, space, textSans } from '@guardian/source-foundations';
 import { useEffect, useState } from 'react';
-import { CommentContainer } from './components/CommentContainer/CommentContainer';
-import { CommentForm } from './components/CommentForm/CommentForm';
-import { Filters } from './components/Filters/Filters';
-import { LoadingComments } from './components/LoadingComments/LoadingComments';
-import { Pagination } from './components/Pagination/Pagination';
-import { TopPicks } from './components/TopPicks/TopPicks';
+import {
+	getDiscussion,
+	getPicks,
+	initialiseApi,
+} from '../../lib/discussionApi';
 import {
 	type AdditionalHeadersType,
 	type CommentResponse,
@@ -19,8 +18,13 @@ import {
 	type OrderByType,
 	type PageSizeType,
 	type SignedInUser,
-} from './discussionTypes';
-import { getDiscussion, getPicks, initialiseApi } from './lib/api';
+} from '../../types/discussion';
+import { CommentContainer } from './CommentContainer';
+import { CommentForm } from './CommentForm';
+import { Filters } from './Filters';
+import { LoadingComments } from './LoadingComments';
+import { Pagination } from './Pagination';
+import { TopPicks } from './TopPicks';
 
 type Props = {
 	shortUrl: string;
@@ -248,14 +252,8 @@ export const Comments = ({
 		void getDiscussion(shortUrl, { ...filters, page }).then((json) => {
 			setLoading(false);
 			if (json && json.status !== 'error') {
-				setComments(
-					// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- we'll come back and fix this by properly parsing the json
-					json?.discussion?.comments,
-				);
-				setCommentCount(
-					// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- we'll come back and fix this by properly parsing the json
-					json?.discussion?.topLevelCommentCount,
-				);
+				setComments(json.discussion.comments);
+				setCommentCount(json.discussion.topLevelCommentCount);
 			}
 			//todo: come back and parse this properly (apologies for the horribleness)
 			setTotalPages(json?.pages as number);

dotcom-rendering/src/discussion-rendering/components/Dropdown/Dropdown.stories.tsx → dotcom-rendering/src/components/Discussion/Dropdown.stories.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { Pillar } from '@guardian/libs';
 import { useState } from 'react';
-import type { DropdownOptionType } from '../../discussionTypes';
+import type { DropdownOptionType } from '../../types/discussion';
 import { Dropdown } from './Dropdown';
 
 const Container = ({ children }: { children: React.ReactNode }) => (

dotcom-rendering/src/discussion-rendering/components/Dropdown/Dropdown.test.tsx → dotcom-rendering/src/components/Discussion/Dropdown.test.tsx

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom/extend-expect';
 import { Pillar } from '@guardian/libs';
 import { fireEvent, render, screen } from '@testing-library/react';
-import type { DropdownOptionType } from '../../discussionTypes';
+import type { DropdownOptionType } from '../../types/discussion';
 import { Dropdown } from './Dropdown';
 
 const threadOptions: [

dotcom-rendering/src/discussion-rendering/components/Dropdown/Dropdown.tsx → dotcom-rendering/src/components/Discussion/Dropdown.tsx

@@ -10,9 +10,9 @@ import {
 	until,
 } from '@guardian/source-foundations';
 import { useEffect, useState } from 'react';
-import type { DropdownOptionType } from '../../discussionTypes';
-import { palette } from '../../lib/palette';
+import { palette } from '../../lib/discussionPalette';
 import { pillarToString } from '../../lib/pillarToString';
+import type { DropdownOptionType } from '../../types/discussion';
 
 type Props = {
 	id: string;

dotcom-rendering/src/discussion-rendering/components/Filters/Filters.stories.tsx → dotcom-rendering/src/components/Discussion/Filters.stories.tsx

@@ -1,6 +1,6 @@
 import { Pillar } from '@guardian/libs';
 import { useState } from 'react';
-import type { FilterOptions } from '../../discussionTypes';
+import type { FilterOptions } from '../../types/discussion';
 import { Filters } from './Filters';
 
 export default { title: 'Discussion/Filters' };

dotcom-rendering/src/discussion-rendering/components/Filters/Filters.tsx → dotcom-rendering/src/components/Discussion/Filters.tsx

@@ -1,13 +1,13 @@
 import { css } from '@emotion/react';
-import { ArticleTheme } from '@guardian/libs';
+import type { ArticleTheme } from '@guardian/libs';
 import { border, space } from '@guardian/source-foundations';
-import {
+import type {
 	FilterOptions,
 	OrderByType,
 	PageSizeType,
 	ThreadsType,
-} from '../../discussionTypes';
-import { Dropdown } from '../Dropdown/Dropdown';
+} from '../../types/discussion';
+import { Dropdown } from './Dropdown';
 
 type Props = {
 	filters: FilterOptions;

dotcom-rendering/src/discussion-rendering/components/FirstCommentWelcome/FirstCommentWelcome.tsx → dotcom-rendering/src/components/Discussion/FirstCommentWelcome.tsx

@@ -8,9 +8,9 @@ import {
 } from '@guardian/source-foundations';
 import { Link, TextInput } from '@guardian/source-react-components';
 import { useEffect, useState } from 'react';
-import { preview as defaultPreview } from '../../lib/api';
-import { PillarButton } from '../PillarButton/PillarButton';
-import { Row } from '../Row/Row';
+import { preview as defaultPreview } from '../../lib/discussionApi';
+import { PillarButton } from './PillarButton';
+import { Row } from './Row';
 
 type Props = {
 	body: string;

dotcom-rendering/src/discussion-rendering/components/LoadingComments/LoadingComments.tsx → dotcom-rendering/src/components/Discussion/LoadingComments.tsx

@@ -1,7 +1,7 @@
 import { css, keyframes } from '@emotion/react';
 import { neutral, space } from '@guardian/source-foundations';
-import { Column } from '../Column/Column';
-import { Row } from '../Row/Row';
+import { Column } from './Column';
+import { Row } from './Row';
 
 const BACKGROUND_COLOUR = neutral[93];