refactor: enhance authentication and signup flow with new providers, update middleware matcher, and improve type safety for API responses

components/auth/signup-form.tsx

@@ -18,10 +18,20 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import type { Atoll } from "@/lib/backend-types";
+import type { ApiResponse, Atoll } from "@/lib/backend-types";
+import { getAtolls } from "@/queries/islands";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 
 
-export default function SignUpForm({ atolls }: { atolls: Atoll[] }) {
+export default function SignUpForm() {
+	const { data: atolls, isFetching } = useQuery<ApiResponse<Atoll>>({
+		queryKey: ["ATOLLS"],
+		queryFn: () =>
+			getAtolls(),
+		placeholderData: keepPreviousData,
+		staleTime: 1,
+	});
+
 	const [atoll, setAtoll] = React.useState<Atoll>();
 
 	const [actionState, action, isPending] = React.useActionState(signup, {
@@ -39,7 +49,7 @@ export default function SignUpForm({ atolls }: { atolls: Atoll[] }) {
 	const NUMBER_WITHOUT_DASH = phoneNumberFromUrl?.split("-").join("");
 
 
-	if (actionState.db_error === "invalidPersonValidation") {
+	if (actionState?.db_error === "invalidPersonValidation") {
 		return (
 			<>
 				<div className="h-24 w-72 text-center text-green-500 p-4 flex my-4 flex-col items-center justify-center border dark:title-bg bg-white dark:bg-black rounded-lg">{actionState.message}</div>
@@ -117,7 +127,7 @@ export default function SignUpForm({ atolls }: { atolls: Atoll[] }) {
 							disabled={isPending}
 							onValueChange={(v) => {
 								console.log({ v })
-								setAtoll(atolls.find((atoll) => atoll.id === Number.parseInt(v)));
+								setAtoll(atolls?.data.find((atoll) => atoll.id === Number.parseInt(v)));
 							}}
 							name="atoll_id"
 							value={atoll?.id?.toString() ?? ""}
@@ -128,7 +138,7 @@ export default function SignUpForm({ atolls }: { atolls: Atoll[] }) {
 							<SelectContent>
 								<SelectGroup>
 									<SelectLabel>Atolls</SelectLabel>
-									{atolls.map((atoll) => (
+									{atolls?.data.map((atoll) => (
 										<SelectItem key={atoll.id} value={atoll.id.toString()}>
 											{atoll.name}
 										</SelectItem>

components/query-provider.tsx

@@ -1,12 +0,0 @@
-"use client";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-
-const queryClient = new QueryClient();
-
-export default function QueryProvider({
-	children,
-}: { children: React.ReactNode }) {
-	return (
-		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-	);
-}

components/theme-provider.tsx

@@ -1,10 +0,0 @@
-"use client";
-
-import { ThemeProvider as NextThemesProvider } from "next-themes";
-
-export function ThemeProvider({
-	children,
-	...props
-}: React.ComponentProps<typeof NextThemesProvider>) {
-	return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
-}