motto/src/app/[...file]/content.tsx

'use client'

import { useState, useEffect } from 'react'

import NetworkError     from './types/error/network';
import ContentTypeError from './types/error/content_type';
import Image            from './types/image';
import Terminal         from './types/terminal';
import Text             from './types/text';

type ContentType<T> = {
	content_type: RegExp,
	extension: RegExp,
	emit: () => undefined | Processor<T>,
};
type Processor<T> = {
	process:     (response: Response) => Promise<T>,
	postprocess: (data: T) => undefined,
};

function not_match(regex: RegExp | undefined, str: string) {
	return !(regex ?? /(?:)/).test(str);
}

function is_type(response: Response, type: ContentType<Any>) {
	if (not_match(type.content_type, response.headers.get('Content-Type').split(';')[0])) {
		return false;
	} else if (not_match(type.path, window.location.pathname)) {
		return false;
	}
	return true;
}

export default function Content({ src }: { src: string}) {
	const [content, set_content] = useState();

	const recognized_types: ContentType<Any>[] = [{
		content_type: /image\/\w+/,
		emit: () => {
			set_content(<Image src={src} />);
		},
	}, {
		content_type: /application\/octet-stream/,
		path: /.*\.term/,
		emit: () => {
			return {
				process: (response: Response) => {
					return response.text();
				},
				postprocess: (data: string) => {
					set_content(<Terminal text={data} />);
				}
			};
		}
	}, {
		content_type: /(text\/\w+)|(application\/octet-stream)/,
		emit: () => {
			return {
				process: (response: Response) => {
					return response.text();
				},
				postprocess: (data: string) => {
					set_content(<Text text={data} />);
				}
			};
		}
	}];

	useEffect(() => {
		if (content == undefined) {
			const result = fetch(src)
				.then(response => {
					const content_type = response.headers.get('Content-Type').split(';')[0];
					for (const type of recognized_types) {
						if (type.content_type.test(content_type)) {
							const emitted = type.emit();
							if (emitted != undefined) {
								result.then(emitted.postprocess);
								return emitted.process(response);
							}
							return;
						}
					}
					set_content(<ContentTypeError content_type={content_type} />);
				})
				.catch(err => {
					set_content(<NetworkError err={err} />);
				});
		}
	}, []);

	return content ?? <p>Loading...</p>;
}