Skip to content

SBCQ-104: Error handling on form save #91

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
veenupunyani merged 1 commit into from
Mar 11, 2026
Merged

SBCQ-104: Error handling on form save #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 21 additions & 5 deletions src/components/settings/locations/CreateLocationModal/CreateLocationModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export const CreateLocationModal = ({
revalidateTable,
}: CreateLocationModalProps) => {
const [isSaving, setIsSaving] = useState(false)
const [error, setError] = useState<string | null>(null)
const [formData, setFormData] = useState<Partial<LocationWithRelations> | null>(null)
const [isFormValidState, setIsFormValidState] = useState<boolean>(false)
const [isFormValidating, setIsFormValidating] = useState<boolean>(false)
Expand Down Expand Up @@ -138,11 +139,20 @@ export const CreateLocationModal = ({

const handleSave = async () => {
if (formData && !isReadonly) {
setIsSaving(true)
await insertLocation(formData)
await revalidateTable()
onClose()
setIsSaving(false)
try {
setIsSaving(true)
await insertLocation(formData)
await revalidateTable()
onClose()
setIsSaving(false)
} catch (e: unknown) {
if (e instanceof Error) {
setError(e.message)
} else {
setError("An unknown error occurred")
}
setIsSaving(false)
}
}
}

Expand All @@ -154,6 +164,12 @@ export const CreateLocationModal = ({

<DialogBody>
<form className="space-y-5">
{error && (
<div className="flex flex-col gap-1 rounded-md border-l-4 border-l-red-600 bg-red-50 p-4">
<p className="text-sm font-medium text-red-800">{error}</p>
</div>
)}

<LocationForm
location={formData}
services={services}
Expand Down
26 changes: 21 additions & 5 deletions src/components/settings/locations/EditLocationModal/EditLocationModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ export const EditLocationModal = ({
openConfirmArchiveLocationModal,
}: EditLocationModalProps) => {
const [isSaving, setIsSaving] = useState(false)
const [error, setError] = useState<string | null>(null)
const [formData, setFormData] = useState<Partial<LocationWithRelations> | null>(null)
const [previousLocation, setPreviousLocation] = useState<Partial<LocationWithRelations> | null>(
null
Expand Down Expand Up @@ -134,11 +135,20 @@ export const EditLocationModal = ({

const handleSave = async () => {
if (formData && !isReadonly) {
setIsSaving(true)
await updateLocation(formData, previousLocation)
await revalidateTable()
onClose()
setIsSaving(false)
try {
setIsSaving(true)
await updateLocation(formData, previousLocation)
await revalidateTable()
onClose()
setIsSaving(false)
} catch (e: unknown) {
if (e instanceof Error) {
setError(e.message)
} else {
setError("An unknown error occurred")
}
setIsSaving(false)
}
}
}

Expand All @@ -165,6 +175,12 @@ export const EditLocationModal = ({
</div>
)}

{error && (
<div className="flex flex-col gap-1 rounded-md border-l-4 border-l-red-600 bg-red-50 p-4">
<p className="text-sm font-medium text-red-800">{error}</p>
</div>
)}

<LocationForm
location={formData}
services={services}
Expand Down
26 changes: 21 additions & 5 deletions ...nts/settings/service_categories/CreateServiceCategoryModal/CreateServiceCategoryModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export const CreateServiceCategoryModal = ({
revalidateTable,
}: CreateServiceCategoryModalProps) => {
const [isSaving, setIsSaving] = useState(false)
const [error, setError] = useState<string | null>(null)
const [formData, setFormData] = useState<Partial<ServiceCategoryWithRelations> | null>(null)
const [isFormValidState, setIsFormValidState] = useState<boolean>(false)
const [isFormValidating, setIsFormValidating] = useState<boolean>(false)
Expand Down Expand Up @@ -91,11 +92,20 @@ export const CreateServiceCategoryModal = ({

const handleSave = async () => {
if (formData && !isReadonly) {
setIsSaving(true)
await insertServiceCategory(formData)
await revalidateTable()
onClose()
setIsSaving(false)
try {
setIsSaving(true)
await insertServiceCategory(formData)
await revalidateTable()
onClose()
setIsSaving(false)
} catch (e: unknown) {
if (e instanceof Error) {
setError(e.message)
} else {
setError("An unknown error occurred")
}
setIsSaving(false)
}
}
}

Expand All @@ -107,6 +117,12 @@ export const CreateServiceCategoryModal = ({

<DialogBody>
<form className="space-y-5">
{error && (
<div className="flex flex-col gap-1 rounded-md border-l-4 border-l-red-600 bg-red-50 p-4">
<p className="text-sm font-medium text-red-800">{error}</p>
</div>
)}

<ServiceCategoryForm
serviceCategory={formData}
setFormData={setFormData}
Expand Down
26 changes: 21 additions & 5 deletions ...ponents/settings/service_categories/EditServiceCategoryModal/EditServiceCategoryModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export const EditServiceCategoryModal = ({
openConfirmArchiveServiceCategoryModal,
}: EditServiceCategoryModalProps) => {
const [isSaving, setIsSaving] = useState(false)
const [error, setError] = useState<string | null>(null)
const [formData, setFormData] = useState<Partial<ServiceCategoryWithRelations> | null>(null)
const [isFormValidState, setIsFormValidState] = useState<boolean>(false)
const [isFormValidating, setIsFormValidating] = useState<boolean>(false)
Expand Down Expand Up @@ -91,11 +92,20 @@ export const EditServiceCategoryModal = ({

const handleSave = async () => {
if (formData && !isReadonly) {
setIsSaving(true)
await updateServiceCategory(formData)
await revalidateTable()
onClose()
setIsSaving(false)
try {
setIsSaving(true)
await updateServiceCategory(formData)
await revalidateTable()
onClose()
setIsSaving(false)
} catch (e: unknown) {
if (e instanceof Error) {
setError(e.message)
} else {
setError("An unknown error occurred")
}
setIsSaving(false)
}
}
}

Expand All @@ -122,6 +132,12 @@ export const EditServiceCategoryModal = ({
</div>
)}

{error && (
<div className="flex flex-col gap-1 rounded-md border-l-4 border-l-red-600 bg-red-50 p-4">
<p className="text-sm font-medium text-red-800">{error}</p>
</div>
)}

<ServiceCategoryForm
serviceCategory={formData}
services={services}
Expand Down
26 changes: 21 additions & 5 deletions src/components/settings/services/CreateServiceModal/CreateServiceModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export const CreateServiceModal = ({
revalidateTable,
}: CreateServiceModalProps) => {
const [isSaving, setIsSaving] = useState(false)
const [error, setError] = useState<string | null>(null)
const [formData, setFormData] = useState<Partial<ServiceWithRelations> | null>(null)
const [isFormValidState, setIsFormValidState] = useState<boolean>(false)
const [isFormValidating, setIsFormValidating] = useState<boolean>(false)
Expand Down Expand Up @@ -115,11 +116,20 @@ export const CreateServiceModal = ({

const handleSave = async () => {
if (formData && !isReadonly) {
setIsSaving(true)
await insertService(formData)
await revalidateTable()
onClose()
setIsSaving(false)
try {
setIsSaving(true)
await insertService(formData)
await revalidateTable()
onClose()
setIsSaving(false)
} catch (e: unknown) {
if (e instanceof Error) {
setError(e.message)
} else {
setError("An unknown error occurred")
}
setIsSaving(false)
}
}
}

Expand All @@ -131,6 +141,12 @@ export const CreateServiceModal = ({

<DialogBody>
<form className="space-y-5">
{error && (
<div className="flex flex-col gap-1 rounded-md border-l-4 border-l-red-600 bg-red-50 p-4">
<p className="text-sm font-medium text-red-800">{error}</p>
</div>
)}

<ServiceForm
service={formData}
locations={locations}
Expand Down
26 changes: 21 additions & 5 deletions src/components/settings/services/EditServiceModal/EditServiceModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export const EditServiceModal = ({
openConfirmArchiveServiceModal,
}: EditServiceModalProps) => {
const [isSaving, setIsSaving] = useState(false)
const [error, setError] = useState<string | null>(null)
const [formData, setFormData] = useState<Partial<ServiceWithRelations> | null>(null)
const [previousService, setPreviousService] = useState<Partial<ServiceWithRelations> | null>(null)
const [isFormValidState, setIsFormValidState] = useState<boolean>(false)
Expand Down Expand Up @@ -115,11 +116,20 @@ export const EditServiceModal = ({

const handleSave = async () => {
if (formData && !isReadonly) {
setIsSaving(true)
await updateService(formData, previousService)
await revalidateTable()
onClose()
setIsSaving(false)
try {
setIsSaving(true)
await updateService(formData, previousService)
await revalidateTable()
onClose()
setIsSaving(false)
} catch (e: unknown) {
if (e instanceof Error) {
setError(e.message)
} else {
setError("An unknown error occurred")
}
setIsSaving(false)
}
}
}

Expand All @@ -146,6 +156,12 @@ export const EditServiceModal = ({
</div>
)}

{error && (
<div className="flex flex-col gap-1 rounded-md border-l-4 border-l-red-600 bg-red-50 p-4">
<p className="text-sm font-medium text-red-800">{error}</p>
</div>
)}

<ServiceForm
service={formData}
locations={locations}
Expand Down
26 changes: 21 additions & 5 deletions src/components/settings/users/EditStaffUserModal/EditStaffUserModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export const EditStaffUserModal = ({
openConfirmArchiveUserModal,
}: EditStaffUserModalProps) => {
const [isSaving, setIsSaving] = useState(false)
const [error, setError] = useState<string | null>(null)
const [formData, setFormData] = useState<StaffUser | null>(null)
const [previousUser, setPreviousUser] = useState<StaffUser | null>(null)
const editableRoles = useEditableRoles()
Expand All @@ -61,11 +62,20 @@ export const EditStaffUserModal = ({

const handleSave = async () => {
if (formData && !isReadonly) {
setIsSaving(true)
await updateStaffUser(formData, previousUser, editableRoles)
await revalidateTable()
onClose()
setIsSaving(false)
try {
setIsSaving(true)
await updateStaffUser(formData, previousUser, editableRoles)
await revalidateTable()
onClose()
setIsSaving(false)
} catch (e: unknown) {
if (e instanceof Error) {
setError(e.message)
} else {
setError("An unknown error occurred")
}
setIsSaving(false)
}
}
}

Expand Down Expand Up @@ -97,6 +107,12 @@ export const EditStaffUserModal = ({
</div>
)}

{error && (
<div className="flex flex-col gap-1 rounded-md border-l-4 border-l-red-600 bg-red-50 p-4">
<p className="text-sm font-medium text-red-800">{error}</p>
</div>
)}

<UserInformationSection user={user} />

<div className="grid grid-cols-2 gap-6">
Expand Down