lazy load file index

This commit is contained in:
Will Scullin 2022-07-24 13:53:06 -07:00
parent 468fad9385
commit c7f36596e3
No known key found for this signature in database
GPG Key ID: 26DCD1042C6638CD

View File

@ -1,18 +1,19 @@
import { h, Fragment, JSX } from 'preact'; import { h, Fragment, JSX } from 'preact';
import { useCallback, useState } from 'preact/hooks'; import { useCallback, useEffect, useState } from 'preact/hooks';
import { DiskDescriptor, DriveNumber, NibbleFormat, NIBBLE_FORMATS } from '../formats/types'; import { DiskDescriptor, DriveNumber, NibbleFormat, NIBBLE_FORMATS } from '../formats/types';
import { Modal, ModalContent, ModalFooter } from './Modal'; import { Modal, ModalContent, ModalFooter } from './Modal';
import { loadLocalNibbleFile, loadJSON, getHashParts, setHashParts } from './util/files'; import { loadLocalNibbleFile, loadJSON, getHashParts, setHashParts } from './util/files';
import DiskII from '../cards/disk2'; import DiskII from '../cards/disk2';
import { ErrorModal } from './ErrorModal'; import { ErrorModal } from './ErrorModal';
import index from 'json/disks/index.json'; import { noAwait, spawn } from './util/promises';
import { noAwait } from './util/promises';
import { useHash } from './hooks/useHash'; import { useHash } from './hooks/useHash';
import { FileChooser, FilePickerAcceptType } from './FileChooser'; import { FileChooser, FilePickerAcceptType } from './FileChooser';
import styles from './css/FileModal.module.css'; import styles from './css/FileModal.module.css';
const indexJSON = import('json/disks/index.json');
const DISK_TYPES: FilePickerAcceptType[] = [ const DISK_TYPES: FilePickerAcceptType[] = [
{ {
description: 'Disk Images', description: 'Disk Images',
@ -20,21 +21,6 @@ const DISK_TYPES: FilePickerAcceptType[] = [
} }
]; ];
const categories = index.reduce<Record<string, DiskDescriptor[]>>(
(
acc: Record<string, DiskDescriptor[]>,
disk: DiskDescriptor
) => {
const category = disk.category || 'Misc';
acc[category] = [disk, ...(acc[category] || [])];
return acc;
},
{}
);
const categoryNames = Object.keys(categories).sort();
export type NibbleFileCallback = ( export type NibbleFileCallback = (
name: string, name: string,
fmt: NibbleFormat, fmt: NibbleFormat,
@ -48,6 +34,12 @@ interface FileModalProps {
onClose: (closeBox?: boolean) => void; onClose: (closeBox?: boolean) => void;
} }
interface IndexEntry {
filename: string;
name: string;
category: string;
}
export const FileModal = ({ disk2, number, onClose, isOpen }: FileModalProps) => { export const FileModal = ({ disk2, number, onClose, isOpen }: FileModalProps) => {
const [busy, setBusy] = useState<boolean>(false); const [busy, setBusy] = useState<boolean>(false);
const [empty, setEmpty] = useState<boolean>(true); const [empty, setEmpty] = useState<boolean>(true);
@ -55,8 +47,16 @@ export const FileModal = ({ disk2, number, onClose, isOpen }: FileModalProps) =>
const [handles, setHandles] = useState<FileSystemFileHandle[]>(); const [handles, setHandles] = useState<FileSystemFileHandle[]>();
const [filename, setFilename] = useState<string>(); const [filename, setFilename] = useState<string>();
const [error, setError] = useState<unknown>(); const [error, setError] = useState<unknown>();
const [index, setIndex] = useState<IndexEntry[]>();
const hash = useHash(); const hash = useHash();
useEffect(() => {
spawn(async () => {
const index = (await indexJSON).default;
setIndex(index);
});
}, []);
const doCancel = useCallback(() => onClose(true), [onClose]); const doCancel = useCallback(() => onClose(true), [onClose]);
const doOpen = useCallback(async () => { const doOpen = useCallback(async () => {
@ -102,6 +102,24 @@ export const FileModal = ({ disk2, number, onClose, isOpen }: FileModalProps) =>
}, [] }, []
); );
if (!index) {
return null;
}
const categories = index.reduce<Record<string, DiskDescriptor[]>>(
(
acc: Record<string, DiskDescriptor[]>,
disk: DiskDescriptor
) => {
const category = disk.category || 'Misc';
acc[category] = [disk, ...(acc[category] || [])];
return acc;
},
{}
);
const categoryNames = Object.keys(categories).sort();
const disks = category ? categories[category] : []; const disks = category ? categories[category] : [];
return ( return (