From 67cbf7ab28287de107f6d0a0af7749de1633d649 Mon Sep 17 00:00:00 2001 From: Djeeberjr Date: Wed, 28 Jul 2021 12:49:35 +0200 Subject: [PATCH] basic file opening --- src/App.module.scss | 3 ++ src/App.scss | 0 src/App.tsx | 1 - src/components/FileBrowser.tsx | 14 ++++++- src/components/FileOpen.tsx | 69 ++++++++++++++++++++++++++++++++ src/components/ImageOpener.tsx | 23 +++++++++++ src/components/TextOpener.tsx | 23 +++++++++++ src/functions/genDownloadLink.ts | 5 +++ src/generated/graphql.tsx | 52 ++++++++++++++++++++++++ src/graphql/getFile.graphql | 9 +++++ 10 files changed, 196 insertions(+), 3 deletions(-) create mode 100644 src/App.module.scss delete mode 100644 src/App.scss create mode 100644 src/components/FileOpen.tsx create mode 100644 src/components/ImageOpener.tsx create mode 100644 src/components/TextOpener.tsx create mode 100644 src/functions/genDownloadLink.ts create mode 100644 src/graphql/getFile.graphql diff --git a/src/App.module.scss b/src/App.module.scss new file mode 100644 index 0000000..54f57fa --- /dev/null +++ b/src/App.module.scss @@ -0,0 +1,3 @@ +.imageOpener{ + width: 90%; +} \ No newline at end of file diff --git a/src/App.scss b/src/App.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/App.tsx b/src/App.tsx index c0f4825..3d1d69c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,4 @@ import React from "react" -import "./App.scss" import FileBrowser from "./components/FileBrowser" const App: React.FC = () => { diff --git a/src/components/FileBrowser.tsx b/src/components/FileBrowser.tsx index 77b7808..dee3b2c 100644 --- a/src/components/FileBrowser.tsx +++ b/src/components/FileBrowser.tsx @@ -3,9 +3,12 @@ import { useState } from "react" import { useOpenDirQuery } from "../generated/graphql" import Breadcrum from "./Breadcrum" import FileBrowserElement from "./FileBrowserElement" +import FileOpen from "./FileOpen" const FileBrowser: React.FC = () => { const [path,setPath] = useState("/") + const [openFileId, setOpenFileId] = useState("") + const [showFile, setShowFile] = useState(false) const { data } = useOpenDirQuery({ variables:{ @@ -31,18 +34,25 @@ const FileBrowser: React.FC = () => { { data?.directorys.map(v => ({ - setPath(data.id) + onClick={(dir)=>{ + setPath(dir.id) }} />))} { data?.files.map(v => ({ + setOpenFileId(file.id) + setShowFile(true) + }} />))} + {{ + setShowFile(false) + }} />} ) } diff --git a/src/components/FileOpen.tsx b/src/components/FileOpen.tsx new file mode 100644 index 0000000..49314c7 --- /dev/null +++ b/src/components/FileOpen.tsx @@ -0,0 +1,69 @@ +import React from "react" +import PropTypes from "prop-types" +import { useGetFileQuery } from "../generated/graphql" +import ImageOpener from "./ImageOpener" +import TextOpener from "./TextOpener" + +interface Props { + id: string + show: boolean + onCloseClick?: ()=>void +} + +const FileOpen: React.FC = (props) => { + + const { data } = useGetFileQuery({ + variables:{ + id: props.id + } + }) + + let opener =
TODO
+ + if(data?.file != null){ + // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types + if (data.file.contentType?.startsWith("image/")){ + opener = + }else if (data.file.contentType?.startsWith("text/")){ + opener = + }else{ + // Get Opener bases on file extension + const ext = data.file.name?.split(".").pop() + switch (ext) { + case "png": + case "jpg": + case "jpeg": + case "gif": + // TODO: more ext + opener = + break + case "txt": + case "md": + opener = + break + default: + opener = + break + } + } + } + + return ( + + ) +} + +FileOpen.propTypes = { + id: PropTypes.string.isRequired, + show: PropTypes.bool.isRequired, + onCloseClick: PropTypes.func +} + +export default FileOpen diff --git a/src/components/ImageOpener.tsx b/src/components/ImageOpener.tsx new file mode 100644 index 0000000..bd328f0 --- /dev/null +++ b/src/components/ImageOpener.tsx @@ -0,0 +1,23 @@ +import React from "react" +import PropTypes from "prop-types" +import { File } from "../generated/graphql" +import genDownloadLink from "../functions/genDownloadLink" +import style from "./../App.module.scss" + +interface Props { + file: File +} + +const ImageOpener: React.FC = (props) => { + return ( +
+ +
+ ) +} + +ImageOpener.propTypes = { + file: PropTypes.any.isRequired +} + +export default ImageOpener diff --git a/src/components/TextOpener.tsx b/src/components/TextOpener.tsx new file mode 100644 index 0000000..7a5f76a --- /dev/null +++ b/src/components/TextOpener.tsx @@ -0,0 +1,23 @@ +import React from "react" +import PropTypes from "prop-types" +import { File } from "../generated/graphql" + +interface Props { + file: File +} + +const TextOpener: React.FC = (props) => { + return ( +
+ +
+ ) +} + +TextOpener.propTypes = { + file: PropTypes.any.isRequired, +} + +export default TextOpener diff --git a/src/functions/genDownloadLink.ts b/src/functions/genDownloadLink.ts new file mode 100644 index 0000000..d28774a --- /dev/null +++ b/src/functions/genDownloadLink.ts @@ -0,0 +1,5 @@ +function genDownloadLink(id:string): string { + return `/api/file?id=${encodeURIComponent(id)}` +} + +export default genDownloadLink diff --git a/src/generated/graphql.tsx b/src/generated/graphql.tsx index d12995c..fbc016e 100644 --- a/src/generated/graphql.tsx +++ b/src/generated/graphql.tsx @@ -58,6 +58,19 @@ export type RootQueryFilesArgs = { path: Scalars["String"]; }; +export type GetFileQueryVariables = Exact<{ + id: Scalars["ID"]; +}>; + + +export type GetFileQuery = ( + { __typename?: "RootQuery" } + & { file?: Maybe<( + { __typename?: "File" } + & Pick + )> } +); + export type OpenDirQueryVariables = Exact<{ path: Scalars["String"]; }>; @@ -75,6 +88,45 @@ export type OpenDirQuery = ( ); +export const GetFileDocument = gql` + query getFile($id: ID!) { + file(id: $id) { + id + name + size + contentType + etag + } +} + ` + +/** + * __useGetFileQuery__ + * + * To run a query within a React component, call `useGetFileQuery` and pass it any options that fit your needs. + * When your component renders, `useGetFileQuery` 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 } = useGetFileQuery({ + * variables: { + * id: // value for 'id' + * }, + * }); + */ +export function useGetFileQuery(baseOptions: Apollo.QueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(GetFileDocument, options) +} +export function useGetFileLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(GetFileDocument, options) +} +export type GetFileQueryHookResult = ReturnType; +export type GetFileLazyQueryHookResult = ReturnType; +export type GetFileQueryResult = Apollo.QueryResult; export const OpenDirDocument = gql` query openDir($path: String!) { files(path: $path) { diff --git a/src/graphql/getFile.graphql b/src/graphql/getFile.graphql new file mode 100644 index 0000000..104c744 --- /dev/null +++ b/src/graphql/getFile.graphql @@ -0,0 +1,9 @@ +query getFile($id: ID!){ + file(id: $id){ + id + name + size + contentType + etag + } +} \ No newline at end of file