lint

app/api/names/route.tsx

@@ -1,4 +1,4 @@
-import { ImageResponse } from "next/og"
+// import { ImageResponse } from "next/og"
 import { findNames } from "utils/getFilteredNames"
 // App router includes @vercel/og.
 // No need to install it.

app/tract/[tract]/page.tsx

@@ -1,7 +1,7 @@
+import Head from "next/head"
 import React from "react"
 import ReportLayout from "components/ReportLayout"
 import { getContentDirs } from "utils/contentDirs"
-import Head from "next/head"
 
 type TractRouteParams = {
   params: {

components/AutoComplete/AutoComplete.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useCallback, useRef } from "react"
-import { TextField, Box } from "@radix-ui/themes"
+import { Box, TextField } from "@radix-ui/themes"
 import debounce from "lodash.debounce"
+import React, { useCallback, useEffect, useRef, useState } from "react"
 
 interface AutoCompleteProps {
   dataCallback: (s: string) => Promise<Array<Record<string, unknown>>>
@@ -25,6 +25,7 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
   const [isFocused, setIsFocused] = useState(false)
   const containerRef = useRef<HTMLDivElement>(null)
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const fetchResults = useCallback(
     debounce(async (searchText: string) => {
       if (searchText) {
@@ -41,6 +42,7 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
         setResults([])
       }
     }, delay),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [debounce, dataCallback]
   )
 
@@ -67,22 +69,22 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
         className="
           w-full max-w-none rounded border border-gray-300 bg-none p-2 
           [&>*]:w-full
-          [&>input]:bg-black/0
           [&>*]:text-white
+          [&>input]:bg-black/0
           
           "
       >
         <TextField.Slot />
       </TextField.Root>
       {isFocused &&
         (isLoading ? (
-          <Box className="absolute mt-1 w-full rounded border bg-neutral-900 border-gray-300 p-2">Loading...</Box>
+          <Box className="absolute mt-1 w-full rounded border border-gray-300 bg-neutral-900 p-2">Loading...</Box>
         ) : (
           results.length > 0 && (
-            <Box className="absolute mt-1 w-full rounded border bg-neutral-900 border-gray-300 p-2">
+            <Box className="absolute mt-1 w-full rounded border border-gray-300 bg-neutral-900 p-2">
               <ul>
                 {results.map((item, index) => (
-                  <li key={index} className="hover:bg-primary-500 cursor-pointer p-1">
+                  <li key={index} className="cursor-pointer p-1 hover:bg-primary-500">
                     <button
                       onClick={() => {
                         setQuery(item[listTitleProperty] as string)

components/Map/Map.tsx

@@ -407,7 +407,7 @@ export const Map: React.FC<MapProps> = ({ initialFilter, simpleMap = false, onCl
                 <MenuButton
                   key={i}
                   onClick={() => handleSetColumn(c)}
-                  label={c}
+                  label={c} 
                   selected={currentColumn === c}
                 />
               ))}

components/Pages/Home/Renderer.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image"
-import { HomeProps } from "./types"
 import { PlaceSearch } from "components/StatefulControls/PlaceSearch"
+import { HomeProps } from "./types"
 
 export const Renderer: React.FC<HomeProps> = () => {
   // const sections = pageInfo.data.page.sections || []

components/StatefulControls/PlaceSearch.tsx

@@ -1,6 +1,6 @@
 "use client"
-import AutoComplete from "components/AutoComplete/AutoComplete"
 import { useRouter } from "next/navigation"
+import AutoComplete from "components/AutoComplete/AutoComplete"
 
 const fetchData = (s: string) => fetch(`/api/names?search=${s}`).then((res) => res.json() as any)
 

components/Transition/index.tsx

@@ -6,9 +6,9 @@ import {
   MouseEventHandler,
   PropsWithChildren,
   use,
-  useEffect,
+  // useEffect,
   useLayoutEffect,
-  useRef,
+  // useRef,
   useState,
   useTransition,
 } from "react"
@@ -47,7 +47,6 @@ export default function Transitions({ children, className }: Props) {
   const [isLoading, setIsLoading] = useState(false)
   const router = useRouter()
   const pathname = usePathname()
-  const currLoaded = useRef(pathname)
 
   useLayoutEffect(() => {
     setIsLoading(false)
@@ -99,7 +98,7 @@ export function Animate({ children, className }: Props) {
 
 const Loader = () => {
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-neutral-500/25 bg-opacity-75">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-neutral-500/75">
       <div className="text-center">
         <div className="text-2xl text-neutral-500">Loading...</div>
         {/* <div className="loader mt-4"></div> */}