feat: add islands filtering controls and show/hide markers (#77)

Author: fityannugroho

README.md

@@ -19,6 +19,8 @@ The map of Indonesia's administrative areas.
 - [x] Button to see the area on Google Maps by coordinates
 - [x] Dark mode
 - [x] Responsive design (works on mobile)
+- [x] **NEW!** Toggle the visibility of island markers
+- [x] **NEW!** Filter islands by their attributes: `populated`, `outermostSmall`
 
 > Suggestions and contributions are welcome!
 

modules/MapDashboard/Dashboard.tsx

@@ -1,6 +1,7 @@
 import DashboardLayout from '@/components/DashboardLayout'
 import MapDashboardProvider from './DashboardProvider'
 import type { SelectedArea } from './hooks/useDashboard'
+import IslandsFilterProvider from './IslandsFilterProvider'
 import MapView from './MapView'
 import Sidebar from './Sidebar'
 
@@ -9,7 +10,9 @@ type Props = { defaultSelected?: SelectedArea }
 export default function MapDashboard({ defaultSelected }: Props) {
   return (
     <MapDashboardProvider defaultSelected={defaultSelected}>
-      <DashboardLayout Sidebar={Sidebar} MapView={MapView} />
+      <IslandsFilterProvider>
+        <DashboardLayout Sidebar={Sidebar} MapView={MapView} />
+      </IslandsFilterProvider>
     </MapDashboardProvider>
   )
 }

modules/MapDashboard/IslandMarkers.tsx

@@ -19,7 +19,7 @@ import {
 import { config } from '@/lib/config'
 import { Area } from '@/lib/const'
 import { useMapDashboard } from './hooks/useDashboard'
-import { useIslands } from './hooks/useIslands'
+import { useIslandsFilter } from './IslandsFilterProvider'
 
 const MarkerClusterGroup = dynamic(
   () => import('@/components/MapMarkerClusterGroup'),
@@ -32,7 +32,9 @@ const MapMarker = dynamic(() => import('@/components/MapMarker'), {
 
 export default function IslandMarkers() {
   const { loading } = useMapDashboard()
-  const { data: islands = [] } = useIslands()
+  const { filteredIslands: islands = [], showMarkers } = useIslandsFilter()
+
+  if (!showMarkers) return null
 
   return (
     <MarkerClusterGroup

modules/MapDashboard/IslandsFilterProvider.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import { createContext, useContext, useMemo, useState } from 'react'
+import type { Island } from '@/lib/const'
+import { useIslands } from './hooks/useIslands'
+
+type FilterState = {
+  populated: boolean
+  outermostSmall: boolean
+}
+
+type ContextValue = {
+  filter: FilterState
+  setFilter: (f: Partial<FilterState>) => void
+  filteredIslands: Island[]
+  counts: {
+    total: number
+    shown: number
+    populated: number
+    outermostSmall: number
+  }
+  isLoading: boolean
+  showMarkers: boolean
+  setShowMarkers: (v: boolean) => void
+}
+
+const IslandsFilterContext = createContext<ContextValue | null>(null)
+
+export function IslandsFilterProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const { data: islands = [], isLoading } = useIslands()
+  const [filter, setFilterState] = useState<FilterState>({
+    populated: false,
+    outermostSmall: false,
+  })
+  const [showMarkers, setShowMarkers] = useState<boolean>(true)
+
+  const setFilter = (f: Partial<FilterState>) => {
+    setFilterState((s) => ({ ...s, ...f }))
+  }
+
+  const counts = useMemo(() => {
+    const total = islands.length
+    const populated = islands.filter((i) => i.isPopulated).length
+    const outermostSmall = islands.filter((i) => i.isOutermostSmall).length
+    // compute shown using OR semantics when both toggles true
+    const shown = islands.filter((i) => {
+      if (!filter.populated && !filter.outermostSmall) return true
+      return (
+        (filter.populated && i.isPopulated) ||
+        (filter.outermostSmall && i.isOutermostSmall)
+      )
+    }).length
+
+    return { total, shown, populated, outermostSmall }
+  }, [islands, filter])
+
+  const filteredIslands = useMemo(() => {
+    if (!filter.populated && !filter.outermostSmall) return islands
+    return islands.filter(
+      (i) =>
+        (filter.populated && i.isPopulated) ||
+        (filter.outermostSmall && i.isOutermostSmall),
+    )
+  }, [islands, filter])
+
+  const value: ContextValue = {
+    filter,
+    setFilter,
+    showMarkers,
+    setShowMarkers,
+    filteredIslands,
+    counts,
+    isLoading,
+  }
+
+  return (
+    <IslandsFilterContext.Provider value={value}>
+      {children}
+    </IslandsFilterContext.Provider>
+  )
+}
+
+export function useIslandsFilter() {
+  const ctx = useContext(IslandsFilterContext)
+  if (!ctx)
+    throw new Error(
+      'useIslandsFilter must be used within IslandsFilterProvider',
+    )
+  return ctx
+}
+
+export default IslandsFilterProvider

modules/MapDashboard/IslandsInfo.tsx

@@ -1,15 +1,14 @@
 'use client'
 
-import { LoaderCircleIcon } from 'lucide-react'
+import { EyeClosedIcon, EyeIcon, LoaderCircleIcon } from 'lucide-react'
+import { Button } from '@/components/ui/button'
 import { useMapDashboard } from './hooks/useDashboard'
-import { useIslands } from './hooks/useIslands'
+import { useIslandsFilter } from './IslandsFilterProvider'
 
 export default function IslandsInfo() {
   const { selectedArea } = useMapDashboard()
-  const { isLoading, data: islands = [] } = useIslands()
-
-  const populatedIslands = islands.filter((i) => i.isPopulated)
-  const outermostSmallIslands = islands.filter((i) => i.isOutermostSmall)
+  const { filter, setFilter, counts, isLoading } = useIslandsFilter()
+  const { showMarkers, setShowMarkers } = useIslandsFilter()
 
   return (
     <div className="w-full p-2 border rounded flex justify-center items-center text-center">
@@ -22,15 +21,35 @@ export default function IslandsInfo() {
             </div>
           ) : (
             <>
-              <span className="text-sm">{islands.length} islands found</span>
-              <span className="text-sm text-gray-500">
-                {populatedIslands.length} populated island
-                {populatedIslands.length !== 1 ? 's' : ''}
-              </span>
-              <span className="text-sm text-gray-500">
-                {outermostSmallIslands.length} outermost-small island
-                {outermostSmallIslands.length !== 1 ? 's' : ''}
-              </span>
+              <Button
+                variant={showMarkers ? 'outline' : 'secondary'}
+                size="sm"
+                onClick={() => setShowMarkers(!showMarkers)}
+                title={showMarkers ? 'Hide islands' : 'Show islands'}
+              >
+                {counts.total} island{counts.total === 1 ? '' : 's'} found
+                {showMarkers ? <EyeIcon /> : <EyeClosedIcon />}
+              </Button>
+
+              <div className="flex flex-wrap gap-2 w-full justify-center items-center mt-2">
+                <Button
+                  variant={filter.populated ? 'secondary' : 'outline'}
+                  size="sm"
+                  onClick={() => setFilter({ populated: !filter.populated })}
+                >
+                  Populated ({counts.populated})
+                </Button>
+
+                <Button
+                  variant={filter.outermostSmall ? 'secondary' : 'outline'}
+                  size="sm"
+                  onClick={() =>
+                    setFilter({ outermostSmall: !filter.outermostSmall })
+                  }
+                >
+                  Outermost-small ({counts.outermostSmall})
+                </Button>
+              </div>
             </>
           )}
         </div>