export default function PageViewerStatusBar()

in frontend/src/js/components/viewer/PageViewer/PageViewerStatusBar.tsx [13:73]
47 lines of code
4 McCabe index (conditional complexity)

export default function PageViewerStatusBar({ previousDocumentFn, nextDocumentFn }: { previousDocumentFn: (() => void) | undefined, nextDocumentFn: (() => void) | undefined }) {
    const dispatch: GiantDispatch = useDispatch();
    const pages = useSelector<GiantState, PagesState>(({ pages }) => pages);

    function previousHighlight() {
        dispatch(navigateToHighlight(pages, 'previous'));
    }

    function nextHighlight() {
        dispatch(navigateToHighlight(pages, 'next'));
    }

    const showPreviousNextDocumentButtons = previousDocumentFn !== undefined || nextDocumentFn !== undefined;

    return (
        <div className='document__status'>
            <KeyboardShortcut shortcut={keyboardShortcuts.previousHighlight} func={previousHighlight} />
            <KeyboardShortcut shortcut={keyboardShortcuts.nextHighlight} func={nextHighlight} />
            
            {showPreviousNextDocumentButtons ?
                <button
                    className='btn'
                    title={`Previous document (${keyboardShortcuts.previousResult})`}
                    disabled={previousDocumentFn === undefined}
                    onClick={previousDocumentFn}
                >
                    <PreviousIcon /> Previous document
                </button>
            : <span />}

            <span>
                <button
                    className='btn'
                    title={`Previous highlight (${keyboardShortcuts.previousHighlight})`}
                    onClick={() => dispatch(navigateToHighlight(pages, 'previous'))}
                >
                    <UpIcon /> Previous highlight
                </button>

                <button
                    className='btn'
                    title={`Next highlight (${keyboardShortcuts.nextResult})`}
                    onClick={() => dispatch(navigateToHighlight(pages, 'next'))}
                >
                    Next highlight <DownIcon />
                </button>
            </span>

            {showPreviousNextDocumentButtons ?
                <button
                    className='btn'
                    title={`Next document (${keyboardShortcuts.nextResult})`}
                    disabled={nextDocumentFn === undefined}
                    onClick={nextDocumentFn}
                >
                    Next document <NextIcon />
                </button>
            : <span />}
        </div>
    );
}