Refactor expansion

src/App.stories.tsx

@@ -42,9 +42,6 @@ export const LoggedOutHiddenPicks = () => (
 			expanded={false}
 			onPermalinkClick={() => {}}
 			apiKey=""
-			onExpanded={(expandedTime) => {
-				console.log(expandedTime);
-			}}
 		/>
 	</div>
 );

src/App.tsx

@@ -46,7 +46,6 @@ type Props = {
 		parentCommentId: number,
 	) => Promise<CommentResponse>;
 	onPreview?: (body: string) => Promise<string>;
-	onExpanded?: (expandedTime: number) => void;
 };
 
 const footerStyles = css`
@@ -210,7 +209,7 @@ const writeMutes = (mutes: string[]) => {
 		// capture these errors
 	}
 };
-let expandedStartTime: number;
+
 export const App = ({
 	baseUrl,
 	shortUrl,
@@ -229,7 +228,6 @@ export const App = ({
 	onComment,
 	onReply,
 	onPreview,
-	onExpanded,
 }: Props) => {
 	const [filters, setFilters] = useState<FilterOptions>(
 		initialiseFilters({
@@ -258,17 +256,6 @@ export const App = ({
 	const [commentCount, setCommentCount] = useState<number>(0);
 	const [mutes, setMutes] = useState<string[]>(readMutes());
 
-	useEffect(() => {
-		if (
-			isExpanded &&
-			onExpanded &&
-			window.performance &&
-			window.performance.now
-		) {
-			onExpanded(window.performance.now() - expandedStartTime);
-		}
-	}, [isExpanded, onExpanded]);
-
 	useEffect(() => {
 		if (isExpanded) {
 			// We want react to complete the current work and render, without trying to batch this update
@@ -284,6 +271,12 @@ export const App = ({
 		}
 	}, [isExpanded, comments.length]);
 
+	useEffect(() => {
+		// We need this use effect to capture any changes in the expanded prop. This is typicallly
+		// seen when clicking permalinks
+		setIsExpanded(expanded);
+	}, [expanded]);
+
 	useEffect(() => {
 		setLoading(true);
 		getDiscussion(shortUrl, { ...filters, page }).then((json) => {
@@ -367,14 +360,6 @@ export const App = ({
 		setPage(page);
 	};
 
-	const expandView = () => {
-		if (window.performance && window.performance.now) {
-			expandedStartTime = window.performance.now();
-		}
-
-		setIsExpanded(true);
-	};
-
 	const toggleMuteStatus = (userId: string) => {
 		let updatedMutes;
 		if (mutes.includes(userId)) {
@@ -397,7 +382,7 @@ export const App = ({
 
 		if (!isExpanded) {
 			// It's possible to post a comment without the view being expanded
-			expandView();
+			setIsExpanded(true);
 		}
 
 		const commentElement = document.getElementById(`comment-${comment.id}`);
@@ -490,7 +475,7 @@ export const App = ({
 					>
 						<PillarButton
 							pillar={pillar}
-							onClick={() => expandView()}
+							onClick={() => setIsExpanded(true)}
 							icon={<SvgPlus />}
 							iconSide="left"
 							linkName="more-comments"