Apply prettier config to app (#158)

districtr · Oct 31, 2024 · 848dda4 · 848dda4
1 parent a4e15cc
commit 848dda4
Show file tree

Hide file tree

Showing 30 changed files with 532 additions and 671 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/src/app/api/sentry-example-api/route.ts b/app/src/app/api/sentry-example-api/route.ts
@@ -1,9 +1,9 @@
-import { NextResponse } from "next/server";
+import {NextResponse} from 'next/server';
 
-export const dynamic = "force-dynamic";
+export const dynamic = 'force-dynamic';
 
 // A faulty API route to test Sentry's error monitoring
 export function GET() {
-  throw new Error("Sentry Example API Route Error");
-  return NextResponse.json({ data: "Testing Sentry Error..." });
+  throw new Error('Sentry Example API Route Error');
+  return NextResponse.json({data: 'Testing Sentry Error...'});
 }
diff --git a/app/src/app/components/ContextMenu.tsx b/app/src/app/components/ContextMenu.tsx
@@ -1,11 +1,11 @@
-import React from "react";
-import { ContextMenu, Text } from "@radix-ui/themes";
-import { useMapStore } from "@/app/store/mapStore";
+import React from 'react';
+import {ContextMenu, Text} from '@radix-ui/themes';
+import {useMapStore} from '@/app/store/mapStore';
 
 export const MapContextMenu: React.FC = () => {
-  const mapDocument = useMapStore((state) => state.mapDocument);
-  const contextMenu = useMapStore((state) => state.contextMenu);
-  const handleShatter = useMapStore((state) => state.handleShatter);
+  const mapDocument = useMapStore(state => state.mapDocument);
+  const contextMenu = useMapStore(state => state.contextMenu);
+  const handleShatter = useMapStore(state => state.handleShatter);
   if (!contextMenu) return null;
 
   const handleSelect = () => {
@@ -27,7 +27,7 @@ export const MapContextMenu: React.FC = () => {
         // also, if in the future we need the context menu outside of the map,
         // this sets us up to do that
         style={{
-          position: "fixed",
+          position: 'fixed',
           top: contextMenu.y,
           left: contextMenu.x,
         }}
@@ -39,10 +39,7 @@ export const MapContextMenu: React.FC = () => {
             </Text>
           </ContextMenu.Label>
         )}
-        <ContextMenu.Item
-          disabled={!mapDocument?.child_layer}
-          onSelect={handleSelect}
-        >
+        <ContextMenu.Item disabled={!mapDocument?.child_layer} onSelect={handleSelect}>
           Shatter
         </ContextMenu.Item>
       </ContextMenu.Content>

diff --git a/app/src/app/components/sidebar/BrushSizeSelector.tsx b/app/src/app/components/sidebar/BrushSizeSelector.tsx
@@ -1,5 +1,5 @@
-import { Slider, Flex, Heading, Text } from "@radix-ui/themes";
-import { useMapStore } from "../../store/mapStore";
+import {Slider, Flex, Heading, Text} from '@radix-ui/themes';
+import {useMapStore} from '../../store/mapStore';
 
 /**
  * BrushSizeSelector
@@ -11,22 +11,17 @@ import { useMapStore } from "../../store/mapStore";
  * @returns {JSX.Element} The component
  */
 export function BrushSizeSelector() {
-  const brushSize = useMapStore((state) => state.brushSize);
-  const setBrushSize = useMapStore((state) => state.setBrushSize);
+  const brushSize = useMapStore(state => state.brushSize);
+  const setBrushSize = useMapStore(state => state.setBrushSize);
 
   const handleChangeEnd = (value: Array<number>) => {
-    console.log("the final value size is", value);
+    console.log('the final value size is', value);
     setBrushSize(value.length ? value[0] : 0);
   };
 
   return (
     <Flex direction="row" gap="4" maxWidth="300px" mb="3" align="center">
-      <Heading
-        as="h4"
-        size="2"
-        weight="regular"
-        style={{ whiteSpace: "nowrap" }}
-      >
+      <Heading as="h4" size="2" weight="regular" style={{whiteSpace: 'nowrap'}}>
         Brush Size
       </Heading>
       <Slider

diff --git a/app/src/app/components/sidebar/GerryDBViewSelector.tsx b/app/src/app/components/sidebar/GerryDBViewSelector.tsx
@@ -1,50 +1,40 @@
-import { useState } from "react";
-import { Flex, Select } from "@radix-ui/themes";
-import { useMapStore } from "../../store/mapStore";
-import { document } from "@/app/utils/api/mutations";
+import {useState} from 'react';
+import {Flex, Select} from '@radix-ui/themes';
+import {useMapStore} from '../../store/mapStore';
+import {document} from '@/app/utils/api/mutations';
 
 export function GerryDBViewSelector() {
   const [limit, setLimit] = useState<number>(30);
   const [offset, setOffset] = useState<number>(0);
-  const mapDocument = useMapStore((state) => state.mapDocument);
-  const mapViews = useMapStore((state) => state.mapViews);
-  const { isPending, isError, data, error } = mapViews || {};
+  const mapDocument = useMapStore(state => state.mapDocument);
+  const mapViews = useMapStore(state => state.mapViews);
+  const {isPending, isError, data, error} = mapViews || {};
 
-  const selectedView = data?.find(
-    (view) => view.gerrydb_table_name === mapDocument?.gerrydb_table
-  );
+  const selectedView = data?.find(view => view.gerrydb_table_name === mapDocument?.gerrydb_table);
 
   const handleValueChange = (value: string) => {
-    console.log("Value changed: ", value);
-    const selectedDistrictrMap = data?.find((view) => view.name === value);
-    console.log("Selected view: ", selectedDistrictrMap);
+    console.log('Value changed: ', value);
+    const selectedDistrictrMap = data?.find(view => view.name === value);
+    console.log('Selected view: ', selectedDistrictrMap);
     if (
       !selectedDistrictrMap ||
       selectedDistrictrMap.gerrydb_table_name === mapDocument?.gerrydb_table
     ) {
-      console.log("No document or same document");
+      console.log('No document or same document');
       return;
     }
-    console.log("mutating to create new document");
-    document.mutate({ gerrydb_table: selectedDistrictrMap.gerrydb_table_name });
+    console.log('mutating to create new document');
+    document.mutate({gerrydb_table: selectedDistrictrMap.gerrydb_table_name});
   };
 
   if (isPending) return <div>Loading geographies... 🌎</div>;
 
   if (isError) return <div>Error loading geographies: {error?.message}</div>;
 
   return (
-    <Flex direction={"row"} width="100%" gap="3" align="center">
-      <Select.Root
-        size="3"
-        onValueChange={handleValueChange}
-        value={selectedView?.name}
-      >
-        <Select.Trigger
-          placeholder="Select a geography"
-          style={{ flexGrow: 1 }}
-          className="mr-1"
-        />
+    <Flex direction={'row'} width="100%" gap="3" align="center">
+      <Select.Root size="3" onValueChange={handleValueChange} value={selectedView?.name}>
+        <Select.Trigger placeholder="Select a geography" style={{flexGrow: 1}} className="mr-1" />
         <Select.Content>
           <Select.Group>
             <Select.Label>Districtr map options</Select.Label>

diff --git a/app/src/app/components/sidebar/Layers.tsx b/app/src/app/components/sidebar/Layers.tsx
@@ -1,11 +1,7 @@
-import { Heading, CheckboxGroup, Flex } from "@radix-ui/themes";
-import { useMapStore } from "@/app/store/mapStore";
-import {
-  COUNTY_LAYER_IDS,
-  BLOCK_LAYER_ID,
-  BLOCK_HOVER_LAYER_ID,
-} from "../../constants/layers";
-import { toggleLayerVisibility } from "../../utils/helpers";
+import {Heading, CheckboxGroup, Flex} from '@radix-ui/themes';
+import {useMapStore} from '@/app/store/mapStore';
+import {COUNTY_LAYER_IDS, BLOCK_LAYER_ID, BLOCK_HOVER_LAYER_ID} from '../../constants/layers';
+import {toggleLayerVisibility} from '../../utils/helpers';
 
 /** Layers
  * This component is responsible for rendering the layers that can be toggled
@@ -16,10 +12,10 @@ import { toggleLayerVisibility } from "../../utils/helpers";
  * - Support tribes and communities
  */
 export default function Layers() {
-  const mapRef = useMapStore((state) => state.getMapRef());
-  const mapDocument = useMapStore((state) => state.mapDocument);
-  const visibleLayerIds = useMapStore((state) => state.visibleLayerIds);
-  const updateVisibleLayerIds = useMapStore((state) => state.updateVisibleLayerIds);
+  const mapRef = useMapStore(state => state.getMapRef());
+  const mapDocument = useMapStore(state => state.mapDocument);
+  const visibleLayerIds = useMapStore(state => state.visibleLayerIds);
+  const updateVisibleLayerIds = useMapStore(state => state.updateVisibleLayerIds);
 
   const toggleLayers = (layerIds: string[]) => {
     if (!mapRef) return;
@@ -35,7 +31,7 @@ export default function Layers() {
       <CheckboxGroup.Root
         defaultValue={[]}
         name="districts"
-        value={visibleLayerIds.includes(BLOCK_LAYER_ID) ? ["1"] : []}
+        value={visibleLayerIds.includes(BLOCK_LAYER_ID) ? ['1'] : []}
       >
         <CheckboxGroup.Item
           value="1"
@@ -53,16 +49,9 @@ export default function Layers() {
       </Heading>
       <CheckboxGroup.Root
         name="contextualLayers"
-        value={
-          COUNTY_LAYER_IDS.every((layerId) => visibleLayerIds.includes(layerId))
-            ? ["1"]
-            : []
-        }
+        value={COUNTY_LAYER_IDS.every(layerId => visibleLayerIds.includes(layerId)) ? ['1'] : []}
       >
-        <CheckboxGroup.Item
-          value="1"
-          onClick={() => toggleLayers(COUNTY_LAYER_IDS)}
-        >
+        <CheckboxGroup.Item value="1" onClick={() => toggleLayers(COUNTY_LAYER_IDS)}>
           Show county boundaries
         </CheckboxGroup.Item>
         <CheckboxGroup.Item value="2" disabled>

diff --git a/app/src/app/components/sidebar/PaintByCounty.tsx b/app/src/app/components/sidebar/PaintByCounty.tsx
@@ -1,24 +1,21 @@
-import { Box, Text, Checkbox, Flex } from "@radix-ui/themes";
-import { useMapStore } from "@/app/store/mapStore";
-import { COUNTY_LAYER_IDS } from "../../constants/layers";
-import { useState, useEffect } from "react";
-import {
-  getFeaturesInBbox,
-  getFeaturesIntersectingCounties,
-} from "../../utils/helpers";
+import {Box, Text, Checkbox, Flex} from '@radix-ui/themes';
+import {useMapStore} from '@/app/store/mapStore';
+import {COUNTY_LAYER_IDS} from '../../constants/layers';
+import {useState, useEffect} from 'react';
+import {getFeaturesInBbox, getFeaturesIntersectingCounties} from '../../utils/helpers';
 
 export default function PaintByCounty() {
-  const mapRef = useMapStore((state) => state.getMapRef());
-  const addVisibleLayerIds = useMapStore((state) => state.addVisibleLayerIds);
-  const setPaintFunction = useMapStore((state) => state.setPaintFunction);
+  const mapRef = useMapStore(state => state.getMapRef());
+  const addVisibleLayerIds = useMapStore(state => state.addVisibleLayerIds);
+  const setPaintFunction = useMapStore(state => state.setPaintFunction);
   const [checked, setChecked] = useState(false);
 
   useEffect(() => {
     if (!mapRef) return;
 
     if (checked) {
-      COUNTY_LAYER_IDS.forEach((layerId) => {
-        mapRef.setLayoutProperty(layerId, "visibility", "visible");
+      COUNTY_LAYER_IDS.forEach(layerId => {
+        mapRef.setLayoutProperty(layerId, 'visibility', 'visible');
       });
       addVisibleLayerIds(COUNTY_LAYER_IDS);
       setPaintFunction(getFeaturesIntersectingCounties);
@@ -34,7 +31,7 @@ export default function PaintByCounty() {
           <Checkbox
             checked={checked}
             defaultChecked={false}
-            onClick={() => setChecked((prevIsChecked) => !prevIsChecked)}
+            onClick={() => setChecked(prevIsChecked => !prevIsChecked)}
           />
           Paint by County
         </Flex>

diff --git a/app/src/app/components/sidebar/RecentMapsModal.tsx b/app/src/app/components/sidebar/RecentMapsModal.tsx
@@ -1,6 +1,6 @@
-import { useMapStore } from "@/app/store/mapStore";
-import React from "react";
-import { Cross2Icon, CounterClockwiseClockIcon } from "@radix-ui/react-icons";
+import {useMapStore} from '@/app/store/mapStore';
+import React from 'react';
+import {Cross2Icon, CounterClockwiseClockIcon} from '@radix-ui/react-icons';
 import {
   Button,
   Flex,
@@ -11,25 +11,25 @@ import {
   TextField,
   IconButton,
   RadioCards,
-} from "@radix-ui/themes";
-import { usePathname, useSearchParams, useRouter } from "next/navigation";
-import { DocumentObject } from "../../utils/api/apiHandlers";
-type NamedDocumentObject = DocumentObject & { name?: string };
+} from '@radix-ui/themes';
+import {usePathname, useSearchParams, useRouter} from 'next/navigation';
+import {DocumentObject} from '../../utils/api/apiHandlers';
+type NamedDocumentObject = DocumentObject & {name?: string};
 export const RecentMapsModal = () => {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
-  const mapDocument = useMapStore((store) => store.mapDocument);
-  const userMaps = useMapStore((store) => store.userMaps);
-  const upcertUserMap = useMapStore((store) => store.upcertUserMap);
-  const setMapDocument = useMapStore((store) => store.setMapDocument);
+  const mapDocument = useMapStore(store => store.mapDocument);
+  const userMaps = useMapStore(store => store.userMaps);
+  const upcertUserMap = useMapStore(store => store.upcertUserMap);
+  const setMapDocument = useMapStore(store => store.setMapDocument);
   const [dialogOpen, setDialogOpen] = React.useState(false);
 
   const handleMapDocument = (data: NamedDocumentObject) => {
     setMapDocument(data);
     const urlParams = new URLSearchParams(searchParams.toString());
-    urlParams.set("document_id", data.document_id);
-    router.push(pathname + "?" + urlParams.toString());
+    urlParams.set('document_id', data.document_id);
+    router.push(pathname + '?' + urlParams.toString());
     // close dialog
     setDialogOpen(false);
   };
@@ -48,9 +48,7 @@ export const RecentMapsModal = () => {
       </Dialog.Trigger>
       <Dialog.Content className="max-w-[75vw]">
         <Flex align="center" className="mb-4">
-          <Dialog.Title className="m-0 text-xl font-bold flex-1">
-            Recent Maps
-          </Dialog.Title>
+          <Dialog.Title className="m-0 text-xl font-bold flex-1">Recent Maps</Dialog.Title>
 
           <Dialog.Close
             className="rounded-full size-[24px] hover:bg-red-100 p-1"
@@ -62,9 +60,7 @@ export const RecentMapsModal = () => {
         <Table.Root size="3" variant="surface">
           <Table.Header>
             <Table.Row>
-              <Table.ColumnHeaderCell pl=".5rem">
-                Map Name
-              </Table.ColumnHeaderCell>
+              <Table.ColumnHeaderCell pl=".5rem">Map Name</Table.ColumnHeaderCell>
               <Table.ColumnHeaderCell>Last Updated</Table.ColumnHeaderCell>
               <Table.ColumnHeaderCell>{/* load */}</Table.ColumnHeaderCell>
               <Table.ColumnHeaderCell>{/* delete */}</Table.ColumnHeaderCell>
@@ -76,7 +72,7 @@ export const RecentMapsModal = () => {
               <RecentMapsRow
                 key={i}
                 active={mapDocument?.document_id === userMap.document_id}
-                onChange={(userMapData) =>
+                onChange={userMapData =>
                   upcertUserMap({
                     userMapData,
                     userMapDocumentId: userMap.document_id,
@@ -98,25 +94,25 @@ const RecentMapsRow: React.FC<{
   onSelect: (data: NamedDocumentObject) => void;
   active: boolean;
   onChange?: (data?: NamedDocumentObject) => void;
-}> = ({ data, onSelect, active, onChange }) => {
+}> = ({data, onSelect, active, onChange}) => {
   const updatedDate = new Date(data.updated_at as string);
   const formattedData = updatedDate.toLocaleDateString();
   const name = data?.name || data.gerrydb_table;
 
   const handleChangeName = (name?: string) => {
-    name?.length && onChange?.({ ...data, name });
+    name?.length && onChange?.({...data, name});
   };
 
   return (
-    <Table.Row align="center" className={`${active ? "bg-yellow-100" : ""}`}>
+    <Table.Row align="center" className={`${active ? 'bg-yellow-100' : ''}`}>
       <Table.Cell pl=".5rem">
         {!!(active && onChange) ? (
           <Box maxWidth="200px">
             <TextField.Root
               placeholder={name}
               size="3"
               value={name}
-              onChange={(e) => handleChangeName(e.target.value)}
+              onChange={e => handleChangeName(e.target.value)}
             ></TextField.Root>
           </Box>
         ) : (