From d283fc460476a4e8662fc12a129cfa701a5f90ac Mon Sep 17 00:00:00 2001
From: Oliver Lloyd <email@oliverlloyd.com>
Date: Mon, 4 Jan 2021 14:37:20 +0000
Subject: [PATCH 1/2] Removed unused prop

---
 src/App.stories.tsx |  8 --------
 src/App.test.tsx    |  5 -----
 src/App.tsx         | 43 +++++++++++++++++++++----------------------
 3 files changed, 21 insertions(+), 35 deletions(-)

diff --git a/src/App.stories.tsx b/src/App.stories.tsx
index 21b63620..8d75e825 100644
--- a/src/App.stories.tsx
+++ b/src/App.stories.tsx
@@ -40,7 +40,6 @@ export const LoggedOutHiddenPicks = () => (
             expanded={false}
             onPermalinkClick={() => {}}
             apiKey=""
-            onHeightChange={() => {}}
         />
     </div>
 );
@@ -68,7 +67,6 @@ export const InitialPage = () => (
             expanded={true}
             onPermalinkClick={() => {}}
             apiKey=""
-            onHeightChange={() => {}}
         />
     </div>
 );
@@ -96,7 +94,6 @@ export const Overrides = () => (
             expanded={true}
             onPermalinkClick={() => {}}
             apiKey=""
-            onHeightChange={() => {}}
         />
     </div>
 );
@@ -122,7 +119,6 @@ export const LoggedInHiddenNoPicks = () => (
             expanded={false}
             onPermalinkClick={() => {}}
             apiKey=""
-            onHeightChange={() => {}}
         />
     </div>
 );
@@ -149,7 +145,6 @@ export const LoggedOutHiddenNoPicks = () => (
             expanded={false}
             onPermalinkClick={() => {}}
             apiKey=""
-            onHeightChange={() => {}}
         />
     </div>
 );
@@ -177,7 +172,6 @@ export const Closed = () => (
             expanded={true}
             onPermalinkClick={() => {}}
             apiKey=""
-            onHeightChange={() => {}}
         />
     </div>
 );
@@ -202,7 +196,6 @@ export const NoComments = () => (
             expanded={false}
             onPermalinkClick={() => {}}
             apiKey=""
-            onHeightChange={() => {}}
         />
     </div>
 );
@@ -229,7 +222,6 @@ export const LegacyDiscussion = () => (
             expanded={false}
             onPermalinkClick={() => {}}
             apiKey=""
-            onHeightChange={() => {}}
         />
     </div>
 );
diff --git a/src/App.test.tsx b/src/App.test.tsx
index 6b4e312f..432a143e 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -44,7 +44,6 @@ describe('App', () => {
                 }}
                 apiKey="discussion-rendering-test"
                 onPermalinkClick={() => {}}
-                onHeightChange={() => {}}
             />,
         );
 
@@ -74,7 +73,6 @@ describe('App', () => {
                 expanded={false}
                 onPermalinkClick={() => {}}
                 apiKey=""
-                onHeightChange={() => {}}
             />,
         );
 
@@ -102,7 +100,6 @@ describe('App', () => {
                 }}
                 apiKey="discussion-rendering-test"
                 onPermalinkClick={() => {}}
-                onHeightChange={() => {}}
             />,
         );
 
@@ -129,7 +126,6 @@ describe('App', () => {
                 }}
                 apiKey="discussion-rendering-test"
                 onPermalinkClick={() => {}}
-                onHeightChange={() => {}}
             />,
         );
 
@@ -157,7 +153,6 @@ describe('App', () => {
                 }}
                 apiKey="discussion-rendering-test"
                 onPermalinkClick={() => {}}
-                onHeightChange={() => {}}
             />,
         );
 
diff --git a/src/App.tsx b/src/App.tsx
index c89b469d..a3ab310d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -40,10 +40,13 @@ type Props = {
     expanded: boolean;
     onPermalinkClick: (commentId: number) => void;
     apiKey: string;
-    onHeightChange?: () => void;
     onRecommend?: (commentId: number) => Promise<Boolean>;
     onComment?: (shortUrl: string, body: string) => Promise<CommentResponse>;
-    onReply?: (shortUrl: string, body: string, parentCommentId: number) => Promise<CommentResponse>;
+    onReply?: (
+        shortUrl: string,
+        body: string,
+        parentCommentId: number,
+    ) => Promise<CommentResponse>;
     onPreview?: (body: string) => Promise<string>;
 };
 
@@ -75,13 +78,12 @@ const DEFAULT_FILTERS: FilterOptions = {
 const NoComments = () => (
     <div
         className={css`
-
-    color: ${neutral[46]};
-    ${textSans.small()}
-    padding-top: ${space[5]}px;
-    padding-left: ${space[1]}px;
-    padding-bottom: ${space[9]}px;
-  `}
+            color: ${neutral[46]};
+            ${textSans.small()}
+            padding-top: ${space[5]}px;
+            padding-left: ${space[1]}px;
+            padding-bottom: ${space[9]}px;
+        `}
     >
         No comments found
     </div>
@@ -218,11 +220,10 @@ export const App = ({
     expanded,
     onPermalinkClick,
     apiKey,
-    onHeightChange = () => {},
     onRecommend,
     onComment,
     onReply,
-    onPreview
+    onPreview,
 }: Props) => {
     const [filters, setFilters] = useState<FilterOptions>(
         initialiseFilters({
@@ -237,16 +238,17 @@ export const App = ({
     const [totalPages, setTotalPages] = useState<number>(0);
     const [page, setPage] = useState<number>(initialPage || 1);
     const [picks, setPicks] = useState<CommentType[]>([]);
-    const [commentBeingRepliedTo, setCommentBeingRepliedTo] = useState<
-        CommentType
-    >();
+    const [
+        commentBeingRepliedTo,
+        setCommentBeingRepliedTo,
+    ] = useState<CommentType>();
     const [comments, setComments] = useState<CommentType[]>([]);
     const [commentCount, setCommentCount] = useState<number>(0);
     const [mutes, setMutes] = useState<string[]>(readMutes());
 
     useEffect(() => {
         setLoading(true);
-        getDiscussion(shortUrl, { ...filters, page }).then(json => {
+        getDiscussion(shortUrl, { ...filters, page }).then((json) => {
             setLoading(false);
             if (json?.status !== 'error') {
                 setComments(json?.discussion?.comments);
@@ -266,7 +268,7 @@ export const App = ({
 
     // If these override props are updated we want to respect them
     useEffect(() => {
-        setFilters(oldFilters => {
+        setFilters((oldFilters) => {
             return {
                 ...oldFilters,
                 orderBy: orderByOverride ? orderByOverride : oldFilters.orderBy,
@@ -319,26 +321,23 @@ export const App = ({
         rememberFilters(newFilterObject);
         // Filters also show when the view is not expanded but we want to expand when they're changed
         setIsExpanded(true);
-        onHeightChange();
         setFilters(newFilterObject);
     };
 
     const onPageChange = (page: number) => {
         document.getElementById('comment-filters')?.scrollIntoView();
         setPage(page);
-        onHeightChange();
     };
 
     const expandView = () => {
         setIsExpanded(true);
-        onHeightChange();
     };
 
     const toggleMuteStatus = (userId: string) => {
         let updatedMutes;
         if (mutes.includes(userId)) {
             // Already muted, unmute them
-            updatedMutes = mutes.filter(id => id !== userId);
+            updatedMutes = mutes.filter((id) => id !== userId);
         } else {
             // Add this user to our list of mutes
             updatedMutes = [...mutes, userId];
@@ -419,7 +418,7 @@ export const App = ({
                             <NoComments />
                         ) : (
                             <ul className={commentContainerStyles}>
-                                {comments.slice(0, 2).map(comment => (
+                                {comments.slice(0, 2).map((comment) => (
                                     <li key={comment.id}>
                                         <CommentContainer
                                             comment={comment}
@@ -515,7 +514,7 @@ export const App = ({
                     <NoComments />
                 ) : (
                     <ul className={commentContainerStyles}>
-                        {comments.map(comment => (
+                        {comments.map((comment) => (
                             <li key={comment.id}>
                                 <CommentContainer
                                     comment={comment}

From 8b2ea3a150ba17b37de3a199882d4e16e2fba748 Mon Sep 17 00:00:00 2001
From: Oliver Lloyd <email@oliverlloyd.com>
Date: Mon, 4 Jan 2021 15:37:59 +0000
Subject: [PATCH 2/2] Set size for View more comments

---
 src/App.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.tsx b/src/App.tsx
index c366b795..0c3616a7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -448,6 +448,7 @@ export const App = ({
 							icon={<SvgPlus />}
 							iconSide="left"
 							linkName="more-comments"
+							size="small"
 						>
 							View more comments
 						</PillarButton>