diff --git a/applications/client/src/store/campaign/campaign.ts b/applications/client/src/store/campaign/campaign.ts index 130ad254..45cd2ea8 100644 --- a/applications/client/src/store/campaign/campaign.ts +++ b/applications/client/src/store/campaign/campaign.ts @@ -62,7 +62,6 @@ export class CampaignStore extends ExtendedModel(() => ({ hiddenCount: number; }>(() => ({ groupSelect: false, selectedBeacons: [], hiddenCount: 0 })).withSetter(), bulkSelectCantHideEntityIds: prop(() => []).withSetter(), - commentsList: prop<{ commandGroupIds: string[] }>(() => ({ commandGroupIds: [] })).withSetter(), }, })) { @observable sortMemory: { diff --git a/applications/client/src/views/Campaign/Explore/Panels/Comment/CommentGroup.tsx b/applications/client/src/views/Campaign/Explore/Panels/Comment/CommentGroup.tsx index 37fe1326..569351d5 100644 --- a/applications/client/src/views/Campaign/Explore/Panels/Comment/CommentGroup.tsx +++ b/applications/client/src/views/Campaign/Explore/Panels/Comment/CommentGroup.tsx @@ -1,17 +1,14 @@ import { css } from '@emotion/react'; -import type { AnnotationModel, CommandGroupModel } from '@redeye/client/store'; +import type { AnnotationModel } from '@redeye/client/store'; import { useStore } from '@redeye/client/store'; -import type { UUID } from '@redeye/client/types/uuid'; import { CommandContainer, CommentBox, NavBreadcrumbs } from '@redeye/client/views'; import { CoreTokens, ThemeClasses, Flex } from '@redeye/ui-styles'; import type { Ref } from 'mobx-keystone'; import { observer } from 'mobx-react-lite'; import type { ComponentProps } from 'react'; -import { useEffect, useState } from 'react'; export type CommentGroupProps = ComponentProps<'div'> & { - commandGroup?: CommandGroupModel; - commandGroupId?: string | null; + commandGroupId: string; toggleNewComment: (id?: string) => void; newComment: string | undefined; measure?: any; @@ -22,7 +19,6 @@ export type CommentGroupProps = ComponentProps<'div'> & { }; export const CommentGroup = observer( ({ - commandGroup, commandGroupId, toggleNewComment, newComment, @@ -33,50 +29,40 @@ export const CommentGroup = observer( ...props }) => { const store = useStore(); - const [commandGroupId1, setCommandGroupId1] = useState(commandGroupId); - const [commandGroup1, setCommandGroup1] = useState(commandGroup); - const firstCommandId = commandGroup1?.commandIds?.[0]; + const commandGroup = store.graphqlStore.commandGroups.get(commandGroupId); + const firstCommandId = commandGroup?.commandIds?.[0]; const firstCommand = firstCommandId && store.graphqlStore.commands.get(firstCommandId); - useEffect(() => { - if (commandGroupId) { - // For Comments Tab - setCommandGroupId1(commandGroupId as UUID); - setCommandGroup1(store.graphqlStore.commandGroups.get(commandGroupId)); - } - if (commandGroup) { - // For Presentation Tab - setCommandGroupId1(commandGroup?.id as UUID); - setCommandGroup1(commandGroup); - } - }, [commandGroupId, commandGroup]); return (
- - {commandGroup1?.annotations?.map((annotation: Ref) => ( + + {!commandGroup &&
} + {commandGroup?.annotations?.map((annotation: Ref) => ( toggleNewComment(commandGroup1?.id)} + reply={() => toggleNewComment(commandGroup?.id)} annotation={annotation?.maybeCurrent} - commandGroup={commandGroup1} + commandGroup={commandGroup} isFullList /> ))} - {newComment === commandGroup1?.id && ( - + {newComment === commandGroup?.id && ( + )} @@ -92,14 +78,14 @@ export const CommentGroup = observer( /> )} {!hideCommands && - commandGroup1?.commandIds?.map((commandId) => ( + commandGroup?.commandIds?.map((commandId) => ( (({ sort }) => { }, visibleRange: { startIndex: 0, - endIndex: 0, + endIndex: pageSize, }, expandedCommandIDs: store.router.params.activeItemId ? observable.array([store.router.params.activeItemId]) @@ -47,7 +48,8 @@ export const Comments = observer(({ sort }) => { this.expandedCommandIDs.remove(commandId); }, }); - const { data } = useQuery( + + const { data: commandGroupIdData } = useQuery( [ 'commandGroups', store.campaign?.id, @@ -59,102 +61,59 @@ export const Comments = observer(({ sort }) => { store.router.params.currentItem, store.router.params.currentItemId, ], - async () => - await store.graphqlStore.queryCommandGroupIds({ - campaignId: store.campaign?.id!, - beaconId: store.campaign?.interactionState.selectedBeacon?.id as string, - hostId: store.campaign?.interactionState.selectedHost?.id as string, - operatorId: store.campaign?.interactionState.selectedOperator?.id!, - commandType: store.campaign?.interactionState.selectedCommandType?.id!, - hidden: store.settings.showHidden, - sort: { - ...sort, - // @ts-ignore - sortBy: sort.sortBy === 'minTime' ? SortOptionComments.time : sort.sortBy, - }, - }) - ); - - const { isLoading } = useQuery( - [ - 'commandGroupsById', - 'commandGroups', - store.campaign.id, - data?.commandGroupIds, - Math.trunc(state.visibleRange.endIndex / pageSize), - store.router.params.currentItem, - store.router.params.currentItemId, - ], async () => { - if (data?.commandGroupIds?.length) { - const index = Math.trunc(state.visibleRange.endIndex / pageSize); - const start = index * pageSize; - const ids = data.commandGroupIds.slice(start, start + pageSize); - // query commands as temp solution - const commandGroupsQuery = await store.graphqlStore.queryCommandGroups( + if (store.router.params.currentItem === 'comments_list' && store.router.params.currentItemId) { + // Fetch presentationItemsData again when refreshing browser @comments_list-[currentItemId] and changing sort + const presentationItemsData = await store.graphqlStore.queryPresentationItems( { - campaignId: store.campaign?.id!, - commandGroupIds: ids, + campaignId: store.campaign.id!, hidden: store.settings.showHidden, + forOverviewComments: true, + commentsTabSort: sort as SortTypeCommentsTab, }, - commandGroupCommentsQuery // command cache issue? + presentationItemModelPrimitives.commandGroups(presentationCommandGroupModelPrimitives).toString(), + undefined, + true ); - - // query commands as temp solution - const commandIds = commandGroupsQuery?.commandGroups.flatMap((cg) => cg.commandIds).filter(isDefined); - return store.graphqlStore.queryCommands( - { - campaignId: store.campaign?.id!, - commandIds, - hidden: store.settings.showHidden, - }, - commandQuery + const currentPresentationItem = presentationItemsData?.presentationItems.find( + (item) => item.id === store.router.params.currentItemId ); - // query commands as temp solution + return { commandGroupIds: Array.from(currentPresentationItem?.commandGroupIds || []) } as CommandGroupIdData; + } else { + return (await store.graphqlStore.queryCommandGroupIds({ + campaignId: store.campaign?.id!, + beaconId: store.campaign?.interactionState.selectedBeacon?.id as string, + hostId: store.campaign?.interactionState.selectedHost?.id as string, + operatorId: store.campaign?.interactionState.selectedOperator?.id!, + commandType: store.campaign?.interactionState.selectedCommandType?.id!, + hidden: store.settings.showHidden, + sort: { + ...sort, + sortBy: sort.sortBy === 'minTime' ? SortOptionComments.time : (sort.sortBy as SortOptionComments), + }, + })) as CommandGroupIdData; } - }, - { - enabled: !!data?.commandGroupIds?.length, } ); - // Fetch presentationData again when refreshing browser @comments_list-[currentItemId] and changing sort - const { data: commentsData } = useQuery( - [ - 'overview-comments-items', - store.campaign.id, - store.campaign.sortMemory.comments_list, - store.campaign.sortMemory.comments, - ], - async () => - await store.graphqlStore.queryPresentationItems( - { - campaignId: store.campaign.id!, - hidden: store.settings.showHidden, - forOverviewComments: true, - commentsTabSort: sort as SortTypeCommentsTab, - }, - presentationItemModelPrimitives.commandGroups(presentationCommandGroupModelPrimitives).toString(), - undefined, - true - ) - ); - - const { isLoading: isCommentsDataLoading } = useQuery( + // const { isLoading: isLoadingMoreComments } = useQuery( + useQuery( [ 'commandGroupsById', 'commandGroups', store.campaign.id, - store.campaign.commentsList.commandGroupIds, + commandGroupIdData?.commandGroupIds, Math.trunc(state.visibleRange.endIndex / pageSize), store.router.params.currentItem, store.router.params.currentItemId, ], async () => { - if (store.campaign.commentsList.commandGroupIds.length) { + if (commandGroupIdData?.commandGroupIds?.length) { const index = Math.trunc(state.visibleRange.endIndex / pageSize); const start = index * pageSize; - const ids = store.campaign.commentsList.commandGroupIds.slice(start, start + pageSize); + const end = start + pageSize; + const ids = commandGroupIdData.commandGroupIds.slice(start, end); + // query commands as temp solution const commandGroupsQuery = await store.graphqlStore.queryCommandGroups( { @@ -179,27 +138,16 @@ export const Comments = observer(({ sort }) => { } }, { - enabled: !!store.campaign.commentsList.commandGroupIds.length, + enabled: !!commandGroupIdData?.commandGroupIds?.length, } ); useEffect(() => { - if (store.router.params.currentItem === 'comments_list' && store.router.params.currentItemId) { - const filteredData = commentsData?.presentationItems.find( - (item) => item.id === store.router.params.currentItemId - ); - store.campaign?.setCommentsList({ - commandGroupIds: Array.from(filteredData?.commandGroupIds || []), - }); - } - }, [store.campaign.commentsList.commandGroupIds, store.router.params.currentItem, store.router.params.currentItemId]); - - useEffect(() => { - if (store.campaign?.commentStore.scrollToComment) { + if (store.campaign?.commentStore.scrollToComment && commandGroupIdData) { state.update( 'scrollToIndex', - Object.values(store.graphqlStore.commandGroups?.items).findIndex( - (commandGroup) => commandGroup.id === store.campaign?.commentStore.scrollToComment + Object.values(commandGroupIdData?.commandGroupIds).findIndex( + (commandGroupId) => commandGroupId === store.campaign?.commentStore.scrollToComment ) ); if (state.scrollToIndex !== -1) { @@ -216,7 +164,7 @@ export const Comments = observer(({ sort }) => { }, 250); } } - }, [data, commentsData]); + }, [commandGroupIdData]); return ( (({ sort }) => { listRef={listRef} cy-test="comments-view" > - {store.router.params.currentItem === 'comments_list' ? ( - store.campaign.commentsList.commandGroupIds.length === 0 ? ( - No comments - ) : isCommentsDataLoading ? ( - - ) : ( - store.campaign.commentsList.commandGroupIds.map((commandGroupId) => ( - - )) - ) - ) : data?.commandGroupIds.length === 0 ? ( - No comments - ) : isLoading ? ( + {!commandGroupIdData?.commandGroupIds ? ( + ) : commandGroupIdData?.commandGroupIds?.length === 0 ? ( + No comments ) : ( - data?.commandGroupIds.map((commandGroupId) => ( + commandGroupIdData?.commandGroupIds?.map((commandGroupId) => ( (({ sort }) => { ); }); + +type CommandGroupIdData = { commandGroupIds: UUID[] }; diff --git a/applications/client/src/views/Campaign/Explore/Panels/Comment/CommentsList.tsx b/applications/client/src/views/Campaign/Explore/Panels/Comment/CommentsList.tsx index 98d04918..471db4be 100644 --- a/applications/client/src/views/Campaign/Explore/Panels/Comment/CommentsList.tsx +++ b/applications/client/src/views/Campaign/Explore/Panels/Comment/CommentsList.tsx @@ -48,9 +48,6 @@ export const CommentsList = observer(({ sort }) => { // For presentationItem.id by User or Tag, make sure use a prefix in case it's same to other general types. const handleClickType = useCallback((presentationItem) => { - store.campaign?.setCommentsList({ - commandGroupIds: Array.from(presentationItem.commandGroupIds), - }); store.router.updateRoute({ path: routes[CampaignViews.EXPLORE], params: { @@ -95,8 +92,18 @@ export const CommentsList = observer(({ sort }) => { {rowTitle(presentationItem)} - - + + ))} diff --git a/applications/client/src/views/Campaign/Presentation/PresentationItem.tsx b/applications/client/src/views/Campaign/Presentation/PresentationItem.tsx index 3e37e317..bb876fcc 100644 --- a/applications/client/src/views/Campaign/Presentation/PresentationItem.tsx +++ b/applications/client/src/views/Campaign/Presentation/PresentationItem.tsx @@ -63,7 +63,7 @@ export const PresentationItem = observer(({ commandGroupI { // Log new number of comments via Comments tab - should be 1 more cy.clickExplorerMode(); cy.clickCommentsTab(); - cy.viewAllComments(); - cy.get('@commentsTabCount').should('have.length', 6); + cy.get('[cy-test=comment-count]') + .eq(0) + .invoke('text') + .then((updatedCommentCount) => { + expect(+updatedCommentCount).to.eq(6); + }); cy.returnToCampaignCard(); cy.searchForCampaign(camp); diff --git a/applications/server/schema.graphql b/applications/server/schema.graphql index 8cc32859..acb12cc6 100644 --- a/applications/server/schema.graphql +++ b/applications/server/schema.graphql @@ -476,7 +476,7 @@ type Query { logsByBeaconId(beaconId: String!, campaignId: String!): [LogEntry!]! """""" - nonHidableEntities(beaconIds: [String!]! = [], campaignId: String!, hostIds: [String!]! = []): NonHidableEntities! + nonHidableEntities(beaconIds: [String!] = [], campaignId: String!, hostIds: [String!] = []): NonHidableEntities! """Get all the operators for a project""" operators(campaignId: String!, hidden: Boolean = false): [Operator]