mirror of
https://github.com/protomaps/PMTiles.git
synced 2026-02-04 10:51:07 +00:00
Inspector: fix types and cleanup effects [#49]
This commit is contained in:
@@ -57,14 +57,7 @@ function App() {
|
||||
globalStyles();
|
||||
|
||||
let [errorDisplay, setErrorDisplay] = useState<string | undefined>();
|
||||
let [file, setFileRaw] = useState<PMTiles | undefined>();
|
||||
|
||||
let setFile = (file: PMTiles) => {
|
||||
setFileRaw(file);
|
||||
file.getHeader().catch((e) => {
|
||||
setErrorDisplay(e.message);
|
||||
});
|
||||
};
|
||||
let [file, setFile] = useState<PMTiles | undefined>();
|
||||
|
||||
// initial load
|
||||
useEffect(() => {
|
||||
@@ -75,6 +68,14 @@ function App() {
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (file) {
|
||||
file.getHeader().catch((e) => {
|
||||
setErrorDisplay(e.message);
|
||||
});
|
||||
}
|
||||
}, [file]);
|
||||
|
||||
// maintaining URL state
|
||||
useEffect(() => {
|
||||
const url = new URL(window.location.href);
|
||||
@@ -106,7 +107,7 @@ function App() {
|
||||
</GithubLink>
|
||||
</Header>
|
||||
{file ? <Loader file={file} /> : <Start setFile={setFile} />}
|
||||
<DialogPrimitive.Root open={errorDisplay}>
|
||||
<DialogPrimitive.Root open={errorDisplay !== undefined}>
|
||||
<DialogPrimitive.Portal>
|
||||
<StyledOverlay />
|
||||
<StyledContent
|
||||
|
||||
@@ -100,13 +100,12 @@ const ExampleList = styled("div", {
|
||||
const EXAMPLE_FILES = [
|
||||
"https://protomaps.github.io/PMTiles/protomaps(vector)ODbL_firenze.pmtiles",
|
||||
"https://protomaps.github.io/PMTiles/stamen_toner(raster)CC-BY+ODbL_z3.pmtiles",
|
||||
"https://pub-9288c68512ed46eca46ddcade307709b.r2.dev/protomaps-sample-datasets/cb_2018_us_zcta510_500k.pmtiles"
|
||||
"https://pub-9288c68512ed46eca46ddcade307709b.r2.dev/protomaps-sample-datasets/cb_2018_us_zcta510_500k.pmtiles",
|
||||
];
|
||||
|
||||
function Start(props: {
|
||||
setFile: Dispatch<SetStateAction<PMTiles | undefined>>;
|
||||
}) {
|
||||
|
||||
const onDrop = useCallback((acceptedFiles: File[]) => {
|
||||
props.setFile(new PMTiles(new FileAPISource(acceptedFiles[0])));
|
||||
}, []);
|
||||
|
||||
Reference in New Issue
Block a user