From 07ac700d3505592388685c877281266b522f24c9 Mon Sep 17 00:00:00 2001
From: Emilio Heinzmann <emiliosheinz@gmail.com>
Date: Mon, 20 May 2024 20:17:41 -0300
Subject: [PATCH 1/2] fix: call getProviders on client side

---
 .../_components/AuthenticationProviders.tsx   | 75 +++++++++++++++++++
 src/app/signin/page.tsx                       | 36 +--------
 src/server/auth/index.ts                      |  1 -
 3 files changed, 78 insertions(+), 34 deletions(-)
 create mode 100644 src/app/signin/_components/AuthenticationProviders.tsx

diff --git a/src/app/signin/_components/AuthenticationProviders.tsx b/src/app/signin/_components/AuthenticationProviders.tsx
new file mode 100644
index 0000000..f0cf91c
--- /dev/null
+++ b/src/app/signin/_components/AuthenticationProviders.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { getProviders } from "next-auth/react";
+import { useEffect, useMemo, useState } from "react";
+import { SignInProviderButton } from "./SignInProviderButton";
+import { EmailProviderForm } from "./EmailProviderForm";
+import { Loader2 } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
+import { FiAlertTriangle } from "react-icons/fi";
+
+type GetProvidersState = "idle" | "loading" | "success" | "error";
+
+type AuthenticationProvidersProps = {
+  callbackUrl?: string;
+};
+
+export function AuthenticationProviders({
+  callbackUrl,
+}: AuthenticationProvidersProps) {
+  const [providers, setProviders] =
+    useState<Awaited<ReturnType<typeof getProviders>>>();
+  const [getProvidersState, setGetProvidersState] =
+    useState<GetProvidersState>("idle");
+
+  useEffect(() => {
+    setGetProvidersState("loading");
+    getProviders()
+      .then((providers) => {
+        setProviders(providers);
+        setGetProvidersState("success");
+      })
+      .catch(() => {
+        setGetProvidersState("error");
+      });
+  }, []);
+
+  const [emailProvider, otherProviders] = useMemo(() => {
+    if (!providers) return [null, null];
+    const email = providers.email;
+    const other = Object.values(providers).filter(
+      (provider) => provider.id !== "email",
+    );
+    return [email, other];
+  }, [providers]);
+
+  if (["loading", "idle"].includes(getProvidersState)) {
+    return <Loader2 className="mt-10 size-8 animate-spin" />;
+  }
+
+  if (getProvidersState === "error") {
+    return (
+      <Alert variant="destructive">
+        <FiAlertTriangle className="h-4 w-4" />
+        <AlertTitle>Erro ao carregar provedores de login</AlertTitle>
+        <AlertDescription>
+          <span>Por favor, entre em contato com o nosso suporte em&nbsp;</span>
+          <a href="mailto:sospet.suport@gmail.com">sospet.suport@gmail.com</a>
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  return (
+    <div className="mt-5 w-full">
+      {otherProviders?.map((provider) => (
+        <SignInProviderButton
+          key={provider.id}
+          provider={provider}
+          callbackUrl={callbackUrl ?? "/"}
+        />
+      ))}
+      {!!emailProvider && <EmailProviderForm />}
+    </div>
+  );
+}
diff --git a/src/app/signin/page.tsx b/src/app/signin/page.tsx
index bdd3e45..3ccace1 100644
--- a/src/app/signin/page.tsx
+++ b/src/app/signin/page.tsx
@@ -1,44 +1,23 @@
-import {
-  type ClientSafeProvider,
-  type LiteralUnion,
-  getProviders,
-} from "next-auth/react";
 import { redirect } from "next/navigation";
 import { getServerAuthSession } from "~/server/auth";
-import { SignInProviderButton } from "./_components/SignInProviderButton";
 import Image from "next/image";
 import { Suspense } from "react";
 import { Loader2 } from "lucide-react";
-import { EmailProviderForm } from "./_components/EmailProviderForm";
 import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
 import { FiAlertTriangle } from "react-icons/fi";
+import { AuthenticationProviders } from "./_components/AuthenticationProviders";
 
 type SignInPageProps = {
   searchParams: Record<string, string>;
 };
 
-const splitProviders = (
-  providers: Awaited<ReturnType<typeof getProviders>>,
-): [ClientSafeProvider | null, ClientSafeProvider[]] | [null, null] => {
-  if (!providers) return [null, null];
-  const email = providers.email;
-  const other = Object.values(providers).filter(
-    (provider) => provider.id !== "email",
-  );
-  return [email, other];
-};
-
 export default async function SignInPage({ searchParams }: SignInPageProps) {
-  const [session, providers] = await Promise.all([
-    getServerAuthSession(),
-    getProviders(),
-  ]);
+  const session = await getServerAuthSession();
 
   if (session) {
     redirect(searchParams.callbackUrl ?? "/");
   }
 
-  const [emailProvider, otherProviders] = splitProviders(providers);
   const hasError = !!searchParams.error;
 
   return (
@@ -62,16 +41,7 @@ export default async function SignInPage({ searchParams }: SignInPageProps) {
           </AlertDescription>
         </Alert>
       )}
-      <div className="w-full">
-        {otherProviders?.map((provider) => (
-          <SignInProviderButton
-            key={provider.id}
-            provider={provider}
-            callbackUrl={searchParams.callbackUrl ?? "/"}
-          />
-        ))}
-        {!!emailProvider && <EmailProviderForm />}
-      </div>
+      <AuthenticationProviders />
     </Suspense>
   );
 }
diff --git a/src/server/auth/index.ts b/src/server/auth/index.ts
index e23a999..22c47f8 100644
--- a/src/server/auth/index.ts
+++ b/src/server/auth/index.ts
@@ -1,6 +1,5 @@
 import { PrismaAdapter } from "@auth/prisma-adapter";
 import {
-  type Theme,
   getServerSession,
   type DefaultSession,
   type NextAuthOptions,

From 06812a82c132ba9f057f8c45f62815c4016762d7 Mon Sep 17 00:00:00 2001
From: Emilio Heinzmann <emiliosheinz@gmail.com>
Date: Mon, 20 May 2024 20:19:47 -0300
Subject: [PATCH 2/2] style: remove unused imports

---
 src/app/page.tsx                     | 11 -----------
 src/components/header/nav/index.tsx  |  1 -
 src/components/header/user/index.tsx |  2 +-
 3 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3643be0..b99578b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,7 +2,6 @@
 import { Card } from "~/components/card/";
 import { SearchInput } from "~/components/search-input";
 import { api } from "~/trpc/react";
-import { Filters } from "~/components/filters";
 import Fuse from "fuse.js";
 import { useMemo } from "react";
 import { Skeleton } from "~/components/ui/skeleton";
@@ -10,16 +9,6 @@ import { useDebouncedState } from "~/hooks/use-debouced-state";
 import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
 import { FiInfo } from "react-icons/fi";
 
-const menus = [
-  {
-    label: "Disponibilidade",
-    items: [
-      { label: "Com vagas", checked: true },
-      { label: "Sem vagas", checked: false },
-    ],
-  },
-];
-
 export default function Home() {
   const { data, isLoading } = api.shelter.findAll.useQuery();
   const [searchTerm, setSearchTerm] = useDebouncedState("", 300);
diff --git a/src/components/header/nav/index.tsx b/src/components/header/nav/index.tsx
index aaa56f6..629c1b6 100644
--- a/src/components/header/nav/index.tsx
+++ b/src/components/header/nav/index.tsx
@@ -1,5 +1,4 @@
 "use client";
-import { useRouter } from "next/navigation";
 
 import { Button } from "~/components/ui/button";
 import { useSession, signOut } from "next-auth/react";
diff --git a/src/components/header/user/index.tsx b/src/components/header/user/index.tsx
index 1b29cd0..f533203 100644
--- a/src/components/header/user/index.tsx
+++ b/src/components/header/user/index.tsx
@@ -1,7 +1,7 @@
 "use client";
 import Image from "next/image";
 
-import { useSession, signIn } from "next-auth/react";
+import { useSession } from "next-auth/react";
 
 import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
 import { Button } from "~/components/ui/button";