mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use error boundary in phone number form

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/core/components/alert.tsx
View File

@ -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;
}; };

176
app/settings/components/phone/phone-number-form.tsx
View File

@ -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,83 +14,113 @@ type Form = {
phoneNumberSid: string; phoneNumberSid: string;
}; };
export default function PhoneNumberForm() { export default withErrorBoundary(
const { hasFilledTwilioCredentials } = useCurrentUser(); function PhoneNumberForm() {
const currentPhoneNumber = useUserPhoneNumber(); const { organization } = useCurrentUser();
const { const currentPhoneNumber = useUserPhoneNumber();
register, const {
handleSubmit, register,
setValue, handleSubmit,
formState: { isSubmitting }, setValue,
} = useForm<Form>(); formState: { isSubmitting },
const [setPhoneNumberMutation, { error, isError, isSuccess }] = useMutation(setPhoneNumber); } = useForm<Form>();
const [availablePhoneNumbers] = useQuery(getAvailablePhoneNumbers, {}, { enabled: hasFilledTwilioCredentials }); const [setPhoneNumberMutation, { error, isError, isSuccess }] = useMutation(setPhoneNumber);
const hasFilledTwilioCredentials = Boolean(organization?.twilioAccountSid && organization?.twilioAuthToken);
const [availablePhoneNumbers] = useQuery(getAvailablePhoneNumbers, {}, { enabled: hasFilledTwilioCredentials });
useEffect(() => { useEffect(() => {
if (currentPhoneNumber) { if (currentPhoneNumber) {
setValue("phoneNumberSid", currentPhoneNumber.id); setValue("phoneNumberSid", currentPhoneNumber.id);
} }
}, [currentPhoneNumber]); }, [currentPhoneNumber]);
const onSubmit = handleSubmit(async ({ phoneNumberSid }) => { const onSubmit = handleSubmit(async ({ phoneNumberSid }) => {
if (isSubmitting) { if (isSubmitting) {
return; return;
}
await setPhoneNumberMutation({ phoneNumberSid });
});
if (!hasFilledTwilioCredentials) {
return null;
} }
await setPhoneNumberMutation({ phoneNumberSid }); return (
}); <form onSubmit={onSubmit} className="flex flex-col gap-6">
<SettingsSection
if (!hasFilledTwilioCredentials) { className="relative"
return null; footer={
} <div className="px-4 py-3 bg-gray-50 text-right text-sm font-medium sm:px-6">
<Button variant="default" type="submit" isDisabled={isSubmitting}>
return ( {isSubmitting ? "Saving..." : "Save"}
<form onSubmit={onSubmit} className="flex flex-col gap-6"> </Button>
<SettingsSection </div>
className="relative" }
footer={
<div className="px-4 py-3 bg-gray-50 text-right text-sm font-medium sm:px-6">
<Button variant="default" type="submit" isDisabled={isSubmitting}>
{isSubmitting ? "Saving..." : "Save"}
</Button>
</div>
}
>
{isError ? (
<div className="mb-8">
<Alert
title="Oops, there was an issue"
message={parseErrorMessage(error as Error | null)}
variant="error"
/>
</div>
) : null}
{isSuccess ? (
<div className="mb-8">
<Alert title="Saved successfully" message="Your changes have been saved." variant="success" />
</div>
) : null}
<label htmlFor="phoneNumberSid" className="block text-sm font-medium text-gray-700">
Phone number
</label>
<select
id="phoneNumberSid"
className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md"
{...register("phoneNumberSid")}
> >
<option value="none" /> {isError ? (
{availablePhoneNumbers?.map(({ sid, phoneNumber }) => ( <div className="mb-8">
<option value={sid} key={sid}> <Alert
{phoneNumber} title="Oops, there was an issue"
</option> message={parseErrorMessage(error as Error | null)}
))} variant="error"
</select> />
</SettingsSection> </div>
</form> ) : null}
);
} {isSuccess ? (
<div className="mb-8">
<Alert
title="Saved successfully"
message="Your changes have been saved."
variant="success"
/>
</div>
) : null}
<label htmlFor="phoneNumberSid" className="block text-sm font-medium text-gray-700">
Phone number
</label>
<select
id="phoneNumberSid"
className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md"
{...register("phoneNumberSid")}
>
<option value="none" />
{availablePhoneNumbers?.map(({ sid, phoneNumber }) => (
<option value={sid} key={sid}>
{phoneNumber}
</option>
))}
</select>
</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 { function parseErrorMessage(error: Error | null): string {
if (!error) { if (!error) {