69 lines
1.5 KiB
TypeScript
69 lines
1.5 KiB
TypeScript
import React from "react"
|
|
import PropTypes from "prop-types"
|
|
import { useGetFileQuery } from "../generated/graphql"
|
|
import ImageOpener from "./ImageOpener"
|
|
import TextOpener from "./TextOpener"
|
|
import Modal from "./Modal"
|
|
import { useState } from "react"
|
|
|
|
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 (
|
|
<Modal onCloseClick={()=>{
|
|
props.onCloseClick?.()
|
|
}} show={props.show} >
|
|
{opener}
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
FileOpen.propTypes = {
|
|
id: PropTypes.string.isRequired,
|
|
show: PropTypes.bool.isRequired,
|
|
onCloseClick: PropTypes.func
|
|
}
|
|
|
|
export default FileOpen
|