Имя пользователя в Navbar Next.js -Typescript-Supabase

Я пытаюсь получить имя пользователя на панели навигации. Имя пользователя = столбец «имя пользователя» таблицы "profiles" в моей базе данных Supabase. Как вы можете видеть ниже, на данный момент он заполнен электронными письмами пользователей. Я не могу изменить его просто на user.username, потому что «пользователь» - это неправильная таблица.

Мой компонент navbar.tsx выглядит так:

    import { useUser, useSupabaseClient } from "@supabase/auth-helpers-react";
    import { useRouter } from "next/router";
    import Link from "next/link";

    const NavbarComponent = () => {
    const supabaseClient = useSupabaseClient();
    const user = useUser();
    const router = useRouter();

    function signOutUser() {
        supabaseClient.auth.signOut();
        router.push("/"); // localhost:3000
    }
    return (
        <Navbar isBordered isCompact>
            <Navbar.Brand as = {Link} href = "/">
                ShareArticles
            </Navbar.Brand>
            <Navbar.Content hideIn = "xs" variant = "highlight-rounded">
                <Navbar.Link href = "/mainFeed">Main Feed</Navbar.Link>
                <Navbar.Link href = "/createArticle">Create Article</Navbar.Link>
            </Navbar.Content>

            <Navbar.Content>
                {!user ?  /*User doesnt exist*/
                    <>
                        <Navbar.Link href = "/login">
                            <Button auto flat>
                                Login
                            </Button>
                        </Navbar.Link>
                    </>
                :         /* User does exist */
                    <>
                        <Navbar.Item>
                            <Navbar.Link href = "/updateAccount">{user?.email}</Navbar.Link> 
                            // Here is now the email, but I want the username! of the table profiles

                        </Navbar.Item>
                        <Navbar.Item>
                            <Button auto flat onPress = {() => signOutUser()}>
                                Sign Out
                            </Button>
                        </Navbar.Item>
                    </>
                }  
            </Navbar.Content>
        </Navbar>
    ) 
    }
    export default NavbarComponent;  

мой _app.tsx выглядит так:

     import { createBrowserSupabaseClient } from "@supabase/auth-helpers-nextjs";
     import { SessionContextProvider } from "@supabase/auth-helpers-react";
     import { useState } from "react";
     import { NextUIProvider } from "@nextui-org/react";
     import { Box } from "../components/Box";
     import Navbar from '../components/NavbarComponent';
     import { userAgent } from 'next/server';

      // Providers (providing Supabase to our application, nextui providers)
      // Navbar

     // Navbar
     // Box (container for the content)

    function MyApp({ Component, pageProps }: AppProps) {
       const [supabaseClient] = useState(() => createBrowserSupabaseClient());
    // Supabase URL? Supabase Anon key? CREATE A SUPABASE ACCOUNT

    return  (
    <SessionContextProvider
      supabaseClient = {supabaseClient}
    >
      <NextUIProvider>
        <Navbar/>
        <Box css = {{ px: "$12", py: "$15", mt: "$12", "@xsMax": {px: "$10"}, maxWidth: "800px", margin: "0 auto" }}>
          <Component {...pageProps} />
        </Box>
      </NextUIProvider>
    </SessionContextProvider>
     )
    }
    export default MyApp

Заранее спасибо!

Я уже пытался изменить useUser на useProfiles и добавить

type Profiles = Database["public"]["Tables"]["profiles"]["Row"];

Но ничего не сработало. Я новичок в среде Nextjs и не могу найти ничего полезного в извлечении данных из таблиц супабазы, кроме документов самой супабазы. Извините за мой плохой английский .. Заранее спасибо

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
96
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Используете ли вы какой-либо начальный шаблон или следуете какому-либо руководству?

useUser — это хук, реализованный auth-helper для предоставления пользовательского объекта.

Чтобы получить эти данные из таблицы профилей, вы можете использовать supabase-js:

const getUserDetails = () => supabase.from('profiles').select('username').single();

Вы можете реализовать свой собственный хук, который вы можете использовать в своем приложении, чтобы ссылаться на данные пользователя.

Пример реализации такого хука вы можете найти здесь: https://github.com/vercel/nextjs-subscription-payments/blob/main/utils/useUser.tsx

Спасибо за ответ. Да, я использовал следующий учебник: youtube.com/watch?v=Doy2OfNvnoI

Ruben van Oranje 10.01.2023 11:30

мне нужно больше информации

Ruben van Oranje 13.01.2023 13:18

Я сделал это, решение:

import { Navbar, Button, Text } from "@nextui-org/react";
import {  useSupabaseClient, useUser } from "@supabase/auth-helpers-react";
import { useRouter } from "next/router";
import Link from "next/link";
// import { useUser } from '@utils/useUser';
import { User } from '@supabase/supabase-js';
import { useEffect, useState } from "react";
const NavbarComponent = () => {
    const supabaseClient = useSupabaseClient();
    const user = useUser();
    const router = useRouter();
    const [profile, setProfile] = useState<any>({});

    useEffect( () => {
        async function getProfile() {
            const {data, error} = await supabaseClient
                .from("profiles")
                .select("*")
                .filter("id", "eq", user?.id)
                .single();
            if (error) {
                console.info(error);
            } else {
                setProfile(data);
            }
        }
        if (typeof user?.id !== "undefined") {
            getProfile();
        }
    }, [user?.id])


    function signOutUser() {
        supabaseClient.auth.signOut();
        router.push("/"); // localhost:3000
    }
    return (
        <Navbar isBordered isCompact>
            <Navbar.Brand as = {Link} href = "/">
                ShareArticles
            </Navbar.Brand>
            <Navbar.Content hideIn = "xs" variant = "highlight-rounded">
                <Navbar.Link href = "/mainFeed">Main Feed</Navbar.Link>
                <Navbar.Link href = "/createArticle">Create Article</Navbar.Link>
            </Navbar.Content>

            <Navbar.Content>
                {!user ?  /*User doesnt exist*/
                    <>
                        <Navbar.Link href = "/login">
                            <Button auto flat>
                                Login
                            </Button>
                        </Navbar.Link>
                    </>
                :         /* User does exist */
                    <>
                        <Navbar.Item>
                            <Navbar.Link href = "/updateAccount">{profile.username}</Navbar.Link>
                        </Navbar.Item>
                        <Navbar.Item>
                            <Navbar.Link href = "/testNav">testNav</Navbar.Link>
                        </Navbar.Item>
                        <Navbar.Item>
                            <Button auto flat onPress = {() => signOutUser()}>
                                Sign Out
                            </Button>
                        </Navbar.Item>
                    </>
                }  
            </Navbar.Content>
        </Navbar>
    )
}

export default NavbarComponent;

Другие вопросы по теме