Merge pull request #1603 from SeedCompany/comments/tweaks

Comments Tweaks

src/api/schema/typePolicies/lists/page-limit-pagination.ts

@@ -226,7 +226,7 @@ const reverse = <T>(list: readonly T[]): readonly T[] => list.slice().reverse();
 // left out of the key specifier
 const objectToKeyArgs = (obj: Record<string, any>): KeyArgs => {
   const keys = objectToKeyArgsRecurse(cleanEmptyObjects(obj));
-  return keys.length > 1 ? keys : false;
+  return keys.length > 0 ? keys : false;
 };
 const objectToKeyArgsRecurse = (obj: Record<string, any>): KeySpecifier =>
   Object.entries(obj).reduce(

src/components/Changeset/ChangesetBanner.tsx

@@ -15,7 +15,7 @@ const useStyles = makeStyles()(({ spacing, breakpoints }) => ({
 }));
 
 interface Props {
-  changesetId: string | null;
+  changesetId: string | undefined;
   onEdit?: () => void;
   onClose?: () => void;
 }

src/components/Changeset/useChangesetAwareIdFromUrl.ts

@@ -9,10 +9,10 @@ export const useChangesetAwareIdFromUrl = (paramName: string) => {
   const navigate = useNavigate();
   let { [paramName]: objAndChangesetId = '' } = useParams();
   // eslint-disable-next-line prefer-const -- false positive
-  let [id = '', changesetId = null] = objAndChangesetId.split('~');
+  let [id = '', changesetId] = objAndChangesetId.split('~');
   if (!useBetaFeatures().has('projectChangeRequests')) {
     objAndChangesetId = id;
-    changesetId = null;
+    changesetId = undefined;
   }
   return {
     mergedId: objAndChangesetId,

src/components/Comments/CommentsContext.tsx

@@ -19,8 +19,6 @@ const initialCommentsBarContext = {
   toggleCommentsBar: noop as (state?: boolean) => void,
   isCommentsBarOpen: false,
   expandedThreads: {} as unknown as ExpandedThreads,
-  resourceCommentsTotal: 0,
-  setResourceCommentsTotal: noop,
   resourceId: undefined as string | undefined,
   setResourceId: noop as (resourceId: string | undefined) => void,
 };
@@ -33,8 +31,6 @@ export const CommentsProvider = ({ children }: ChildrenProp) => {
 
   const [resourceId, setResourceId] = useState<string | undefined>(undefined);
 
-  const [resourceCommentsTotal, setResourceCommentsTotal] = useState(0);
-
   const [currentExpandedThreads, setExpandedThreads] = useSet<string>();
   const expandedThreads = useMemo(
     (): ExpandedThreads => ({
@@ -60,16 +56,13 @@ export const CommentsProvider = ({ children }: ChildrenProp) => {
       toggleCommentsBar,
       isCommentsBarOpen,
       expandedThreads,
-      resourceCommentsTotal,
-      setResourceCommentsTotal,
       resourceId,
       setResourceId,
     }),
     [
       toggleCommentsBar,
       isCommentsBarOpen,
       expandedThreads,
-      resourceCommentsTotal,
       resourceId,
       setResourceId,
     ]

src/components/Comments/CommentsThreadList.graphql

@@ -1,9 +1,12 @@
 query CommentThreadsList($resourceId: ID!, $input: CommentThreadListInput) {
-  commentThreads(resource: $resourceId, input: $input) {
-    canCreate
-    items {
-      ...commentThread
+  commentable(resource: $resourceId) {
+    id
+    commentThreads(input: $input) {
+      canCreate
+      items {
+        ...commentThread
+      }
+      ...Pagination
     }
-    ...Pagination
   }
 }

src/components/Comments/CommentsThreadList.tsx

@@ -5,7 +5,6 @@ import {
   Stack,
   Typography,
 } from '@mui/material';
-import { useEffect } from 'react';
 import { isNetworkRequestInFlight } from '../../api';
 import { renderError } from '../Error/error-handling';
 import { useListQuery } from '../List';
@@ -20,27 +19,17 @@ interface CommentThreadListProps {
 }
 
 export const CommentsThreadList = ({ resourceId }: CommentThreadListProps) => {
-  const { setResourceCommentsTotal } = useCommentsContext();
+  const { isCommentsBarOpen } = useCommentsContext();
 
   const list = useListQuery(CommentThreadsListDocument, {
-    listAt: (data) => data.commentThreads,
+    listAt: (data) => data.commentable.commentThreads,
     variables: {
       resourceId,
-      input: {
-        order: 'ASC',
-      },
     },
+    skip: !isCommentsBarOpen,
   });
   const { data, error, loadMore, networkStatus } = list;
 
-  useEffect(() => {
-    const totalComments = (data?.items ?? [])
-      .flatMap((thread) => thread.comments.total)
-      .reduce((prev, total) => prev + total, 0);
-
-    setResourceCommentsTotal(totalComments);
-  }, [data, setResourceCommentsTotal]);
-
   if (error) {
     const renderedError = renderError(error, {
       Unauthorized: (ex) => ex.message,

src/components/Comments/ThreadCount.graphql

@@ -0,0 +1,8 @@
+query ThreadCount($id: ID!) {
+  commentable(resource: $id) {
+    id
+    commentThreads {
+      total
+    }
+  }
+}

src/components/Comments/ToggleCommentButton.tsx

@@ -1,24 +1,36 @@
+import { useQuery } from '@apollo/client';
 import { Comment } from '@mui/icons-material';
-import { Badge } from '@mui/material';
+import { Badge, Tooltip } from '@mui/material';
 import { Except } from 'type-fest';
 import { Feature } from '../Feature';
 import { IconButton, IconButtonProps } from '../IconButton';
 import { useCommentsContext } from './CommentsContext';
+import { ThreadCountDocument } from './ThreadCount.graphql';
 
 export type ToggleCommentsButtonProps = Except<IconButtonProps, 'children'>;
 
 export const ToggleCommentsButton = ({
   ...rest
 }: ToggleCommentsButtonProps) => {
-  const { toggleCommentsBar, resourceCommentsTotal } = useCommentsContext();
+  const { resourceId, isCommentsBarOpen, toggleCommentsBar } =
+    useCommentsContext();
+
+  const { data } = useQuery(ThreadCountDocument, {
+    variables: { id: resourceId! },
+    skip: !resourceId,
+    fetchPolicy: isCommentsBarOpen ? 'cache-only' : 'cache-first',
+  });
+  const total = data?.commentable.commentThreads.total ?? 0;
 
   return (
     <Feature flag="comments" match={true}>
-      <IconButton onClick={() => toggleCommentsBar()} {...rest}>
-        <Badge badgeContent={resourceCommentsTotal} color="error">
-          <Comment />
-        </Badge>
-      </IconButton>
+      <Tooltip title={`${isCommentsBarOpen ? 'Hide' : 'Show'} Comments`}>
+        <IconButton onClick={() => toggleCommentsBar()} {...rest}>
+          <Badge badgeContent={total} color="primary">
+            <Comment />
+          </Badge>
+        </IconButton>
+      </Tooltip>
     </Feature>
   );
 };