11"use client" ;
22import { TopHeader } from "@/components/TopHeader" ;
3+ import { Avatar , AvatarFallback , AvatarImage } from "@radix-ui/react-avatar" ;
34import axios from "axios" ;
45import { useSession } from "next-auth/react" ;
5- import { useEffect } from "react" ;
6+ import { useEffect , useState } from "react" ;
67import { AiOutlineLink } from "react-icons/ai" ;
78import { GrLocation } from "react-icons/gr" ;
89import { IoCalendarOutline } from "react-icons/io5" ;
910import { PiBalloon } from "react-icons/pi" ;
1011
12+ interface UserDataProps {
13+ DOB : string ;
14+ location : string ;
15+ createdDate : string ;
16+ bio : string ;
17+ }
1118export const UserInfo = ( ) => {
1219 const { data : session } = useSession ( ) ;
20+ const [ userData , setUserData ] = useState < UserDataProps [ ] | null > ( null ) ;
21+ const [ error , setError ] = useState ( "" ) ;
22+ const [ loading , setLoading ] = useState ( false ) ;
23+
1324 useEffect ( ( ) => {
1425 const fetchUserData = async ( ) => {
1526 try {
27+ setLoading ( true ) ;
1628 const response = await axios . get ( "api/user" ) ;
17- console . log ( "User data" , response . data ) ;
29+ const u_Data = response . data . data ;
30+ if ( Array . isArray ( u_Data ) && response . data . data . length > 0 ) {
31+ setUserData ( u_Data ) ;
32+ console . log ( u_Data , "Here it is" ) ;
33+ } else {
34+ setError ( "No user data found" ) ;
35+ }
1836 } catch ( error ) {
1937 console . log ( "Getting user data failed" , error ) ;
38+ } finally {
39+ setLoading ( false ) ;
2040 }
2141 } ;
2242 fetchUserData ( ) ;
@@ -36,12 +56,13 @@ export const UserInfo = () => {
3656 } }
3757 >
3858 < div >
39- < img
40- className = "absolute rounded-full w-40 h-40 border-4 border-black bottom-0 top-48 left-3
41- "
42- src = "https://github.com/mscode07.png"
43- alt = "Extra large avatar"
44- />
59+ < Avatar >
60+ < AvatarImage
61+ src = { session ?. user ?. image || "" }
62+ alt = { session ?. user ?. name || "User" }
63+ />
64+ < AvatarFallback > { session ?. user ?. name ?. [ 0 ] } </ AvatarFallback >
65+ </ Avatar >
4566 </ div >
4667 </ div >
4768 < div className = "mt-24 ml-3" >
@@ -55,7 +76,7 @@ export const UserInfo = () => {
5576 < div className = "flex gap-2" >
5677 < p className = "flex items-center text-gray-500 gap-1" >
5778 < GrLocation className = "text-xl" />
58- location
79+ { userData ?. [ 0 ] ?. location || "Location" }
5980 </ p >
6081 < a
6182 className = "text-blue-500 flex items-center gap-1"
@@ -65,11 +86,13 @@ export const UserInfo = () => {
6586 buymeacoffee.com/mscode07
6687 </ a >
6788 < p className = "flex items-center text-gray-500 gap-1" >
68- < PiBalloon className = "text-xl font-bold" /> { }
89+ < PiBalloon className = "text-xl font-bold" />
90+ { userData ?. [ 0 ] ?. DOB || "DOB" }
6991 </ p >
7092 </ div >
7193 < p className = "flex items-center text-gray-500 gap-2" >
72- < IoCalendarOutline className = "text-lg" /> Joined December 2017
94+ < IoCalendarOutline className = "text-lg" /> { " " }
95+ { userData ?. [ 0 ] ?. createdDate }
7396 </ p >
7497 < div className = "flex gap-2 mt-2" >
7598 < div className = "flex" >
0 commit comments