Spaces:
Sleeping
Sleeping
File size: 4,688 Bytes
13555f3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {ReactNode, useRef, createRef, useState, useEffect, MutableRefObject} from 'react'
import './boardSwitcherDialog.scss'
import {useIntl} from 'react-intl'
import {generatePath, useHistory, useRouteMatch} from 'react-router-dom'
import octoClient from '../../octoClient'
import SearchDialog from '../searchDialog/searchDialog'
import Globe from '../../widgets/icons/globe'
import LockOutline from '../../widgets/icons/lockOutline'
import {useAppSelector} from '../../store/hooks'
import {getAllTeams, getCurrentTeam, Team} from '../../store/teams'
import {getMe} from '../../store/users'
import {Utils} from '../../utils'
import {BoardTypeOpen, BoardTypePrivate} from '../../blocks/board'
import {Constants} from '../../constants'
type Props = {
onClose: () => void
}
const BoardSwitcherDialog = (props: Props): JSX.Element => {
const [selected, setSelected] = useState<number>(-1)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const [refs, setRefs] = useState<MutableRefObject<any>>(useRef([]))
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const [IDs, setIDs] = useState<any>({})
const intl = useIntl()
const team = useAppSelector(getCurrentTeam)
const me = useAppSelector(getMe)
const title = intl.formatMessage({id: 'FindBoardsDialog.Title', defaultMessage: 'Find Boards'})
const subTitle = intl.formatMessage(
{
id: 'FindBoardsDialog.SubTitle',
defaultMessage: 'Type to find a board. Use <b>UP/DOWN</b> to browse. <b>ENTER</b> to select, <b>ESC</b> to dismiss',
},
{
b: (...chunks) => <b>{chunks}</b>,
},
)
const match = useRouteMatch<{boardId: string, viewId: string, cardId?: string}>()
const history = useHistory()
const selectBoard = async (teamId: string, boardId: string): Promise<void> => {
if (!me) {
return
}
const newPath = generatePath(Utils.getBoardPagePath(match.path), {...match.params, teamId, boardId, viewId: undefined})
history.push(newPath)
props.onClose()
}
const teamsById: Record<string, Team> = {}
useAppSelector(getAllTeams).forEach((t) => {
teamsById[t.id] = t
})
const searchHandler = async (query: string): Promise<ReactNode[]> => {
if (query.trim().length === 0 || !team) {
return []
}
const items = await octoClient.searchAll(query)
const untitledBoardTitle = intl.formatMessage({id: 'ViewTitle.untitled-board', defaultMessage: 'Untitled board'})
refs.current = items.map((_, i) => refs.current[i] ?? createRef())
setRefs(refs)
return items.map((item, i) => {
const resultTitle = item.title || untitledBoardTitle
const teamTitle = teamsById[item.teamId].title
// eslint-disable-next-line @typescript-eslint/no-explicit-any
setIDs((prevIDs: any) => ({
...prevIDs,
[i]: [item.teamId, item.id],
}))
return (
<div
key={item.id}
className='blockSearchResult'
onClick={() => selectBoard(item.teamId, item.id)}
ref={refs.current[i]}
>
{item.type === BoardTypeOpen && <Globe/>}
{item.type === BoardTypePrivate && <LockOutline/>}
<span className='resultTitle'>{resultTitle}</span>
<span className='teamTitle'>{teamTitle}</span>
</div>
)
})
}
const handleEnterKeyPress = (e: KeyboardEvent) => {
if (Utils.isKeyPressed(e, Constants.keyCodes.ENTER) && selected > -1) {
e.preventDefault()
const [teamId, id] = IDs[selected]
selectBoard(teamId, id)
}
}
useEffect(() => {
if (selected >= 0) {
refs.current[selected].current.parentElement.focus()
}
document.addEventListener('keydown', handleEnterKeyPress)
// cleanup function
return () => {
document.removeEventListener('keydown', handleEnterKeyPress)
}
}, [selected, refs, IDs])
return (
<SearchDialog
onClose={props.onClose}
title={title}
subTitle={subTitle}
searchHandler={searchHandler}
selected={selected}
setSelected={(n: number) => setSelected(n)}
/>
)
}
export default BoardSwitcherDialog
|