Extract project workspace hook

frontend/src/hooks/useDatasetWorkflow.ts

@@ -1,6 +1,7 @@
-import { FormEvent, useMemo, useState } from 'react'
+import { FormEvent, useEffect, useMemo, useState } from 'react'
 import { datasetsApi, jobsApi } from '../services/api'
 import type {
+  AreaRead,
   DatasetCreateResponse,
   JobRead,
   RasterMetadataResponse,
@@ -12,6 +13,7 @@ import { formatError } from '../lib/formatError'
 
 interface DatasetWorkflowOptions {
   selectedProjectId: string | null
+  areas: AreaRead[]
   datasets: DatasetCreateResponse[]
   loadProjectData: (projectId: string) => Promise<{ datasets: DatasetCreateResponse[] } | null>
   setErrorMessage: (message: string | null) => void
@@ -27,6 +29,7 @@ function toRasterMetadata(metadata: Record<string, unknown> | null | undefined):
 
 export function useDatasetWorkflow({
   selectedProjectId,
+  areas,
   datasets,
   loadProjectData,
   setErrorMessage,
@@ -72,6 +75,14 @@ export function useDatasetWorkflow({
     [rasterTileSize, rasterTileOverlap],
   )
 
+  useEffect(() => {
+    if (areas.length === 0) {
+      setSelectedClipAreaId('')
+    } else if (!selectedClipAreaId || !areas.some((area) => area.id === selectedClipAreaId)) {
+      setSelectedClipAreaId(areas[0].id)
+    }
+  }, [areas, selectedClipAreaId])
+
   const loadDatasetJobs = async (projectId: string, datasetId: string) => {
     const response = await jobsApi.list(projectId, { dataset_id: datasetId, limit: 20, offset: 0 })
     setJobs(response.items)

frontend/src/hooks/useMapWorkspaceState.ts

@@ -25,6 +25,14 @@ export function useMapWorkspaceState({
   const [areaLayerOpacity, setAreaLayerOpacity] = useState(0.18)
   const [selectedMapFeature, setSelectedMapFeature] = useState<GeoJSON.Feature | null>(null)
 
+  useEffect(() => {
+    if (areas.length === 0) {
+      setSelectedMapAreaId('')
+    } else if (!selectedMapAreaId || !areas.some((area) => area.id === selectedMapAreaId)) {
+      setSelectedMapAreaId(areas[0].id)
+    }
+  }, [areas, selectedMapAreaId])
+
   const selectedMapArea = useMemo(
     () => areas.find((area) => area.id === selectedMapAreaId) ?? null,
     [areas, selectedMapAreaId],

frontend/src/hooks/useProjectWorkspace.ts

@@ -0,0 +1,151 @@
+import { FormEvent, useMemo, useState } from 'react'
+import { areasApi } from '../services/api/areas'
+import { datasetsApi } from '../services/api/datasets'
+import { projectsApi } from '../services/api/projects'
+import type {
+  AreaCreate,
+  AreaListResponse,
+  AreaRead,
+  DatasetCreateResponse,
+  DatasetListResponse,
+  ProjectCreate,
+  ProjectRead,
+} from '../types'
+
+export function useProjectWorkspace() {
+  const [projects, setProjects] = useState<ProjectRead[]>([])
+  const [selectedProjectId, setSelectedProjectId] = useState<string | null>(null)
+  const [areas, setAreas] = useState<AreaRead[]>([])
+  const [datasets, setDatasets] = useState<DatasetCreateResponse[]>([])
+  const [loadingProjects, setLoadingProjects] = useState(false)
+  const [loadingAreas, setLoadingAreas] = useState(false)
+  const [loadingDatasets, setLoadingDatasets] = useState(false)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+
+  const [projectForm, setProjectForm] = useState<ProjectCreate>({
+    name: '',
+    description: '',
+    region: 'Kempen',
+  })
+  const [areaForm, setAreaForm] = useState({
+    name: 'Demo AOI',
+    geometry:
+      '{"type":"MultiPolygon","coordinates":[[[[4.35,51.28],[4.55,51.28],[4.55,51.46],[4.35,51.46],[4.35,51.28]]]]}',
+    crs: 'EPSG:4326',
+  })
+
+  const selectedProject = useMemo(
+    () => projects.find((project) => project.id === selectedProjectId) ?? null,
+    [projects, selectedProjectId],
+  )
+
+  const loadProjects = async () => {
+    setLoadingProjects(true)
+    setErrorMessage(null)
+    try {
+      const response = await projectsApi.list()
+      setProjects(response.items)
+      if (!selectedProjectId && response.items.length > 0) {
+        setSelectedProjectId(response.items[0].id)
+      }
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : 'Failed to load projects')
+    } finally {
+      setLoadingProjects(false)
+    }
+  }
+
+  const loadProjectData = async (projectId: string) => {
+    setLoadingAreas(true)
+    setLoadingDatasets(true)
+    setErrorMessage(null)
+    try {
+      const [areaResponse, datasetResponse]: [AreaListResponse, DatasetListResponse] = await Promise.all([
+        areasApi.list(projectId),
+        datasetsApi.list(projectId),
+      ])
+      setAreas(areaResponse.items)
+      setDatasets(datasetResponse.items)
+      return { areas: areaResponse.items, datasets: datasetResponse.items }
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : 'Failed to load project data')
+      return null
+    } finally {
+      setLoadingAreas(false)
+      setLoadingDatasets(false)
+    }
+  }
+
+  const createProject = async (event: FormEvent) => {
+    event.preventDefault()
+    if (!projectForm.name.trim()) {
+      setErrorMessage('Project name is required')
+      return
+    }
+    try {
+      await projectsApi.create({
+        name: projectForm.name.trim(),
+        description: projectForm.description?.trim() || undefined,
+        region: projectForm.region?.trim() || 'Kempen',
+      })
+      setProjectForm((previous) => ({ ...previous, name: '', description: '' }))
+      await loadProjects()
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : 'Failed to create project')
+    }
+  }
+
+  const createArea = async (event: FormEvent) => {
+    event.preventDefault()
+    if (!selectedProjectId) {
+      setErrorMessage('Select a project first')
+      return
+    }
+    let geometry: AreaCreate['geometry']
+    try {
+      geometry = JSON.parse(areaForm.geometry) as AreaCreate['geometry']
+    } catch {
+      setErrorMessage('Invalid GeoJSON geometry JSON')
+      return
+    }
+    try {
+      await areasApi.create(selectedProjectId, {
+        name: areaForm.name,
+        crs: areaForm.crs,
+        geometry,
+      })
+      await loadProjectData(selectedProjectId)
+      setAreaForm((previous) => ({ ...previous, name: '' }))
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : 'Failed to create area')
+    }
+  }
+
+  const resetProjectData = () => {
+    setAreas([])
+    setDatasets([])
+  }
+
+  return {
+    projects,
+    selectedProject,
+    selectedProjectId,
+    areas,
+    datasets,
+    loadingProjects,
+    loadingAreas,
+    loadingDatasets,
+    errorMessage,
+    projectForm,
+    areaForm,
+    loadProjects,
+    loadProjectData,
+    createProject,
+    createArea,
+    resetProjectData,
+    setSelectedProjectId,
+    setErrorMessage,
+    setProjectForm,
+    setAreaForm,
+  }
+}