Hello, devs, I'm using Supabase auth and Table to match the id with the Authentication then show data from the database, and it was working correctly but now, I can't seem to fix it, can you check the code and answer the solution.
import {useState, useEffect} from 'react';
import {supabase} from '../db/supabase';
import {Helmet} from "react-helmet";
import styled from 'styled-components';
import Header from '../components/Header';
export default function Home() {
const [session, setSession] = useState(null)
const [username, setUsername] = useState(null)
const [bio, setBio] = useState(null)
const [avatar, setAvatar] = useState(null)
const [first_name, setFirstName] = useState(null);
const [last_name, setLastName] = useState(null)
useEffect(() => {
setSession(supabase.auth.session())
supabase.auth.onAuthStateChange((_event, session) => {
setSession(session)
})
}, [])
getProfile()
async function getProfile() {
try {
const user = supabase.auth.user()
let {data, error, status} = await supabase
.from('Accounts')
.select(`username, bio, avatar, first_name, last_name`)
.eq('id', user.id)
.single()
if (error && status !== 406) {
throw error
}
if (data) {
setUsername(data.username)
setBio(data.bio)
setAvatar(data.avatar)
setFirstName(data.first_name)
setLastName(data.last_name)
}
} catch (error) {
alert(error.message)
}
}
return (
<>
<Helmet>
<title>{session ? `Preferencat për ${session.user.id} ` : null}</title>
<meta name="description" content="Cicërimat një vend për tu shprehur." />
</Helmet>
{session ?
<>
<Header />
<Container>
<ProfileCover>
<ProfilePhoto src={session ? avatar : 'https://media.istockphoto.com/photos/smiling-man-outdoors-in-the-city-picture-id1179420343?k=6&m=1179420343&s=612x612&w=0&h=y7GrwxrbixTWvJfaeiu55rWXMGYr6oP583uzJJ4-Kis='}></ProfilePhoto>
</ProfileCover>
<ProfileDown>
<ProfileInfo>
<ProfileName>{first_name} {last_name}</ProfileName>
<ProfileUsername>@{username}</ProfileUsername>
<ProfileTabBreak />
<ProfileStats>
<Following>
<FollowingCount>214</FollowingCount>
<FollowingName>Duke i Ndjekur</FollowingName>
</Following>
<Followers>
<FollowersCount>2221</FollowersCount>
<FollowersName>Ndjekësit</FollowersName>
</Followers>
<Follow>Follow</Follow>
</ProfileStats>
<ProfileTabTitle>Bio</ProfileTabTitle>
<ProfileTabBreak />
<ProfileBio>{bio}</ProfileBio>
</ProfileInfo>
<ProfilePosts>
<h1>Cicërimat</h1>
<Article>
<ArticleTop>
<Profile>
<ProfileImg src="itwaspicvariable" />
<InfoPost>
</InfoPost>
</Profile>
</ArticleTop>
<ArticleMiddle>
</ArticleMiddle>
<ArticleBottom>
<Like>
<LikeIcon width="21" height="20">
</LikeIcon>
Pëlqe
</Like>
<Save>
Ruaj
</Save>
<Copy>
<CopyIcon width="21" height="20">
</CopyIcon>
Kopjo
</Copy>
</ArticleBottom>
</Article>
</ProfilePosts>
</ProfileDown>
{/* <ContainerLeft>
<Configurations>
<Section>
<Title>Preferencat</Title>
</Section>
<Section>
<Info>
<Name>Emri dhe Mbiemri</Name>
<Description>Të dhëna që shfaqën në profilin tënd të Cicërima</Description>
</Info>
<Area>
<Input type="text" placeholder="Emri"></Input>
<Input type="text" placeholder="Mbiemri"></Input>
</Area>
</Section>
<Section>
<Info>
<Name>Email Adresa</Name>
<Description>Kjo eshte email adresa e lidhur me kete akount.</Description>
</Info>
<Area>
<Input type="text" value={session.user.email} placeholder="Adresa Elektronike" disabled />
</Area>
</Section>
<Section>
<Info>
<Name>Usernami</Name>
<Description>Usernami qe munde te kyqeni me, ajo automatikisht perdort dhe per urln.</Description>
</Info>
<Area>
<Input type="text" value={username} onnChange={(e) => setUsername(e.target.value)} placeholder="Username" />
</Area>
</Section>
<Section>
<Info>
<Name>Webfaqja</Name>
<Description>Usernami qe munde te kyqeni me, ajo automatikisht perdort dhe per urln.</Description>
</Info>
<Area>
<Input type="url" value={bio} onChange={(e) => setBio(e.target.value)} placeholder="Biografia" />
</Area>
</Section>
<Section>
<Info>
<Name>Bio</Name>
<Description>Usernami qe munde te kyqeni me, ajo automatikisht perdort dhe per urln.</Description>
</Info>
<Area>
<Input type="url" placeholder="bio" value={avatar || ''} onChange={(e) => setAvatar(e.target.value)} />
</Area>
</Section>
<Section>
<button onClick={() => updateProfile({username, bio, avatar})}>Update</button>
</Section>
</Configurations>
</ContainerLeft> */}
</Container>
</>
:
null
}
</>
)
}
Hello, devs, I'm using Supabase auth and Table to match the id with the Authentication then show data from the database, and it was working correctly but now, I can't seem to fix it, can you check the code and answer the solution.