use error boundary in phone number form

This commit is contained in:
m5r 2021-12-04 00:46:03 +01:00
parent 1303645d90
commit c0016a55f7
2 changed files with 106 additions and 76 deletions

View File

@ -1,4 +1,4 @@
import type { ReactElement } from "react";
import type { ReactElement, ReactChild } from "react";
type AlertVariant = "error" | "success" | "info" | "warning";
@ -10,8 +10,8 @@ type AlertVariantProps = {
};
type Props = {
title: string;
message: string;
title: ReactChild;
message: ReactChild;
variant: AlertVariant;
};

View File

@ -1,5 +1,5 @@
import { useEffect } from "react";
import { useMutation, useQuery } from "blitz";
import { useMutation, useQuery, withErrorBoundary } from "blitz";
import { useForm } from "react-hook-form";
import setPhoneNumber from "../../mutations/set-phone-number";
@ -14,8 +14,9 @@ type Form = {
phoneNumberSid: string;
};
export default function PhoneNumberForm() {
const { hasFilledTwilioCredentials } = useCurrentUser();
export default withErrorBoundary(
function PhoneNumberForm() {
const { organization } = useCurrentUser();
const currentPhoneNumber = useUserPhoneNumber();
const {
register,
@ -24,6 +25,7 @@ export default function PhoneNumberForm() {
formState: { isSubmitting },
} = useForm<Form>();
const [setPhoneNumberMutation, { error, isError, isSuccess }] = useMutation(setPhoneNumber);
const hasFilledTwilioCredentials = Boolean(organization?.twilioAccountSid && organization?.twilioAuthToken);
const [availablePhoneNumbers] = useQuery(getAvailablePhoneNumbers, {}, { enabled: hasFilledTwilioCredentials });
useEffect(() => {
@ -68,7 +70,11 @@ export default function PhoneNumberForm() {
{isSuccess ? (
<div className="mb-8">
<Alert title="Saved successfully" message="Your changes have been saved." variant="success" />
<Alert
title="Saved successfully"
message="Your changes have been saved."
variant="success"
/>
</div>
) : null}
@ -90,7 +96,31 @@ export default function PhoneNumberForm() {
</SettingsSection>
</form>
);
}
},
{
fallbackRender: ({ error, resetErrorBoundary }) => (
<Alert
variant="error"
title="Authorization error"
message={
<>
<p>
We failed to fetch your Twilio phone numbers. Make sure both your SID and your auth token
are valid and that your Twilio account isn&#39;t suspended.
{error.moreInfo ? <a href={error.moreInfo}>Related Twilio docs</a> : null}
</p>
<button className="inline-flex pt-2 text-left" onClick={resetErrorBoundary}>
<span className="transition-colors duration-150 border-b border-red-200 hover:border-red-500">
Try again
</span>
</button>
</>
}
/>
),
onError: (error) => console.log("error", error),
},
);
function parseErrorMessage(error: Error | null): string {
if (!error) {