refactor: Update prettier config to organize all imports

.eslintrc.json

@@ -1,7 +1,12 @@
 {
   "extends": "next/core-web-vitals",
-  "plugins": ["import"],
+  "plugins": ["import", "unused-imports"],
   "rules": {
-    "import/no-duplicates": "error"
+    "import/no-duplicates": "error",
+     "unused-imports/no-unused-imports": "error",
+    "unused-imports/no-unused-vars": [
+      "warn",
+      { "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
+    ]
   }
 }

.prettierignore

@@ -0,0 +1,2 @@
+README.md
+*.md

app/layout.tsx

@@ -1,12 +1,11 @@
-import type { Metadata, Viewport } from 'next'
-import { Inter as FontSans } from 'next/font/google'
-import './globals.css'
 import { Header } from '@/components/header'
 import { CustomQueryClientProvider } from '@/components/query-client-provider'
-import { Sidebar } from '@/components/sidebar'
 import { ThemeProvider } from '@/components/theme-provider'
 import { Toaster } from '@/components/ui/sonner'
 import { cn } from '@/lib/utils'
+import type { Metadata, Viewport } from 'next'
+import { Inter as FontSans } from 'next/font/google'
+import './globals.css'
 
 const fontSans = FontSans({ subsets: ['latin'], variable: '--font-sans' })
 

app/page.tsx

@@ -1,5 +1,5 @@
-import { Suspense } from 'react'
 import MapContainer from '@/components/map/map-container'
+import { Suspense } from 'react'
 
 export const maxDuration = 60
 

components/DisplayModeSettingsDialog.tsx

@@ -1,8 +1,8 @@
-import React, { Fragment, useEffect } from 'react'
-import DateAndTimePicker from './DateAndTimePicker'
 import { useDisplayModeStore } from '@/lib/stores/displayModeStore'
 import { Dialog, Transition } from '@headlessui/react'
 import { X } from 'lucide-react'
+import React, { Fragment } from 'react'
+import DateAndTimePicker from './DateAndTimePicker'
 
 interface DisplayModeSettingsDialogProps {
   isOpen: boolean

components/SearchButton.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { Search } from 'lucide-react'
+import React from 'react'
 
 interface SearchButtonProps {
   onClick: () => void

components/command-menu.tsx

@@ -1,9 +1,5 @@
 'use client'
 
-import * as React from 'react'
-import Image from 'next/image'
-import { useRouter } from 'next/navigation'
-import { DialogTitle } from './ui/dialog'
 import { Button } from '@/components/ui/button'
 import {
   CommandDialog,
@@ -14,24 +10,25 @@ import {
   CommandList,
   CommandSeparator
 } from '@/components/ui/command'
-import { searchEmployees } from '@/lib/employees/api'
-import { type StrapiResponse } from '@/lib/employees/api'
+import { searchEmployees, type StrapiResponse } from '@/lib/employees/api'
 import { MapObjectType } from '@/lib/map/MapObject'
 import { useMapStore } from '@/lib/stores/mapStore'
 import { cn } from '@/lib/utils'
 import { type DialogProps } from '@radix-ui/react-dialog'
 import {
   CircleIcon,
-  FileIcon,
   LaptopIcon,
   MoonIcon,
   SunIcon
 } from '@radix-ui/react-icons'
 import { Search } from 'lucide-react'
 import { useTheme } from 'next-themes'
-import Highlighter from 'react-highlight-words'
-import { toast } from 'react-hot-toast'
+import Image from 'next/image'
+import { useRouter } from 'next/navigation'
+import * as React from 'react'
 import { useQuery } from 'react-query'
+import { toast } from 'sonner'
+import { DialogTitle } from './ui/dialog'
 
 export function CommandMenu({ ...props }: DialogProps) {
   const router = useRouter()

components/dropdown-radio.tsx

@@ -1,17 +1,13 @@
-import React, { useState } from 'react'
 import { Label } from '@/components/ui/label'
 import {
   NavigationMenu,
   NavigationMenuContent,
   NavigationMenuItem,
-  NavigationMenuLink,
   NavigationMenuList,
-  NavigationMenuTrigger,
-  NavigationMenuViewport
+  NavigationMenuTrigger
 } from '@/components/ui/navigation-menu'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
-import { cva } from 'class-variance-authority'
-import { ChevronDown } from 'lucide-react'
+import React, { useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 
 type DropdownRadioOption = {

components/header.tsx

@@ -1,36 +1,17 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import campuses from '@/lib/campuses'
+import { useDisplayModeStore } from '@/lib/stores/displayModeStore'
+import { useMapStore } from '@/lib/stores/mapStore'
+import { cn } from '@/lib/utils'
 import Image from 'next/image'
-import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
 import DisplayModeSettingsDialog from './DisplayModeSettingsDialog'
-import SearchButton from './SearchButton'
 import { CommandMenu } from './command-menu'
 import DropdownRadio from './dropdown-radio'
 import { Sidebar } from './sidebar'
 import { MapDisplayMode } from './svg-maps/MapDisplayMode'
-import { Button } from './ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
-import campuses from '@/lib/campuses'
-import { useDisplayModeStore } from '@/lib/stores/displayModeStore'
-import { useMapStore } from '@/lib/stores/mapStore'
-import { cn } from '@/lib/utils'
-import { AppWindow, CalendarDays, Map, Menu, Search, Timer } from 'lucide-react'
-import { TbApps } from 'react-icons/tb'
-import { toast } from 'sonner'
 
 const MapDisplayButton = ({
   mode,

components/map-objects-search-input.tsx

@@ -1,10 +1,10 @@
 'use client'
 
-import React, { useEffect, useState } from 'react'
-import { Label } from './ui/label'
 import { Input } from '@/components/ui/input'
 import { type SearchableObject } from '@/lib/map/MapData'
 import { Search } from 'lucide-react'
+import React, { useEffect, useState } from 'react'
+import { Label } from './ui/label'
 
 interface MapObjectsSearchInputProps {
   onSubmit: (searchableObject: SearchableObject) => void

components/map/MapRoute.tsx

@@ -1,15 +1,9 @@
-import React, {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState
-} from 'react'
-import { type Graph, type Vertex } from '@/lib/map/Graph'
+import { type Vertex } from '@/lib/map/Graph'
 import { type MapData } from '@/lib/map/MapData'
-import { type MapObject, MapObjectType } from '@/lib/map/MapObject'
+import { type MapObject } from '@/lib/map/MapObject'
 import { useRouteStore } from '@/lib/stores/routeStore'
 import * as d3 from 'd3'
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
 
 interface MapRouteProps {
   mapData: MapData

components/map/floor-buttons.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import { Button } from '../ui/button'
 import clsx from 'clsx'
+import { useEffect, useRef, useState } from 'react'
+import { Button } from '../ui/button'
 import { ScrollArea, ScrollBar } from '../ui/scroll-area'
-import { useState, useEffect, useRef } from 'react'
 
 interface FloorSelectorButtonsProps {
   floors: number[]

components/map/map-container.tsx

@@ -1,13 +1,5 @@
 'use client'
 
-import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { useSearchParams } from 'next/navigation'
-import MapWrapper from '../svg-maps/MapWrapper'
-import MapControls from './map-controls'
-import MapNavigationButton from './navigation-button'
-import MapRoute, { type MapRouteRef } from './MapRoute'
-import NavigationDialog from './navigation-dialog'
-import RoomDrawer from './room-drawer'
 import campuses from '@/lib/campuses'
 import { MapData } from '@/lib/map/MapData'
 import { type MapObject, MapObjectType } from '@/lib/map/MapObject'
@@ -24,12 +16,20 @@ import { useDisplayModeStore } from '@/lib/stores/displayModeStore'
 import { useMapStore } from '@/lib/stores/mapStore'
 import { useRouteStore } from '@/lib/stores/routeStore'
 import mapDataJson from '@/public/routes.json'
-import { toast } from 'sonner'
+import { useSearchParams } from 'next/navigation'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import {
   type ReactZoomPanPinchRef,
   TransformComponent,
   TransformWrapper
 } from 'react-zoom-pan-pinch'
+import { toast } from 'sonner'
+import MapWrapper from '../svg-maps/MapWrapper'
+import MapRoute, { type MapRouteRef } from './MapRoute'
+import MapControls from './map-controls'
+import MapNavigationButton from './navigation-button'
+import NavigationDialog from './navigation-dialog'
+import RoomDrawer from './room-drawer'
 
 const loadJsonToGraph = (routesJson: string) => {
   return MapData.fromJson(routesJson)

components/map/map-controls.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import FloorSelectorButtons from './floor-buttons'
-import ScaleButtons from './scale-buttons'
 import { useMapStore } from '@/lib/stores/mapStore'
+import React from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
-import { Button } from '../ui/button'
 import { PiMapPinPlus } from 'react-icons/pi'
+import { Button } from '../ui/button'
+import FloorSelectorButtons from './floor-buttons'
+import ScaleButtons from './scale-buttons'
 
 interface MapControlsProps {
   floors: number[]

components/map/navigation-button.tsx

@@ -1,6 +1,6 @@
-import { Button } from '../ui/button'
 import { useRouteStore } from '@/lib/stores/routeStore'
-import { Navigation2Icon, XIcon } from 'lucide-react'
+import { XIcon } from 'lucide-react'
+import { Button } from '../ui/button'
 import RouteDetails, { DetailsSlide } from './route-details'
 
 interface MapNavigationButtonProps {

components/map/navigation-dialog.tsx

@@ -1,28 +1,19 @@
-import React, {
-  type FormEvent,
-  Fragment,
-  useEffect,
-  useRef,
-  useState
-} from 'react'
-import MapObjectsSearchInput from '../map-objects-search-input'
 import { Button } from '@/components/ui/button'
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
-  DialogTitle,
-  DialogTrigger
+  DialogTitle
 } from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { type SearchableObject } from '@/lib/map/MapData'
 import { type MapObject, MapObjectType } from '@/lib/map/MapObject'
 import { useMapStore } from '@/lib/stores/mapStore'
-import { X } from 'lucide-react'
-import { toast } from 'react-hot-toast'
+import React, { type FormEvent, useEffect, useRef, useState } from 'react'
+import { toast } from 'sonner'
+import MapObjectsSearchInput from '../map-objects-search-input'
 
 interface RoutesModalProps {
   isOpen: boolean

components/map/room-drawer.tsx

@@ -1,8 +1,3 @@
-import React, { useState, useEffect } from 'react'
-import Image from 'next/image'
-import { Badge } from '../ui/badge'
-import { Button } from '../ui/button'
-import RoomInfoTabContent from './RoomInfoTabContent'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -13,9 +8,7 @@ import {
   Sheet,
   SheetContent,
   SheetDescription,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger
+  SheetTitle
 } from '@/components/ui/sheet'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
@@ -24,13 +17,18 @@ import { RoomOnMap } from '@/lib/map/RoomOnMap'
 import { LessonSchedulePart } from '@/lib/schedule/models/lesson-schedule-part'
 import { useMapStore } from '@/lib/stores/mapStore'
 import axios from 'axios'
-import { QrCodeIcon, Link } from 'lucide-react'
+import { Link, QrCodeIcon } from 'lucide-react'
+import Image from 'next/image'
+import React, { useEffect, useState } from 'react'
 import CopyToClipboard from 'react-copy-to-clipboard'
-import toast from 'react-hot-toast'
 import { useQuery } from 'react-query'
+import { Badge } from '../ui/badge'
+import { Button } from '../ui/button'
+import RoomInfoTabContent from './RoomInfoTabContent'
 
-import { RiRouteLine } from 'react-icons/ri'
 import QRCode from 'qrcode.react'
+import { RiRouteLine } from 'react-icons/ri'
+import { toast } from 'sonner'
 import ScheduleCalendar from './schedule-calendar'
 
 interface RoomDrawerProps {

components/map/route-details.tsx

@@ -1,25 +1,19 @@
-import { useCallback } from 'react'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger
+} from '@/components/ui/dialog'
 import { Edge, type Vertex } from '@/lib/map/Graph'
 import { type MapObject, MapObjectType } from '@/lib/map/MapObject'
 import { useMapStore } from '@/lib/stores/mapStore'
 import { useRouteStore } from '@/lib/stores/routeStore'
+import { Route } from 'lucide-react'
+import { useCallback } from 'react'
 import { BiWalk } from 'react-icons/bi'
 import { TbStairsDown, TbStairsUp } from 'react-icons/tb'
-import {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogTitle,
-  DialogDescription
-} from '@/components/ui/dialog'
-import { Button } from '@/components/ui/button'
-import {
-  MapIcon,
-  XIcon,
-  MoveRightIcon,
-  StepBackIcon,
-  Route
-} from 'lucide-react'
 import { toast } from 'sonner'
 interface RouteDetailsProps {
   onDetailsSlideChange: (detailsSlide: DetailsSlide) => void

components/map/scale-buttons.tsx

@@ -1,6 +1,6 @@
-import { Button } from '../ui/button'
 import { Minus, Plus } from 'lucide-react'
 import { useHotkeys } from 'react-hotkeys-hook'
+import { Button } from '../ui/button'
 
 interface ScaleButtonsProps {
   onZoomIn: () => void