get sidebar info from the db

ridabensalem · Jun 10, 2024 · c500a2d · c500a2d
1 parent 9c75d32
commit c500a2d
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 27 deletions.
diff --git a/app/actions/getUserProfile.ts b/app/actions/getUserProfile.ts
@@ -13,8 +13,9 @@ export default async function getUserProfile() {
       id: currentUser.id,
     },
     select: {
-        name: true,
-        email: true,
+        username: true,
+        createdAt: true,
+        image: true
     },
   });
 

diff --git a/app/api/profile/route.ts b/app/api/profile/route.ts
@@ -48,16 +48,26 @@ export async function PUT(request: Request) {
 // Handler for the GET request
 export async function GET(request: Request) {
   try {
-    // Get the current user
     const currentUser = await getCurrentUser();
 
-    // If there is no current user, return an error response
     if (!currentUser) {
       return NextResponse.error();
     }
 
-    // Return the user data as a JSON response
-    return NextResponse.json(currentUser);
+    const userProfile = await prisma.user.findUnique({
+      where: { id: currentUser.id },
+      select: {
+        username: true,
+        createdAt: true,
+        image: true,
+      },
+    });
+
+    if (!userProfile) {
+      return NextResponse.error();
+    }
+
+    return NextResponse.json(userProfile);
   } catch (e) {
     console.error(e);
     return NextResponse.error();

diff --git a/app/components/profileComponents/Sidebar.tsx b/app/components/profileComponents/Sidebar.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Popup from '../elementsUi/Popup';
 
 interface SidebarProps {
@@ -8,7 +8,26 @@ interface SidebarProps {
 const Sidebar: React.FC<SidebarProps> = ({ setCurretScreen }) => {
   const [showPopup, setShowPopup] = useState(false);
   const [hoveredItem, setHoveredItem] = useState<string | null>(null);
-  const [selectedItem, setSelectedItem] = useState<string | null>('Personal information'); // Ensure the default is the exact name
+  const [selectedItem, setSelectedItem] = useState<string | null>('Personal information');
+  const [profile, setProfile] = useState<any>(null); // State to store user profile data
+
+  useEffect(() => {
+    const fetchProfile = async () => {
+      try {
+        const response = await fetch('../api/profile');
+        if (response.ok) {
+          const userProfile = await response.json();
+          setProfile(userProfile);
+        } else {
+          console.error('Failed to fetch profile:', response.statusText);
+        }
+      } catch (error) {
+        console.error('Error fetching user profile:', error);
+      }
+    };
+
+    fetchProfile();
+  }, []);
 
   const togglePopup = () => {
     setShowPopup(!showPopup);
@@ -26,14 +45,6 @@ const Sidebar: React.FC<SidebarProps> = ({ setCurretScreen }) => {
     setSelectedItem(item);
     setCurretScreen(screen);
   };
-
-  const profile = [
-    {
-      username : '@MJ',
-      joinDate : '8-05-2024',
-      imageUrl : 'https://via.placeholder.com/100'
-    }
-  ];
 
   const navItems = [
     {
@@ -84,16 +95,18 @@ const Sidebar: React.FC<SidebarProps> = ({ setCurretScreen }) => {
       <div className="text-center mb-4">
         <h1 className="text-2xl font-bold">My Profile</h1>
       </div>
-      <div className="text-center mb-4">
-        <img
-          src={profile[0].imageUrl}
-          alt="Profile"
-          className="mx-auto rounded-full"
-          onClick={togglePopup}
-        />
-        <h2 className="mt-2 text-lg font-semibold">{profile[0].username}</h2>
-        <p className="text-sm text-gray-900">Joined on: {profile[0].joinDate}</p>
-      </div>
+      {profile && (
+        <div className="text-center mb-4">
+          <img
+            src={profile.image}
+            alt="Profile"
+            className="mx-auto rounded-full w-24 h-24 cursor-pointer"
+            onClick={togglePopup}
+          />
+          <h2 className="mt-2 text-lg font-semibold">@{profile.username}</h2>
+          <p className="text-sm text-gray-900">Joined on: {new Date(profile.createdAt).toLocaleDateString()}</p>
+        </div>
+      )}
       {showPopup && <Popup onClose={togglePopup} />}
       <nav>
         <ul className="space-y-2">
@@ -118,4 +131,4 @@ const Sidebar: React.FC<SidebarProps> = ({ setCurretScreen }) => {
   );
 };
 
-export default Sidebar;
+export default Sidebar;