refactor: make ComboboxArea component reusable (#48)

Author: fityannugroho

modules/MapDashboard/ComboboxArea.tsx components/ComboboxArea.tsxmodules/MapDashboard/ComboboxArea.tsx renamed to components/ComboboxArea.tsx

@@ -10,8 +10,8 @@ import type { FeatureArea } from '@/lib/config'
 import type { GetArea } from '@/lib/const'
 import type { Query } from '@/lib/data'
 import { ucFirstStr } from '@/lib/utils'
+import { useMemo, useState } from 'react'
 import { toast } from 'sonner'
-import { useMapDashboard } from './hooks/useDashboard'
 
 function areaToOption<A extends FeatureArea>(data: GetArea<A>): ComboboxOption {
   return {
@@ -23,7 +23,7 @@ function areaToOption<A extends FeatureArea>(data: GetArea<A>): ComboboxOption {
 
 export type ComboboxAreaProps<A extends FeatureArea> = Omit<
   ComboboxProps,
-  'autoClose' | 'fullWidth' | 'options' | 'onSelect' | 'selected'
+  'options' | 'onSelect' | 'selected'
 > & {
   area: A
   query: Query<A>
@@ -36,36 +36,35 @@ export default function ComboboxArea<A extends FeatureArea>({
   onSelect,
   ...comboboxProps
 }: ComboboxAreaProps<A>) {
-  const { selectedArea } = useMapDashboard()
+  const [selectedArea, setSelectedArea] = useState<GetArea<A> | undefined>()
   const { data: areas = [], error } = useArea(area, {
     ...query,
     sortBy: 'name',
   })
 
+  const options = useMemo(() => areas.map((a) => areaToOption<A>(a)), [areas])
+
   if (error) {
     toast.error(`Failed to fetch ${area} data`, {
       description: error?.message,
       closeButton: true,
     })
   }
 
-  const areaData = selectedArea[area]
-
   return (
     <Combobox
       {...comboboxProps}
-      options={areas.map((a) => areaToOption<A>(a))}
+      options={options}
       label={comboboxProps.label || ucFirstStr(area)}
       placeholder={comboboxProps.placeholder || `Search ${ucFirstStr(area)}`}
       onSelect={(opt) => {
         const selectedArea = areas.find((a) => a.code === opt.key)
         if (selectedArea) {
+          setSelectedArea(selectedArea)
           onSelect?.(selectedArea)
         }
       }}
-      selected={areaData ? areaToOption(areaData) : undefined}
-      autoClose
-      fullWidth
+      selected={selectedArea ? areaToOption(selectedArea) : undefined}
     />
   )
 }

modules/MapDashboard/AreaSelectors.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import ComboboxArea from '@/components/ComboboxArea'
 import { type FeatureArea, config, featureConfig } from '@/lib/config'
 import type { Query } from '@/lib/data'
 import {
@@ -9,7 +10,6 @@ import {
   objectFromEntries,
 } from '@/lib/utils'
 import { useMemo, useState } from 'react'
-import ComboboxArea from './ComboboxArea'
 import { useMapDashboard } from './hooks/useDashboard'
 
 const MAX_PAGE_SIZE = config.dataSource.area.pagination.maxPageSize
@@ -60,6 +60,8 @@ export default function AreaSelectors() {
           area={area}
           query={query[area]}
           disabled={parent ? isLoading[parent] : false}
+          autoClose
+          fullWidth
           onSelect={(selected) => {
             changeSelectedArea(area, selected)
 

modules/Pilkada2024/Sidebar.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import ComboboxArea from '@/components/ComboboxArea'
 import { Combobox } from '@/components/combobox'
 import { Button } from '@/components/ui/button'
 import { config } from '@/lib/config'
@@ -8,7 +9,6 @@ import type { Query } from '@/lib/data'
 import { EraserIcon, LoaderCircleIcon } from 'lucide-react'
 import { useState } from 'react'
 import { toast } from 'sonner'
-import ComboboxArea from '../MapDashboard/ComboboxArea'
 import { useMapDashboard } from '../MapDashboard/hooks/useDashboard'
 import VotesChart from './VotesChart'
 import {
@@ -71,6 +71,8 @@ export default function Sidebar() {
         area={Area.PROVINCE}
         query={{ limit: config.dataSource.area.pagination.maxPageSize }}
         disabled={!election}
+        autoClose
+        fullWidth
         onSelect={(option) => {
           changeSelectedArea(Area.PROVINCE, option)
           setQuery((prevQuery) => ({
@@ -86,6 +88,8 @@ export default function Sidebar() {
           area={Area.REGENCY}
           query={regencyQuery}
           disabled={!selectedArea.province}
+          autoClose
+          fullWidth
           onSelect={(option) => {
             changeSelectedArea(Area.REGENCY, option)
           }}