Apple-2-Tools/apple2js
1
0
Fork 0
mirror of https://github.com/whscullin/apple2js.git synced 2024-01-12 14:14:38 +00:00
Code Issues Projects Releases Wiki Activity

lazy load file index

Browse Source
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
1 changed files with 36 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
js/components/FileModal.tsx
View File

@ -1,18 +1,19 @@
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 { Modal, ModalContent, ModalFooter } from './Modal';
import { loadLocalNibbleFile, loadJSON, getHashParts, setHashParts } from './util/files';
import DiskII from '../cards/disk2';
import { ErrorModal } from './ErrorModal';
import index from 'json/disks/index.json';
import { noAwait } from './util/promises';
import { noAwait, spawn } from './util/promises';
import { useHash } from './hooks/useHash';
import { FileChooser, FilePickerAcceptType } from './FileChooser';
import styles from './css/FileModal.module.css';
const indexJSON = import('json/disks/index.json');
const DISK_TYPES: FilePickerAcceptType[] = [
{
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 = (
name: string,
fmt: NibbleFormat,
@ -48,6 +34,12 @@ interface FileModalProps {
onClose: (closeBox?: boolean) => void;
}
interface IndexEntry {
filename: string;
name: string;
category: string;
}
export const FileModal = ({ disk2, number, onClose, isOpen }: FileModalProps) => {
const [busy, setBusy] = useState<boolean>(false);
const [empty, setEmpty] = useState<boolean>(true);
@ -55,8 +47,16 @@ export const FileModal = ({ disk2, number, onClose, isOpen }: FileModalProps) =>
const [handles, setHandles] = useState<FileSystemFileHandle[]>();
const [filename, setFilename] = useState<string>();
const [error, setError] = useState<unknown>();
const [index, setIndex] = useState<IndexEntry[]>();
const hash = useHash();
useEffect(() => {
spawn(async () => {
const index = (await indexJSON).default;
setIndex(index);
});
}, []);
const doCancel = useCallback(() => onClose(true), [onClose]);
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] : [];
return (