diff --git a/webapp/src/components/cardBadges.tsx b/webapp/src/components/cardBadges.tsx index 69a97cd47..ef61f66a1 100644 --- a/webapp/src/components/cardBadges.tsx +++ b/webapp/src/components/cardBadges.tsx @@ -4,6 +4,7 @@ import React, {useMemo} from 'react' import {useIntl} from 'react-intl' import {Card} from '../blocks/card' +import {RootState} from '../store' import {useAppSelector} from '../store/hooks' import {getCardContents} from '../store/contents' import {getCardComments} from '../store/comments' @@ -76,8 +77,8 @@ const calculateBadges = (contents: ContentsType, comments: CommentBlock[]): Badg const CardBadges = (props: Props) => { const {card, className} = props - const contents = useAppSelector(getCardContents(card.id)) - const comments = useAppSelector(getCardComments(card.id)) + const contents = useAppSelector((state: RootState) => getCardContents(state, card.id)) + const comments = useAppSelector((state: RootState) => getCardComments(state, card.id)) const badges = useMemo(() => calculateBadges(contents, comments), [contents, comments]) if (!hasBadges(badges)) { return null diff --git a/webapp/src/components/cardDialog.tsx b/webapp/src/components/cardDialog.tsx index d999d59de..6cfd49b82 100644 --- a/webapp/src/components/cardDialog.tsx +++ b/webapp/src/components/cardDialog.tsx @@ -9,10 +9,10 @@ import {Card} from '../blocks/card' import octoClient from '../octoClient' import mutator from '../mutator' import {getCard} from '../store/cards' -import {getCardComments, getCardComments1} from '../store/comments' +import {getCardComments} from '../store/comments' import {getCardContents} from '../store/contents' import {useAppDispatch, useAppSelector} from '../store/hooks' -import {getCardAttachments, getCardAttachments1, updateAttachments, updateUploadPrecent} from '../store/attachments' +import {getCardAttachments, updateAttachments, updateUploadPrecent} from '../store/attachments' import TelemetryClient, {TelemetryActions, TelemetryCategory} from '../telemetry/telemetryClient' import {Utils} from '../utils' import CompassIcon from '../widgets/icons/compassIcon' @@ -27,6 +27,7 @@ import {getUserBlockSubscriptionList} from '../store/initialLoad' import {getClientConfig} from '../store/clientConfig' import {IUser} from '../user' +import {RootState} from '../store' import {getMe} from '../store/users' import {Permission} from '../constants' import {Block, createBlock} from '../blocks/block' @@ -39,7 +40,6 @@ import Dialog from './dialog' import './cardDialog.scss' import CardActionsMenu from './cardActionsMenu/cardActionsMenu' -import {RootState} from '../store' type Props = { board: Board @@ -54,10 +54,10 @@ type Props = { const CardDialog = (props: Props): JSX.Element => { const {board, activeView, cards, views} = props - const card = useAppSelector(getCard(props.cardId)) - const contents = useAppSelector(getCardContents(props.cardId)) - const comments = useAppSelector((state: RootState) => getCardComments1(state, props.cardId)) - const attachments = useAppSelector((state: RootState) => getCardAttachments1(state, props.cardId)) + const card = useAppSelector((state: RootState) => getCard(state, props.cardId)) + const contents = useAppSelector((state: RootState) => getCardContents(state, props.cardId)) + const comments = useAppSelector((state: RootState) => getCardComments(state, props.cardId)) + const attachments = useAppSelector((state: RootState) => getCardAttachments(state, props.cardId)) const clientConfig = useAppSelector(getClientConfig) const intl = useIntl() const dispatch = useAppDispatch() diff --git a/webapp/src/components/centerPanel.tsx b/webapp/src/components/centerPanel.tsx index 7fa700626..8433816e5 100644 --- a/webapp/src/components/centerPanel.tsx +++ b/webapp/src/components/centerPanel.tsx @@ -396,6 +396,14 @@ const CenterPanel = (props: Props) => { return {visible: vg, hidden: hg} }, [cards, activeView.fields.visibleOptionIds, activeView.fields.hiddenOptionIds, groupByProperty, boardUsers]) + const onDialogClose = useCallback(() => { + showCard(undefined) + }, []) + + const dialogShowCard = useCallback((cardId?: string | undefined) => { + showCard(cardId) + }, [showCard]) + return (
{ cards={cards} key={props.shownCardId} cardId={props.shownCardId} - onClose={() => showCard(undefined)} - showCard={(cardId) => showCard(cardId)} + onClose={onDialogClose} + showCard={dialogShowCard} readonly={props.readonly} /> } diff --git a/webapp/src/components/gallery/galleryCard.tsx b/webapp/src/components/gallery/galleryCard.tsx index 76e295f38..fd9466763 100644 --- a/webapp/src/components/gallery/galleryCard.tsx +++ b/webapp/src/components/gallery/galleryCard.tsx @@ -8,6 +8,7 @@ import {Card} from '../../blocks/card' import {ContentBlock} from '../../blocks/contentBlock' import {useSortable} from '../../hooks/sortable' import mutator from '../../mutator' +import {RootState} from '../../store' import {getCardContents} from '../../store/contents' import {useAppSelector} from '../../store/hooks' import TelemetryClient, {TelemetryActions, TelemetryCategory} from '../../telemetry/telemetryClient' @@ -40,7 +41,7 @@ const GalleryCard = (props: Props) => { const intl = useIntl() const {card, board} = props const [isDragging, isOver, cardRef] = useSortable('card', card, props.isManualSort && !props.readonly, props.onDrop) - const contents = useAppSelector(getCardContents(card.id)) + const contents = useAppSelector((state: RootState) => getCardContents(state, card.id)) const [showConfirmationDialogBox, setShowConfirmationDialogBox] = useState(false) const visiblePropertyTemplates = props.visiblePropertyTemplates || [] diff --git a/webapp/src/components/table/tableRows.tsx b/webapp/src/components/table/tableRows.tsx index ee97782e0..7bf44a78d 100644 --- a/webapp/src/components/table/tableRows.tsx +++ b/webapp/src/components/table/tableRows.tsx @@ -28,8 +28,6 @@ type Props = { const TableRows = (props: Props): JSX.Element => { const {board, cards, activeView} = props - console.log(cards); - const onClickRow = useCallback((e: React.MouseEvent, card: Card) => { props.onCardClicked(e, card) }, [props.onCardClicked]) @@ -41,7 +39,6 @@ const TableRows = (props: Props): JSX.Element => { const Item = ({index, style}: ListChildComponentProps) => { const card = cards[index] - console.log(card) if (isItemLoaded(index)) { return (
AttachmentBlock[] { - return (state: RootState): AttachmentBlock[] => { - return (state.attachments?.attachmentsByCard && state.attachments.attachmentsByCard[cardId]) || [] - } -} +export const getCardAttachments: (state: RootState, cardId: string) => AttachmentBlock[] = createSelector( + (state: RootState, cardId: string) => state.attachments.attachmentsByCard[cardId], + (attachments) => { + return attachments || [] + }, +) export function getUploadPercent(blockId: string): (state: RootState) => number { return (state: RootState): number => { return (state.attachments.attachments[blockId].uploadingPercent) } } - -export const getCardAttachments1: (state: RootState, cardId: string) => AttachmentBlock[] = createSelector( - (state: RootState, cardId: string) => state.attachments.attachmentsByCard[cardId], - (attachments) => { - return attachments || [] - }, -) diff --git a/webapp/src/store/cards.ts b/webapp/src/store/cards.ts index 5f30f6f60..3629d3967 100644 --- a/webapp/src/store/cards.ts +++ b/webapp/src/store/cards.ts @@ -162,11 +162,10 @@ export const getSortedTemplates = createSelector( }, ) -export function getCard(cardId: string): (state: RootState) => Card|undefined { - return (state: RootState): Card|undefined => { - return getCards(state)[cardId] || getTemplates(state)[cardId] - } -} +export const getCard: (state: RootState, cardId: string) => Card|undefined = createSelector( + (state: RootState, cardId: string) => getCards(state)[cardId] || getTemplates(state)[cardId], + (card) => card, +) export const getCurrentBoardCards = createSelector( (state: RootState) => state.boards.current, diff --git a/webapp/src/store/comments.ts b/webapp/src/store/comments.ts index 5b44bea5d..73c8a7d0f 100644 --- a/webapp/src/store/comments.ts +++ b/webapp/src/store/comments.ts @@ -80,13 +80,7 @@ const commentsSlice = createSlice({ export const {updateComments} = commentsSlice.actions export const {reducer} = commentsSlice -export function getCardComments(cardId: string): (state: RootState) => CommentBlock[] { - return (state: RootState): CommentBlock[] => { - return (state.comments?.commentsByCard && state.comments.commentsByCard[cardId]) || [] - } -} - -export const getCardComments1: (state: RootState, cardId: string) => CommentBlock[] = createSelector( +export const getCardComments: (state: RootState, cardId: string) => CommentBlock[] = createSelector( (state: RootState, cardId: string) => state.comments?.commentsByCard[cardId], (comments) => { console.log(comments) diff --git a/webapp/src/store/contents.ts b/webapp/src/store/contents.ts index dccd278ea..75ae51ed2 100644 --- a/webapp/src/store/contents.ts +++ b/webapp/src/store/contents.ts @@ -92,40 +92,40 @@ export const getContents = createSelector( (contents) => Object.values(contents), ) -export function getCardContents(cardId: string): (state: RootState) => Array { - return createSelector( - (state: RootState) => (state.contents?.contentsByCard && state.contents.contentsByCard[cardId]) || [], - (state: RootState) => getCards(state)[cardId]?.fields?.contentOrder || getTemplates(state)[cardId]?.fields?.contentOrder, - (contents, contentOrder): Array => { - const result: Array = [] - if (!contents) { - return [] - } - if (contentOrder) { - for (const contentId of contentOrder) { - if (typeof contentId === 'string') { - const content = contents.find((c) => c.id === contentId) - if (content) { - result.push(content) - } - } else if (typeof contentId === 'object' && contentId) { - const subResult: ContentBlock[] = [] - for (const subContentId of contentId) { - if (typeof subContentId === 'string') { - const subContent = contents.find((c) => c.id === subContentId) - if (subContent) { - subResult.push(subContent) - } +export const getCardContents: (state: RootState, cardId: string) => Array = createSelector( + (state: RootState, cardId: string) => (state.contents.contentsByCard[cardId]), + (state: RootState, cardId: string) => getCards(state)[cardId]?.fields?.contentOrder, + (state: RootState, cardId: string) => getTemplates(state)[cardId]?.fields?.contentOrder, + (contents, cardContentOrder, templateContentOrder): Array => { + const contentOrder = cardContentOrder || templateContentOrder + const result: Array = [] + if (!contents) { + return [] + } + if (contentOrder) { + for (const contentId of contentOrder) { + if (typeof contentId === 'string') { + const content = contents.find((c) => c.id === contentId) + if (content) { + result.push(content) + } + } else if (typeof contentId === 'object' && contentId) { + const subResult: ContentBlock[] = [] + for (const subContentId of contentId) { + if (typeof subContentId === 'string') { + const subContent = contents.find((c) => c.id === subContentId) + if (subContent) { + subResult.push(subContent) } } - result.push(subResult) } + result.push(subResult) } } - return result - }, - ) -} + } + return result + }, +) export function getLastCardContent(cardId: string): (state: RootState) => ContentBlock|undefined { return (state: RootState): ContentBlock|undefined => {