From c0016a55f745c33c7b7f3f4908e3259ee3c72480 Mon Sep 17 00:00:00 2001
From: m5r <mokht@rmi.al>
Date: Sat, 4 Dec 2021 00:46:03 +0100
Subject: [PATCH] use error boundary in phone number form

---
 app/core/components/alert.tsx                 |   6 +-
 .../components/phone/phone-number-form.tsx    | 176 ++++++++++--------
 2 files changed, 106 insertions(+), 76 deletions(-)

diff --git a/app/core/components/alert.tsx b/app/core/components/alert.tsx
index c517aa4..c3806f2 100644
--- a/app/core/components/alert.tsx
+++ b/app/core/components/alert.tsx
@@ -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;
 };
 
diff --git a/app/settings/components/phone/phone-number-form.tsx b/app/settings/components/phone/phone-number-form.tsx
index 0208d6c..d2ddf14 100644
--- a/app/settings/components/phone/phone-number-form.tsx
+++ b/app/settings/components/phone/phone-number-form.tsx
@@ -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,83 +14,113 @@ type Form = {
 	phoneNumberSid: string;
 };
 
-export default function PhoneNumberForm() {
-	const { hasFilledTwilioCredentials } = useCurrentUser();
-	const currentPhoneNumber = useUserPhoneNumber();
-	const {
-		register,
-		handleSubmit,
-		setValue,
-		formState: { isSubmitting },
-	} = useForm<Form>();
-	const [setPhoneNumberMutation, { error, isError, isSuccess }] = useMutation(setPhoneNumber);
-	const [availablePhoneNumbers] = useQuery(getAvailablePhoneNumbers, {}, { enabled: hasFilledTwilioCredentials });
+export default withErrorBoundary(
+	function PhoneNumberForm() {
+		const { organization } = useCurrentUser();
+		const currentPhoneNumber = useUserPhoneNumber();
+		const {
+			register,
+			handleSubmit,
+			setValue,
+			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(() => {
-		if (currentPhoneNumber) {
-			setValue("phoneNumberSid", currentPhoneNumber.id);
-		}
-	}, [currentPhoneNumber]);
+		useEffect(() => {
+			if (currentPhoneNumber) {
+				setValue("phoneNumberSid", currentPhoneNumber.id);
+			}
+		}, [currentPhoneNumber]);
 
-	const onSubmit = handleSubmit(async ({ phoneNumberSid }) => {
-		if (isSubmitting) {
-			return;
+		const onSubmit = handleSubmit(async ({ phoneNumberSid }) => {
+			if (isSubmitting) {
+				return;
+			}
+
+			await setPhoneNumberMutation({ phoneNumberSid });
+		});
+
+		if (!hasFilledTwilioCredentials) {
+			return null;
 		}
 
-		await setPhoneNumberMutation({ phoneNumberSid });
-	});
-
-	if (!hasFilledTwilioCredentials) {
-		return null;
-	}
-
-	return (
-		<form onSubmit={onSubmit} className="flex flex-col gap-6">
-			<SettingsSection
-				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")}
+		return (
+			<form onSubmit={onSubmit} className="flex flex-col gap-6">
+				<SettingsSection
+					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>
+					}
 				>
-					<option value="none" />
-					{availablePhoneNumbers?.map(({ sid, phoneNumber }) => (
-						<option value={sid} key={sid}>
-							{phoneNumber}
-						</option>
-					))}
-				</select>
-			</SettingsSection>
-		</form>
-	);
-}
+					{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" />
+						{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 {
 	if (!error) {