chore(added socials): updated user socials

chimobi-justice · Nov 18, 2024 · eafb141 · eafb141
1 parent e4a9308
commit eafb141
Show file tree

Hide file tree

Showing 7 changed files with 286 additions and 234 deletions.
diff --git a/src/helpers/getSocialMediaIcon.tsx b/src/helpers/getSocialMediaIcon.tsx
@@ -0,0 +1,24 @@
+import { FaFacebook, FaGithub, FaInstagram, FaLinkedin, FaXTwitter, FaYoutube } from "react-icons/fa6";
+import { GiWorld } from "react-icons/gi";
+
+export const getSocialMediaIcon = (platform: string, size?: string) => {
+  if (!platform) return null;
+
+  if (platform.includes("Youtube")) {
+    return <FaYoutube size={size || "20px"} />;
+  } else if (platform.includes("Twitter")) {
+    return <FaXTwitter size={size || "20px"} />;
+  } else if (platform.includes("GitHub")) {
+    return <FaGithub size={size || "20px"} />;
+  } else if (platform.includes("LinkedIn")) {
+    return <FaLinkedin size={size || "20px"} />;
+  } else if (platform.includes("Website")) {
+    return <GiWorld size={size || "20px"} />;
+  } else if (platform.includes("Facebook")) {
+    return <FaFacebook size={size || "20px"} />;
+  } else if (platform.includes("Instagram")) {
+    return <FaInstagram size={size || "20px"} />;
+  }
+
+  return null;
+};
diff --git a/src/pages/Articles/show/index.tsx b/src/pages/Articles/show/index.tsx
@@ -21,6 +21,8 @@ import { useCreateFollowUser } from '@hooks/user/useCreateFollowUser'
 import { useCreateOnFollowUser } from '@hooks/user/useCreateUnFollowUser'
 import useScrollToTop from '@hooks/useScrollToTop'
 import { useUser } from '@context/userContext'
+import { ISocial } from 'src/types'
+import { getSocialMediaIcon } from '@helpers/getSocialMediaIcon'
 
 const ShowArticle: FunctionComponent = () => {
   const { id } = useParams();
@@ -52,21 +54,19 @@ const ShowArticle: FunctionComponent = () => {
 
   const renderAuthorSocialLinks = () => (
     <HStack spacing={3} my="10px" justify="center">
-      {data?.data?.author?.info_details?.gitHub && (
-        <Link to={`https://www.github.com/${data?.data?.author?.info_details?.gitHub}`} target="_blank" rel="noopener noreferrer">
-          <FaGithub fontSize="24px" style={{ marginBottom: '5px' }} />
-        </Link>
-      )}
-      {data?.data?.author?.info_details?.twitter && (
-        <Link to={`https://x.com/${data?.data?.author?.info_details?.twitter}`} target="_blank" rel="noopener noreferrer">
-          <FaXTwitter fontSize="24px" style={{ marginBottom: '5px' }} />
-        </Link>
-      )}
-      {data?.data?.author?.info_details?.website && (
-        <Link to={`${data?.data?.author?.info_details?.website}`} target="_blank" rel="noopener noreferrer">
-          <GiWorld fontSize="24px" style={{ marginBottom: '5px' }} />
+      {data?.data?.author?.info_details?.socials?.map((social: ISocial) => (
+        <Link
+          to={social?.link}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Text
+            fontSize={{ base: "15px", md: "18px" }}
+          >
+            {getSocialMediaIcon(social.platform, "24px")}
+          </Text>
         </Link>
-      )}
+      ))}
     </HStack>
   );
 

diff --git a/src/pages/Users/Profile/index.tsx b/src/pages/Users/Profile/index.tsx
@@ -11,14 +11,14 @@ import {
   Image,
   Text
 } from '@chakra-ui/react'
-import { FaGithub, FaXTwitter } from 'react-icons/fa6'
-import { GiWorld } from 'react-icons/gi'
 import { Helmet } from 'react-helmet-async'
 
 import { FollowCard, Button } from '@components/index'
 import CoverPic from '@assets/images/cover.jpg'
 import { useUser } from '@context/userContext'
 import { colors } from '../../../colors'
+import { ISocial } from 'src/types'
+import { getSocialMediaIcon } from '@helpers/getSocialMediaIcon'
 
 const Profile: FunctionComponent = () => {
   const { user } = useUser();
@@ -96,47 +96,19 @@ const Profile: FunctionComponent = () => {
                     spacing={3}
                     my={"10px"}
                   >
-                    {user?.data?.gitHub && (
+                    {user?.data?.socials?.map((social: ISocial) => (
                       <Link
-                        to={`https://www.github.com/${user?.data?.gitHub}`}
+                        to={social?.link}
                         target="_blank"
                         rel="noopener noreferrer"
                       >
                         <Text
                           fontSize={{ base: "15px", md: "18px" }}
                         >
-                          <FaGithub style={{ fontSize: "24px", marginBottom: "5px" }} />
+                          {getSocialMediaIcon(social.platform, "24px")}
                         </Text>
                       </Link>
-                    )}
-
-                    {user?.data?.twitter && (
-                      <Link
-                        to={`https://x.com/${user?.data?.twitter}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        <Text
-                          fontSize={{ base: "15px", md: "18px" }}
-                        >
-                          <FaXTwitter style={{ fontSize: "24px", marginBottom: "5px" }} />
-                        </Text>
-                      </Link>
-                    )}
-
-                    {user?.data?.website && (
-                      <Link
-                        to={user?.data?.website}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        <Text
-                          fontSize={{ base: "15px", md: "18px" }}
-                        >
-                          <GiWorld style={{ fontSize: "24px", marginBottom: "5px" }} />
-                        </Text>
-                      </Link>
-                    )}
+                    ))}
                   </HStack>
                 </Box>