counterweight/arbret
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Extract duplicate status display logic to shared utility

Browse source 
- Created frontend/app/utils/appointment.ts with getStatusDisplay()
- Supports context-aware text (isOwnView parameter)
- Updated both appointments pages to use shared utility
This commit is contained in:
counterweight 2025-12-21 17:50:24 +01:00
parent d24acfd322
commit 8cc2cfa2e4
Signed by: counterweight
GPG key ID: 883EDBAA726BD96C
3 changed files with 37 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/app/admin/appointments/page.tsx
View file

@ -8,24 +8,11 @@ import { Header } from "../../components/Header";
import { useRequireAuth } from "../../hooks/useRequireAuth";
import { components } from "../../generated/api";
import { formatDateTime } from "../../utils/date";
import { getStatusDisplay } from "../../utils/appointment";
type AppointmentResponse = components["schemas"]["AppointmentResponse"];
type PaginatedAppointments = components["schemas"]["PaginatedResponse_AppointmentResponse_"];
// Helper to get status display
function getStatusDisplay(status: string): { text: string; bgColor: string; textColor: string } {
switch (status) {
case "booked":
return { text: "Booked", bgColor: "rgba(34, 197, 94, 0.2)", textColor: "#4ade80" };
case "cancelled_by_user":
return { text: "Cancelled by user", bgColor: "rgba(239, 68, 68, 0.2)", textColor: "#f87171" };
case "cancelled_by_admin":
return { text: "Cancelled by admin", bgColor: "rgba(239, 68, 68, 0.2)", textColor: "#f87171" };
default:
return { text: status, bgColor: "rgba(255,255,255,0.1)", textColor: "rgba(255,255,255,0.6)" };
}
}
const styles: Record<string, React.CSSProperties> = {
main: {
minHeight: "100vh",

19
frontend/app/appointments/page.tsx
View file

@ -8,23 +8,10 @@ import { Header } from "../components/Header";
import { useRequireAuth } from "../hooks/useRequireAuth";
import { components } from "../generated/api";
import { formatDateTime } from "../utils/date";
import { getStatusDisplay } from "../utils/appointment";
type AppointmentResponse = components["schemas"]["AppointmentResponse"];
// Helper to get status display
function getStatusDisplay(status: string): { text: string; bgColor: string; textColor: string } {
switch (status) {
case "booked":
return { text: "Booked", bgColor: "rgba(34, 197, 94, 0.2)", textColor: "#4ade80" };
case "cancelled_by_user":
return { text: "Cancelled by you", bgColor: "rgba(239, 68, 68, 0.2)", textColor: "#f87171" };
case "cancelled_by_admin":
return { text: "Cancelled by admin", bgColor: "rgba(239, 68, 68, 0.2)", textColor: "#f87171" };
default:
return { text: status, bgColor: "rgba(255,255,255,0.1)", textColor: "rgba(255,255,255,0.6)" };
}
}
const styles: Record<string, React.CSSProperties> = {
main: {
minHeight: "100vh",
@ -266,7 +253,7 @@ export default function AppointmentsPage() {
</h2>
<div style={styles.appointmentList}>
{upcomingAppointments.map((apt) => {
const status = getStatusDisplay(apt.status);
const status = getStatusDisplay(apt.status, true);
return (
<div key={apt.id} style={styles.appointmentCard}>
<div style={styles.appointmentHeader}>
@ -332,7 +319,7 @@ export default function AppointmentsPage() {
</h2>
<div style={styles.appointmentList}>
{pastOrCancelledAppointments.map((apt) => {
const status = getStatusDisplay(apt.status);
const status = getStatusDisplay(apt.status, true);
return (
<div key={apt.id} style={{...styles.appointmentCard, ...styles.appointmentCardPast}}>
<div style={styles.appointmentTime}>

33
frontend/app/utils/appointment.ts Normal file
View file

@ -0,0 +1,33 @@
/**
* Appointment-related utilities.
*/
export interface StatusDisplay {
text: string;
bgColor: string;
textColor: string;
}
/**
* Get display information for an appointment status.
*
* @param status - The appointment status string
* @param isOwnView - If true, uses "Cancelled by you" instead of "Cancelled by user"
*/
export function getStatusDisplay(status: string, isOwnView: boolean = false): StatusDisplay {
switch (status) {
case "booked":
return { text: "Booked", bgColor: "rgba(34, 197, 94, 0.2)", textColor: "#4ade80" };
case "cancelled_by_user":
return {
text: isOwnView ? "Cancelled by you" : "Cancelled by user",
bgColor: "rgba(239, 68, 68, 0.2)",
textColor: "#f87171",
};
case "cancelled_by_admin":
return { text: "Cancelled by admin", bgColor: "rgba(239, 68, 68, 0.2)", textColor: "#f87171" };
default:
return { text: status, bgColor: "rgba(255,255,255,0.1)", textColor: "rgba(255,255,255,0.6)" };
}
}