creating selectors

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 contents = useAppSelector((state: RootState) => getCardContents(state, card.id))
-    const comments = useAppSelector(getCardComments(card.id))
+    const comments = useAppSelector((state: RootState) => getCardComments(state, card.id))
     const badges = useMemo(() => calculateBadges(contents, comments), [contents, comments])
     if (!hasBadges(badges)) {
         return null

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 card = useAppSelector((state: RootState) => getCard(state, props.cardId))
-    const contents = useAppSelector(getCardContents(props.cardId))
+    const contents = useAppSelector((state: RootState) => getCardContents(state, props.cardId))
-    const comments = useAppSelector((state: RootState) => getCardComments1(state, props.cardId))
+    const comments = useAppSelector((state: RootState) => getCardComments(state, props.cardId))
-    const attachments = useAppSelector((state: RootState) => getCardAttachments1(state, props.cardId))
+    const attachments = useAppSelector((state: RootState) => getCardAttachments(state, props.cardId))
     const clientConfig = useAppSelector(getClientConfig)
     const intl = useIntl()
     const dispatch = useAppDispatch()

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 (
         <div
             className='BoardComponent'
@@ -410,8 +418,8 @@ const CenterPanel = (props: Props) => {
                         cards={cards}
                         key={props.shownCardId}
                         cardId={props.shownCardId}
-                        onClose={() => showCard(undefined)}
+                        onClose={onDialogClose}
-                        showCard={(cardId) => showCard(cardId)}
+                        showCard={dialogShowCard}
                         readonly={props.readonly}
                     />
                 </RootPortal>}

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<boolean>(false)
 
     const visiblePropertyTemplates = props.visiblePropertyTemplates || []

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<HTMLDivElement>, 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 (
                 <div

webapp/src/store/attachments.ts

@@ -79,21 +79,15 @@ const attachmentSlice = createSlice({
 export const {updateAttachments, updateUploadPrecent} = attachmentSlice.actions
 export const {reducer} = attachmentSlice
 
-export function getCardAttachments(cardId: string): (state: RootState) => AttachmentBlock[] {
+export const getCardAttachments: (state: RootState, cardId: string) => AttachmentBlock[] = createSelector(
-    return (state: RootState): AttachmentBlock[] => {
+    (state: RootState, cardId: string) => state.attachments.attachmentsByCard[cardId],
-        return (state.attachments?.attachmentsByCard && 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 || []
-    },
-)

webapp/src/store/cards.ts

@@ -162,11 +162,10 @@ export const getSortedTemplates = createSelector(
     },
 )
 
-export function getCard(cardId: string): (state: RootState) => Card|undefined {
+export const getCard: (state: RootState, cardId: string) => Card|undefined = createSelector(
-    return (state: RootState): Card|undefined => {
+    (state: RootState, cardId: string) => getCards(state)[cardId] || getTemplates(state)[cardId],
-        return getCards(state)[cardId] || getTemplates(state)[cardId]
+    (card) => card,
-    }
+)
-}
 
 export const getCurrentBoardCards = createSelector(
     (state: RootState) => state.boards.current,

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[] {
+export const getCardComments: (state: RootState, cardId: string) => CommentBlock[] = createSelector(
-    return (state: RootState): CommentBlock[] => {
-        return (state.comments?.commentsByCard && state.comments.commentsByCard[cardId]) || []
-    }
-}
-
-export const getCardComments1: (state: RootState, cardId: string) => CommentBlock[] = createSelector(
     (state: RootState, cardId: string) => state.comments?.commentsByCard[cardId],
     (comments) => {
         console.log(comments)

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<ContentBlock|ContentBlock[]> {
+export const getCardContents: (state: RootState, cardId: string) => Array<ContentBlock|ContentBlock[]> = createSelector(
-    return createSelector(
+    (state: RootState, cardId: string) => (state.contents.contentsByCard[cardId]),
-        (state: RootState) => (state.contents?.contentsByCard && state.contents.contentsByCard[cardId]) || [],
+    (state: RootState, cardId: string) => getCards(state)[cardId]?.fields?.contentOrder,
-        (state: RootState) => getCards(state)[cardId]?.fields?.contentOrder || getTemplates(state)[cardId]?.fields?.contentOrder,
+    (state: RootState, cardId: string) => getTemplates(state)[cardId]?.fields?.contentOrder,
-        (contents, contentOrder): Array<ContentBlock|ContentBlock[]> => {
+    (contents, cardContentOrder, templateContentOrder): Array<ContentBlock|ContentBlock[]> => {
-            const result: Array<ContentBlock|ContentBlock[]> = []
+        const contentOrder = cardContentOrder || templateContentOrder
-            if (!contents) {
+        const result: Array<ContentBlock|ContentBlock[]> = []
-                return []
+        if (!contents) {
-            }
+            return []
-            if (contentOrder) {
+        }
-                for (const contentId of contentOrder) {
+        if (contentOrder) {
-                    if (typeof contentId === 'string') {
+            for (const contentId of contentOrder) {
-                        const content = contents.find((c) => c.id === contentId)
+                if (typeof contentId === 'string') {
-                        if (content) {
+                    const content = contents.find((c) => c.id === contentId)
-                            result.push(content)
+                    if (content) {
-                        }
+                        result.push(content)
-                    } else if (typeof contentId === 'object' && contentId) {
+                    }
-                        const subResult: ContentBlock[] = []
+                } else if (typeof contentId === 'object' && contentId) {
-                        for (const subContentId of contentId) {
+                    const subResult: ContentBlock[] = []
-                            if (typeof subContentId === 'string') {
+                    for (const subContentId of contentId) {
-                                const subContent = contents.find((c) => c.id === subContentId)
+                        if (typeof subContentId === 'string') {
-                                if (subContent) {
+                            const subContent = contents.find((c) => c.id === subContentId)
-                                    subResult.push(subContent)
+                            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 => {