feat: move patient info to top header with React Context
Refactored patient display from separate ClientHeader to integrated EPDHeader. Architecture changes: - Implemented React Context pattern for patient data sharing - Created PatientContext with useState + setPatient for dynamic updates - Created useSetPatient hook for patient injection from nested layouts - Created EPDLayoutClient wrapper with PatientProvider - Context flow: EPDLayout → EPDLayoutClient → EPDHeader (consumer) UI improvements: - Removed "Mini-ECD" logo from header - Left-aligned patient info: name + status + John Doe indicator - Added geboortedatum (dd-mm-yyyy Dutch format) - Added BSN extraction from FHIR identifiers - Compact layout: Patient details | Timestamp | Actions ⋮ | Search - Actions dropdown with "Nieuwe rapportage" (expandable) Cleanup: - Deleted ClientHeader component (141 lines duplicate code) - Simplified PatientLayoutClient (only useSetPatient hook) - Single source of truth for patient display Result: Clean context-based architecture, improved UX, -141 LOC 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
38
app/epd/components/patient-context.tsx
Normal file
38
app/epd/components/patient-context.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
'use client';
|
||||
|
||||
import { createContext, useContext, useState, useEffect } from 'react';
|
||||
import type { FHIRPatient } from '@/lib/fhir';
|
||||
|
||||
interface PatientContextValue {
|
||||
patient: FHIRPatient | null;
|
||||
setPatient: (patient: FHIRPatient | null) => void;
|
||||
}
|
||||
|
||||
const PatientContext = createContext<PatientContextValue>({
|
||||
patient: null,
|
||||
setPatient: () => {},
|
||||
});
|
||||
|
||||
export function usePatientContext() {
|
||||
return useContext(PatientContext);
|
||||
}
|
||||
|
||||
export function PatientProvider({ children }: { children: React.ReactNode }) {
|
||||
const [patient, setPatient] = useState<FHIRPatient | null>(null);
|
||||
|
||||
return (
|
||||
<PatientContext.Provider value={{ patient, setPatient }}>
|
||||
{children}
|
||||
</PatientContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
// Hook to inject patient data into context from nested layouts
|
||||
export function useSetPatient(patient: FHIRPatient | null) {
|
||||
const { setPatient } = usePatientContext();
|
||||
|
||||
useEffect(() => {
|
||||
setPatient(patient);
|
||||
return () => setPatient(null); // Cleanup when unmounting
|
||||
}, [patient, setPatient]);
|
||||
}
|
||||
Reference in New Issue
Block a user