self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-01-08 15:06:08 +02:00
Code Issues Releases Activity

creating selectors

Browse Source
This commit is contained in:
Benjamin Cooke 2023-03-07 16:49:00 -05:00
parent 1f6a500b21
commit 31b7734f85
9 changed files with 62 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
webapp/src/components/cardBadges.tsx
View File

@ -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

14
webapp/src/components/cardDialog.tsx
View File

@ -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()

12
webapp/src/components/centerPanel.tsx
View File

@ -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)}
showCard={(cardId) => showCard(cardId)}
onClose={onDialogClose}
showCard={dialogShowCard}
readonly={props.readonly}
/>
</RootPortal>}

3
webapp/src/components/gallery/galleryCard.tsx
View File

@ -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 || []

3
webapp/src/components/table/tableRows.tsx
View File

@ -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

18
webapp/src/store/attachments.ts
View File

@ -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[] {
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 || []
},
)

9
webapp/src/store/cards.ts
View File

@ -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,

8
webapp/src/store/comments.ts
View File

@ -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)

58
webapp/src/store/contents.ts
View File

@ -92,40 +92,40 @@ export const getContents = createSelector(
(contents) => Object.values(contents),
)
export function getCardContents(cardId: string): (state: RootState) => Array<ContentBlock|ContentBlock[]> {
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<ContentBlock|ContentBlock[]> => {
const result: Array<ContentBlock|ContentBlock[]> = []
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<ContentBlock|ContentBlock[]> = 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<ContentBlock|ContentBlock[]> => {
const contentOrder = cardContentOrder || templateContentOrder
const result: Array<ContentBlock|ContentBlock[]> = []
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 => {