chore(profile): extract social media constants and functions into a separate module

- Created a new constants file for social media icons and links to improve code organization and reusability.
- Updated the user profile modal components to utilize the new constants and functions for rendering social links.
- Refactored social link handling to streamline the process of generating URLs based on user data.

Signed-off-by: Innei <tukon479@gmail.com>

apps/desktop/layer/renderer/src/modules/profile/user-profile-modal.constants.ts

@@ -0,0 +1,41 @@
+// Social platform icons mapping
+export const socialIconClassNames = {
+  twitter: "i-mgc-twitter-cute-fi duration-200 group-hover:text-[#1DA1F2]",
+  github: "i-mgc-github-cute-fi duration-200 group-hover:text-[#181717] group-hover:dark:invert",
+  instagram: "i-mingcute-ins-fill duration-200 group-hover:text-[#C13584]",
+  facebook: "i-mingcute-facebook-fill duration-200 group-hover:text-[#1877F2]",
+  youtube: "i-mgc-youtube-cute-fi duration-200 group-hover:text-[#FF0000]",
+  discord: "i-mingcute-discord-fill duration-200 group-hover:text-[#5865F2]",
+}
+
+export const socialCopyMap = {
+  twitter: "Twitter",
+  github: "GitHub",
+  instagram: "Instagram",
+  facebook: "Facebook",
+  youtube: "YouTube",
+  discord: "Discord",
+}
+
+export const getSocialLink = (platform: keyof typeof socialIconClassNames, id: string) => {
+  switch (platform) {
+    case "twitter": {
+      return `https://twitter.com/${id}`
+    }
+    case "github": {
+      return `https://github.com/${id}`
+    }
+    case "instagram": {
+      return `https://instagram.com/${id}`
+    }
+    case "facebook": {
+      return `https://facebook.com/${id}`
+    }
+    case "youtube": {
+      return `https://youtube.com/${id}`
+    }
+    case "discord": {
+      return `https://discord.com/${id}`
+    }
+  }
+}

apps/desktop/layer/renderer/src/modules/profile/user-profile-modal.electron.tsx

@@ -26,51 +26,10 @@ import { UrlBuilder } from "~/lib/url-builder"
 import { useUserSubscriptionsQuery } from "~/modules/profile/hooks"
 import { useUserById } from "~/store/user"
 
+import { getSocialLink, socialCopyMap, socialIconClassNames } from "./user-profile-modal.constants"
 import type { SubscriptionModalContentProps } from "./user-profile-modal.shared"
 import { SubscriptionItems } from "./user-profile-modal.shared"
 
-// Social platform icons mapping
-const socialIconClassNames = {
-  twitter: "i-mgc-twitter-cute-fi duration-200 group-hover:text-[#1DA1F2]",
-  github: "i-mgc-github-cute-fi duration-200 group-hover:text-[#181717] group-hover:dark:invert",
-  instagram: "i-mingcute-ins-fill duration-200 group-hover:text-[#C13584]",
-  facebook: "i-mingcute-facebook-fill duration-200 group-hover:text-[#1877F2]",
-  youtube: "i-mgc-youtube-cute-fi duration-200 group-hover:text-[#FF0000]",
-  discord: "i-mingcute-discord-fill duration-200 group-hover:text-[#5865F2]",
-}
-
-const socialCopyMap = {
-  twitter: "Twitter",
-  github: "GitHub",
-  instagram: "Instagram",
-  facebook: "Facebook",
-  youtube: "YouTube",
-  discord: "Discord",
-}
-
-const getSocialLink = (platform: keyof typeof socialIconClassNames, id: string) => {
-  switch (platform) {
-    case "twitter": {
-      return `https://twitter.com/${id}`
-    }
-    case "github": {
-      return `https://github.com/${id}`
-    }
-    case "instagram": {
-      return `https://instagram.com/${id}`
-    }
-    case "facebook": {
-      return `https://facebook.com/${id}`
-    }
-    case "youtube": {
-      return `https://youtube.com/${id}`
-    }
-    case "discord": {
-      return `https://discord.com/${id}`
-    }
-  }
-}
-
 type ItemVariant = "loose" | "compact"
 const itemVariantAtom = atomWithStorage(
   getStorageNS("item-variant"),

apps/desktop/layer/renderer/src/modules/profile/user-profile-modal.mobile.tsx

@@ -14,48 +14,39 @@ import { useUserSubscriptionsQuery } from "~/modules/profile/hooks"
 import { users } from "~/queries/users"
 import { useUserById } from "~/store/user"
 
+import { getSocialLink, socialCopyMap, socialIconClassNames } from "./user-profile-modal.constants"
 import type { SubscriptionModalContentProps } from "./user-profile-modal.shared"
 import { SubscriptionGroup } from "./user-profile-modal.shared"
 
-// Social platform icons mapping
-const socialIconClassNames = {
-  twitter: "i-mgc-twitter-cute-fi",
-  github: "i-mgc-github-cute-fi",
-  instagram: "i-mingcute-ins-fill",
-  facebook: "i-mingcute-facebook-fill",
-  youtube: "i-mgc-youtube-cute-fi",
-  discord: "i-mingcute-discord-fill",
+const pickUserData = <
+  T extends {
+    avatar?: string
+    name?: string | null
+    handle?: string | null
+    id: string
+    bio?: string | null
+    website?: string | null
+    socialLinks?: Record<string, string> | null
+  },
+>(
+  user: T,
+) => {
+  return {
+    avatar: user.avatar,
+    name: user.name,
+    handle: user.handle,
+    id: user.id,
+    bio: user.bio,
+    website: user.website,
+    socialLinks: user.socialLinks,
+  }
 }
-
-const socialCopyMap = {
-  twitter: "Twitter",
-  github: "GitHub",
-  instagram: "Instagram",
-  facebook: "Facebook",
-  youtube: "YouTube",
-  discord: "Discord",
-}
-
 export const UserProfileModalContent: FC<SubscriptionModalContentProps> = ({ userId }) => {
   const { t } = useTranslation()
   const user = useAuthQuery(users.profile({ userId }))
   const storeUser = useUserById(userId)
 
-  const userInfo = user.data
-    ? {
-        avatar: user.data.image,
-        name: user.data.name,
-        handle: user.data.handle,
-        id: user.data.id,
-      }
-    : storeUser
-      ? {
-          avatar: storeUser.image,
-          name: storeUser.name,
-          handle: storeUser.handle,
-          id: storeUser.id,
-        }
-      : null
+  const userInfo = user.data ? pickUserData(user.data) : storeUser ? pickUserData(storeUser) : null
 
   const follow = useFollow()
   const subscriptions = useUserSubscriptionsQuery(user.data?.id)
@@ -117,13 +108,13 @@ export const UserProfileModalContent: FC<SubscriptionModalContentProps> = ({ use
               {/* Social Links */}
               {user.data?.socialLinks && (
                 <div className="mt-3 flex flex-wrap gap-2">
-                  {Object.entries(user.data.socialLinks).map(([platform, url]) => {
-                    if (!url || !(platform in socialIconClassNames)) return null
+                  {Object.entries(user.data.socialLinks).map(([platform, id]) => {
+                    if (!id || !(platform in socialIconClassNames)) return null
 
                     return (
                       <a
                         key={platform}
-                        href={url}
+                        href={getSocialLink(platform as keyof typeof socialIconClassNames, id)}
                         target="_blank"
                         rel="noopener noreferrer"
                         className="hover:text-accent flex items-center justify-center rounded-full bg-zinc-100 p-2 text-zinc-500 transition-colors dark:bg-zinc-800"