initial commit

src/App.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+import "./App.scss"
+import FileBrowser from "./components/FileBrowser"
+
+const App: React.FC = () => {
+	return (
+		<div className="App">
+			<FileBrowser></FileBrowser>
+		</div>
+	)
+}
+
+export default App

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

src/generated/graphql.tsx

@@ -0,0 +1,117 @@
+import { gql } from "@apollo/client"
+import * as Apollo from "@apollo/client"
+export type Maybe<T> = T | null;
+export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
+const defaultOptions =  {}
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+  ID: string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
+};
+
+/** Represents a directory */
+export type Directory = {
+  __typename?: "Directory";
+  directorys?: Maybe<Array<Maybe<Directory>>>;
+  files?: Maybe<Array<Maybe<File>>>;
+  id: Scalars["ID"];
+  name?: Maybe<Scalars["String"]>;
+  parent?: Maybe<Directory>;
+};
+
+/** Represents a file, not a directory */
+export type File = {
+  __typename?: "File";
+  contentType?: Maybe<Scalars["String"]>;
+  etag?: Maybe<Scalars["String"]>;
+  /** The uniqe ID of the file. Represents the path and the s3 key. */
+  id: Scalars["ID"];
+  name?: Maybe<Scalars["String"]>;
+  parent?: Maybe<Directory>;
+  size?: Maybe<Scalars["Int"]>;
+};
+
+export type RootQuery = {
+  __typename?: "RootQuery";
+  directorys: Array<Maybe<Directory>>;
+  file?: Maybe<File>;
+  files: Array<Maybe<File>>;
+};
+
+
+export type RootQueryDirectorysArgs = {
+  path: Scalars["String"];
+};
+
+
+export type RootQueryFileArgs = {
+  id: Scalars["ID"];
+};
+
+
+export type RootQueryFilesArgs = {
+  path: Scalars["String"];
+};
+
+export type OpenDirQueryVariables = Exact<{
+  path: Scalars["String"];
+}>;
+
+
+export type OpenDirQuery = (
+  { __typename?: "RootQuery" }
+  & { files: Array<Maybe<(
+    { __typename?: "File" }
+    & Pick<File, "id" | "name">
+  )>>, directorys: Array<Maybe<(
+    { __typename?: "Directory" }
+    & Pick<Directory, "id" | "name">
+  )>> }
+);
+
+
+export const OpenDirDocument = gql`
+    query openDir($path: String!) {
+  files(path: $path) {
+    id
+    name
+  }
+  directorys(path: $path) {
+    id
+    name
+  }
+}
+    `
+
+/**
+ * __useOpenDirQuery__
+ *
+ * To run a query within a React component, call `useOpenDirQuery` and pass it any options that fit your needs.
+ * When your component renders, `useOpenDirQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useOpenDirQuery({
+ *   variables: {
+ *      path: // value for 'path'
+ *   },
+ * });
+ */
+export function useOpenDirQuery(baseOptions: Apollo.QueryHookOptions<OpenDirQuery, OpenDirQueryVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useQuery<OpenDirQuery, OpenDirQueryVariables>(OpenDirDocument, options)
+}
+export function useOpenDirLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<OpenDirQuery, OpenDirQueryVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useLazyQuery<OpenDirQuery, OpenDirQueryVariables>(OpenDirDocument, options)
+}
+export type OpenDirQueryHookResult = ReturnType<typeof useOpenDirQuery>;
+export type OpenDirLazyQueryHookResult = ReturnType<typeof useOpenDirLazyQuery>;
+export type OpenDirQueryResult = Apollo.QueryResult<OpenDirQuery, OpenDirQueryVariables>;

src/graphql/openDir.graphql

@@ -0,0 +1,10 @@
+query openDir($path: String!) {
+  files(path:$path){
+    id
+    name
+  }
+  directorys(path: $path){
+    id
+    name
+  }
+}

src/index.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+import ReactDOM from "react-dom"
+import "./index.scss"
+import App from "./App"
+import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client"
+
+const client = new ApolloClient({
+	uri: "http://localhost:8080/graphql",
+	cache: new InMemoryCache()
+})
+
+ReactDOM.render(
+	<React.StrictMode>
+		<ApolloProvider client={client}>
+			<App />
+		</ApolloProvider>
+	</React.StrictMode>,
+	document.getElementById("root")
+)

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />