Merge pull request #17 from hcp-uw/fix-member-github

Fix member view

Author: SamShin

src/components/MemberCard.tsx

@@ -4,14 +4,10 @@ import {
   Avatar,
   Text,
   VStack,
-  HStack,
-  Link,
-  Icon,
   useColorModeValue,
   Badge,
 } from '@chakra-ui/react';
-import { FaDiscord, FaLinkedin, FaEnvelope } from 'react-icons/fa';
-import { Link as RouterLink, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { IMember } from '../interfaces/IMember';
 import { Team } from '../interfaces/DBTypes';
 
@@ -64,51 +60,7 @@ export const MemberCard: React.FC<MemberCardProps> = ({ member }) => {
           {member.lead && (
             <Badge colorScheme={COLOR_MAP[member.team]}>{member.team}</Badge>
           )}
-          <Text fontSize="sm" color="gray.500">
-            {member.email}
-          </Text>
         </VStack>
-        <HStack spacing={4}>
-          <Link
-            href={`mailto:${member.email}`}
-            isExternal
-            onClick={(e) => e.stopPropagation()}
-          >
-            <Icon
-              as={FaEnvelope}
-              w={5}
-              h={5}
-              color="gray.500"
-              _hover={{ color: 'blue.500' }}
-            />
-          </Link>
-          <Link
-            href={`https://discord.com/users/${member.discord}`}
-            isExternal
-            onClick={(e) => e.stopPropagation()}
-          >
-            <Icon
-              as={FaDiscord}
-              w={5}
-              h={5}
-              color="gray.500"
-              _hover={{ color: 'blue.500' }}
-            />
-          </Link>
-          <Link
-            href={member.linkedin}
-            isExternal
-            onClick={(e) => e.stopPropagation()}
-          >
-            <Icon
-              as={FaLinkedin}
-              w={5}
-              h={5}
-              color="gray.500"
-              _hover={{ color: 'blue.500' }}
-            />
-          </Link>
-        </HStack>
       </VStack>
     </Box>
   );

src/pages/MemberDetailsPage.tsx

@@ -1,16 +1,22 @@
 import React, { useState, useEffect } from 'react';
 import { useParams, Link as RouterLink } from 'react-router-dom';
 import {
-  Box, VStack, Heading, Text, Spinner, Image, HStack, Icon, Link, Button,
-  useColorModeValue
+  Box,
+  VStack,
+  Heading,
+  Text,
+  Spinner,
+  HStack,
+  Button,
+  useColorModeValue,
+  Avatar,
 } from '@chakra-ui/react';
-import { FaDiscord, FaLinkedin, FaEnvelope, FaArrowLeft } from 'react-icons/fa';
+import { FaArrowLeft } from 'react-icons/fa';
 import { memberService } from '../service/memberService';
 import { IMember } from '../interfaces/IMember';
 import { Layout } from '../components/Layout';
 import GitHubCalendar from 'react-github-calendar';
 
-1
 interface GHCalProps {
   username: string;
 }
@@ -20,22 +26,27 @@ const GHCal: React.FC<GHCalProps> = ({ username }) => {
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-  }
+  };
 
-  const content = <GitHubCalendar username={extractUsername(username)} colorScheme='light' />
+  const content = (
+    <GitHubCalendar
+      username={extractGithubUsername(username)}
+      colorScheme="light"
+    />
+  );
 
-  return (
-    <Box style={centered}>
-      {content}
-    </Box>
-  )
-}
+  return <Box style={centered}>{content}</Box>;
+};
 
-const extractUsername = (maybeUrl: string) =>
-  (maybeUrl.indexOf("/") === -1)
-    ? maybeUrl
-    : new URL(maybeUrl).pathname.split('/')[1]
+const extractGithubUsername = (maybeUrl: string) => {
+  if (maybeUrl.startsWith('https://')) {
+    return maybeUrl.split('/')[3];
+  }
 
+  return maybeUrl.indexOf('/') === -1
+    ? maybeUrl
+    : new URL(`https://${maybeUrl}`).pathname.split('/')[1];
+};
 
 export const MemberDetailsPage: React.FC = () => {
   const { id } = useParams<{ id: string }>();
@@ -66,8 +77,18 @@ export const MemberDetailsPage: React.FC = () => {
     fetchMember();
   }, [id]);
 
-  if (loading) return <Layout><Spinner size="xl" /></Layout>;
-  if (error || !member) return <Layout><Text color="red.500">{error || 'Member not found'}</Text></Layout>;
+  if (loading)
+    return (
+      <Layout>
+        <Spinner size="xl" />
+      </Layout>
+    );
+  if (error || !member)
+    return (
+      <Layout>
+        <Text color="red.500">{error || 'Member not found'}</Text>
+      </Layout>
+    );
 
   return (
     <Layout>
@@ -82,36 +103,36 @@ export const MemberDetailsPage: React.FC = () => {
         margin="auto"
       >
         <VStack spacing={6} align="stretch">
-          <Button as={RouterLink} to="/members" leftIcon={<FaArrowLeft />} alignSelf="flex-start">
+          <Button
+            as={RouterLink}
+            to="/members"
+            leftIcon={<FaArrowLeft />}
+            alignSelf="flex-start"
+          >
             Back to Members
           </Button>
           <HStack spacing={6}>
-            <Image
-              borderRadius="full"
-              boxSize="150px"
+            <Avatar
+              size="xl"
+              name={`${member.firstName} ${member.lastName}`}
               src={member.profilePicture}
-              alt={`${member.firstName} ${member.lastName}`}
             />
             <VStack align="start" spacing={2}>
-              <Heading size="xl">{member.firstName} {member.lastName}</Heading>
-              <Text fontSize="lg" color="gray.500">{member.email}</Text>
+              <Heading size="xl">
+                {member.firstName} {member.lastName}
+              </Heading>
             </VStack>
           </HStack>
-          <GHCal username={member.github} />
-          <HStack spacing={4}>
-            <Link href={`mailto:${member.email}`} isExternal>
-              <Icon as={FaEnvelope} w={6} h={6} color="gray.500" _hover={{ color: 'blue.500' }} />
-            </Link>
-            <Link href={`https://discord.com/users/${member.discord}`} isExternal>
-              <Icon as={FaDiscord} w={6} h={6} color="gray.500" _hover={{ color: 'blue.500' }} />
-            </Link>
-            <Link href={member.linkedin} isExternal>
-              <Icon as={FaLinkedin} w={6} h={6} color="gray.500" _hover={{ color: 'blue.500' }} />
-            </Link>
-          </HStack>
+          {member.github !== '' ? (
+            <GHCal username={member.github} />
+          ) : (
+            <Text fontSize="lg" color="gray.500">
+              No GitHub calendar available
+            </Text>
+          )}
           {/* Add more member details here as needed */}
         </VStack>
       </Box>
     </Layout>
   );
-};
+};