From 2384b30a244c7d6477e54de5385fe7f1cc62d43a Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <hello@tefkah.com>
Date: Fri, 8 Oct 2021 23:39:37 +0200
Subject: feat(preview): proper file preview with api routing

---
 components/Sidebar/index.tsx | 335 ++++++++-----------------------------------
 1 file changed, 56 insertions(+), 279 deletions(-)

(limited to 'components/Sidebar/index.tsx')

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> */
-- 
cgit v1.2.3