initial commit

src/components/DirectoryElement.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { Directory } from "../generated/graphql"
+
+interface Props {
+    dir: Directory
+}
+
+const DirectoryElement: React.FC<Props> = (props) => {
+	return (
+		<div>
+            📂 {props.dir.name}
+		</div>
+	)
+}
+
+DirectoryElement.propTypes = {
+	dir: PropTypes.any.isRequired // TODO: maybe you can use the interface
+}
+
+export default DirectoryElement

src/components/FileBrowser.tsx

@@ -0,0 +1,49 @@
+import React from "react"
+import { useState } from "react"
+import { useOpenDirQuery } from "../generated/graphql"
+import FileBrowserElement from "./FileBrowserElement"
+
+function parentDir(path:string): string {
+	if(path.endsWith("/")){
+		path = path.substr(0,path.length - 1)
+	}
+	const paths = path.split("/")
+	paths.pop()
+	return paths.join("/")
+}
+
+const FileBrowser: React.FC = () => {
+	const [path,setPath] = useState("/")
+
+	const { data } = useOpenDirQuery({
+		variables:{
+			path
+		}
+	})
+
+	return (
+		<div>
+			<div onClick={()=>{
+				setPath(parentDir(path))
+			}}>
+                ..
+			</div>
+			<div>
+				{ data?.files.map(v => (<FileBrowserElement 
+					key={v?.id}
+					file={v}
+				/>))}
+
+				{ data?.directorys.map(v => (<FileBrowserElement
+					key={v?.id}
+					dir={v}
+					onClick={(data)=>{
+						setPath(data.id)
+					}}
+				/>))}
+			</div>
+		</div>
+	)
+}
+
+export default FileBrowser

src/components/FileBrowserElement.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { Directory, File } from "../generated/graphql"
+import DirectoryComponent from "./DirectoryElement"
+import FileElement from "./FileElement"
+
+interface Props {
+    file?: File | null
+    dir?: Directory | null
+    onClick?: (data: File | Directory) => void
+}
+
+const FileBrowserElement: React.FC<Props> = (props) => {
+	return (
+		<div onClick={()=>{
+			if(props.file){
+				props.onClick?.(props.file)
+			}else if(props.dir){
+				props.onClick?.(props.dir)
+			}
+		}}>
+			{(props.file) ? <FileElement file={props.file}/>:(props.dir)?<DirectoryComponent dir={props.dir} />:<></>}
+		</div>
+	)
+}
+
+FileBrowserElement.propTypes = {
+	dir: PropTypes.any,
+	file: PropTypes.any,
+	onClick: PropTypes.func
+}
+
+export default FileBrowserElement

src/components/FileElement.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { File } from "../generated/graphql"
+
+interface Props {
+    file: File
+}
+
+const FileElement: React.FC<Props> = (props) => {
+	return (
+		<div>
+            📄 {props.file.name}
+		</div>
+	)
+}
+
+FileElement.propTypes = {
+	file: PropTypes.any.isRequired
+}
+
+export default FileElement