feat(preview): proper file preview with api routing

4 files changed, 70 insertions, 36 deletions

diff --git a/util/FileSystem.tsx b/util/FileSystem.tsx
deleted file mode 100644
index e69de29..0000000
--- a/util/FileSystem.tsx
+++ /dev/null
diff --git a/util/checkFileSystemCompatibility.ts b/util/checkFileSystemCompatibility.ts
deleted file mode 100644
index a96b68e..0000000
--- a/util/checkFileSystemCompatibility.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const checkFileSystemCompatibility = () => {
-  return typeof window.showDirectoryPicker !== 'undefined'
-}
diff --git a/util/processOrg.tsx b/util/processOrg.tsx
index df6007e..a025645 100644
--- a/util/processOrg.tsx
+++ b/util/processOrg.tsx
@@ -2,45 +2,59 @@ import unified from 'unified'
 //import createStream from 'unified-stream'
 import uniorgParse from 'uniorg-parse'
 import uniorg2rehype from 'uniorg-rehype'
-//import highlight from 'rehype-highlight'
+import uniorgSlug from 'uniorg-slug'
+import extractKeywords from 'uniorg-extract-keywords'
+import attachments from 'uniorg-attach'
+// rehypeHighlight does not have any types
+// @ts-expect-error
+import highlight from 'rehype-highlight'
 import katex from 'rehype-katex'
 import 'katex/dist/katex.css'
 import rehype2react from 'rehype-react'
 
 import { PreviewLink } from '../components/Sidebar/Link'
-import { NodeById } from '../pages'
-import React from 'react'
+import { NodeByCite, NodeById } from '../pages'
+import React, { useMemo } from 'react'
 
 export interface ProcessedOrgProps {
   nodeById: NodeById
   previewNode: any
   setPreviewNode: any
-  getText: any
   previewText: any
+  nodeByCite: NodeByCite
+  setSidebarHighlightedNode: any
 }
 
 export const ProcessedOrg = (props: ProcessedOrgProps) => {
-  const { nodeById, previewNode, setPreviewNode, getText, previewText } = props
-  console.log(previewText)
+  const { nodeById, setSidebarHighlightedNode, setPreviewNode, previewText, nodeByCite } = props
+
   const processor = unified()
     .use(uniorgParse)
+    .use(extractKeywords)
+    .use(attachments)
+    .use(uniorgSlug)
     .use(uniorg2rehype)
     .use(katex)
     .use(rehype2react, {
       createElement: React.createElement,
       // eslint-disable-next-line react/display-name
       components: {
-        a: ({ props, children, href }) => (
-          <PreviewLink
-            getText={getText}
-            nodeById={nodeById}
-            previewNode={previewNode}
-            setPreviewNode={setPreviewNode}
-            {...{ children, href }}
-          />
-        ),
+        a: ({ children, href }) => {
+          return (
+            <PreviewLink
+              nodeByCite={nodeByCite}
+              setSidebarHighlightedNode={setSidebarHighlightedNode}
+              href={`${href as string}`}
+              nodeById={nodeById}
+              setPreviewNode={setPreviewNode}
+            >
+              {typeof children === 'string' ? children : null}
+            </PreviewLink>
+          )
+        },
       },
     })
 
-  return <div>{processor.processSync(previewText).result}</div>
+  const text = useMemo(() => processor.processSync(previewText).result, [previewText])
+  return <>{text}</>
 }
diff --git a/util/uniorg.tsx b/util/uniorg.tsx
index e35a021..c36f662 100644
--- a/util/uniorg.tsx
+++ b/util/uniorg.tsx
@@ -1,34 +1,57 @@
-import React, { useEffect, useState } from 'react'
-import { NodeById } from '../pages/index'
+import React, { useEffect, useMemo, useState } from 'react'
+import { OrgRoamNode } from '../api'
+import { NodeByCite, NodeById } from '../pages/index'
 import { ProcessedOrg } from './processOrg'
 
 export interface UniOrgProps {
   nodeById: NodeById
   previewNode: any
   setPreviewNode: any
-  getText: any
+  nodeByCite: NodeByCite
+  setSidebarHighlightedNode: any
 }
 
 export const UniOrg = (props: UniOrgProps) => {
-  const { nodeById, previewNode, setPreviewNode, getText } = props
+  const { setSidebarHighlightedNode, nodeById, nodeByCite, previewNode, setPreviewNode } = props
 
   const [previewText, setPreviewText] = useState('')
 
+  const file = encodeURIComponent(previewNode.file)
   useEffect(() => {
-    if (previewNode?.id) {
-      getText(previewNode?.id, setPreviewText)
-    }
-  }, [previewNode?.id])
+    fetch(`api/notes/${file}`)
+      .then((res) => {
+        return res.text()
+      })
+      .then((res) => {
+        if (res !== 'error') {
+          setPreviewText(res)
+        }
+      })
+      .catch((e) => {
+        console.log(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.'
+      })
+  }, [previewNode.id])
+
+  useEffect(() => {
+    console.log('mount')
+    return () => console.log('unmount')
+  }, [])
 
   return (
-    <ProcessedOrg
-      {...{
-        getText,
-        nodeById,
-        previewNode,
-        setPreviewNode,
-        previewText,
-      }}
-    />
+    <>
+      {previewNode?.id && (
+        <ProcessedOrg
+          {...{
+            nodeById,
+            previewNode,
+            setPreviewNode,
+            previewText,
+            nodeByCite,
+            setSidebarHighlightedNode,
+          }}
+        />
+      )}
+    </>
   )
 }