shellphone.app/app/settings/components/phone/phone-number-form.tsx

import { useEffect } from "react";
import { useMutation, useQuery } from "blitz";
import { useForm } from "react-hook-form";

import setPhoneNumber from "../../mutations/set-phone-number";
import getAvailablePhoneNumbers from "../../queries/get-available-phone-numbers";
import useCurrentUser from "app/core/hooks/use-current-user";
import useUserPhoneNumber from "app/core/hooks/use-current-phone-number";
import Button from "../button";
import SettingsSection from "../settings-section";
import Alert from "app/core/components/alert";

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

	useEffect(() => {
		if (currentPhoneNumber) {
			setValue("phoneNumberSid", currentPhoneNumber.id);
		}
	}, [currentPhoneNumber]);

	const onSubmit = handleSubmit(async ({ phoneNumberSid }) => {
		if (isSubmitting) {
			return;
		}

		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")}
				>
					<option value="none" />
					{availablePhoneNumbers?.map(({ sid, phoneNumber }) => (
						<option value={sid} key={sid}>
							{phoneNumber}
						</option>
					))}
				</select>
			</SettingsSection>
		</form>
	);
}

function parseErrorMessage(error: Error | null): string {
	if (!error) {
		return "";
	}

	if (error.name === "ZodError") {
		return JSON.parse(error.message)[0].message;
	}

	return error.message;
}