diff options
author | Thomas F. K. Jorna <[email protected]> | 2021-10-08 23:39:37 +0200 |
---|---|---|
committer | Thomas F. K. Jorna <[email protected]> | 2021-10-08 23:39:37 +0200 |
commit | 2384b30a244c7d6477e54de5385fe7f1cc62d43a (patch) | |
tree | 55c9f82f9475249a7f91ac44e408e04e9f1c9560 /components/Sidebar/index.tsx | |
parent | fd4edbd6a854275c10c5b21173f0875921d547d1 (diff) |
feat(preview): proper file preview with api routing
Diffstat (limited to 'components/Sidebar/index.tsx')
-rw-r--r-- | components/Sidebar/index.tsx | 335 |
1 files changed, 56 insertions, 279 deletions
diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx index e56a25d..4d807ef 100644 --- a/components/Sidebar/index.tsx +++ b/components/Sidebar/index.tsx @@ -1,42 +1,17 @@ import React, { useContext, useEffect, useState } from 'react' -import { UniOrg } from '../../util/uniorg' -import { Backlinks } from './Backlinks' -import { getOrgText } from '../../util/webSocketFunctions' +import { Toolbar } from './Toolbar' +import { Note } from './Note' -import { - Button, - Slide, - VStack, - Flex, - Heading, - Box, - CloseButton, - Text, - Drawer, - DrawerOverlay, - DrawerHeader, - DrawerBody, - DrawerCloseButton, - DrawerContent, - DrawerFooter, - IconButton, -} from '@chakra-ui/react' +import { Button, Slide, VStack, Flex, Heading, Box, IconButton } from '@chakra-ui/react' import { Scrollbars } from 'react-custom-scrollbars-2' import { ChevronLeftIcon, ChevronRightIcon, HamburgerIcon } from '@chakra-ui/icons' -import { - BiFont, - BiAlignJustify, - BiAlignLeft, - BiAlignMiddle, - BiAlignRight, - BiRightIndent, -} from 'react-icons/bi' +import { BiFile } from 'react-icons/bi' import { GraphData, NodeObject, LinkObject } from 'force-graph' import { OrgRoamNode } from '../../api' import { ThemeContext } from '../../util/themecontext' -import { LinksByNodeId, NodeById } from '../../pages/index' +import { LinksByNodeId, NodeByCite, NodeById } from '../../pages/index' export interface SidebarProps { isOpen: boolean @@ -46,68 +21,74 @@ export interface SidebarProps { previewNode: NodeObject setPreviewNode: any linksByNodeId: LinksByNodeId + nodeByCite: NodeByCite + setSidebarHighlightedNode: any } const Sidebar = (props: SidebarProps) => { - const { isOpen, onOpen, onClose, previewNode, setPreviewNode, nodeById, linksByNodeId } = props + const { + isOpen, + onOpen, + onClose, + previewNode, + setPreviewNode, + nodeById, + linksByNodeId, + nodeByCite, + setSidebarHighlightedNode, + } = props const { highlightColor } = useContext(ThemeContext) const [previewRoamNode, setPreviewRoamNode] = useState<OrgRoamNode>() - const getText = (id: string, setText: any) => { - fetch(`http://localhost:35901/note/${id}`) - .then((res) => { - return res.text() - }) - .then((res) => setText(res)) - .catch((e) => { - return ( - 'Could not fetch the text for some reason, sorry!\n\n This can happen because you have an id with forward slashes (/) in it.', - console.log(e) - ) - }) - } - useEffect(() => { - if (!previewNode.id) { + if (!previewNode?.id) { onClose() return } onOpen() setPreviewRoamNode(previewNode as OrgRoamNode) - }, [previewNode.id]) + }, [previewNode?.id]) - const [justification, setJustification] = useState(0) + const [justification, setJustification] = useState(1) const justificationList = ['justify', 'start', 'end', 'center'] const [font, setFont] = useState('sans serif') const [indent, setIndent] = useState(0) //maybe want to close it when clicking outside, but not sure //const outsideClickRef = useRef(); return ( - <Slide direction="right" in={isOpen} style={{ maxWidth: '50%' }} unmountOnExit> + <Slide + direction="right" + in={isOpen} + style={{ width: 'clamp(400px, 30%, 500px)' }} + unmountOnExit + > <Flex flexDirection="row" height="100%"> - <Box pl={2} color="gray.800" bg="alt.100" w="100%" paddingBottom={15}> + <Box pl={2} color="black" bg="alt.100" w="100%" paddingBottom={15}> <Flex justifyContent="space-between" paddingTop={4} - pl={0} + pl={4} pb={5} - pr={2} - alignItems="center" + pr={3} + alignItems="top" color="black" > - <Flex> - <IconButton - variant="link" - size="md" - icon={<ChevronLeftIcon />} - aria-label="Previous node" - /> - <Heading size="md" fontWeight={400}> + <Flex alignItems="center" whiteSpace="nowrap" textOverflow="ellipsis" overflow="hidden"> + <BiFile /> + <Heading + pl={2} + whiteSpace="nowrap" + textOverflow="ellipsis" + overflow="hidden" + lineHeight={1} + size="sm" + fontWeight={600} + color={'gray.800'} + > {previewRoamNode?.title} </Heading> </Flex> - <IconButton // eslint-disable-next-line react/jsx-no-undef icon={<HamburgerIcon />} @@ -116,6 +97,7 @@ const Sidebar = (props: SidebarProps) => { onClick={onClose} /> </Flex> + <Toolbar {...{ setJustification, setIndent, setFont, justification }} /> <Scrollbars //autoHeight //autoHeightMax={600} @@ -132,220 +114,19 @@ const Sidebar = (props: SidebarProps) => { /> )} > - <VStack height="100%" alignItems="left" bg="alt.100" paddingLeft={10}> - <Box - pr={8} - overflow="scroll" - height="85%" - className="org" - sx={{ - '.katex': { overflowX: 'scroll' }, - h1: { fontSize: '20', fontWeight: 'bold', marginBottom: 3 }, - h2: { - fontSize: '18', - marginBottom: 2, - color: 'black', - }, - h3: { - fontSize: '16', - fontWeight: '600 !important', - marginBottom: '.5em', - }, - h4: { - fontSize: '14', - fontWeight: '500 !important', - marginBottom: '.25em', - fontStyle: 'italic', - }, - a: { - color: highlightColor, - }, - ol: { - paddingLeft: '5', - }, - ul: { - paddingLeft: '5', - }, - p: { - paddingBottom: '.5em', - }, - div: { - fontSize: 'small', - hyphens: 'auto !important', - textAlign: justificationList[justification], - }, - '.title': { - textAlign: 'center', - marginBottom: '.2em', - }, - '.subtitle': { - textAlign: 'center', - fontSize: 'medium', - fontWeight: 'bold', - marginTop: 0, - }, - '.todo': { fontFamily: 'monospace', color: 'red' }, - '.equationContainer': { - display: 'table', - textAlign: 'center', - width: '100%', - }, - '.equation': { - verticalAlign: 'middle', - }, - '.equation-label': { - display: 'tableCell', - textAlign: 'right', - verticalAlign: 'middle', - }, - '.inlinetask': { - padding: '10px', - border: '2px solid gray', - margin: '10px', - background: '#ffffcc', - }, - '#org-div-home-and-up': { - textAlign: 'right', - fontSize: '70 % ', - whiteSpace: 'nowrap', - }, - textarea: { overflowX: 'auto' }, - '.linenr': { fontSize: 'smaller' }, - '.code-highlighted': { backgroundColor: '#ffff00' }, - '.org-info-js_info-navigation': { borderStyle: 'none' }, - '#org-info-js_console-label': { - fontSize: '10px', - fontWeight: 'bold', - whiteSpace: 'nowrap', - }, - '.org-info-js_search-highlight': { - backgroundColor: '#ffff00', - color: '#000000', - fontWeight: 'bold', - }, - '.org-svg': { width: '90%' }, - '.done': { fontFamily: 'monospace', color: 'green' }, - '.priority': { fontFamily: 'monospace', color: 'orange' }, - '.tag': { - backgroundColor: '#eee', - fontFamily: 'monospace', - padding: '2px', - fontSize: '80%', - fontWeight: 'normal', - }, - '.timestamp': { color: '#bebebe' }, - '.timestamp-kwd': { color: '#5f9ea0' }, - '.org-right': { marginLeft: 'auto', marginRight: '0px', textAlign: 'right' }, - '.org-left': { marginLeft: '0px', marginRight: 'auto', textAlign: 'left' }, - '.org-center': { marginLeft: 'auto', marginRight: 'auto', textAlign: 'center' }, - '.underline': { textDecoration: 'underline' }, - '#postamble p': { fontSize: '90%', margin: '.2em' }, - '#preamble p': { fontSize: '90%', margin: '.2em' }, - 'p.verse': { marginLeft: '3%' }, - pre: { - border: '1px solid #e6e6e6', - borderRadius: '3px', - backgroundColor: '#f2f2f2', - padding: '8pt', - fontFamily: 'monospace', - overflow: 'auto', - margin: '1.2em', - }, - 'pre.src': { - position: 'relative', - overflow: 'auto', - }, - 'pre.src:before': { - display: 'none', - position: 'absolute', - top: '-8px', - right: '12px', - padding: '3px', - color: '#555', - backgroundColor: '#f2f2f299', - }, - 'caption.t-above': { captionSide: 'top' }, - 'caption.t-bottom': { captionSide: 'bottom' }, - 'th.org-right': { textAlign: 'center' }, - 'th.org-left': { textAlign: 'center' }, - 'th.org-center': { textAlign: 'center' }, - 'td.org-right': { textAlign: 'right' }, - 'td.org-left': { textAlign: 'left' }, - 'td.org-center': { textAlign: 'center' }, - '.footpara': { display: 'inline' }, - '.footdef': { marginBottom: '1em' }, - '.figure': { padding: '1em' }, - '.figure p': { textAlign: 'center' }, - // org-like indents - 'h1, h1 ~ *,h2 ~ h1,h2 ~ h1 ~ *,h3 ~ h1,h3 ~ h1 ~ *': { - marginLeft: 0 * indent, - }, - 'h2 ~ *, h1 ~ h2,h1 ~ h2 ~ *:not(h1):not(h3)': { - marginLeft: 2 * indent, - }, - 'h3 ~ *,h1 ~ h3,h1 ~ h3 ~ *:not(h1):not(h2)': { - marginLeft: 4 * indent, - }, + <VStack height="100%" alignItems="left" bg="alt.100" paddingLeft={4}> + <Note + {...{ + setPreviewNode, + previewNode, + nodeById, + nodeByCite, + setSidebarHighlightedNode, + justification, + justificationList, + linksByNodeId, }} - > - {previewNode?.id && ( - <Box> - <Flex pt={1} alignItems="center" justifyContent="flex-end"> - <IconButton - variant="ghost" - aria-label="Justify content" - icon={ - [ - <BiAlignJustify key="justify" />, - <BiAlignLeft key="left" />, - <BiAlignRight key="right" />, - <BiAlignMiddle key="center" />, - ][justification] - } - onClick={() => setJustification((curr) => (curr + 1) % 4)} - /> - <IconButton - variant="ghost" - aria-label="Indent Text" - icon={<BiRightIndent />} - onClick={() => { - console.log(indent) - setIndent((curr: number) => (indent ? 0 : 1)) - }} - /> - <IconButton - variant="ghost" - aria-label="Change font" - icon={<BiFont />} - onClick={() => { - setFont((curr: string) => - curr === 'sans serif' ? 'serif' : 'sans serif', - ) - }} - /> - </Flex> - <Flex height="100%" flexDirection="column" justifyContent="space-between"> - <UniOrg - {...{ - getText, - setPreviewNode, - previewNode, - nodeById, - }} - /> - <Backlinks - {...{ - setPreviewNode, - previewNode, - nodeById, - linksByNodeId, - getText, - }} - /> - </Flex> - </Box> - )} - </Box> + /> </VStack> </Scrollbars> </Box> @@ -355,7 +136,3 @@ const Sidebar = (props: SidebarProps) => { } export default Sidebar - -/* <Box marginLeft="auto" zIndex={5000} bg="alt.100" maxHeight="100%" width= "30%" padding={8} borderRadius={2}> - <Heading size="sm">{previewNode.title}</Heading> -</Box> */ |