s3browser-frontend/src/components/FileOpen.tsx

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 AudioOpener from "./AudioOpener"

interface Props {
    id: string
	show: boolean
	onCloseClick?: ()=>void
}

const FileOpen: React.FC<Props> = (props) => {

	if (!props.id) {
		return <></>
	}

	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} active={props.show} />
		}else if (data.file.contentType?.startsWith("text/")){
			opener = <TextOpener file={data.file} active={props.show} />
		}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} active={props.show} />
				break
			case "txt":
			case "md":
				opener = <TextOpener file={data.file} active={props.show} />
				break
			case "mp3":
				opener = <AudioOpener file={data.file} active={props.show} />
				break
			default:
				opener = <ImageOpener file={data?.file} active={props.show} />
				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