Merge pull request #551 from MeetDOD/issue-548

Feat: Added/fetched user avatar in admin panel successfully issue 548

admin/src/pages/Comments.tsx

@@ -97,7 +97,7 @@ const Comments = () => {
                     <td colSpan={4} className="px-8 py-4">
                       <div className="flex items-start space-x-4">
                         <div className="flex-shrink-0">
-                          <img className="h-10 w-10 rounded-full" src={`https://ui-avatars.com/api/?name=${comment.user.username}&background=0ea5e9&color=fff&rounded=true&bold=true`} alt="profile-pic" />                        
+                          <img className="h-10 w-10 rounded-full" src={comment.user?.avatar?.replace('/app', '/admin') || `https://ui-avatars.com/api/?name=${comment.user?.username}&background=0ea5e9&color=fff&rounded=true&bold=true`}  alt="profile-pic" />                        
                         </div>
                         <div className="min-w-0 flex-1">
                           <p className="text-sm font-medium text-white">

admin/src/pages/Favorites.tsx

@@ -67,7 +67,7 @@ const Favorites = () => {
                 {favoritePosts.map(favorite => (
                   <tr key={favorite.id} className="text-xs md:text-sm text-center border-b bg-[#000435] border-sky-500 hover:bg-blue-950 hover:text-white">
                     <td className="pl-7">
-                      <img className="h-10 w-10 rounded-full" src={`https://ui-avatars.com/api/?name=${favorite.user.username}&background=0ea5e9&color=fff&rounded=true&bold=true`} alt="profile-pic" />
+                      <img className="h-10 w-10 rounded-full" src={favorite.user?.avatar?.replace('/app', '/admin') || `https://ui-avatars.com/api/?name=${favorite.user?.username}&background=0ea5e9&color=fff&rounded=true&bold=true`} alt="profile-pic" />
                     </td>
                     <td className="px-8 py-4 font-semibold">
                       <div className="flex flex-col items-start">

admin/src/pages/Reactions.tsx

@@ -69,7 +69,7 @@ const Reactions = () => {
           {reactions.map(reaction => (
             <tr key={reaction.user.id + reaction.post.id + reaction.type} className="text-xs md:text-sm text-center border-b bg-[#000435] border-sky-500 hover:bg-blue-950 hover:text-white">
             <td className="pl-7">
-                <img className="h-10 w-10 rounded-full" src={`https://ui-avatars.com/api/?name=${reaction.user?.username}&background=0ea5e9&color=fff&rounded=true&bold=true`} alt="profile-pic" />
+                <img className="h-10 w-10 rounded-full" src={reaction.user?.avatar?.replace('/app', '/admin') || `https://ui-avatars.com/api/?name=${reaction.user?.username}&background=0ea5e9&color=fff&rounded=true&bold=true`} alt="profile-pic" />
             </td>
               <td className="px-6 py-4 font-semibold">
                 <div className="flex flex-col items-start">

admin/src/pages/Users.tsx

@@ -24,6 +24,7 @@ const Users = () => {
         });
         setAllUsers(response.data.allUsers.reverse());
         setLoading(false);
+        console.log(response.data.allUsers)
       } catch (error) {
         console.error("Error fetching users:", error);
         setLoading(true);
@@ -108,7 +109,7 @@ const Users = () => {
         <tbody>
           {allUsers.map(user => (
             <tr key={user.id} className="text-xs md:text-sm text-center border-b bg-[#000435] border-sky-500 hover:bg-blue-950 hover:text-white">
-              <td className="pl-7"><img className="h-10 w-10 rounded-full" src={`https://ui-avatars.com/api/?name=${user.username}&background=0ea5e9&color=fff&rounded=true&bold=true`} alt="profile-pic" /></td>
+              <td className="pl-7"><img className="h-10 w-10 rounded-full" src={user?.avatar?.replace('/app', '/admin') || `https://ui-avatars.com/api/?name=${user?.username}&background=0ea5e9&color=fff&rounded=true&bold=true`}  alt="profile-pic" /></td>
               <td className="px-8 py-4 font-semibold">
                 <div className="flex flex-col items-start">
                   <span className="font-bold">{user.username}</span>

admin/src/types.ts

@@ -67,6 +67,7 @@ export interface IFavoritePost {
     id: string;
     username: string;
     email: string;
+    avatar?:string;
   };
   post: {
     id: string;

backend/src/routes/admin/controller.ts

@@ -130,6 +130,7 @@ export const allUserForAdmin = async (req: Request, res:Response) => {
         posts:true,
         createdAt:true,
         comments:true,
+        avatar:true,
         following: {
           select: {
             id: true
@@ -167,6 +168,7 @@ export const getAdminPostsController = async (req: Request, res: Response) => {
             select: {
               username: true,
               email: true,
+              avatar:true
             },
           },
         },
@@ -486,6 +488,7 @@ export const getPostReactionsController = async (req: Request, res: Response) =>
             id: true,
             username: true,
             email: true,
+            avatar:true
           },
         },
         post: {
@@ -527,7 +530,8 @@ export const getFavoritesController = async (req: Request, res: Response) => {
           select: {
             id: true,
             username: true,
-            email: true
+            email: true,
+            avatar:true
           }
         },
         post: {

frontend/src/components/TestimonialSlider.tsx

@@ -111,7 +111,7 @@ const TestimonialSlider: React.FC = () => {
           {testimonials.slice(currentIndex, currentIndex + slidesToShow).map((testimonial, index) => (
             <div key={index} className="testimonial border border-blue-400 dark:border-gray-00 px-2 py-4 md:py-24 rounded-md mx-2 p-6 md:p-10 rounded-lg shadow-lg bg-white dark:bg-[#000435] text-[#000435] dark:text-white flex flex-col items-center justify-center min-w-[260px] md:min-w-[350px] lg:min-w-[400px]">
               <img
-                src={testimonial.image}
+                src={testimonial.image|| `https://ui-avatars.com/api/?name=${testimonial.author}&background=0ea5e9&color=fff&rounded=true&bold=true`}
                 alt={`${testimonial.author}'s picture`}
                 className="w-24 h-24 md:w-32 md:h-32 rounded-full mb-6 border-4 p-1 border-[#a238ff] dark:border-white"
               />