prettify source code

src/App.jsx

@@ -1,12 +1,9 @@
-import {
-  RouterProvider,
-} from "@tanstack/react-router";
+import { RouterProvider } from "@tanstack/react-router";
 import { QueryClientProvider } from "@tanstack/react-query";
 
 import router from "./router";
 import queryClient from "./queryClient";
 
-
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>

src/api.js

@@ -1,8 +1,8 @@
-import axios from "axios"
+import axios from "axios";
 
 const mapApi = axios.create({
   withCredentials: true,
-  baseURL: window.API_URL
-})
+  baseURL: window.API_URL,
+});
 
 export default mapApi;

src/app.css

@@ -1,6 +1,6 @@
-@import 'maplibre-gl/dist/maplibre-gl.css';
-@import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css';
-@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css';
+@import "maplibre-gl/dist/maplibre-gl.css";
+@import "@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css";
+@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css";
 
 html,
 body {
@@ -9,21 +9,21 @@ body {
 }
 
 .map {
-    height: 100%;
-    z-index: 0;
+  height: 100%;
+  z-index: 0;
 }
 
 .map-wrap {
-    flex-grow: 1;
+  flex-grow: 1;
 }
 #app-wrap {
-    height: 100vh;
-    overflow-y: hide;
+  height: 100vh;
+  overflow-y: hide;
 }
 #sidebar {
-    width: 400px;
-    overflow-y: auto;
-    padding: 0 0.5rem;
+  width: 400px;
+  overflow-y: auto;
+  padding: 0 0.5rem;
 }
 
 .maplibregl-popup {
@@ -38,7 +38,8 @@ table tr:nth-child(odd) {
   padding: 0.5rem;
 }
 
-h5, h3 {
+h5,
+h3 {
   margin: 0;
   padding: 1rem 0;
 }
@@ -51,4 +52,4 @@ details summary + div {
   margin-left: 0.5rem;
   max-height: 200px;
   overflow-y: scroll;
-}
+}

src/components/ErrorWrapper.jsx

@@ -1,8 +1,3 @@
-
-export default function ErrorWrapper({ title, children }) {
-    return (
-        <div>
-            {children}
-        </div>
-    )
-}
+export default function ErrorWrapper({ children }) {
+  return <div>{children}</div>;
+}

src/components/Footer.jsx

@@ -1,15 +1,32 @@
-import { Element } from 'react-bulma-components';
-import logo from '../assets/logowhite.png';
-import React from 'react';
+import { Element } from "react-bulma-components";
+import logo from "../assets/logowhite.png";
 
 export default function Footer() {
-    return (
-        <Element id="footer" backgroundColor='primary' px={5} display='flex' alignItems='baseline' py={1} justifyContent='center'>
-            <Element className='has-text-white' href="https://www.nina.no" renderAs='a' display='flex' alignItems='baseline'>
-                <img src={logo} alt="nina logo" className='logo' />
-                <Element className='has-text-white is-size-7' ml={2}>Norsk institutt for naturforskning - www.nina.no</Element>
-            </Element>
-            <Element className='has-text-white is-size-7' ml="auto">Samarbeid og kunnskap for framtidas miljøløsninger</Element>
+  return (
+    <Element
+      id="footer"
+      backgroundColor="primary"
+      px={5}
+      display="flex"
+      alignItems="baseline"
+      py={1}
+      justifyContent="center"
+    >
+      <Element
+        className="has-text-white"
+        href="https://www.nina.no"
+        renderAs="a"
+        display="flex"
+        alignItems="baseline"
+      >
+        <img src={logo} alt="nina logo" className="logo" />
+        <Element className="has-text-white is-size-7" ml={2}>
+          Norsk institutt for naturforskning - www.nina.no
         </Element>
-    )
-}
+      </Element>
+      <Element className="has-text-white is-size-7" ml="auto">
+        Samarbeid og kunnskap for framtidas miljøløsninger
+      </Element>
+    </Element>
+  );
+}

src/components/plausible.js

@@ -1,27 +1,24 @@
-import Plausible from 'plausible-tracker'
+/* eslint-disable no-inner-declarations */
+import Plausible from "plausible-tracker";
 
-export let trackEvent = () => console.debug('tracking not configured');
+export let trackEvent = () => console.debug("tracking not configured");
 
-function sendEvent(
-  eventName,
-  data,
-  options
-) {
+function sendEvent(eventName, data, options) {
   const isLocalhost =
     /^localhost$|^127(?:\.[0-9]+){0,2}\.[0-9]+$|^(?:0*:)*?:?0*1$/.test(
-      location.hostname
-    ) || location.protocol === 'file:';
+      location.hostname,
+    ) || location.protocol === "file:";
 
   if (!data.trackLocalhost && isLocalhost) {
     return console.warn(
-      '[Plausible] Ignoring event because website is running locally'
+      "[Plausible] Ignoring event because website is running locally",
     );
   }
 
   try {
-    if (window.localStorage.plausible_ignore === 'true') {
+    if (window.localStorage.plausible_ignore === "true") {
       return console.warn(
-        '[Plausible] Ignoring event because "plausible_ignore" is set to "true" in localStorage'
+        '[Plausible] Ignoring event because "plausible_ignore" is set to "true" in localStorage',
       );
     }
   } catch (e) {
@@ -41,60 +38,58 @@ function sendEvent(
   navigator.sendBeacon(`${data.apiHost}/api/event`, JSON.stringify(payload));
 }
 
-function trackClick(event) {
-  trackEvent('Outbound Link: Click', { props: { url: this.href } });
+function trackClick() {
+  trackEvent("Outbound Link: Click", { props: { url: this.href } });
 }
 
 if (window.PLAUSIBLE) {
-
   const config = {
     hashMode: false,
     trackLocalhost: false,
     url: location.href,
     domain: location.hostname,
     referrer: document.referrer || null,
     deviceWidth: window.innerWidth,
-    apiHost: 'https://plausible.io',
+    apiHost: "https://plausible.io",
     ...window.PLAUSIBLE,
   };
 
   const { enableAutoPageviews } = Plausible(config);
 
-  trackEvent = (eventName, options, eventData) => sendEvent(eventName, { ...config, ...eventData }, options);
+  trackEvent = (eventName, options, eventData) =>
+    sendEvent(eventName, { ...config, ...eventData }, options);
 
   enableAutoPageviews();
 
-  // eslint-disable-next-line functional/prefer-readonly-type
   const tracked = new Set();
 
-
   function addNode(node) {
     if (node instanceof HTMLAnchorElement) {
       if (node.host !== location.host) {
-        node.addEventListener('click', trackClick);
+        node.addEventListener("click", trackClick);
         tracked.add(node);
       }
-    } /* istanbul ignore next */ else if ('querySelectorAll' in node) {
-      node.querySelectorAll('a').forEach(addNode);
+    } /* istanbul ignore next */ else if ("querySelectorAll" in node) {
+      node.querySelectorAll("a").forEach(addNode);
     }
   }
 
   function removeNode(node) {
     if (node instanceof HTMLAnchorElement) {
-      node.removeEventListener('click', trackClick);
+      node.removeEventListener("click", trackClick);
       tracked.delete(node);
-    } /* istanbul ignore next */ else if ('querySelectorAll' in node) {
-      node.querySelectorAll('a').forEach(removeNode);
+    } /* istanbul ignore next */ else if ("querySelectorAll" in node) {
+      node.querySelectorAll("a").forEach(removeNode);
     }
   }
 
   const observer = new MutationObserver((mutations) => {
     mutations.forEach((mutation) => {
-      if (mutation.type === 'attributes') {
+      if (mutation.type === "attributes") {
         // Handle changed href
         removeNode(mutation.target);
         addNode(mutation.target);
-      } /* istanbul ignore next */ else if (mutation.type === 'childList') {
+      } /* istanbul ignore next */ else if (mutation.type === "childList") {
         // Handle added nodes
         mutation.addedNodes.forEach(addNode);
         // Handle removed nodes
@@ -104,13 +99,13 @@ if (window.PLAUSIBLE) {
   });
 
   // Track existing nodes
-  document.querySelectorAll('a').forEach(addNode);
+  document.querySelectorAll("a").forEach(addNode);
 
   // Observe mutations
   observer.observe(document, {
     subtree: true,
     childList: true,
     attributes: true,
-    attributeFilter: ['href'],
+    attributeFilter: ["href"],
   });
 }

src/components/sentry.js

@@ -1,22 +1,22 @@
 import * as Sentry from "@sentry/react";
 
 if (window.SENTRY_DSN) {
-    Sentry.init({
-        dsn: window.SENTRY_DSN,
-        environment: window.SENTRY_ENV,
-        integrations: [
-            Sentry.browserTracingIntegration(),
-            Sentry.replayIntegration({
-                maskAllText: false,
-                blockAllMedia: false,
-            }),
-        ],
-        // Performance Monitoring
-        tracesSampleRate: 1.0, //  Capture 100% of the transactions
-        // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
-        // tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
-        // Session Replay
-        replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
-        replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
-    });
-}
+  Sentry.init({
+    dsn: window.SENTRY_DSN,
+    environment: window.SENTRY_ENV,
+    integrations: [
+      Sentry.browserTracingIntegration(),
+      Sentry.replayIntegration({
+        maskAllText: false,
+        blockAllMedia: false,
+      }),
+    ],
+    // Performance Monitoring
+    tracesSampleRate: 1.0, //  Capture 100% of the transactions
+    // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+    // tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
+    // Session Replay
+    replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+    replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+  });
+}

src/constants.js

@@ -1,7 +1,6 @@
-
-export const BACKGROUND_LAYER_ID = '###BACKGROUND###';
+export const BACKGROUND_LAYER_ID = "###BACKGROUND###";
 export const BACKGROUND_TILES = {
-    x: 8,
-    y: 4,
-    z: 4,
-}
+  x: 8,
+  y: 4,
+  z: 4,
+};

src/hooks/useMetadata.js

@@ -1,20 +1,23 @@
 import useSWR from "swr";
 
-const fetcher = async url => {
-  const res = await fetch(url, { credentials: 'include' })
- 
+const fetcher = async (url) => {
+  const res = await fetch(url, { credentials: "include" });
+
   // If the status code is not in the range 200-299,
   // we still try to parse and throw it.
   if (!res.ok) {
-    const error = new Error('An error occurred while fetching the data.')
+    const error = new Error("An error occurred while fetching the data.");
     // Attach extra info to the error object.
-    error.info = await res.json()
-    error.status = res.status
-    throw error
+    error.info = await res.json();
+    error.status = res.status;
+    throw error;
   }
- 
-  return res.json()
-}
+
+  return res.json();
+};
 export default function useMetadata() {
-  return useSWR(window.MAPS_API_URL.replace('{MAP_ID}', location.hash.slice(1)), fetcher);
+  return useSWR(
+    window.MAPS_API_URL.replace("{MAP_ID}", location.hash.slice(1)),
+    fetcher,
+  );
 }

src/lib/utils.js

@@ -1,2 +1 @@
-
 export class NotFoundError extends Error {}

src/main.jsx

@@ -1,12 +1,12 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import './components/plausible.js';
-import './components/sentry.js';
-import App from './App.jsx'
-import './styles/app.scss'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./components/plausible.js";
+import "./components/sentry.js";
+import App from "./App.jsx";
+import "./styles/app.scss";
 
-ReactDOM.createRoot(document.getElementById('app')).render(
+ReactDOM.createRoot(document.getElementById("app")).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-)
+);