mirrors/PMTiles
1
0
Fork 0
mirror of https://github.com/protomaps/PMTiles.git synced 2026-02-04 10:51:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Inspector: fix types and cleanup effects [#49]

Browse Source
This commit is contained in:
Brandon Liu
2022-12-04 23:57:37 +08:00
parent 382225d1da
commit ce0dba5ed4
2 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/src/App.tsx
View File

@@ -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

5
app/src/Start.tsx
View File

@@ -45,7 +45,7 @@ const Container = styled("div", {
const Button = styled("button", {
padding: "$1 $2",
marginBottom:"$1",
marginBottom: "$1",
borderRadius: "$2",
cursor: "pointer",
variants: {
@@ -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])));
}, []);