basic file opening

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 => (<FileBrowserElement
 							key={v?.id}
 							dir={v}
-							onClick={(data)=>{
-								setPath(data.id)
+							onClick={(dir)=>{
+								setPath(dir.id)
 							}}
 						/>))}
 							
 						{ data?.files.map(v => (<FileBrowserElement 
 							key={v?.id}
 							file={v}
+							onClick={(file)=>{
+								setOpenFileId(file.id)
+								setShowFile(true)
+							}}
 						/>))}
 					</tbody>
 				</table>
 			</div>
+			{<FileOpen id={openFileId} show={showFile} onCloseClick={()=>{
+				setShowFile(false)
+			}} />}
 		</div>
 	)
 }

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> = (props) => {
+
+	const { data } = useGetFileQuery({
+		variables:{
+			id: props.id
+		}
+	})
+
+	let opener = <div>TODO</div>
+	
+	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 = <ImageOpener file={data?.file} />
+		}else if (data.file.contentType?.startsWith("text/")){
+			opener = <TextOpener file={data.file} />
+		}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 = <ImageOpener file={data.file} />
+				break
+			case "txt":
+			case "md":
+				opener = <TextOpener file={data.file} />
+				break
+			default:
+				opener = <ImageOpener file={data?.file} />
+				break
+			}
+		}
+	}
+
+	return (
+		<div className={`modal modal-sm ${props.show ? "active":""}`}>
+			<a className="modal-overlay" onClick={()=>{
+				props.onCloseClick?.()
+			}}>❌</a>
+			<div className="modal-container">
+				{opener}
+			</div>
+		</div>
+	)
+}
+
+FileOpen.propTypes = {
+	id: PropTypes.string.isRequired,
+	show: PropTypes.bool.isRequired,
+	onCloseClick: PropTypes.func
+}
+
+export default FileOpen

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> = (props) => {
+	return (
+		<div className={style.imageOpener}>
+			<img className="img-responsive img-fit-cover" src={genDownloadLink(props.file.id)}/>
+		</div>
+	)
+}
+
+ImageOpener.propTypes = {
+	file: PropTypes.any.isRequired
+}
+
+export default ImageOpener

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> = (props) => {
+	return (
+		<div>
+			<textarea>
+				{props.file.name}
+			</textarea>
+		</div>
+	)
+}
+
+TextOpener.propTypes = {
+	file: PropTypes.any.isRequired,
+}
+
+export default TextOpener