summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorThomas F. K. Jorna <[email protected]>2021-10-05 12:35:40 +0200
committerThomas F. K. Jorna <[email protected]>2021-10-05 12:35:40 +0200
commit33839479e269bed905f9eefc374060b9d3ee7e19 (patch)
treef628200a10e5e37aa00f05cea2464eaf67df9581
parentb0ddf286f087b31dc75626f709cfce3889de25dd (diff)
feat(preview): filesystem basics in place
-rw-r--r--components/BehaviorPanel.tsx0
-rw-r--r--components/Sidebar/Link.tsx11
-rw-r--r--components/Sidebar/index.tsx5
-rw-r--r--components/Tweaks/BehaviorPanel.tsx17
-rw-r--r--index.tsx0
-rw-r--r--pages/filesystemtest.tsx52
-rw-r--r--util/FileSystem.tsx0
-rw-r--r--util/checkFileSystemCompatibility.ts3
8 files changed, 88 insertions, 0 deletions
diff --git a/components/BehaviorPanel.tsx b/components/BehaviorPanel.tsx
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/components/BehaviorPanel.tsx
diff --git a/components/Sidebar/Link.tsx b/components/Sidebar/Link.tsx
new file mode 100644
index 0000000..789873a
--- /dev/null
+++ b/components/Sidebar/Link.tsx
@@ -0,0 +1,11 @@
+import { Text } from '@chakra-ui/react'
+
+export interface LinkProps {
+ id: string
+}
+
+export const Link = (props: LinkProps) => {
+ const { id } = props
+
+ return <Text>{id}</Text>
+}
diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index 05f5720..4f314da 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -51,6 +51,11 @@ const Sidebar = (props: SidebarProps) => {
console.log(res)
setPreviewText(res)
})
+ .catch((e) => {
+ setPreviewText(
+ 'Could not fetch the text for some reason, sorry!\n\n This can happen because you have an id with forward slashes (/) in it.',
+ )
+ })
}
useEffect(() => {
diff --git a/components/Tweaks/BehaviorPanel.tsx b/components/Tweaks/BehaviorPanel.tsx
index 0c22e1a..27906c5 100644
--- a/components/Tweaks/BehaviorPanel.tsx
+++ b/components/Tweaks/BehaviorPanel.tsx
@@ -10,12 +10,15 @@ import {
StackDivider,
VStack,
Text,
+ Box,
} from '@chakra-ui/react'
import React from 'react'
import { initialBehavior, initialMouse } from '../config'
import { InfoTooltip } from './InfoTooltip'
import { SliderWithInfo } from './SliderWithInfo'
+import { checkFileSystemCompatibility } from '../../util/checkFileSystemCompatibility'
+
export interface BehaviorPanelProps {
behavior: typeof initialBehavior
setBehavior: any
@@ -163,6 +166,20 @@ export const BehaviorPanel = (props: BehaviorPanelProps) => {
onChange={(value) => setBehavior({ ...behavior, zoomPadding: value })}
infoText="How much to zoom out to accomodate all nodes when changing the view."
/>
+
+ <Box>
+ <Button width="100%" isDisabled={!checkFileSystemCompatibility()}>
+ Grant Filesystem Access
+ </Button>
+ {!checkFileSystemCompatibility() && (
+ <Box bg="gray.600" width="100%" padding={5}>
+ <Text>
+ You are not using a browser compatible with the FileSystem Access API. Only Chromium
+ based browsers are currently supported.
+ </Text>
+ </Box>
+ )}
+ </Box>
</VStack>
)
}
diff --git a/index.tsx b/index.tsx
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/index.tsx
diff --git a/pages/filesystemtest.tsx b/pages/filesystemtest.tsx
new file mode 100644
index 0000000..4cadf0e
--- /dev/null
+++ b/pages/filesystemtest.tsx
@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react'
+import { Button } from '@chakra-ui/react'
+
+async function verifyPermission(fileHandle: any, readWrite: any) {
+ const options: any = {}
+ if (readWrite) {
+ options.mode = 'readwrite'
+ }
+ // Check if permission was already granted. If so, return true.
+ if ((await fileHandle.queryPermission(options)) === 'granted') {
+ return true
+ }
+ // Request permission. If the user grants permission, return true.
+ if ((await fileHandle.requestPermission(options)) === 'granted') {
+ return true
+ }
+ // The user didn't grant permission, so return false.
+ return false
+}
+
+export default function Testpage() {
+ const [text, setText] = useState(0)
+ const [dirHandle, setDirhandle] = useState<any>()
+ const [perm, setPerm] = useState(false)
+
+ const pick = async () => {
+ const dirHandle = await window.showDirectoryPicker()
+ console.log(dirHandle)
+ setDirhandle(dirHandle)
+ }
+
+ useEffect(() => {
+ ;(async () => {
+ console.log(dirHandle)
+ const newFileHandle = dirHandle ? await dirHandle.getFileHandle('inbox.org') : null
+ const file = await newFileHandle.getFile()
+ const ttext = await file.text()
+ setText(ttext)
+ const path = newFileHandle ? await dirHandle.resolve(newFileHandle) : null
+ console.log(path)
+ })()
+ }, [dirHandle])
+
+ return (
+ <div>
+ <Button onClick={() => pick()}> Press </Button>
+ <p>{text}</p>
+ <Button onClick={() => setPerm(verifyPermission(dirHandle, true))}>Check permission</Button>
+ <p>{perm ? '👍' : '👎'}</p>
+ </div>
+ )
+}
diff --git a/util/FileSystem.tsx b/util/FileSystem.tsx
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/util/FileSystem.tsx
diff --git a/util/checkFileSystemCompatibility.ts b/util/checkFileSystemCompatibility.ts
new file mode 100644
index 0000000..a96b68e
--- /dev/null
+++ b/util/checkFileSystemCompatibility.ts
@@ -0,0 +1,3 @@
+export const checkFileSystemCompatibility = () => {
+ return typeof window.showDirectoryPicker !== 'undefined'
+}