Back-end conversando com nossa UI

Agora que temos nosso back-end vamos voltar para o front-end e vamos chamar nossas funções do back-end.

Primeiro de tudo vamos importar o next-auth para checar se o usuario está logado, caso não esteja vamos redirecionar ele para a tela de login.

import { signIn, signOut, useSession } from "next-auth/react";

Não precisamos fazer nada por enquanto com o useSession mas vamos usar ele mais pra frente.

Precisamos importar agora nossa API TRPC para poder chamar nossas funções do back-end.

import { api } from "~/utils/api";

Para chamar uma função do back-end é bem simples, basta usar o useMutation ou useQuery e passar o nome da função que queremos chamar.

api.character.getChars.useQuery();

Checando usuario logado

Para checar o usuario logado podemos usar o useSession do next-auth.

Para facilitar vamos criar um hook para garantir que antes de fazer qualquer coisa o usuario deverá estar logado.

Na pasta src/utils crie um arquivo chamado useSessionGuard.ts e adicione o seguinte conteudo:

import { useSession } from "next-auth/react";
import { useEffect } from "react";
import { useRouter } from "next/router";

export const useSessionGuard = () => {
  const { data: sessionData } = useSession();
  const router = useRouter();

  useEffect(() => {
    if (!sessionData) {
      void router.replace("/login"); // Redireciona o usuario para a tela de login
    }
  }, [sessionData, router]);
};

Precisamos agora importar esse hook no nosso index.tsx e chamar ele.

// O inicio do arquivo adicionamos
...
import { useSessionGuard } from "~/utils/useSessionGuard";
...

// Dentro do componente adicionamos
...
export default function Home() {
  const [collapsedSkills, setCollapsedSkills] = useState(true);

  useSessionGuard();
  ...
}

Antes de continuar vamos criar uma tela de login para testar se está funcionando.

Crie um arquivo chamado login.tsx na pasta src/pages e adicione o seguinte conteudo:

import { signIn, useSession } from "next-auth/react";
import { useRouter } from "next/router";

export default function Login() {
  const { data: sessionData } = useSession();
  const router = useRouter();

  if (sessionData) {
    void router.push("/");
  }

  return (
    <div className="flex h-screen items-center justify-center">
      <button onClick={() => signIn()}>Login</button>
    </div>
  );
}

Eu fiz só um texto no meio da tela para chamar a função de login, mas você pode fazer uma tela melhor.

Agora se voltarmos a tela principal, você sera direcionado para a tela de login.

Depois de fazer login em nosso console podemos notar que o back-end agora responde nossa chamada de getChars com os dados do usuario.