mirrors/PMTiles
1
0
Fork 0
mirror of https://github.com/protomaps/PMTiles.git synced 2026-02-04 19:01:08 +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(); globalStyles();
let [errorDisplay, setErrorDisplay] = useState<string | undefined>(); let [errorDisplay, setErrorDisplay] = useState<string | undefined>();
let [file, setFileRaw] = useState<PMTiles | undefined>(); let [file, setFile] = useState<PMTiles | undefined>();
let setFile = (file: PMTiles) => {
setFileRaw(file);
file.getHeader().catch((e) => {
setErrorDisplay(e.message);
});
};
// initial load // initial load
useEffect(() => { useEffect(() => {
@@ -75,6 +68,14 @@ function App() {
} }
}, []); }, []);
useEffect(() => {
if (file) {
file.getHeader().catch((e) => {
setErrorDisplay(e.message);
});
}
}, [file]);
// maintaining URL state // maintaining URL state
useEffect(() => { useEffect(() => {
const url = new URL(window.location.href); const url = new URL(window.location.href);
@@ -106,7 +107,7 @@ function App() {
</GithubLink> </GithubLink>
</Header> </Header>
{file ? <Loader file={file} /> : <Start setFile={setFile} />} {file ? <Loader file={file} /> : <Start setFile={setFile} />}
<DialogPrimitive.Root open={errorDisplay}> <DialogPrimitive.Root open={errorDisplay !== undefined}>
<DialogPrimitive.Portal> <DialogPrimitive.Portal>
<StyledOverlay /> <StyledOverlay />
<StyledContent <StyledContent

5
app/src/Start.tsx
View File

@@ -45,7 +45,7 @@ const Container = styled("div", {
const Button = styled("button", { const Button = styled("button", {
padding: "$1 $2", padding: "$1 $2",
marginBottom:"$1", marginBottom: "$1",
borderRadius: "$2", borderRadius: "$2",
cursor: "pointer", cursor: "pointer",
variants: { variants: {
@@ -100,13 +100,12 @@ const ExampleList = styled("div", {
const EXAMPLE_FILES = [ const EXAMPLE_FILES = [
"https://protomaps.github.io/PMTiles/protomaps(vector)ODbL_firenze.pmtiles", "https://protomaps.github.io/PMTiles/protomaps(vector)ODbL_firenze.pmtiles",
"https://protomaps.github.io/PMTiles/stamen_toner(raster)CC-BY+ODbL_z3.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: { function Start(props: {
setFile: Dispatch<SetStateAction<PMTiles | undefined>>; setFile: Dispatch<SetStateAction<PMTiles | undefined>>;
}) { }) {
const onDrop = useCallback((acceptedFiles: File[]) => { const onDrop = useCallback((acceptedFiles: File[]) => {
props.setFile(new PMTiles(new FileAPISource(acceptedFiles[0]))); props.setFile(new PMTiles(new FileAPISource(acceptedFiles[0])));
}, []); }, []);