applying linter fixes to viewer /app [#49] (#344)

Add biome linter and configuration to /app viewer.

app/biome.json

@@ -0,0 +1,20 @@
+{
+  "javascript": {
+    "formatter": {
+      "trailingComma": "es5"
+    }
+  },
+  "formatter": {
+    "indentStyle": "space"
+  },
+  "linter": {
+    "rules": {
+      "style": {
+        "useNamingConvention": {}
+      },
+      "nursery": {
+        "noUnusedImports": {}
+      }
+    }
+  }
+}

app/package.json

@@ -30,6 +30,7 @@
     "react-use": "^17.4.0"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.5.3",
     "@maplibre/maplibre-gl-style-spec": "^19.3.1",
     "@types/d3-path": "^3.0.0",
     "@types/d3-scale-chromatic": "^3.0.0",

app/src/App.tsx

@@ -1,11 +1,11 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
 import React, { useState, useEffect } from "react";
-import { styled, globalStyles } from "./stitches.config";
 import { PMTiles } from "../../js/index";
-import { GitHubLogoIcon } from "@radix-ui/react-icons";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { globalStyles, styled } from "./stitches.config";
 
-import Start from "./Start";
 import Loader from "./Loader";
+import Start from "./Start";
 
 const Header = styled("div", {
   height: "$4",
@@ -57,15 +57,15 @@ const GIT_SHA = (import.meta.env.VITE_GIT_SHA || "").substr(0, 8);
 function App() {
   globalStyles();
 
-  let [errorDisplay, setErrorDisplay] = useState<string | undefined>();
-  let [file, setFile] = useState<PMTiles | undefined>();
-  let [mapHashPassed, setMapHashPassed] = useState<boolean>(false);
+  const [errorDisplay, setErrorDisplay] = useState<string | undefined>();
+  const [file, setFile] = useState<PMTiles | undefined>();
+  const [mapHashPassed, setMapHashPassed] = useState<boolean>(false);
 
   // initial load
   useEffect(() => {
     const loadUrl = new URLSearchParams(location.search).get("url");
     if (loadUrl) {
-      let initialValue = new PMTiles(loadUrl);
+      const initialValue = new PMTiles(loadUrl);
       setFile(initialValue);
     }
     if (location.hash.includes("map")) {
@@ -84,7 +84,7 @@ function App() {
   // maintaining URL state
   useEffect(() => {
     const url = new URL(window.location.href);
-    if (file && file.source.getKey().startsWith("http")) {
+    if (file?.source.getKey().startsWith("http")) {
       url.searchParams.set("url", file.source.getKey());
       history.pushState(null, "", url.toString());
     } else {
@@ -93,7 +93,7 @@ function App() {
     }
   }, [file]);
 
-  let clear = (event: React.MouseEvent<HTMLAnchorElement>) => {
+  const clear = (event: React.MouseEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     setFile(undefined);
   };