feat: enhance user profile editing with additional social links and validation

Author: tomast1337

NoteBlockWorld.code-workspace

@@ -40,6 +40,8 @@
         },
         "cSpell.words": [
             "Bentroen",
+            "spotify",
+            "tiktok",
             "Tomast"
         ]
     },

bun.lock

@@ -170,6 +170,7 @@
         "typescript": "^5.1.3",
         "zod": "^3.24.1",
         "zod-validation-error": "^3.4.0",
+        "zustand": "^5.0.4",
       },
       "devDependencies": {
         "@shrutibalasa/tailwind-grid-auto-fit": "^1.1.0",
@@ -3102,6 +3103,8 @@
 
     "zod-validation-error": ["[email protected]", "", { "peerDependencies": { "zod": "^3.18.0" } }, "sha512-ZOPR9SVY6Pb2qqO5XHt+MkkTRxGXb4EVtnjc9JpXUOtUB1T9Ru7mZOT361AN3MsetVe7R0a1KZshJDZdgp9miQ=="],
 
+    "zustand": ["[email protected]", "", { "peerDependencies": { "@types/react": ">=18.0.0", "immer": ">=9.0.6", "react": ">=18.0.0", "use-sync-external-store": ">=1.2.0" }, "optionalPeers": ["@types/react", "immer", "react", "use-sync-external-store"] }, "sha512-39VFTN5InDtMd28ZhjLyuTnlytDr9HfwO512Ai4I8ZABCoyAj4F1+sr7sD1jP/+p7k77Iko0Pb5NhgBFDCX0kQ=="],
+
     "zwitch": ["[email protected]", "", {}, "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="],
 
     "@ampproject/remapping/@jridgewell/trace-mapping": ["@jridgewell/[email protected]", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ=="],

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

@@ -1,4 +1,21 @@
-import { SocialLinks, UserDocument } from '@server/user/entity/user.entity';
+export class SocialLinks {
+  bandcamp?: string;
+  discord?: string;
+  facebook?: string;
+  github?: string;
+  instagram?: string;
+  reddit?: string;
+  snapchat?: string;
+  soundcloud?: string;
+  spotify?: string;
+  steam?: string;
+  telegram?: string;
+  tiktok?: string;
+  threads?: string;
+  twitch?: string;
+  x?: string;
+  youtube?: string;
+}
 
 export class UserProfileViewDto {
   username: string;
@@ -12,7 +29,7 @@ export class UserProfileViewDto {
 
   socialLinks: InstanceType<typeof SocialLinks>;
 
-  public static fromUserDocument(user: UserDocument): UserProfileViewDto {
+  public static fromUserDocument(user: UserProfileViewDto): UserProfileViewDto {
     return new UserProfileViewDto({
       username: user.username,
       publicName: user.publicName,

web/package.json

@@ -55,7 +55,7 @@
     "typescript": "^5.1.3",
     "zod": "^3.24.1",
     "zod-validation-error": "^3.4.0",
-    "zustand": "^5.0.3"
+    "zustand": "^5.0.4"
   },
   "devDependencies": {
     "@shrutibalasa/tailwind-grid-auto-fit": "^1.1.0",

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

@@ -0,0 +1,287 @@
+'use client';
+
+import {
+  faExclamationCircle,
+  faExternalLink,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { deepFreeze } from '@shared/validation/common/deepFreeze';
+import type { UserProfileViewDto } from '@shared/validation/user/dto/UserProfileView.dto';
+import Link from 'next/link';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { z as zod } from 'zod';
+import { create } from 'zustand';
+
+import {
+  Input,
+  TextArea,
+} from '@web/src/modules/shared/components/client/FormElements';
+
+type UserProfileEditStore = {
+  isLoading: boolean;
+  isLocked: boolean;
+  userData: UserProfileViewDto | null;
+  setUserData: (data: UserProfileViewDto) => void;
+  updateUserData: (data: Partial<UserProfileViewDto>) => void;
+};
+
+export const LinkRegexes = deepFreeze({
+  bandcamp: /https?:\/\/[a-zA-Z0-9_-]+\.bandcamp\.com\/?/,
+  discord: /https?:\/\/(www\.)?discord\.com\/[a-zA-Z0-9_]+/,
+  facebook: /https?:\/\/(www\.)?facebook\.com\/[a-zA-Z0-9_]+/,
+  github: /https?:\/\/(www\.)?github\.com\/[a-zA-Z0-9_-]+/,
+  instagram: /https?:\/\/(www\.)?instagram\.com\/[a-zA-Z0-9_]+/,
+  reddit: /https?:\/\/(www\.)?reddit\.com\/user\/[a-zA-Z0-9_-]+/,
+  snapchat: /https?:\/\/(www\.)?snapchat\.com\/add\/[a-zA-Z0-9_-]+/,
+  soundcloud: /https?:\/\/(www\.)?soundcloud\.com\/[a-zA-Z0-9_-]+/,
+  spotify: /https?:\/\/open\.spotify\.com\/artist\/[a-zA-Z0-9?&=]+/,
+  steam: /https?:\/\/steamcommunity\.com\/id\/[a-zA-Z0-9_-]+/,
+  telegram: /https?:\/\/(www\.)?t\.me\/[a-zA-Z0-9_]+/,
+  tiktok: /https?:\/\/(www\.)?tiktok\.com\/@?[a-zA-Z0-9_]+/,
+  threads: /https?:\/\/(www\.)?threads\.net\/@?[a-zA-Z0-9_]+/,
+  twitch: /https?:\/\/(www\.)?twitch\.tv\/[a-zA-Z0-9_]+/,
+  x: /https?:\/\/(www\.)?x\.com\/[a-zA-Z0-9_]+/,
+  youtube: /https?:\/\/(www\.)?youtube\.com\/@?[a-zA-Z0-9_-]+/,
+});
+
+const socialLinksSchema = zod.object({
+  bandcamp: zod.string().regex(LinkRegexes.bandcamp).optional(),
+  discord: zod.string().regex(LinkRegexes.discord).optional(),
+  facebook: zod.string().regex(LinkRegexes.facebook).optional(),
+  github: zod.string().regex(LinkRegexes.github).optional(),
+  instagram: zod.string().regex(LinkRegexes.instagram).optional(),
+  reddit: zod.string().regex(LinkRegexes.reddit).optional(),
+  snapchat: zod.string().regex(LinkRegexes.snapchat).optional(),
+  soundcloud: zod.string().regex(LinkRegexes.soundcloud).optional(),
+  spotify: zod.string().regex(LinkRegexes.spotify).optional(),
+  steam: zod.string().regex(LinkRegexes.steam).optional(),
+  telegram: zod.string().regex(LinkRegexes.telegram).optional(),
+  tiktok: zod.string().regex(LinkRegexes.tiktok).optional(),
+  threads: zod.string().regex(LinkRegexes.threads).optional(),
+  twitch: zod.string().regex(LinkRegexes.twitch).optional(),
+  x: zod.string().regex(LinkRegexes.x).optional(),
+  youtube: zod.string().regex(LinkRegexes.youtube).optional(),
+});
+
+const userProfileEditFormSchema = zod.object({
+  description: zod.string().optional(),
+  socialLinks: socialLinksSchema,
+});
+
+type UserProfileEditFormSchema = zod.infer<typeof userProfileEditFormSchema>;
+
+const useUserProfileEdit = create<UserProfileEditStore>((set, get) => {
+  return {
+    isLoading: true,
+    isLocked: true,
+    userData: null,
+    setUserData: (data: UserProfileViewDto) => {
+      set({ userData: data });
+      set({ isLoading: false });
+      set({ isLocked: false });
+    },
+    updateUserData: (data: Partial<UserProfileViewDto>) => {
+      set({ isLoading: true });
+      set({ isLocked: true });
+
+      // TODO: do some fetch to update the user data
+
+      // update the user data in the store
+      set({
+        userData: {
+          ...get().userData,
+          ...data,
+        } as UserProfileViewDto,
+      });
+
+      set({ isLoading: false });
+      set({ isLocked: false });
+    },
+  };
+});
+
+type UserEditProfileProps = {
+  initialUserData: UserProfileViewDto;
+};
+
+export const UserEditProfile: React.FC<UserEditProfileProps> = ({
+  initialUserData,
+}) => {
+  const { setUserData, isLoading, isLocked } = useUserProfileEdit();
+
+  useEffect(() => {
+    setUserData(initialUserData);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialUserData]);
+
+  const formMethods = useForm<UserProfileEditFormSchema>({
+    resolver: zodResolver(userProfileEditFormSchema),
+    mode: 'onBlur',
+  });
+
+  const {
+    register,
+    formState: { errors },
+  } = formMethods;
+
+  const LinkFields: {
+    key: keyof UserProfileEditFormSchema['socialLinks'];
+    label: string;
+    description: string;
+  }[] = [
+    {
+      key: 'bandcamp',
+      label: 'Bandcamp',
+      description: 'Link to your Bandcamp profile',
+    },
+    {
+      key: 'discord',
+      label: 'Discord',
+      description: 'Link to your Discord profile',
+    },
+    {
+      key: 'facebook',
+      label: 'Facebook',
+      description: 'Link to your Facebook page',
+    },
+    {
+      key: 'github',
+      label: 'Github',
+      description: 'Link to your Github profile',
+    },
+    {
+      key: 'instagram',
+      label: 'Instagram',
+      description: 'Link to your Instagram profile',
+    },
+    {
+      key: 'reddit',
+      label: 'Reddit',
+      description: 'Link to your Reddit profile',
+    },
+    {
+      key: 'snapchat',
+      label: 'Snapchat',
+      description: 'Link to your Snapchat profile',
+    },
+    {
+      key: 'soundcloud',
+      label: 'Sound Cloud',
+      description: 'Link to your Sound Cloud profile',
+    },
+    {
+      key: 'spotify',
+      label: 'Spotify',
+      description: 'Link to your Spotify profile',
+    },
+    { key: 'steam', label: 'Steam', description: 'Link to your Steam profile' },
+    {
+      key: 'telegram',
+      label: 'Telegram',
+      description: 'Link to your Telegram profile',
+    },
+    {
+      key: 'tiktok',
+      label: 'Tiktok',
+      description: 'Link to your Tiktok profile',
+    },
+    {
+      key: 'threads',
+      label: 'Threads',
+      description: 'Link to your Threads profile',
+    },
+    {
+      key: 'twitch',
+      label: 'Twitch',
+      description: 'Link to your Twitch profile',
+    },
+    { key: 'x', label: 'X', description: 'Link to your X profile' },
+    {
+      key: 'youtube',
+      label: 'Youtube',
+      description: 'Link to your Youtube channel',
+    },
+  ];
+
+  return (
+    <div className='max-w-screen-lg mx-auto'>
+      <section>
+        <h1>Edit Profile</h1>
+        {/* Add your edit profile form here */}
+
+        <form
+          className={`flex flex-col gap-6`}
+          onSubmit={formMethods.handleSubmit(() => {
+            // Handle form submission
+            console.log('Form submitted');
+          })}
+        >
+          <div className='flex items-center justify-center gap-2 my-3 bg-cyan-800 border-cyan-400 text-cyan-300 border-2 rounded-lg px-3 py-2 text-sm'>
+            <FontAwesomeIcon icon={faExclamationCircle} className='h-5' />
+            <p>
+              Please make sure to carefully review our{' '}
+              <Link
+                href='/guidelines'
+                target='_blank'
+                className='text-blue-400 hover:text-blue-300 hover:underline'
+              >
+                Community Guidelines
+              </Link>
+              <FontAwesomeIcon
+                className='text-blue-400 ml-1 mr-1'
+                size='xs'
+                icon={faExternalLink}
+              />{' '}
+              before sharing your profile. We want to ensure a safe and positive
+              environment for all users.
+            </p>
+          </div>
+          {/* Description */}
+          <div>
+            <TextArea
+              id='description'
+              label='Description'
+              tooltip={
+                <>
+                  <p>
+                    This is a short description of yourself. It will be shown on
+                    your profile page.
+                  </p>
+                </>
+              }
+              isLoading={isLoading}
+              disabled={isLocked}
+              errorMessage={errors.description?.message}
+              {...register('description')}
+            />
+          </div>
+          {/* Social Links */}
+          <div>
+            <h2 className='text-lg font-semibold'>Social Links</h2>
+            <p className='text-sm text-gray-500'>
+              Add links to your social media profiles. These links will be shown
+              on your profile page.
+            </p>
+            <div className='flex-row gap-4 mt-2'>
+              {LinkFields.map((link) => (
+                <div key={link.key} className='flex-1 min-w-[200px]'>
+                  <Input
+                    id={link.key}
+                    label={link.label}
+                    tooltip={link.description}
+                    isLoading={isLoading}
+                    disabled={isLocked}
+                    errorMessage={errors.socialLinks?.[link.key]?.message}
+                    {...register(`socialLinks.${link.key}`)}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </form>
+      </section>
+    </div>
+  );
+};

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

@@ -1,32 +1,21 @@
 import { ErrorBox } from '@web/src/modules/shared/components/client/ErrorBox';
-import { UserProfile } from '@web/src/modules/user/components/UserProfile';
-import {
-  getUserProfileData,
-  getUserSongs,
-} from '@web/src/modules/user/features/user.util';
+import { getUserProfileData } from '@web/src/modules/user/features/user.util';
+
+import { UserEditProfile } from './UserEditProfile';
 
 const UserPageEdit = async ({ params }: { params: { username: string } }) => {
   const { username } = params;
 
   let userData = null;
-  let songData = null;
 
   try {
     userData = await getUserProfileData(username);
   } catch (e) {
     console.error('Failed to get user data:', e);
   }
 
-  try {
-    songData = await getUserSongs(username);
-  } catch (e) {
-    console.error('Failed to get song data:', e);
-  }
-
   if (userData) {
-    // set the page title to the user's name
-
-    return <UserProfile userData={userData} songData={songData} />;
+    return <UserEditProfile initialUserData={userData} />;
   } else {
     return <ErrorBox message='Failed to get user data' />;
   }