use error boundary in phone number form
This commit is contained in:
parent
1303645d90
commit
c0016a55f7
@ -1,4 +1,4 @@
|
|||||||
import type { ReactElement } from "react";
|
import type { ReactElement, ReactChild } from "react";
|
||||||
|
|
||||||
type AlertVariant = "error" | "success" | "info" | "warning";
|
type AlertVariant = "error" | "success" | "info" | "warning";
|
||||||
|
|
||||||
@ -10,8 +10,8 @@ type AlertVariantProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
title: string;
|
title: ReactChild;
|
||||||
message: string;
|
message: ReactChild;
|
||||||
variant: AlertVariant;
|
variant: AlertVariant;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import { useMutation, useQuery } from "blitz";
|
import { useMutation, useQuery, withErrorBoundary } from "blitz";
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
|
|
||||||
import setPhoneNumber from "../../mutations/set-phone-number";
|
import setPhoneNumber from "../../mutations/set-phone-number";
|
||||||
@ -14,8 +14,9 @@ type Form = {
|
|||||||
phoneNumberSid: string;
|
phoneNumberSid: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function PhoneNumberForm() {
|
export default withErrorBoundary(
|
||||||
const { hasFilledTwilioCredentials } = useCurrentUser();
|
function PhoneNumberForm() {
|
||||||
|
const { organization } = useCurrentUser();
|
||||||
const currentPhoneNumber = useUserPhoneNumber();
|
const currentPhoneNumber = useUserPhoneNumber();
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
@ -24,6 +25,7 @@ export default function PhoneNumberForm() {
|
|||||||
formState: { isSubmitting },
|
formState: { isSubmitting },
|
||||||
} = useForm<Form>();
|
} = useForm<Form>();
|
||||||
const [setPhoneNumberMutation, { error, isError, isSuccess }] = useMutation(setPhoneNumber);
|
const [setPhoneNumberMutation, { error, isError, isSuccess }] = useMutation(setPhoneNumber);
|
||||||
|
const hasFilledTwilioCredentials = Boolean(organization?.twilioAccountSid && organization?.twilioAuthToken);
|
||||||
const [availablePhoneNumbers] = useQuery(getAvailablePhoneNumbers, {}, { enabled: hasFilledTwilioCredentials });
|
const [availablePhoneNumbers] = useQuery(getAvailablePhoneNumbers, {}, { enabled: hasFilledTwilioCredentials });
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -68,7 +70,11 @@ export default function PhoneNumberForm() {
|
|||||||
|
|
||||||
{isSuccess ? (
|
{isSuccess ? (
|
||||||
<div className="mb-8">
|
<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>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
@ -90,7 +96,31 @@ export default function PhoneNumberForm() {
|
|||||||
</SettingsSection>
|
</SettingsSection>
|
||||||
</form>
|
</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'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 {
|
function parseErrorMessage(error: Error | null): string {
|
||||||
if (!error) {
|
if (!error) {
|
||||||
|
Loading…
Reference in New Issue
Block a user