feat: add profile tags for members

ONEARMY · Nov 6, 2024 · 1851e7f · 1851e7f
1 parent 0a850e8
commit 1851e7f
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 61 deletions.
diff --git a/packages/components/src/CardProfile/CardDetailsMemberProfile.tsx b/packages/components/src/CardProfile/CardDetailsMemberProfile.tsx
@@ -1,7 +1,7 @@
 import { Avatar, Box, Flex } from 'theme-ui'
 
-import { Category } from '../Category/Category'
 import { MemberBadge } from '../MemberBadge/MemberBadge'
+import { ProfileTagsList } from '../ProfileTagsList/ProfileTagsList'
 import { Username } from '../Username/Username'
 
 import type { IProfileCreator } from 'oa-shared'
@@ -12,7 +12,7 @@ interface IProps {
 }
 
 export const CardDetailsMemberProfile = ({ creator, isLink }: IProps) => {
-  const { _id, badges, countryCode, profileType, userImage } = creator
+  const { _id, badges, countryCode, profileType, tags, userImage } = creator
 
   return (
     <Flex
@@ -58,14 +58,7 @@ export const CardDetailsMemberProfile = ({ creator, isLink }: IProps) => {
           sx={{ alignSelf: 'flex-start' }}
           isLink={isLink}
         />
-        <Category
-          category={{ label: 'Wants to get started' }}
-          sx={{
-            border: '1px solid #A72E5A',
-            backgroundColor: '#F7C7D9',
-            color: '#A72E5A',
-          }}
-        />
+        {tags && <ProfileTagsList tags={tags} />}
       </Flex>
     </Flex>
   )

diff --git a/packages/components/src/CardProfile/CardDetailsSpaceProfile.tsx b/packages/components/src/CardProfile/CardDetailsSpaceProfile.tsx
@@ -1,6 +1,5 @@
 import { Box, Flex, Image, Text } from 'theme-ui'
 
-import { Category } from '../Category/Category'
 import { MemberBadge } from '../MemberBadge/MemberBadge'
 import { ProfileTagsList } from '../ProfileTagsList/ProfileTagsList'
 import { Username } from '../Username/Username'
@@ -13,22 +12,11 @@ interface IProps {
 }
 
 export const CardDetailsSpaceProfile = ({ creator, isLink }: IProps) => {
-  const {
-    _id,
-    about,
-    badges,
-    countryCode,
-    coverImage,
-    profileType,
-    tags,
-    workspaceType,
-  } = creator
+  const { _id, about, badges, countryCode, coverImage, profileType, tags } =
+    creator
 
   const aboutTextStart =
     about && about.length > 80 ? about.slice(0, 78) + '...' : false
-  const workspaceLabel = workspaceType
-    ? workspaceType.charAt(0).toUpperCase() + workspaceType.slice(1)
-    : ''
 
   return (
     <Flex sx={{ flexDirection: 'column', width: '100%' }}>
@@ -85,17 +73,6 @@ export const CardDetailsSpaceProfile = ({ creator, isLink }: IProps) => {
           />
         </Flex>
 
-        {workspaceType && profileType === 'workspace' && (
-          <Category
-            category={{ label: workspaceLabel }}
-            sx={{
-              border: '1px solid #0087B6',
-              backgroundColor: '#ECFAFF',
-              color: '#0087B6',
-            }}
-          />
-        )}
-
         {tags && <ProfileTagsList tags={tags} />}
 
         {about && (

diff --git a/src/pages/User/content/MemberProfile.tsx b/src/pages/User/content/MemberProfile.tsx
@@ -4,6 +4,7 @@ import { ExternalLinkLabel, ProfileTypeList, UserRole } from 'oa-shared'
 import { ClientOnly } from 'remix-utils/client-only'
 import DefaultMemberImage from 'src/assets/images/default_member.svg'
 import { AuthWrapper } from 'src/common/AuthWrapper'
+import { ProfileTags } from 'src/common/ProfileTags'
 import { cdnImageUrl } from 'src/utils/cdnImageUrl'
 import { getUserCountry } from 'src/utils/getUserCountry'
 import { Avatar, Box, Card, Flex, Heading, Paragraph } from 'theme-ui'
@@ -20,9 +21,21 @@ interface IProps {
 }
 
 export const MemberProfile = ({ docs, user }: IProps) => {
-  const { userImage } = user
+  const {
+    about,
+    badges,
+    displayName,
+    links,
+    location,
+    tags,
+    totalUseful,
+    total_views,
+    userImage,
+    userName,
+  } = user
+  const isVerified = user.verified
 
-  const userLinks = (user?.links || []).filter(
+  const userLinks = (links || []).filter(
     (linkItem) =>
       ![ExternalLinkLabel.DISCORD, ExternalLinkLabel.FORUM].includes(
         linkItem.label,
@@ -91,59 +104,58 @@ export const MemberProfile = ({ docs, user }: IProps) => {
                   roleRequired={UserRole.BETA_TESTER}
                   fallback={
                     <UserStatistics
-                      userName={user.userName}
-                      country={user.location?.country}
-                      isVerified={user.verified}
-                      isSupporter={!!user.badges?.supporter}
+                      userName={userName}
+                      country={location?.country}
+                      isVerified={isVerified}
+                      isSupporter={!!badges?.supporter}
                       howtoCount={docs?.howtos.length || 0}
                       researchCount={docs?.research.length || 0}
-                      usefulCount={user.totalUseful || 0}
+                      usefulCount={totalUseful || 0}
                       totalViews={0}
                       sx={{ alignSelf: 'stretch' }}
                     />
                   }
                 >
                   <UserStatistics
-                    userName={user.userName}
-                    country={user.location?.country}
-                    isVerified={user.verified}
-                    isSupporter={!!user.badges?.supporter}
+                    userName={userName}
+                    country={location?.country}
+                    isVerified={isVerified}
+                    isSupporter={!!badges?.supporter}
                     howtoCount={docs?.howtos.length || 0}
                     researchCount={docs?.research.length || 0}
-                    usefulCount={user.totalUseful || 0}
+                    usefulCount={totalUseful || 0}
                     sx={{ alignSelf: 'stretch' }}
-                    totalViews={user.total_views || 0}
+                    totalViews={total_views || 0}
                   />
                 </AuthWrapper>
               )}
             </ClientOnly>
           </Flex>
-          <Flex sx={{ flexGrow: 2, width: '100%', flexDirection: 'column' }}>
-            <Flex
-              sx={{
-                alignItems: 'center',
-                pt: [2, 0],
-              }}
-            >
+          <Flex
+            sx={{ flexDirection: 'column', flexGrow: 2, gap: 2, width: '100%' }}
+          >
+            <Flex sx={{ alignItems: 'center' }}>
               <Username
                 user={{
-                  userName: user.userName,
+                  userName,
                   countryCode: getUserCountry(user),
-                  isVerified: user.verified,
+                  isVerified,
                 }}
               />
             </Flex>
-            <Box sx={{ flexDirection: 'column' }} mb={3}>
+            <Box sx={{ flexDirection: 'column' }}>
               <Heading
                 as="h1"
                 color={'black'}
                 style={{ wordWrap: 'break-word' }}
                 data-cy="userDisplayName"
               >
-                {user.displayName}
+                {displayName}
               </Heading>
             </Box>
-            {user.about && <Paragraph>{user.about}</Paragraph>}
+
+            {tags && <ProfileTags tagIds={tags} />}
+            {about && <Paragraph>{about}</Paragraph>}
             <UserContactAndLinks links={userLinks} />
           </Flex>
         </Flex>

diff --git a/src/pages/UserSettings/content/sections/UserInfos.section.tsx b/src/pages/UserSettings/content/sections/UserInfos.section.tsx
@@ -81,7 +81,7 @@ export const UserInfosSection = ({ formValues }: IProps) => {
           />
         </Flex>
 
-        {!isMemberProfile && <ProfileTags />}
+        <ProfileTags />
 
         <Flex sx={{ flexDirection: 'column', gap: 1 }}>
           <Text>{`${about.title} *`}</Text>