From ce0dba5ed4d0e90b996b7892b6e7bbdab174b37b Mon Sep 17 00:00:00 2001
From: Brandon Liu <bdon@bdon.org>
Date: Sun, 4 Dec 2022 23:57:37 +0800
Subject: [PATCH] Inspector: fix types and cleanup effects [#49]

---
 app/src/App.tsx   | 19 ++++++++++---------
 app/src/Start.tsx |  5 ++---
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/src/App.tsx b/app/src/App.tsx
index b42e3ff..3e0f5c3 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -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
diff --git a/app/src/Start.tsx b/app/src/Start.tsx
index 024077d..a166353 100644
--- a/app/src/Start.tsx
+++ b/app/src/Start.tsx
@@ -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])));
   }, []);