niklas/s3browser-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Djeeberjr 2021-07-26 14:54:22 +02:00
commit 2aea95c6ab
23 changed files with 65078 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore Normal file
View File

@ -0,0 +1 @@
src/generated/*

29
.eslintrc.yml Normal file
View File

@ -0,0 +1,29 @@
env:
browser: true
es2021: true
extends:
- 'eslint:recommended'
- 'plugin:react/recommended'
- 'plugin:@typescript-eslint/recommended'
parser: '@typescript-eslint/parser'
parserOptions:
ecmaFeatures:
jsx: true
ecmaVersion: 12
sourceType: module
plugins:
- react
- '@typescript-eslint'
rules:
indent:
- error
- tab
linebreak-style:
- error
- unix
quotes:
- error
- double
semi:
- error
- never

23
.gitignore vendored Normal file
View File

@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

0
README.md Normal file
View File

14
codegen.yml Normal file
View File

@ -0,0 +1,14 @@
overwrite: true
schema: "src/generated/schema.json"
documents: "src/**/*.graphql"
generates:
src/generated/graphql.tsx:
hooks:
afterOneFileWrite:
- yarn run eslint --fix src/generated/graphql.tsx
plugins:
- "typescript"
- "typescript-operations"
- "typescript-react-apollo"
config:
withHooks: true

48399
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

61
package.json Normal file
View File

@ -0,0 +1,61 @@
{
"name": "s3browser-web",
"version": "0.1.0",
"private": true,
"dependencies": {
"@apollo/client": "^3.3.21",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"graphql": "^15.5.1",
"node-sass": "^6.0.1",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"graphql:gen": "graphql-codegen --config codegen.yml",
"graphql:download": "apollo schema:download --endpoint=http://localhost:8080/graphql src/generated/schema.json"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@graphql-codegen/cli": "1.21.7",
"@graphql-codegen/introspection": "1.18.2",
"@graphql-codegen/typescript": "^1.23.0",
"@graphql-codegen/typescript-operations": "1.18.4",
"@graphql-codegen/typescript-react-apollo": "2.3.1",
"@typescript-eslint/eslint-plugin": "^4.28.4",
"@typescript-eslint/parser": "^4.28.4",
"apollo": "^2.33.4",
"eslint": "^7.31.0",
"eslint-plugin-react": "^7.24.0"
}
}

14
public/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

25
public/manifest.json Normal file
View File

@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

0
src/App.scss Normal file
View File

13
src/App.tsx Normal file
View File

@ -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

21
src/components/DirectoryElement.tsx Normal file
View File

@ -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

49
src/components/FileBrowser.tsx Normal file
View File

@ -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

33
src/components/FileBrowserElement.tsx Normal file
View File

@ -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

21
src/components/FileElement.tsx Normal file
View File

@ -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

117
src/generated/graphql.tsx Normal file
View File

@ -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>;

1326
src/generated/schema.json Normal file
View File

File diff suppressed because it is too large Load Diff

10
src/graphql/openDir.graphql Normal file
View File

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

0
src/index.scss Normal file
View File

19
src/index.tsx Normal file
View File

@ -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")
)

1
src/react-app-env.d.ts vendored Normal file
View File

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

26
tsconfig.json Normal file
View File

@ -0,0 +1,26 @@
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}

14876
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff