feat: add profile labels to machine profile type

functions/src/userUpdates/index.ts

@@ -6,8 +6,8 @@ import { backupUser } from './backupUser'
 import { updateDiscussionComments } from './updateDiscussionComments'
 import { updateMapPins } from './updateMapPins'
 
+import type { IUserDB } from 'oa-shared/models/user'
 import type { IDBDocChange } from '../models'
-import { IUserDB } from 'oa-shared/models/user'
 
 /*********************************************************************
  * Side-effects to be carried out on various user updates, namely:

functions/src/userUpdates/updateDiscussionComments.test.ts

@@ -1,6 +1,7 @@
-import { IUserDB } from 'oa-shared/models/user'
 import { updateDiscussionComments } from './updateDiscussionComments'
 
+import type { IUserDB } from 'oa-shared/models/user'
+
 const prevUser = {
   _id: 'hjg235z',
   location: { countryCode: 'UK' },

functions/src/userUpdates/updateMapPins.ts

@@ -4,6 +4,7 @@ import { db } from '../Firebase/firestoreDB'
 import {
   getCreatorImage,
   getFirstCoverImage,
+  getValidTags,
   hasDetailsForMapPinChanged,
 } from './utils'
 
@@ -32,14 +33,15 @@ export const updateMapPins = async (prevUser: IUserDB, user: IUserDB) => {
     coverImages,
     displayName,
     isContactableByPublic,
+    location,
     profileType,
-    workspaceType,
     userImage,
-    location,
+    workspaceType,
   } = user
   const creatorImage = getCreatorImage(userImage)
   const coverImage = getFirstCoverImage(coverImages)
   const countryCode = location?.countryCode || country || ''
+  const tags = user.tags ? getValidTags(user.tags) : []
 
   const creator = {
     _lastActive,
@@ -50,8 +52,9 @@ export const updateMapPins = async (prevUser: IUserDB, user: IUserDB) => {
     displayName,
     isContactableByPublic,
     profileType,
-    workspaceType,
+    tags,
     userImage: creatorImage,
+    workspaceType,
   }
 
   // Only one expected

functions/src/userUpdates/utils.test.ts

@@ -4,47 +4,86 @@ import {
   hasDetailsForMapPinChanged,
   hasLocationDetailsChanged,
   hasUserImageChanged,
+  hasUserTagsChanged,
 } from './utils'
 
+import type { IUploadedFileMeta } from 'oa-shared'
 import type { IUserDB } from 'oa-shared/models/user'
 
+const unimportantUserDetails = {
+  _authID: '00',
+  _id: 'unchangeable',
+  _created: '',
+  _deleted: false,
+  userName: 'unchangeable',
+  verified: false,
+  coverImages: [],
+  links: [],
+}
+
 describe('hasDetailsChanged', () => {
   it("returns false for every field that's the same", () => {
     const user = {
+      _lastActive: 'same',
+      about: 'about',
       displayName: 'same',
+      isContactableByPublic: true,
+      profileType: 'member',
       userImage: {
         downloadUrl: 'https://more.same/image.jpg',
-      },
+      } as IUploadedFileMeta,
       badges: {
         verified: true,
         supporter: false,
       },
+      tags: {
+        hguowewer: true,
+        '76khbrw': false,
+      },
+      ...unimportantUserDetails,
     } as IUserDB
 
     expect(hasDetailsChanged(user, user)).toEqual([false, false, false, false])
   })
 
   it("returns true for every field that's different", () => {
     const prevUser = {
+      _lastActive: 'yesterday',
+      about: 'Old about',
       displayName: 'old',
+      profileType: 'member',
+      workspaceType: null,
       userImage: {
         downloadUrl: 'https://more.old/image.jpg',
-      },
+      } as IUploadedFileMeta,
       badges: {
         verified: true,
         supporter: true,
       },
+      tags: {
+        hguowewer: true,
+      },
+      ...unimportantUserDetails,
     } as IUserDB
 
     const user = {
+      _lastActive: 'today',
+      about: 'New about description.',
       displayName: 'new',
+      profileType: 'space',
+      workspaceType: 'extrusion',
       userImage: {
         downloadUrl: 'https://more.new/image.jpg',
-      },
+      } as IUploadedFileMeta,
       badges: {
         verified: false,
         supporter: false,
       },
+      tags: {
+        hguowewer: true,
+        '76khbrw': true,
+      },
+      ...unimportantUserDetails,
     } as IUserDB
 
     expect(hasDetailsChanged(prevUser, user)).toEqual([true, true, true, true])
@@ -99,7 +138,6 @@ describe('hasDetailsForCommentsChanged', () => {
       userImage: {
         downloadUrl: 'http://etc.',
       },
-
       badges: {
         verified: true,
         supporter: false,
@@ -196,3 +234,61 @@ describe('hasUserImageChanged', () => {
     expect(hasUserImageChanged(prevUser, user)).toEqual(true)
   })
 })
+
+describe('hasUserTagsChanged', () => {
+  it('returns false when nothing has changed', () => {
+    const user = {
+      displayName: 'displayName',
+      profileType: 'member',
+      tags: {
+        gyi: false,
+        bnhjo: true,
+      },
+      ...unimportantUserDetails,
+    } as IUserDB
+    expect(hasUserTagsChanged(user, user)).toEqual(false)
+  })
+
+  it('returns true when a tag is added', () => {
+    const prevUser = {
+      displayName: 'displayName',
+      profileType: 'member',
+      tags: {
+        gyi: false,
+      },
+      ...unimportantUserDetails,
+    } as IUserDB
+
+    const user = {
+      displayName: 'displayName',
+      profileType: 'member',
+      tags: {
+        gyi: false,
+        bnhjo: true,
+      },
+      ...unimportantUserDetails,
+    } as IUserDB
+    expect(hasUserTagsChanged(prevUser, user)).toEqual(true)
+  })
+
+  it('returns true when a tag is changed', () => {
+    const prevUser = {
+      displayName: 'displayName',
+      profileType: 'member',
+      tags: {
+        gyi: false,
+      },
+      ...unimportantUserDetails,
+    } as IUserDB
+
+    const user = {
+      displayName: 'displayName',
+      profileType: 'member',
+      tags: {
+        gyi: true,
+      },
+      ...unimportantUserDetails,
+    } as IUserDB
+    expect(hasUserTagsChanged(prevUser, user)).toEqual(true)
+  })
+})

functions/src/userUpdates/utils.ts

@@ -1,6 +1,8 @@
+import { profileTags } from 'oa-shared'
+
 import { valuesAreDeepEqual } from '../Utils'
 
-import type { IUserDB } from 'oa-shared/models/user'
+import type { ISelectedTags, ITag, IUserDB } from 'oa-shared'
 
 export const hasDetailsChanged = (
   prevUser: IUserDB,
@@ -46,6 +48,7 @@ export const hasDetailsForMapPinChanged = (
     prevUser.isContactableByPublic !== user.isContactableByPublic,
     prevUser.profileType !== user.profileType,
     prevUser.workspaceType !== user.workspaceType,
+    hasUserTagsChanged(prevUser, user),
     ...hasDetailsChanged(prevUser, user),
     ...hasLocationDetailsChanged(prevUser, user),
   ]
@@ -66,10 +69,28 @@ export const hasUserImageChanged = (
   if (!prevUser.userImage && user.userImage) return true
 }
 
+export const hasUserTagsChanged = (
+  prevUser: IUserDB,
+  user: IUserDB,
+): boolean => {
+  return !valuesAreDeepEqual(prevUser.tags, user.tags)
+}
+
 export const getCreatorImage = (userImage: IUserDB['userImage']) => {
   return userImage?.downloadUrl || null
 }
 
 export const getFirstCoverImage = (coverImages: IUserDB['coverImages']) => {
   return coverImages?.[0]?.downloadUrl || null
 }
+
+// For ease, duplicated from src/utils/getValidTags.ts
+export const getValidTags = (tagIds: ISelectedTags) => {
+  const selectedTagIds = Object.keys(tagIds).filter((id) => tagIds[id] === true)
+  const tags: ITag[] = selectedTagIds
+    .map((id) => profileTags.find(({ _id }) => id === _id))
+    .filter((tag): tag is ITag => !!tag)
+    .filter(({ _deleted }) => _deleted !== true)
+
+  return tags
+}

package.json

@@ -14,8 +14,8 @@
   "main": "lib/index.js",
   "type": "module",
   "scripts": {
-    "start": "concurrently --kill-others --names themes,components,platform --prefix-colors cyan,blue,magenta \"yarn start:shared\" \"yarn start:themes\" \"yarn start:components\" \"yarn start:platform\"",
-    "start-ci": "concurrently --kill-others --names themes,components,platform --prefix-colors cyan,blue,magenta \"yarn start:themes\" \"yarn start:components\" \"yarn start:platform-ci\"",
+    "start": "concurrently --kill-others --names shared,themes,components,platform --prefix-colors cyan,blue,magenta \"yarn start:shared\" \"yarn start:themes\" \"yarn start:components\" \"yarn start:platform\"",
+    "start-ci": "concurrently --kill-others --names shared,themes,components,platform --prefix-colors cyan,blue,magenta \"yarn start:themes\" \"yarn start:components\" \"yarn start:platform-ci\"",
     "start:themes": "yarn workspace oa-themes dev",
     "start:components": "yarn workspace oa-components dev",
     "start:shared": "yarn workspace oa-shared dev",
@@ -38,7 +38,7 @@
     "format:style": "prettier --write '**/*.{json,js,tsx,ts}'",
     "serve": "npx serve -s build",
     "test": "yarn workspace oa-cypress start",
-    "test:components": "yarn workspace oa-components test",
+    "test:components": "yarn build:themes && yarn build:components && yarn workspace oa-components test",
     "test:unit": "yarn build:themes && yarn build:components && vitest",
     "test:madge": "npx madge --circular --extensions ts,tsx ./ --exclude src/stores",
     "storybook": "yarn workspace oa-components start",

packages/components/scripts/templates/{componentName}.test.tsx.mst

@@ -1,3 +1,7 @@
+import '@testing-library/jest-dom/vitest'
+
+import { describe, expect, it } from 'vitest'
+
 import { render } from '../test/utils'
 import { Default } from './{{ComponentName}}.stories'
 import type { IProps } from './{{ComponentName}}'

packages/components/src/CardProfile/CardDetailsSpaceProfile.tsx

@@ -2,6 +2,7 @@ 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'
 
 import type { IProfileCreator } from 'oa-shared'
@@ -19,6 +20,7 @@ export const CardDetailsSpaceProfile = ({ creator, isLink }: IProps) => {
     countryCode,
     coverImage,
     profileType,
+    tags,
     workspaceType,
   } = creator
 
@@ -82,7 +84,8 @@ export const CardDetailsSpaceProfile = ({ creator, isLink }: IProps) => {
             isLink={isLink}
           />
         </Flex>
-        {workspaceType && (
+
+        {workspaceType && profileType === 'workspace' && (
           <Category
             category={{ label: workspaceLabel }}
             sx={{
@@ -92,6 +95,9 @@ export const CardDetailsSpaceProfile = ({ creator, isLink }: IProps) => {
             }}
           />
         )}
+
+        {tags && <ProfileTagsList tags={tags} />}
+
         {about && (
           <Text variant="quiet" sx={{ fontSize: 2 }}>
             {aboutTextStart || about}

packages/components/src/ProfileTagsList/ProfileTagsList.stories.tsx

@@ -0,0 +1,27 @@
+import { ProfileTagsList } from './ProfileTagsList'
+
+import type { Meta, StoryFn } from '@storybook/react'
+
+export default {
+  title: 'Components/ProfileTagsList',
+  component: ProfileTagsList,
+} as Meta<typeof ProfileTagsList>
+
+export const Default: StoryFn<typeof ProfileTagsList> = () => (
+  <ProfileTagsList
+    tags={[
+      {
+        _id: 'hwh',
+        _created: 'today',
+        _deleted: false,
+        label: 'Electronics',
+      },
+      {
+        _id: 'a45397uh',
+        _created: 'yesterday',
+        _deleted: false,
+        label: 'Electronics II',
+      },
+    ]}
+  />
+)

packages/components/src/ProfileTagsList/ProfileTagsList.test.tsx

@@ -0,0 +1,16 @@
+import '@testing-library/jest-dom/vitest'
+
+import { describe, expect, it } from 'vitest'
+
+import { render } from '../test/utils'
+import { Default } from './ProfileTagsList.stories'
+
+import type { IProps } from './ProfileTagsList'
+
+describe('ProfileTagsList', () => {
+  it('validates the component behaviour', () => {
+    const { getByText } = render(<Default {...(Default.args as IProps)} />)
+
+    expect(getByText('Electronics')).toBeInTheDocument()
+  })
+})

packages/components/src/ProfileTagsList/ProfileTagsList.tsx

@@ -0,0 +1,22 @@
+import { Flex } from 'theme-ui'
+
+import { Category } from '../Category/Category'
+
+import type { ITag } from 'oa-shared'
+
+export interface IProps {
+  tags: ITag[]
+}
+
+export const ProfileTagsList = ({ tags }: IProps) => {
+  return (
+    <Flex sx={{ gap: 2, flexWrap: 'wrap' }}>
+      {tags.map(
+        (tag, index) =>
+          tag?.label && (
+            <Category key={index} category={{ label: tag.label }} />
+          ),
+      )}
+    </Flex>
+  )
+}