johannes.gasser/property-match
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(arch): eliminate direct service calls in components — route all through hooks

Browse Source 
New hook files:
- useAuth.ts: useLogin, useSwitchDemoRole, useSwitchOrganization
- useAI.ts: useParseNeed, useGenerateOfferEmail, useGenerateDecisionBrief, useParseListingText
- useAssistant.ts: useAssistantSuggestions (useQuery), useAssistantAnswer (useMutation)
- useOfferReport.ts: useOfferReportByInquiry, useCreateOfferReport, useUpdateOfferReport, useGenerateOfferReportPdf
- useInquiryReport.ts: useInquiryReportByInquiry, useCreateInquiryReport, useUpdateInquiryReport, useFinalizeInquiryReport
- useMarketReport.ts: useMarketReport
- useWeighting.ts: useDefaultWeights (synchronous wrapper)
- useUnitMatches.ts: useUnitMatchesMap, useUnitBundle, useBundleMatches (useMemo wrappers)

Extended hooks: useProperties (add update/create/remove mutations),
useNeeds (add useCreateNeed), useMatches (add useNeedMatchesForProperty,
useAdditionalMatchesForInquiry), useReviewQueue (add useCreateReviewTask)

Updated 21 components/pages: all direct service imports replaced with hooks.
Deliberate exception: getRecommendedActions in DataQuality.tsx (pure sync utility, no provider access).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
2026-05-24 14:56:32 +02:00
parent f487435a94
commit e36c5bc979
33 changed files with 666 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/supply/DataQuality.tsx
+2 -8
View File
@@ -14,10 +14,9 @@ import {
Tooltip,
Typography,
} from '@mui/material'
import { useQuery } from '@tanstack/react-query'
import { ErrorState, LoadingPage, SectionContainer } from '../../components/ui'
import { DataQualityBadge, FreshnessIndicator } from '../../components/data-quality'
import { propertyService } from '../../services/propertyService'
import { useProperties } from '../../hooks/useProperties'
import { getRecommendedActions } from '../../services/dataQualityService'
import { DataFreshness } from '../../domain/enums'
@@ -32,16 +31,11 @@ function getQualityColor(score: number): 'success' | 'warning' | 'error' {
export default function DataQuality() {
const [qualityFilter, setQualityFilter] = useState<QualityFilter>('')
const { data: resp, isLoading, error } = useQuery({
queryKey: ['properties'],
queryFn: () => propertyService.getAll(),
})
const { data: properties = [], isLoading, error } = useProperties()
if (isLoading) return <LoadingPage />
if (error) return <ErrorState />
const properties = resp?.data ?? []
const avgScore = properties.length
? properties.reduce((sum, p) => sum + p.dataQuality.score, 0) / properties.length
: 0
src/pages/supply/MyListings.tsx
+42 -55
View File
@@ -1,6 +1,5 @@
import { useState } from 'react'
import { useNavigate } from 'react-router'
import { useQueryClient } from '@tanstack/react-query'
import {
Alert,
Box,
@@ -17,8 +16,7 @@ import {
Typography,
} from '@mui/material'
import { Plus, Trash2 } from 'lucide-react'
import { useProperties } from '../../hooks/useProperties'
import { propertyService } from '../../services/propertyService'
import { useProperties, useUpdateProperty, useRemoveProperty } from '../../hooks/useProperties'
import type { Property } from '../../domain/property'
const ASSET_LABELS: Record<string, string> = {
@@ -37,41 +35,36 @@ function formatDate(iso?: string) {
export default function MyListings() {
const navigate = useNavigate()
const qc = useQueryClient()
const { data: listings = [], isLoading } = useProperties({ sourceType: 'DIRECT' })
const updateProperty = useUpdateProperty()
const removeProperty = useRemoveProperty()
const [togglingId, setTogglingId] = useState<string | null>(null)
const [deletingId, setDeletingId] = useState<string | null>(null)
const [confirmDelete, setConfirmDelete] = useState<Property | null>(null)
const [actionError, setActionError] = useState<string | null>(null)
async function handleToggleStatus(p: Property) {
setTogglingId(p.id)
setActionError(null)
try {
const next = p.status === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE'
await propertyService.update(p.id, { status: next })
qc.invalidateQueries({ queryKey: ['properties'] })
} catch {
setActionError('Status konnte nicht geändert werden.')
} finally {
setTogglingId(null)
}
function handleToggleStatus(p: Property) {
const next = p.status === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE'
updateProperty.mutate(
{ id: p.id, input: { status: next } },
{
onError: () => {
setActionError('Status konnte nicht geändert werden.')
},
},
)
}
async function handleDelete(p: Property) {
setDeletingId(p.id)
setActionError(null)
try {
await propertyService.remove(p.id)
qc.invalidateQueries({ queryKey: ['properties'] })
} catch {
setActionError('Inserat konnte nicht gelöscht werden.')
} finally {
setDeletingId(null)
setConfirmDelete(null)
}
function handleDelete(p: Property) {
removeProperty.mutate(p.id, {
onSuccess: () => {
setConfirmDelete(null)
},
onError: () => {
setActionError('Inserat konnte nicht gelöscht werden.')
setConfirmDelete(null)
},
})
}
return (
@@ -184,35 +177,29 @@ export default function MyListings() {
{/* Status toggle */}
<Box>
{togglingId === p.id ? (
<CircularProgress size={16} />
) : (
<Tooltip title={p.status === 'ACTIVE' ? 'Deaktivieren' : 'Aktivieren'}>
<Switch
size="small"
checked={p.status === 'ACTIVE'}
onChange={() => handleToggleStatus(p)}
sx={{ '& .MuiSwitch-thumb': { width: 14, height: 14 } }}
/>
</Tooltip>
)}
<Tooltip title={p.status === 'ACTIVE' ? 'Deaktivieren' : 'Aktivieren'}>
<Switch
size="small"
checked={p.status === 'ACTIVE'}
onChange={() => handleToggleStatus(p)}
disabled={updateProperty.isPending}
sx={{ '& .MuiSwitch-thumb': { width: 14, height: 14 } }}
/>
</Tooltip>
</Box>
{/* Delete */}
<Box>
{deletingId === p.id ? (
<CircularProgress size={16} />
) : (
<Tooltip title="Inserat löschen">
<IconButton
size="small"
onClick={() => setConfirmDelete(p)}
sx={{ color: '#94a3b8', '&:hover': { color: '#ef4444' } }}
>
<Trash2 size={15} />
</IconButton>
</Tooltip>
)}
<Tooltip title="Inserat löschen">
<IconButton
size="small"
onClick={() => setConfirmDelete(p)}
disabled={removeProperty.isPending}
sx={{ color: '#94a3b8', '&:hover': { color: '#ef4444' } }}
>
<Trash2 size={15} />
</IconButton>
</Tooltip>
</Box>
</Box>
)
src/pages/supply/NewListing.tsx
+32 -34
View File
@@ -1,6 +1,5 @@
import { useState } from 'react'
import { useLocation, useNavigate } from 'react-router'
import { useQueryClient } from '@tanstack/react-query'
import {
Alert,
Box,
@@ -16,8 +15,8 @@ import {
Typography,
} from '@mui/material'
import { ArrowLeft, CheckCircle, ImagePlus, Sparkles, X } from 'lucide-react'
import { propertyService } from '../../services/propertyService'
import { parseListingText } from '../../services/aiService'
import { useCreateProperty } from '../../hooks/useProperties'
import { useParseListingText } from '../../hooks/useAI'
import {
ASSET_TYPE_LABELS,
SOFT_FACTORS,
@@ -29,10 +28,12 @@ import { buildCreatePropertyInput } from './newListingMapper'
export default function NewListing() {
const navigate = useNavigate()
const qc = useQueryClient()
const { state } = useLocation() as { state: LocationState | null }
const pre = state?.prefill ?? {}
const createProperty = useCreateProperty()
const parseListingMutation = useParseListingText()
// Core fields
const [assetType, setAssetType] = useState(pre.assetType ?? 'OFFICE')
const [street, setStreet] = useState(pre.street ?? '')
@@ -64,34 +65,33 @@ export default function NewListing() {
// AI
const [aiText, setAiText] = useState('')
const [aiParsing, setAiParsing] = useState(false)
const [aiApplied, setAiApplied] = useState(false)
// Submit
const [submitting, setSubmitting] = useState(false)
const [error, setError] = useState<string | null>(null)
const [created, setCreated] = useState(false)
const aiParsing = parseListingMutation.isPending
const submitting = createProperty.isPending
const isPrefilled = !!pre.propertyId
async function handleAiParse() {
function handleAiParse() {
if (!aiText.trim()) return
setAiParsing(true)
try {
const parsed = await parseListingText(aiText)
if (parsed.assetType) setAssetType(parsed.assetType)
if (parsed.areaSqm) setAreaSqm(String(parsed.areaSqm))
if (parsed.rentPerSqm) setRentPerSqm(String(parsed.rentPerSqm))
if (parsed.city && !city) setCity(parsed.city)
if (parsed.fitOut) setFitOut(parsed.fitOut)
if (parsed.parking) setParking(String(parsed.parking))
if (parsed.softLevels) {
setSoftLevels(prev => ({ ...prev, ...parsed.softLevels }))
}
setAiApplied(true)
} finally {
setAiParsing(false)
}
parseListingMutation.mutate(aiText, {
onSuccess: (parsed) => {
if (parsed.assetType) setAssetType(parsed.assetType)
if (parsed.areaSqm) setAreaSqm(String(parsed.areaSqm))
if (parsed.rentPerSqm) setRentPerSqm(String(parsed.rentPerSqm))
if (parsed.city && !city) setCity(parsed.city)
if (parsed.fitOut) setFitOut(parsed.fitOut)
if (parsed.parking) setParking(String(parsed.parking))
if (parsed.softLevels) {
setSoftLevels(prev => ({ ...prev, ...parsed.softLevels }))
}
setAiApplied(true)
},
})
}
function addImage() {
@@ -111,11 +111,10 @@ export default function NewListing() {
return null
}
async function handleSubmit() {
function handleSubmit() {
const err = validate()
if (err) { setError(err); return }
setError(null)
setSubmitting(true)
const input = buildCreatePropertyInput({
assetType,
@@ -135,15 +134,14 @@ export default function NewListing() {
images,
})
try {
await propertyService.create(input)
qc.invalidateQueries({ queryKey: ['properties'] })
setCreated(true)
} catch {
setError('Fehler beim Erstellen des Inserats. Bitte erneut versuchen.')
} finally {
setSubmitting(false)
}
createProperty.mutate(input, {
onSuccess: () => {
setCreated(true)
},
onError: () => {
setError('Fehler beim Erstellen des Inserats. Bitte erneut versuchen.')
},
})
}
function resetForm() {