Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Como posso chamar corretamento o tipo criado?

por Samuel Maximo De Araujo Neto
| 19.1k xp | 41 posts

Criei um tipo para eu poder usar aonde quiser sem precisar ficar chamando useSession(), pq precisaria ser um client component. Mas quando chamo ele sempre vem undefined (se chamo um atributo especifico) ou um objeto vazio (se chamo ele todo)

tipo criado:

"use client"
import { useSession } from "next-auth/react"


interface UserType {
  name: string,
  email: string,
  imageProfile: string,
}

const getUser = (): UserType => {
  const { data: session } = useSession()
  if (session) {
    return {
      name: session.user["name"],
      email: session.user["email"],
      imageProfile: session.user["jpegPhoto"]
    }
  }
  return null
};


export { getUser }

Aonde estou chamando:

import { getUser } from "../../../@types/UserType";
import { ClientImage } from "../../../components/ClientImage";
import DevComponent from "../../../components/DevComponents";

export default function Profile() {
  const user = getUser
  console.log("usuario:", user)
  return (
    <div>
      <h1>Profile Page</h1>
      <ClientImage />
      <DevComponent />
    </div>
  );
};

Agradeço desde ja a sua atenção!!

2 respostas
solução!
por Estudante
| 569.5k xp | 1338 posts

E aí, Samuel! Beleza?

Pelo que vi, tá tentando usar um hook dentro de um módulo que não é um componente, né? Isso não vai funcionar direito. O useSession() é um hook, e você só pode usar hooks dentro de componentes React ou outros hooks customizados.

Agora, uma dica pra resolver isso é criar um componente customizado que usa esse getUser e aí você pode usar o useSession dentro dele. Tipo assim:

// Em algum lugar do seu projeto, cria um componente assim:
// UserTypeComponent.tsx
import { getUser } from "../../../@types/UserType";

const UserTypeComponent = () => {
  const user = getUser();
  return user ? (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
      {/* Você pode adicionar mais coisas aqui */}
    </div>
  ) : (
    <div>Carregando...</div>
  );
};

export default UserTypeComponent;

E aí, no seu Profile ou qualquer outro lugar, você importa e usa:

import UserTypeComponent from "caminho/para/UserTypeComponent";

export default function Profile() {
  return (
    <div>
      <h1>Profile Page</h1>
      <UserTypeComponent />
      <ClientImage />
      <DevComponent />
    </div>
  );
}

Isso deve te ajudar a resolver o problema.

por Samuel Maximo De Araujo Neto
| 19.1k xp | 41 posts

Isso me ajudou mas eu queria que so retornasse um objeto com os atributos do usuario, nao quero que seja um componente em sim