feat: enhance user profile functionality with social links and error handling

Author: tomast1337

server/src/song/song.service.ts

@@ -187,7 +187,7 @@ export class SongService {
   }
 
   public async getSongByPage(query: PageQueryDTO): Promise<SongPreviewDto[]> {
-    const { page, limit, sort, order, user } = query;
+    const { page, limit, sort, order } = query;
 
     if (!page || !limit || !sort) {
       throw new HttpException(
@@ -196,8 +196,10 @@ export class SongService {
       );
     }
 
-    let filter = {};
+    const filter = {};
 
+    /*
+    // TODO: Decide if user filtering is necessary
     if (user) {
       const userDocument = await this.userService.findByUsername(user);
 
@@ -209,6 +211,7 @@ export class SongService {
         uploader: userDocument._id,
       };
     }
+    */
 
     const songs = (await this.songModel
       .find({

server/src/user/entity/user.entity.ts

@@ -2,7 +2,7 @@ import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose';
 import { HydratedDocument, Schema as MongooseSchema, Types } from 'mongoose';
 
 @Schema({})
-class SocialLinks {
+export class SocialLinks {
   bandcamp?: string;
   discord?: string;
   facebook?: string;

server/src/user/user.controller.ts

@@ -3,13 +3,15 @@ import {
   Controller,
   Get,
   Inject,
+  NotFoundException,
   Param,
   Patch,
   Query,
 } from '@nestjs/common';
 import { ApiBearerAuth, ApiOperation, ApiTags } from '@nestjs/swagger';
 import { PageQueryDTO } from '@shared/validation/common/dto/PageQuery.dto';
 import { UpdateUserProfileDto } from '@shared/validation/user/dto/UpdateUserProfile.dto';
+import { UserProfileViewDto } from '@shared/validation/user/dto/UserProfileView.dto';
 import { UserQuery } from '@shared/validation/user/dto/UserQuery.dto';
 
 import { GetRequestToken, validateUser } from '@server/lib/GetRequestUser';
@@ -44,8 +46,16 @@ export class UserController {
   @Get(':username')
   @ApiTags('user')
   @ApiOperation({ summary: 'Get user profile by username' })
-  async getUserProfile(@Param('username') username: string) {
-    return await this.userService.findByUsername(username);
+  async getUserProfile(
+    @Param('username') username: string,
+  ): Promise<UserProfileViewDto> {
+    const doc = await this.userService.findByUsername(username);
+
+    if (!doc) {
+      throw new NotFoundException('User not found');
+    }
+
+    return UserProfileViewDto.fromUserDocument(doc);
   }
 
   @Patch()

shared/validation/user/dto/UserProfileView.dto.ts

@@ -1,4 +1,4 @@
-import { UserDocument } from '@server/user/entity/user.entity';
+import { SocialLinks, UserDocument } from '@server/user/entity/user.entity';
 
 export class UserProfileViewDto {
   username: string;
@@ -9,7 +9,8 @@ export class UserProfileViewDto {
   loginCount: number;
   loginStreak: number;
   playCount: number;
-  // socialLinks: Record<keyof typeof UserLinks, string | undefined>;
+
+  socialLinks: InstanceType<typeof SocialLinks>;
 
   public static fromUserDocument(user: UserDocument): UserProfileViewDto {
     return new UserProfileViewDto({
@@ -21,7 +22,7 @@ export class UserProfileViewDto {
       loginCount: user.loginCount,
       loginStreak: user.loginStreak,
       playCount: user.playCount,
-      // socialLinks: user.socialLinks,
+      socialLinks: user.socialLinks,
     });
   }
 

web/src/app/(content)/user/[username]/page.tsx

@@ -1,5 +1,5 @@
 import { ErrorBox } from '@web/src/modules/shared/components/client/ErrorBox';
-import UserProfile from '@web/src/modules/user/components/UserProfile';
+import { UserProfile } from '@web/src/modules/user/components/UserProfile';
 import {
   getUserProfileData,
   getUserSongs,

web/src/modules/user/components/UserProfile.tsx

@@ -13,8 +13,9 @@ type UserProfileProps = {
   songData: SongPreviewDto[] | null;
 };
 
-const UserProfile = ({ userData, songData }: UserProfileProps) => {
-  const { lastSeen, username, description, profileImage } = userData;
+export const UserProfile = ({ userData, songData }: UserProfileProps) => {
+  const { lastSeen, username, description, profileImage, socialLinks } =
+    userData;
 
   return (
     <div className='max-w-screen-lg mx-auto'>
@@ -23,7 +24,7 @@ const UserProfile = ({ userData, songData }: UserProfileProps) => {
         <div className='flex items-center gap-8'>
           <Image
             src={profileImage}
-            alt={username}
+            alt={`Profile picture of ${username}`}
             className='w-32 h-32 rounded-full'
             width={128}
             height={128}
@@ -38,29 +39,30 @@ const UserProfile = ({ userData, songData }: UserProfileProps) => {
             {/* Username/handle */}
             <p className='text-zinc-400 my-1'>
               <span className='font-black text-zinc-200'>{`@${username}`}</span>
-              {` • 5 songs • 2,534 plays`}
+              {` • ${songData?.length || 0} songs • 2,534 plays`}{' '}
+              {/* Dynamic song count */}
             </p>
 
             {/* Description */}
             <p className='text-zinc-400 my-1 line-clamp-3'>
-              Hello! This is my user description.
+              {description || 'No description available.'}{' '}
+              {/* Dynamic description */}
             </p>
 
             {/* Social links */}
             <div className='flex-grow flex flex-row gap-1.5 mt-4'>
-              <UserSocialIcon icon='twitter' href='#' />
-              <UserSocialIcon icon='youtube' href='#' />
-              <UserSocialIcon icon='github' href='#' />
-              <UserSocialIcon icon='discord' href='#' />
-              <UserSocialIcon icon='patreon' href='#' />
+              {Object.entries(socialLinks).map(([key, value], i) => (
+                <UserSocialIcon key={i} icon={key} href={value} />
+              ))}
             </div>
           </div>
+
           <div className='flex-grow'></div>
+
           <div>
             {/* Joined */}
             <p className='text-zinc-500'>Joined</p>
             <p className='font-bold text-zinc-400 mb-4'>
-              {/* TODO: lastSeen is supposed to be a date, but it's a string */}
               {new Date(lastSeen).toLocaleDateString('en-UK')}
               <span className='font-normal text-zinc-400'>{` (${formatTimeAgo(
                 new Date(lastSeen),
@@ -70,7 +72,6 @@ const UserProfile = ({ userData, songData }: UserProfileProps) => {
             {/* Last seen */}
             <p className='text-zinc-500'>Last seen</p>
             <p className='font-bold text-zinc-400'>
-              {/* TODO: lastSeen is supposed to be a date, but it's a string */}
               {new Date(lastSeen).toLocaleDateString('en-UK')}
               <span className='font-normal text-zinc-400'>{` (${formatTimeAgo(
                 new Date(lastSeen),
@@ -85,14 +86,16 @@ const UserProfile = ({ userData, songData }: UserProfileProps) => {
       {/* UPLOADED SONGS */}
       <section>
         <h2 className='flex-1 text-xl uppercase mb-4 text-zinc-200'>Songs</h2>
-        <SongCardGroup>
-          {songData?.map((song, i) => (
-            <SongCard key={i} song={song} />
-          ))}
-        </SongCardGroup>
+        {songData ? (
+          <SongCardGroup>
+            {songData.map((song, i) => (
+              <SongCard key={i} song={song} />
+            ))}
+          </SongCardGroup>
+        ) : (
+          <p className='text-zinc-400'>No songs uploaded yet.</p>
+        )}
       </section>
     </div>
   );
 };
-
-export default UserProfile;