Merge pull request #156 from raid-guild/fix/user-card

Member Profile Update

apps/frontend/components/Description.tsx

@@ -0,0 +1,55 @@
+import { Button, Collapse, Text, VStack } from '@raidguild/design-system';
+import React, { useEffect, useRef, useState } from 'react';
+
+const Description = ({
+  description,
+  startingHeight = 75,
+  label,
+}: {
+  description: string;
+  startingHeight?: number;
+  label?: string;
+}) => {
+  const [showFullDescription, setShowFullDescription] = useState(false);
+  const [showToggle, setShowToggle] = useState(false);
+  const textRef = useRef<HTMLDivElement>(null);
+
+  const handleToggleDesc = () => setShowFullDescription(!showFullDescription);
+
+  useEffect(() => {
+    if (textRef.current) {
+      const { clientHeight } = textRef.current;
+      setShowToggle(clientHeight > startingHeight);
+    }
+  }, [description, startingHeight]);
+
+  return (
+    <VStack align='flex-start' width='100%'>
+      {label && (
+        <Text fontSize='xs' color='purple.200' textTransform='capitalize'>
+          {label}
+        </Text>
+      )}
+      <Collapse startingHeight={startingHeight} in={showFullDescription}>
+        <div ref={textRef}>
+          <Text color='white' fontSize='md'>
+            {description}
+          </Text>
+        </div>
+      </Collapse>
+      {showToggle && (
+        <Button
+          onClick={handleToggleDesc}
+          color='gray.400'
+          size='sm'
+          fontWeight='normal'
+          variant='link'
+        >
+          {showFullDescription ? 'Show Less' : 'Show More'}
+        </Button>
+      )}
+    </VStack>
+  );
+};
+
+export default Description;

apps/frontend/components/MemberDetailsCard.tsx

@@ -24,6 +24,7 @@ import { FaDiscord, FaEthereum, FaGithub, FaTwitter } from 'react-icons/fa';
 import { useAccount } from 'wagmi';
 
 import { useOverlay } from '../contexts/OverlayContext';
+import Description from './Description';
 import MemberAvatar from './MemberAvatar';
 import UpdateMemberForm from './MemberUpdateForm';
 import ModalWrapper from './ModalWrapper';
@@ -32,18 +33,18 @@ interface MemberProps {
   application?: IApplication;
   height?: string;
   member?: IMember;
-  memberReload?: () => void;
   showHeader?: boolean;
   width?: string;
+  minHeight?: string;
 }
 
 const MemberDetailsCard = ({
   application,
   height,
   member,
-  memberReload,
   showHeader = false,
   width,
+  minHeight,
 }: MemberProps) => {
   const toast = useToast();
   const copyDiscord = useClipboard(
@@ -189,6 +190,7 @@ const MemberDetailsCard = ({
       minW={[null, null, null, '500px']}
       w={['100%', null, null, width ?? '60%']}
       h={height ?? 'max-content'}
+      minHeight={minHeight}
     >
       <ModalWrapper
         name='memberForm'
@@ -200,11 +202,16 @@ const MemberDetailsCard = ({
           member={member}
           memberAddress={memberAddress}
           memberId={_.get(member, 'id')}
-          memberReload={memberReload}
           closeModal={closeModals}
         />
       </ModalWrapper>
-      <Card variant='filled' w='100%' h={height ?? 'max-content'} p={4}>
+      <Card
+        variant='filled'
+        w='100%'
+        h={height ?? 'max-content'}
+        p={4}
+        minHeight={minHeight}
+      >
         {showHeader && (
           <>
             <Flex w='100%' justifyContent='space-between'>
@@ -290,7 +297,7 @@ const MemberDetailsCard = ({
           {_.get(application, 'introduction') && (
             <>
               <Divider color='gray.200' />
-              <Text size='md'>{_.get(application, 'introduction')}</Text>
+              <Description description={_.get(application, 'introduction')} />
             </>
           )}
 

apps/frontend/components/MemberUpdateForm.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable dot-notation */
 import { Box, Button, Input, Select, Stack } from '@raidguild/design-system';
-import { useMemberUpdate } from '@raidguild/dm-hooks';
+import { useMemberDetail, useMemberUpdate } from '@raidguild/dm-hooks';
 import { IMember } from '@raidguild/dm-types';
 import {
   GUILD_CLASS_OPTIONS,
@@ -16,14 +16,12 @@ interface UpdateMemberFormProps {
   member: IMember;
   memberAddress?: string;
   memberId?: string;
-  memberReload?: () => void;
   closeModal?: () => void;
 }
 const UpdateMemberForm = ({
   member,
   memberAddress,
   memberId,
-  memberReload,
   closeModal,
 }: UpdateMemberFormProps) => {
   const [sending, setSending] = useState(false);
@@ -36,6 +34,8 @@ const UpdateMemberForm = ({
     memberAddress,
   });
 
+  const { refetch } = useMemberDetail({ memberAddress, token });
+
   const localForm = useForm({
     mode: 'all',
   });
@@ -118,7 +118,8 @@ const UpdateMemberForm = ({
         telegram: values.telegramHandle ?? member?.contactInfo?.telegram,
       },
     });
-    memberReload();
+
+    await refetch();
     closeModal();
     setSending(false);
   }

apps/frontend/components/RaidDetailsCard.tsx

@@ -28,56 +28,17 @@ import {
   truncateEmail,
 } from '@raidguild/dm-utils';
 import { format } from 'date-fns';
-import _, { result } from 'lodash';
-import link from 'next/link';
+import _ from 'lodash';
 import { useState } from 'react';
 
+import Description from './Description';
 import InfoStack from './InfoStack';
 
 interface RaidProps {
   raid?: IRaid;
   consultation?: IConsultation;
 }
 
-const Description = ({
-  description,
-  label,
-}: {
-  description: string;
-  label?: string;
-}) => {
-  const [showFullDescription, setShowFullDescription] = useState(false);
-  const handleToggleDesc = () => setShowFullDescription(!showFullDescription);
-
-  return (
-    <VStack align='flex-start'>
-      {label && (
-        <Text fontSize='xs' color='purple.200' textTransform='capitalize'>
-          {label}
-        </Text>
-      )}
-      <Collapse startingHeight={25} in={showFullDescription}>
-        <Text color='white' fontSize='md'>
-          {description !== null
-            ? description
-            : 'There is no project description.'}
-        </Text>
-      </Collapse>
-      {description !== null && description?.length > 100 && (
-        <Button
-          onClick={handleToggleDesc}
-          color='gray.400'
-          size='sm'
-          fontWeight='normal'
-          variant='link'
-        >
-          {showFullDescription === true ? 'Show Less' : 'Show More'}
-        </Button>
-      )}
-    </VStack>
-  );
-};
-
 const Bio = ({ bio }: { bio: string }) => {
   const [showFullBio, setShowFullBio] = useState(false);
   const handleToggleBio = () => setShowFullBio(!showFullBio);
@@ -186,10 +147,26 @@ const RaidDetailsCard = ({ raid, consultation }: RaidProps) => {
         items: _.compact([category, slug, repoLink, resultLink, imageUrl]),
         extra: (
           <Stack>
-            <Description description={description} label='What We Did' />
-            <Description description={challenge} label='The Challenge' />
-            <Description description={approach} label='Our Approach' />
-            <Description description={projectResult} label='Result' />
+            <Description
+              description={description || 'There is no project description.'}
+              label='What We Did'
+              startingHeight={25}
+            />
+            <Description
+              description={challenge || 'There is no challenge description.'}
+              label='The Challenge'
+              startingHeight={25}
+            />
+            <Description
+              description={approach || 'There is no approach description.'}
+              label='Our Approach'
+              startingHeight={25}
+            />
+            <Description
+              description={projectResult || 'There is no result description.'}
+              label='Result'
+              startingHeight={25}
+            />
           </Stack>
         ),
       };
@@ -286,7 +263,12 @@ const RaidDetailsCard = ({ raid, consultation }: RaidProps) => {
           ),
         },
       ]),
-      extra: <Description description={_.get(consultation, 'description')} />,
+      extra: (
+        <Description
+          description={_.get(consultation, 'description')}
+          startingHeight={25}
+        />
+      ),
     },
     {
       title: 'Key Links',

apps/frontend/pages/index.tsx

@@ -186,7 +186,7 @@ const Home = () => {
               member={member}
               application={_.get(member, 'application')}
               width='500px'
-              height='650px'
+              minHeight='650px'
               showHeader
             />
           </Flex>

apps/frontend/pages/members/[member].tsx

@@ -40,7 +40,7 @@ const Member = ({ memberAddress }: Props) => {
   const { data: session } = useSession();
   const token = _.get(session, 'token');
 
-  const { data, refetch } = useMemberDetail({ memberAddress, token });
+  const { data } = useMemberDetail({ memberAddress, token });
   const member = _.get(data, 'member');
   const raids = _.get(data, 'raids');
 
@@ -117,7 +117,6 @@ const Member = ({ memberAddress }: Props) => {
         >
           <MemberDetailsCard
             member={member}
-            memberReload={refetch}
             application={_.get(member, 'application')}
           />
           {/* <RaidsFeed /> */}