From ecefa53887278488b18e629664b0cd63598de7d4 Mon Sep 17 00:00:00 2001
From: Ben Furber <ben.furber@googlemail.com>
Date: Fri, 11 Oct 2024 10:38:06 +0100
Subject: [PATCH 1/7] feat: add profile label service

---
 shared/data/index.ts                          |  1 +
 shared/data/profileTags.ts                    | 34 +++++++++++++++++++
 shared/index.ts                               |  1 +
 shared/mocks/data/users.ts                    | 14 --------
 shared/models/db.ts                           |  4 +--
 shared/models/tags.ts                         |  2 +-
 shared/models/user.ts                         | 24 ++++---------
 .../Research/Content/ResearchArticle.test.tsx |  8 ++---
 .../ContentAuthorTimestamp.tsx                |  4 +--
 src/services/user.service.ts                  | 11 ++++++
 10 files changed, 63 insertions(+), 40 deletions(-)
 create mode 100644 shared/data/index.ts
 create mode 100644 shared/data/profileTags.ts
 create mode 100644 src/services/user.service.ts

diff --git a/shared/data/index.ts b/shared/data/index.ts
new file mode 100644
index 0000000000..1709bdc580
--- /dev/null
+++ b/shared/data/index.ts
@@ -0,0 +1 @@
+export * from './profileTags'
diff --git a/shared/data/profileTags.ts b/shared/data/profileTags.ts
new file mode 100644
index 0000000000..8a108d70a5
--- /dev/null
+++ b/shared/data/profileTags.ts
@@ -0,0 +1,34 @@
+import type { ITag } from '../models/tags'
+
+export const profileTags: ITag[] = [
+  {
+    _id: 'uCzWZbz3aVKyx2keoqRi',
+    _created: '2018-01-01T00:00:00.001Z',
+    _deleted: false,
+    label: 'Electronics',
+  },
+  {
+    _id: 'J3LF7fMsDfniYT2ZX3rf',
+    _created: '2018-01-01T00:00:00.001Z',
+    _deleted: false,
+    label: 'Machining',
+  },
+  {
+    _id: 'QvxszeiUqy867CaVc7Kh',
+    _created: '2018-01-01T00:00:00.001Z',
+    _deleted: false,
+    label: 'Welding',
+  },
+  {
+    _id: '6h3fWCv3AXGJ4bVr3Foc',
+    _created: '2018-01-01T00:00:00.001Z',
+    _deleted: false,
+    label: 'Assembling',
+  },
+  {
+    _id: 'FhtRoqZvQYYaN6CN2txJ',
+    _created: '2018-01-01T00:00:00.001Z',
+    _deleted: false,
+    label: 'Mould Making',
+  },
+]
diff --git a/shared/index.ts b/shared/index.ts
index a38d7b036e..e5b6b09485 100644
--- a/shared/index.ts
+++ b/shared/index.ts
@@ -1,3 +1,4 @@
+export * from './data'
 export * from './models'
 export * from './messages'
 export * from './mocks'
diff --git a/shared/mocks/data/users.ts b/shared/mocks/data/users.ts
index d04366cad0..02fa553398 100644
--- a/shared/mocks/data/users.ts
+++ b/shared/mocks/data/users.ts
@@ -191,7 +191,6 @@ export const users = {
     _id: 'settings_community_new',
     profileType: null,
     coverImages: [],
-    isExpert: null,
     collectedPlasticTypes: null,
     openingHours: [],
     location: null,
@@ -199,7 +198,6 @@ export const users = {
     _modified: '2020-01-07T12:15:08.726Z',
     _created: '2020-01-07T12:15:08.726Z',
     displayName: 'settings_community_new',
-    isV4Member: null,
     _deleted: false,
     workspaceType: null,
     country: null,
@@ -218,7 +216,6 @@ export const users = {
     _modified: '2020-01-07T12:14:50.354Z',
     _created: '2020-01-07T12:14:50.354Z',
     displayName: 'settings_machine_new',
-    isV4Member: null,
     _deleted: false,
     workspaceType: null,
     country: null,
@@ -231,10 +228,8 @@ export const users = {
     _id: 'settings_machine_new',
     profileType: null,
     coverImages: [],
-    isExpert: null,
   },
   settings_member_new: {
-    isV4Member: null,
     _deleted: false,
     workspaceType: null,
     country: 'Poland',
@@ -247,7 +242,6 @@ export const users = {
     _id: 'settings_member_new',
     profileType: null,
     coverImages: [],
-    isExpert: null,
     collectedPlasticTypes: null,
     openingHours: [],
     location: null,
@@ -264,7 +258,6 @@ export const users = {
     _modified: '2020-01-07T12:15:42.218Z',
     _created: '2020-01-07T12:15:42.218Z',
     displayName: 'settings_plastic_new',
-    isV4Member: null,
     _deleted: false,
     workspaceType: null,
     country: null,
@@ -277,7 +270,6 @@ export const users = {
     _id: 'settings_plastic_new',
     profileType: null,
     coverImages: [],
-    isExpert: null,
   },
   settings_workplace_empty: {
     collectedPlasticTypes: [],
@@ -287,7 +279,6 @@ export const users = {
     _modified: '2020-01-07T12:15:42.218Z',
     _created: '2020-01-07T12:15:42.218Z',
     displayName: 'settings_workplace_empty',
-    isV4Member: null,
     _deleted: false,
     workspaceType: null,
     country: null,
@@ -300,7 +291,6 @@ export const users = {
     _id: 'settings_workplace_empty',
     profileType: 'workspace',
     coverImages: [],
-    isExpert: null,
   },
   settings_workplace_new: {
     openingHours: [],
@@ -309,7 +299,6 @@ export const users = {
     _modified: '2020-01-07T12:14:15.081Z',
     _created: '2020-01-07T12:14:15.081Z',
     displayName: 'settings_workplace_new',
-    isV4Member: null,
     _deleted: false,
     workspaceType: null,
     country: null,
@@ -322,7 +311,6 @@ export const users = {
     _id: 'settings_workplace_new',
     profileType: 'workspace',
     coverImages: [],
-    isExpert: null,
     collectedPlasticTypes: null,
     email: 'settings_workplace_new@test.com',
     password: 'test1234',
@@ -365,7 +353,6 @@ export const users = {
     _modified: '2020-01-07T12:14:15.081Z',
     _created: '2020-01-07T12:14:15.081Z',
     displayName: 'mapview_testing_rejected',
-    isV4Member: null,
     _deleted: false,
     workspaceType: null,
     country: null,
@@ -378,7 +365,6 @@ export const users = {
     _id: 'mapview_testing_rejected',
     profileType: 'workspace',
     coverImages: [],
-    isExpert: null,
     collectedPlasticTypes: null,
     email: 'mapview_testing_rejected@test.com',
     password: 'mapview_testing_rejected@test.com',
diff --git a/shared/models/db.ts b/shared/models/db.ts
index c7ab75093c..db01054344 100644
--- a/shared/models/db.ts
+++ b/shared/models/db.ts
@@ -74,7 +74,7 @@ export type DBEndpoint = keyof typeof DB_ENDPOINTS
 export interface DBDoc {
   _id: string
   _created: ISODateString
-  _modified: ISODateString
+  _modified?: ISODateString
   _deleted: boolean
-  _contentModifiedTimestamp: ISODateString
+  _contentModifiedTimestamp?: ISODateString
 }
diff --git a/shared/models/tags.ts b/shared/models/tags.ts
index 54486318e2..d68dc98e14 100644
--- a/shared/models/tags.ts
+++ b/shared/models/tags.ts
@@ -17,5 +17,5 @@ when building tag uploader it should enforce reasonable max size image (say 500p
 
 export interface ITag extends DBDoc {
   label: string
-  image: string
+  image?: string
 }
diff --git a/shared/models/user.ts b/shared/models/user.ts
index 7830e30b5e..d262e15afe 100644
--- a/shared/models/user.ts
+++ b/shared/models/user.ts
@@ -3,6 +3,7 @@ import type { DBDoc } from './db'
 import type { IModerationStatus } from './moderation'
 import type { INotification, INotificationSettings } from './notifications'
 import type { IUploadedFileMeta } from './storage'
+import type { ISelectedTags } from './tags'
 
 /* eslint-disable @typescript-eslint/naming-convention */
 export enum UserRole {
@@ -109,13 +110,6 @@ export type PlasticTypeLabel =
   | 'ps'
   | 'other'
 
-export type MachineBuilderXpLabel =
-  | 'electronics'
-  | 'machining'
-  | 'welding'
-  | 'assembling'
-  | 'mould-making'
-
 export type WorkspaceType =
   | 'shredder'
   | 'sheetpress'
@@ -143,10 +137,6 @@ export interface IWorkspaceType {
   subText?: string
 }
 
-export interface IMAchineBuilderXp {
-  label: MachineBuilderXpLabel
-}
-
 export interface IOpeningHours {
   day: string
   openFrom: string
@@ -193,17 +183,17 @@ export interface IUser {
   isContactableByPublic?: boolean
   patreon?: PatreonUser | null
   totalUseful?: number
+  total_views?: number
+
+  // New generic profile field for all profile types
+  tags?: ISelectedTags
 
   // Primary PP profile type related fields
   profileType: ProfileTypeName
-  workspaceType?: WorkspaceType | null
+  workspaceType?: WorkspaceType | null // <-- to-do replace with tags
+  collectedPlasticTypes?: PlasticTypeLabel[] | null // <-- to-do replace with tags
   mapPinDescription?: string | null
   openingHours?: IOpeningHours[]
-  collectedPlasticTypes?: PlasticTypeLabel[] | null
-  machineBuilderXp?: IMAchineBuilderXp[] | null
-  isExpert?: boolean | null
-  isV4Member?: boolean | null
-  total_views?: number
 }
 
 export interface IUserBadges {
diff --git a/src/pages/Research/Content/ResearchArticle.test.tsx b/src/pages/Research/Content/ResearchArticle.test.tsx
index 0d9f4d2ef1..bec916ae26 100644
--- a/src/pages/Research/Content/ResearchArticle.test.tsx
+++ b/src/pages/Research/Content/ResearchArticle.test.tsx
@@ -258,10 +258,10 @@ describe('Research Article', () => {
     })
 
     it('does not show edit timestamp, when create displays the same value', async () => {
-      const created = faker.date.past()
+      const _created = faker.date.past().toString()
       const update = FactoryResearchItemUpdate({
-        _created: created.toString(),
-        _modified: created.toString(),
+        _created,
+        _modified: _created,
         title: 'A title',
         description: 'A description',
       })
@@ -281,7 +281,7 @@ describe('Research Article', () => {
       await waitFor(() => {
         expect(() =>
           wrapper.getAllByText(
-            `${formatDistanceToNow(update._modified, { addSuffix: true })}`,
+            `${formatDistanceToNow(_created, { addSuffix: true })}`,
           ),
         ).toThrow()
       })
diff --git a/src/pages/common/ContentAuthorTimestamp/ContentAuthorTimestamp.tsx b/src/pages/common/ContentAuthorTimestamp/ContentAuthorTimestamp.tsx
index 0066e37834..7ceef203c3 100644
--- a/src/pages/common/ContentAuthorTimestamp/ContentAuthorTimestamp.tsx
+++ b/src/pages/common/ContentAuthorTimestamp/ContentAuthorTimestamp.tsx
@@ -7,7 +7,7 @@ interface ContentAuthorTimestampProps {
   userName: string
   countryCode: string | undefined
   created: string | number | Date
-  modified: string | number | Date
+  modified?: string | number | Date
   action?: string
 }
 
@@ -27,7 +27,7 @@ export const ContentAuthorTimestamp = ({
         action={action}
       />
       <Text
-        hidden={created === modified}
+        hidden={created === modified || !modified}
         variant="auxiliary"
         sx={{
           color: 'lightgrey',
diff --git a/src/services/user.service.ts b/src/services/user.service.ts
new file mode 100644
index 0000000000..52e809c4ed
--- /dev/null
+++ b/src/services/user.service.ts
@@ -0,0 +1,11 @@
+import { profileTags } from 'oa-shared'
+
+import type { ITag } from 'oa-shared'
+
+const getProfileTags: () => ITag[] = () => {
+  return profileTags
+}
+
+export const userService = {
+  getProfileTags,
+}

From 1aed5dda895e3a615317192c24677c13190638f3 Mon Sep 17 00:00:00 2001
From: Ben Furber <ben.furber@googlemail.com>
Date: Wed, 16 Oct 2024 13:16:56 +0100
Subject: [PATCH 2/7] feat: add profile tags to app

---
 .../ProfileTagsList.stories.tsx               | 14 ++++
 .../ProfileTagsList/ProfileTagsList.test.tsx  | 19 +++++
 .../src/ProfileTagsList/ProfileTagsList.tsx   | 32 ++++++++
 packages/components/src/index.ts              |  1 +
 .../cypress/src/integration/settings.spec.ts  | 12 +--
 src/common/Tags/TagsSelect.tsx                | 13 +--
 src/pages/User/content/SpaceProfile.tsx       | 39 +--------
 .../SettingsPageUserProfile.test.tsx          | 15 ++--
 .../UserSettings/SettingsPageUserProfile.tsx  | 12 +--
 .../content/sections/Expertise.section.tsx    | 81 -------------------
 .../content/sections/ProfileTags.section.tsx  | 42 ++++++++++
 src/pages/UserSettings/labels.ts              |  9 +--
 12 files changed, 143 insertions(+), 146 deletions(-)
 create mode 100644 packages/components/src/ProfileTagsList/ProfileTagsList.stories.tsx
 create mode 100644 packages/components/src/ProfileTagsList/ProfileTagsList.test.tsx
 create mode 100644 packages/components/src/ProfileTagsList/ProfileTagsList.tsx
 delete mode 100644 src/pages/UserSettings/content/sections/Expertise.section.tsx
 create mode 100644 src/pages/UserSettings/content/sections/ProfileTags.section.tsx

diff --git a/packages/components/src/ProfileTagsList/ProfileTagsList.stories.tsx b/packages/components/src/ProfileTagsList/ProfileTagsList.stories.tsx
new file mode 100644
index 0000000000..9056c6b71d
--- /dev/null
+++ b/packages/components/src/ProfileTagsList/ProfileTagsList.stories.tsx
@@ -0,0 +1,14 @@
+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
+    tagIds={{ uCzWZbz3aVKyx2keoqRi: true, J3LF7fMsDfniYT2ZX3rf: false }}
+  />
+)
diff --git a/packages/components/src/ProfileTagsList/ProfileTagsList.test.tsx b/packages/components/src/ProfileTagsList/ProfileTagsList.test.tsx
new file mode 100644
index 0000000000..d048994d15
--- /dev/null
+++ b/packages/components/src/ProfileTagsList/ProfileTagsList.test.tsx
@@ -0,0 +1,19 @@
+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, queryByText } = render(
+      <Default {...(Default.args as IProps)} />,
+    )
+
+    expect(getByText('Electronics')).toBeInTheDocument()
+    expect(queryByText('Machining')).toBeNull()
+  })
+})
diff --git a/packages/components/src/ProfileTagsList/ProfileTagsList.tsx b/packages/components/src/ProfileTagsList/ProfileTagsList.tsx
new file mode 100644
index 0000000000..01622ac082
--- /dev/null
+++ b/packages/components/src/ProfileTagsList/ProfileTagsList.tsx
@@ -0,0 +1,32 @@
+import { profileTags } from 'oa-shared'
+import { Flex } from 'theme-ui'
+
+import { Category } from '../Category/Category'
+
+import type { ISelectedTags } from 'oa-shared'
+
+export interface IProps {
+  tagIds: ISelectedTags
+}
+
+export const ProfileTagsList = ({ tagIds }: IProps) => {
+  const selectedTagIds = Object.keys(tagIds).filter((id) => tagIds[id] === true)
+  const tags = selectedTagIds
+    .map((id) => profileTags.find(({ _id }) => id === _id))
+    .filter((tag) => tag !== undefined)
+
+  if (tags.length === 0) {
+    return null
+  }
+
+  return (
+    <Flex sx={{ gap: 2 }}>
+      {tags.map(
+        (tag, index) =>
+          tag?.label && (
+            <Category key={index} category={{ label: tag.label }} />
+          ),
+      )}
+    </Flex>
+  )
+}
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 7cfe655da8..dbbf7d2bc2 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -56,6 +56,7 @@ export { NotificationList } from './NotificationList/NotificationList'
 export { OsmGeocoding } from './OsmGeocoding/OsmGeocoding'
 export { PinProfile } from './PinProfile/PinProfile'
 export { ProfileLink } from './ProfileLink/ProfileLink'
+export { ProfileTagsList } from './ProfileTagsList/ProfileTagsList'
 export { ResearchEditorOverview } from './ResearchEditorOverview/ResearchEditorOverview'
 export { SearchField } from './SearchField/SearchField'
 export { Select } from './Select/Select'
diff --git a/packages/cypress/src/integration/settings.spec.ts b/packages/cypress/src/integration/settings.spec.ts
index 067b5b5dcc..2acfb3b1b8 100644
--- a/packages/cypress/src/integration/settings.spec.ts
+++ b/packages/cypress/src/integration/settings.spec.ts
@@ -255,7 +255,7 @@ describe('[Settings]', () => {
       const coverImage = 'profile-cover-2-edited'
       const description = "We're mechanics and our jobs are making machines"
       const displayName = 'machine_builder_pro'
-      const machineBuilderXp = ['electronics', 'welding']
+      const machineBuilderXp = ['Electronics', 'Welding']
       const mapPinDescription = 'Informative workshop on machines every week'
       const profileType = 'machine-builder'
       const user = generateNewUserDetails()
@@ -272,6 +272,10 @@ describe('[Settings]', () => {
       cy.get('[data-cy=save]').click()
       cy.get('[data-cy=errors-container]').should('be.visible')
 
+      cy.step('Set profile tags')
+      cy.selectTag(machineBuilderXp[0], '[data-cy=tag-select]')
+      cy.selectTag(machineBuilderXp[1], '[data-cy=tag-select]')
+
       cy.step('Populate profile')
       cy.setSettingBasicUserInfo({
         displayName,
@@ -279,10 +283,6 @@ describe('[Settings]', () => {
       })
       cy.setSettingImage(coverImage, 'coverImages-0')
 
-      cy.step('Choose Expertise')
-      cy.get(`[data-cy=${machineBuilderXp[0]}]`).click()
-      cy.get(`[data-cy=${machineBuilderXp[1]}]`).click()
-
       cy.setSettingAddContactLink({
         index: 0,
         label: ExternalLinkLabel.BAZAR,
@@ -298,6 +298,8 @@ describe('[Settings]', () => {
       cy.contains(user.username)
       cy.contains(displayName)
       cy.contains(description)
+      cy.contains(machineBuilderXp[0])
+      cy.contains(machineBuilderXp[1])
       cy.get(`[data-cy=MemberBadge-${profileType}]`)
       cy.get('[data-cy="active-image"]')
         .should('have.attr', 'src')
diff --git a/src/common/Tags/TagsSelect.tsx b/src/common/Tags/TagsSelect.tsx
index 25ab10b0fc..ce78df2c11 100644
--- a/src/common/Tags/TagsSelect.tsx
+++ b/src/common/Tags/TagsSelect.tsx
@@ -14,6 +14,7 @@ export interface IProps extends Partial<FieldRenderProps<any, any>> {
   onChange: (val: ISelectedTags) => void
   styleVariant?: 'selector' | 'filter'
   placeholder?: string
+  tagsSource?: ITag[]
 }
 interface IState {
   selectedTags: string[]
@@ -22,6 +23,8 @@ interface IState {
 const TagsSelect = (props: IProps) => {
   const { tagsStore } = useCommonStores().stores
   const { allTags } = tagsStore
+
+  const allTagsData = props.tagsSource ? props.tagsSource : allTags
   const [state, setState] = useState<IState>({ selectedTags: [] })
 
   // if we initialise with a value we want to update the state to reflect the selected tags
@@ -42,8 +45,8 @@ const TagsSelect = (props: IProps) => {
 
   // as react-select can't keep track of which object key corresponds to the selected
   // value include manual lookup so that value can also be passed from props
-  const _getSelected = (allTags: ITag[]) => {
-    return allTags?.filter((tag) => state.selectedTags.includes(tag._id))
+  const _getSelected = (allTagsData: ITag[]) => {
+    return allTagsData?.filter((tag) => state.selectedTags.includes(tag._id))
   }
 
   // whilst we deal with arrays of selected tag ids in the component we want to store as a json map
@@ -58,15 +61,15 @@ const TagsSelect = (props: IProps) => {
   return (
     <FieldContainer
       // provide a data attribute that can be used to see if tags populated
-      data-cy={allTags?.length > 0 ? 'tag-select' : 'tag-select-empty'}
+      data-cy={allTagsData?.length > 0 ? 'tag-select' : 'tag-select-empty'}
     >
       <Select
         variant={props.isForm ? 'form' : undefined}
-        options={allTags}
+        options={allTagsData}
         placeholder={props.placeholder}
         isClearable={true}
         isMulti={true}
-        value={_getSelected(allTags)}
+        value={_getSelected(allTagsData)}
         getOptionLabel={(tag: ITag) => tag.label}
         getOptionValue={(tag: ITag) => tag._id}
         onChange={(values) => onSelectedTagsChanged(values as ITag[])}
diff --git a/src/pages/User/content/SpaceProfile.tsx b/src/pages/User/content/SpaceProfile.tsx
index 7326dc9f9c..8bb306a212 100644
--- a/src/pages/User/content/SpaceProfile.tsx
+++ b/src/pages/User/content/SpaceProfile.tsx
@@ -1,6 +1,7 @@
 import {
   ImageGallery,
   MemberBadge,
+  ProfileTagsList,
   Tab,
   TabPanel,
   Tabs,
@@ -39,12 +40,7 @@ import { heading } from '../impact/labels'
 import UserContactAndLinks from './UserContactAndLinks'
 import UserCreatedDocuments from './UserCreatedDocuments'
 
-import type {
-  IMAchineBuilderXp,
-  IOpeningHours,
-  IUser,
-  PlasticTypeLabel,
-} from 'oa-shared'
+import type { IOpeningHours, IUser, PlasticTypeLabel } from 'oa-shared'
 import type { UserCreatedDocs } from '../types'
 
 interface IProps {
@@ -111,31 +107,6 @@ const renderOpeningHours = (openingHours: IOpeningHours[]) => (
   </div>
 )
 
-const renderMachineBuilderXp = (machineBuilderXp: IMAchineBuilderXp[]) => (
-  <>
-    <h4>We offer the following services:</h4>
-    {machineBuilderXp.map((machineExperience, index) => {
-      return (
-        <Box
-          sx={{
-            backgroundColor: 'background',
-            borderColor: 'background',
-            borderRadius: '5px',
-            borderStyle: 'solid',
-            borderWidth: '1px',
-            display: 'inline-block',
-            marginRight: '10px',
-            padding: '10px',
-          }}
-          key={`machineXp-${index}`}
-        >
-          {machineExperience.label}
-        </Box>
-      )
-    })}
-  </>
-)
-
 const getCoverImages = (user: IUser) => {
   if (user.coverImages && user.coverImages.length) {
     return user.coverImages
@@ -152,6 +123,7 @@ export const SpaceProfile = ({ user, docs }: IProps) => {
     links,
     location,
     profileType,
+    tags,
     userName,
     userImage,
   } = user
@@ -275,6 +247,7 @@ export const SpaceProfile = ({ user, docs }: IProps) => {
                       width: ['100%', '100%', '80%'],
                     }}
                   >
+                    {tags && <ProfileTagsList tagIds={tags} />}
                     {about && <Paragraph>{about}</Paragraph>}
 
                     {profileType === ProfileTypeList.COLLECTION_POINT &&
@@ -284,10 +257,6 @@ export const SpaceProfile = ({ user, docs }: IProps) => {
                     {profileType === ProfileTypeList.COLLECTION_POINT &&
                       user.openingHours &&
                       renderOpeningHours(user.openingHours)}
-
-                    {profileType === ProfileTypeList.MACHINE_BUILDER &&
-                      user.machineBuilderXp &&
-                      renderMachineBuilderXp(user.machineBuilderXp)}
                   </Box>
                   <Box
                     sx={{
diff --git a/src/pages/UserSettings/SettingsPageUserProfile.test.tsx b/src/pages/UserSettings/SettingsPageUserProfile.test.tsx
index 639049562d..e199316a33 100644
--- a/src/pages/UserSettings/SettingsPageUserProfile.test.tsx
+++ b/src/pages/UserSettings/SettingsPageUserProfile.test.tsx
@@ -18,6 +18,9 @@ vi.mock('src/common/hooks/useCommonStores', () => ({
       userStore: {
         activeUser: mockUser,
       },
+      tagsStore: {
+        allTags: [],
+      },
     },
   }),
 }))
@@ -39,7 +42,7 @@ describe('UserSettings', () => {
       expect(wrapper.queryByTestId('workspaceType')).toBeNull()
       expect(wrapper.queryByTestId('CollectionSection')).toBeNull()
       expect(wrapper.queryByTestId('CollectionSection')).toBeNull()
-      expect(wrapper.queryByTestId('ExpertiseSection')).toBeNull()
+      expect(wrapper.queryByTestId('ProfileTags')).toBeNull()
       expect(wrapper.getAllByTestId('UserInfosSection')).toHaveLength(1)
       expect(wrapper.queryByTestId('PublicContactSection')).toBeNull()
       expect(wrapper.getAllByTestId('userImage')).toHaveLength(1)
@@ -58,7 +61,7 @@ describe('UserSettings', () => {
     await waitFor(() => {
       expect(wrapper.queryByTestId('workspaceType')).toBeNull()
       expect(wrapper.getAllByTestId('CollectionSection')).toHaveLength(1)
-      expect(wrapper.queryByTestId('ExpertiseSection')).toBeNull()
+      expect(wrapper.queryByTestId('ProfileTags')).toBeNull()
       expect(wrapper.getAllByTestId('UserInfosSection')).toHaveLength(1)
       expect(wrapper.getAllByTestId('PublicContactSection')).toHaveLength(1)
       expect(wrapper.getAllByTestId('userImage')).toHaveLength(1)
@@ -77,7 +80,7 @@ describe('UserSettings', () => {
     await waitFor(() => {
       expect(wrapper.queryByTestId('workspaceType')).toBeNull()
       expect(wrapper.queryByTestId('CollectionSection')).toBeNull()
-      expect(wrapper.queryByTestId('ExpertiseSection')).toBeNull()
+      expect(wrapper.queryByTestId('ProfileTags')).toBeNull()
       expect(wrapper.getAllByTestId('UserInfosSection')).toHaveLength(1)
       expect(wrapper.getAllByTestId('PublicContactSection')).toHaveLength(1)
       expect(wrapper.getAllByTestId('userImage')).toHaveLength(1)
@@ -96,7 +99,7 @@ describe('UserSettings', () => {
     await waitFor(() => {
       expect(wrapper.queryByTestId('workspaceType')).toBeNull()
       expect(wrapper.queryByTestId('CollectionSection')).toBeNull()
-      expect(wrapper.getAllByTestId('ExpertiseSection')).toHaveLength(1)
+      expect(wrapper.getAllByTestId('ProfileTags')).toHaveLength(1)
       expect(wrapper.getAllByTestId('UserInfosSection')).toHaveLength(1)
       expect(wrapper.getAllByTestId('PublicContactSection')).toHaveLength(1)
       expect(wrapper.getAllByTestId('userImage')).toHaveLength(1)
@@ -115,7 +118,7 @@ describe('UserSettings', () => {
     await waitFor(() => {
       expect(wrapper.queryByTestId('workspaceType')).toBeNull()
       expect(wrapper.queryByTestId('CollectionSection')).toBeNull()
-      expect(wrapper.queryByTestId('ExpertiseSection')).toBeNull()
+      expect(wrapper.queryByTestId('ProfileTags')).toBeNull()
       expect(wrapper.getAllByTestId('UserInfosSection')).toHaveLength(1)
       expect(wrapper.getAllByTestId('PublicContactSection')).toHaveLength(1)
       expect(wrapper.getAllByTestId('userImage')).toHaveLength(1)
@@ -134,7 +137,7 @@ describe('UserSettings', () => {
     await waitFor(() => {
       expect(wrapper.getAllByTestId('workspaceType')).toHaveLength(1)
       expect(wrapper.queryByTestId('CollectionSection')).toBeNull()
-      expect(wrapper.queryByTestId('ExpertiseSection')).toBeNull()
+      expect(wrapper.queryByTestId('ProfileTags')).toBeNull()
       expect(wrapper.getAllByTestId('UserInfosSection')).toHaveLength(1)
       expect(wrapper.getAllByTestId('PublicContactSection')).toHaveLength(1)
       expect(wrapper.getAllByTestId('userImage')).toHaveLength(1)
diff --git a/src/pages/UserSettings/SettingsPageUserProfile.tsx b/src/pages/UserSettings/SettingsPageUserProfile.tsx
index bbaeb85ebe..6ae83de95a 100644
--- a/src/pages/UserSettings/SettingsPageUserProfile.tsx
+++ b/src/pages/UserSettings/SettingsPageUserProfile.tsx
@@ -13,8 +13,8 @@ import { Flex } from 'theme-ui'
 import { v4 as uuid } from 'uuid'
 
 import { CollectionSection } from './content/sections/Collection.section'
-import { ExpertiseSection } from './content/sections/Expertise.section'
 import { FocusSection } from './content/sections/Focus.section'
+import { ProfileTags } from './content/sections/ProfileTags.section'
 import { PublicContactSection } from './content/sections/PublicContact.section'
 import { UserImagesSection } from './content/sections/UserImages.section'
 import { UserInfosSection } from './content/sections/UserInfos.section'
@@ -106,11 +106,11 @@ export const SettingsPageUserProfile = () => {
     openingHours: user.openingHours || [{}],
     workspaceType: user.workspaceType || null,
     collectedPlasticTypes: user.collectedPlasticTypes || null,
-    machineBuilderXp: user.machineBuilderXp || null,
     isContactableByPublic:
       user.isContactableByPublic || DEFAULT_PUBLIC_CONTACT_PREFERENCE,
     userImage: user.userImage || null,
     coverImages,
+    tags: user.tags || [],
   }
 
   const formId = 'userProfileForm'
@@ -167,13 +167,7 @@ export const SettingsPageUserProfile = () => {
                 )}
 
                 {values.profileType === ProfileTypeList.MACHINE_BUILDER && (
-                  <ExpertiseSection
-                    required={
-                      values.machineBuilderXp
-                        ? values.machineBuilderXp.length === 0
-                        : true
-                    }
-                  />
+                  <ProfileTags />
                 )}
 
                 <UserInfosSection formValues={values} />
diff --git a/src/pages/UserSettings/content/sections/Expertise.section.tsx b/src/pages/UserSettings/content/sections/Expertise.section.tsx
deleted file mode 100644
index b4e1594b5d..0000000000
--- a/src/pages/UserSettings/content/sections/Expertise.section.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { FieldArray } from 'react-final-form-arrays'
-import { fields, headings } from 'src/pages/UserSettings/labels'
-import { Flex, Heading, Text } from 'theme-ui'
-
-import { FlexSectionContainer } from '../elements'
-import { CustomCheckbox } from '../fields/CustomCheckbox.field'
-
-import type { IMAchineBuilderXp } from 'oa-shared'
-
-interface IProps {
-  required: boolean
-}
-
-const MACHINE_BUILDER_XP: IMAchineBuilderXp[] = [
-  { label: 'electronics' },
-  { label: 'machining' },
-  { label: 'welding' },
-  { label: 'assembling' },
-  { label: 'mould-making' },
-]
-
-export const ExpertiseSection = (props: IProps) => {
-  const { required } = props
-  const { description, title } = fields.expertise
-
-  return (
-    <FlexSectionContainer>
-      <Flex
-        data-testid="ExpertiseSection"
-        sx={{
-          flexDirection: 'column',
-          justifyContent: 'space-between',
-          gap: 2,
-        }}
-      >
-        <Heading as="h2">{headings.expertise}</Heading>
-        <Text variant="quiet">{`${title} *`}</Text>
-        {required && (
-          <Text sx={{ color: 'error', fontSize: 1 }}>{description}</Text>
-        )}
-
-        <Flex sx={{ flexWrap: ['wrap', 'wrap', 'nowrap'], gap: 2 }}>
-          <FieldArray name="machineBuilderXp">
-            {({ fields }) => (
-              <>
-                {MACHINE_BUILDER_XP.map((xp, index: number) => (
-                  <CustomCheckbox
-                    data-cy={xp.label}
-                    key={index}
-                    value={xp.label}
-                    index={index}
-                    isSelected={
-                      fields.value ? fields.value.includes(xp.label) : false
-                    }
-                    onChange={() => {
-                      if (fields.value && fields.value.length !== 0) {
-                        if (fields.value.includes(xp.label)) {
-                          // eslint-disable-next-line
-                          fields.value.map((value, selectedValIndex) => {
-                            if (value === xp.label) {
-                              fields.remove(selectedValIndex)
-                            }
-                          })
-                        } else {
-                          fields.push(xp.label)
-                        }
-                      } else {
-                        fields.push(xp.label)
-                      }
-                    }}
-                    btnLabel={xp.label}
-                  />
-                ))}
-              </>
-            )}
-          </FieldArray>
-        </Flex>
-      </Flex>
-    </FlexSectionContainer>
-  )
-}
diff --git a/src/pages/UserSettings/content/sections/ProfileTags.section.tsx b/src/pages/UserSettings/content/sections/ProfileTags.section.tsx
new file mode 100644
index 0000000000..76350a67d0
--- /dev/null
+++ b/src/pages/UserSettings/content/sections/ProfileTags.section.tsx
@@ -0,0 +1,42 @@
+import { Field } from 'react-final-form'
+import TagsSelect from 'src/common/Tags/TagsSelect'
+import { fields } from 'src/pages/UserSettings/labels'
+import { userService } from 'src/services/user.service'
+import { Flex, Heading, Text } from 'theme-ui'
+
+import { FlexSectionContainer } from '../elements'
+
+export const ProfileTags = () => {
+  const { description, title } = fields.tags
+
+  return (
+    <FlexSectionContainer>
+      <Flex
+        data-testid="ProfileTags"
+        sx={{
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          gap: 2,
+        }}
+      >
+        <Heading as="h2">{title}</Heading>
+        <Text variant="quiet">{description}</Text>
+        <Field name="tags" component={WrappedTagsSelect} />
+      </Flex>
+    </FlexSectionContainer>
+  )
+}
+
+const WrappedTagsSelect = ({ input, ...rest }) => {
+  const { getProfileTags } = userService
+  const profileTags = getProfileTags()
+
+  return (
+    <TagsSelect
+      value={input.value}
+      onChange={(tags) => input.onChange(tags)}
+      tagsSource={profileTags}
+      {...rest}
+    />
+  )
+}
diff --git a/src/pages/UserSettings/labels.ts b/src/pages/UserSettings/labels.ts
index ca2da2b5fc..cf09499c70 100644
--- a/src/pages/UserSettings/labels.ts
+++ b/src/pages/UserSettings/labels.ts
@@ -75,10 +75,6 @@ export const fields: ILabels = {
       "We can send you emails with all the notifications you've missed.",
     title: 'Email notifications',
   },
-  expertise: {
-    description: 'Choose at least one expertise',
-    title: 'What are you specialised in ?',
-  },
   impact: {
     description:
       "Let's track our collective positive impact! Add data about your recycling work and show the world the power of a movement of small scale recyclers!",
@@ -139,6 +135,10 @@ export const fields: ILabels = {
     error: 'Please select your workspace type',
     title: 'Workspace',
   },
+  tags: {
+    description: 'Select up to five tags for your profile',
+    title: 'Tags',
+  },
 }
 
 export const form = {
@@ -153,7 +153,6 @@ export const headings = {
   collection: 'Collection',
   createProfile: 'Create profile',
   editProfile: 'Edit profile',
-  expertise: 'Expertise',
   focus: 'Focus',
   images: 'Images',
   infos: 'Infos',

From dc54429685fbdea85897337777ea67d98f75d15a Mon Sep 17 00:00:00 2001
From: Ben Furber <ben.furber@googlemail.com>
Date: Wed, 16 Oct 2024 17:44:38 +0100
Subject: [PATCH 3/7] fix: missing imports from new component template

---
 .../components/scripts/templates/{componentName}.test.tsx.mst | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/components/scripts/templates/{componentName}.test.tsx.mst b/packages/components/scripts/templates/{componentName}.test.tsx.mst
index d78b9239f6..c029ba57ea 100644
--- a/packages/components/scripts/templates/{componentName}.test.tsx.mst
+++ b/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}}'

From eb0b128e6d55af4e0522d0d717dd94dc8aa6f5b2 Mon Sep 17 00:00:00 2001
From: Ben Furber <ben.furber@googlemail.com>
Date: Wed, 16 Oct 2024 17:45:22 +0100
Subject: [PATCH 4/7] feat: add profile tags to user update function

---
 functions/src/userUpdates/index.ts            |   2 +-
 .../updateDiscussionComments.test.ts          |   3 +-
 functions/src/userUpdates/utils.test.ts       | 104 +++++++++++++++++-
 functions/src/userUpdates/utils.ts            |   8 ++
 4 files changed, 111 insertions(+), 6 deletions(-)

diff --git a/functions/src/userUpdates/index.ts b/functions/src/userUpdates/index.ts
index d69b819e85..6ff3ce6e11 100644
--- a/functions/src/userUpdates/index.ts
+++ b/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:
diff --git a/functions/src/userUpdates/updateDiscussionComments.test.ts b/functions/src/userUpdates/updateDiscussionComments.test.ts
index f676726fb9..0c5c5b8e4e 100644
--- a/functions/src/userUpdates/updateDiscussionComments.test.ts
+++ b/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' },
diff --git a/functions/src/userUpdates/utils.test.ts b/functions/src/userUpdates/utils.test.ts
index 963c5d33a6..7d44f6597c 100644
--- a/functions/src/userUpdates/utils.test.ts
+++ b/functions/src/userUpdates/utils.test.ts
@@ -4,21 +4,43 @@ 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])
@@ -26,25 +48,42 @@ describe('hasDetailsChanged', () => {
 
   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)
+  })
+})
diff --git a/functions/src/userUpdates/utils.ts b/functions/src/userUpdates/utils.ts
index 69415eff65..860ec9f1ea 100644
--- a/functions/src/userUpdates/utils.ts
+++ b/functions/src/userUpdates/utils.ts
@@ -46,6 +46,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,6 +67,13 @@ 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
 }

From f2baff58d15f5d9775b73c2788e8d2ab62da875f Mon Sep 17 00:00:00 2001
From: Ben Furber <ben.furber@googlemail.com>
Date: Thu, 17 Oct 2024 13:52:33 +0100
Subject: [PATCH 5/7] feat: add user tags to map list items

---
 package.json                                              | 4 ++--
 .../src/CardProfile/CardDetailsSpaceProfile.tsx           | 8 +++++++-
 .../components/src/ProfileTagsList/ProfileTagsList.tsx    | 2 +-
 shared/models/maps.ts                                     | 2 ++
 src/pages/Maps/Maps.client.tsx                            | 4 ++--
 src/pages/Maps/map.service.ts                             | 4 ++--
 src/stores/Maps/maps.store.ts                             | 6 ++++--
 7 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index f93855db08..62a98f068c 100644
--- a/package.json
+++ b/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",
diff --git a/packages/components/src/CardProfile/CardDetailsSpaceProfile.tsx b/packages/components/src/CardProfile/CardDetailsSpaceProfile.tsx
index 1517dc134b..6879ce7a28 100644
--- a/packages/components/src/CardProfile/CardDetailsSpaceProfile.tsx
+++ b/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 tagIds={tags} />}
+
         {about && (
           <Text variant="quiet" sx={{ fontSize: 2 }}>
             {aboutTextStart || about}
diff --git a/packages/components/src/ProfileTagsList/ProfileTagsList.tsx b/packages/components/src/ProfileTagsList/ProfileTagsList.tsx
index 01622ac082..f32769919d 100644
--- a/packages/components/src/ProfileTagsList/ProfileTagsList.tsx
+++ b/packages/components/src/ProfileTagsList/ProfileTagsList.tsx
@@ -20,7 +20,7 @@ export const ProfileTagsList = ({ tagIds }: IProps) => {
   }
 
   return (
-    <Flex sx={{ gap: 2 }}>
+    <Flex sx={{ gap: 2, flexWrap: 'wrap' }}>
       {tags.map(
         (tag, index) =>
           tag?.label && (
diff --git a/shared/models/maps.ts b/shared/models/maps.ts
index 73f9a51638..6c8ed0bdaa 100644
--- a/shared/models/maps.ts
+++ b/shared/models/maps.ts
@@ -1,5 +1,6 @@
 import type { ILatLng } from './common'
 import type { IModerationStatus } from './moderation'
+import type { ISelectedTags } from './tags'
 import type { IUserBadges, ProfileTypeName, WorkspaceType } from './user'
 
 /**
@@ -68,6 +69,7 @@ export interface IProfileCreator {
   displayName: string
   isContactableByPublic: boolean
   profileType: ProfileTypeName
+  tags?: ISelectedTags
   workspaceType?: string
   userImage?: string
 }
diff --git a/src/pages/Maps/Maps.client.tsx b/src/pages/Maps/Maps.client.tsx
index 48089966e7..4fff7d4a67 100644
--- a/src/pages/Maps/Maps.client.tsx
+++ b/src/pages/Maps/Maps.client.tsx
@@ -77,13 +77,13 @@ const MapsPage = observer(() => {
 
   useEffect(() => {
     const userName = user?._id
-    if (!userName) {
+    if (!userName || mapPins.find(({ _id }) => _id === userName)) {
       return
     }
 
     mapPinService.getMapPinSelf(userName).then((userMapPin) => {
       if (userMapPin && !mapPins.find((pin) => pin._id === userMapPin._id)) {
-        setMapPins([...mapPins, userMapPin])
+        setMapPins((existingPins) => [...existingPins, userMapPin])
       }
     })
   }, [user])
diff --git a/src/pages/Maps/map.service.ts b/src/pages/Maps/map.service.ts
index e741e554b5..1255eab208 100644
--- a/src/pages/Maps/map.service.ts
+++ b/src/pages/Maps/map.service.ts
@@ -19,9 +19,9 @@ const getMapPins = async (currentUserId?: string) => {
     const response = await fetch(API_URL + '/map-pins')
     const mapPins = await response.json()
 
-    const currentUserPin = !!mapPins.find(({ _id }) => _id === currentUserId)
+    const hasCurrentUserPin = !!mapPins.find(({ _id }) => _id === currentUserId)
 
-    if (currentUserId && !currentUserPin) {
+    if (currentUserId && !hasCurrentUserPin) {
       const userMapPin = await getMapPinByUserId(currentUserId)
       userMapPin && mapPins.push(userMapPin)
     }
diff --git a/src/stores/Maps/maps.store.ts b/src/stores/Maps/maps.store.ts
index d1b3dbfed4..36ffcb8771 100644
--- a/src/stores/Maps/maps.store.ts
+++ b/src/stores/Maps/maps.store.ts
@@ -176,12 +176,13 @@ export class MapsStore extends ModuleStore {
       badges,
       coverImages,
       displayName,
+      isContactableByPublic,
       location,
       profileType,
-      isContactableByPublic,
+      userImage,
+      tags,
       verified,
       workspaceType,
-      userImage,
     } = user
     const type = profileType || ProfileTypeList.MEMBER
     const existingPin = await this.getPin(_id, 'server')
@@ -238,6 +239,7 @@ export class MapsStore extends ModuleStore {
         isContactableByPublic:
           isContactableByPublic || DEFAULT_PUBLIC_CONTACT_PREFERENCE,
         profileType,
+        ...(tags ? { tags } : {}),
         ...(workspaceType ? { workspaceType } : {}),
         ...(userImage ? { userImage: userImage.downloadUrl } : {}),
       },

From 33c2a14b048aa29f6956b8b61b290901b4432329 Mon Sep 17 00:00:00 2001
From: Ben Furber <ben.furber@googlemail.com>
Date: Fri, 18 Oct 2024 11:24:54 +0100
Subject: [PATCH 6/7] fix: test components yarn command

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 62a98f068c..2a20d12d44 100644
--- a/package.json
+++ b/package.json
@@ -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",

From 2a2be7452dacb85dfc4707d4e25282c04b85f10b Mon Sep 17 00:00:00 2001
From: Ben Furber <ben.furber@googlemail.com>
Date: Mon, 21 Oct 2024 17:17:05 +0100
Subject: [PATCH 7/7] feat: update architectural design

---
 functions/src/userUpdates/updateMapPins.ts     |  9 ++++++---
 functions/src/userUpdates/utils.ts             | 15 ++++++++++++++-
 .../CardProfile/CardDetailsSpaceProfile.tsx    |  2 +-
 .../ProfileTagsList.stories.tsx                | 15 ++++++++++++++-
 .../ProfileTagsList/ProfileTagsList.test.tsx   |  5 +----
 .../src/ProfileTagsList/ProfileTagsList.tsx    | 16 +++-------------
 shared/models/maps.ts                          |  4 ++--
 src/common/ProfileTags.tsx                     | 18 ++++++++++++++++++
 src/pages/User/content/SpaceProfile.tsx        |  4 ++--
 .../UserSettings/SettingsPageUserProfile.tsx   |  2 +-
 .../content/sections/ProfileTags.section.tsx   |  7 ++++++-
 src/stores/Maps/maps.store.ts                  |  3 ++-
 src/utils/getValidTags.test.ts                 | 16 ++++++++++++++++
 src/utils/getValidTags.ts                      | 15 +++++++++++++++
 14 files changed, 101 insertions(+), 30 deletions(-)
 create mode 100644 src/common/ProfileTags.tsx
 create mode 100644 src/utils/getValidTags.test.ts
 create mode 100644 src/utils/getValidTags.ts

diff --git a/functions/src/userUpdates/updateMapPins.ts b/functions/src/userUpdates/updateMapPins.ts
index a8c85d18e5..7d769f26af 100644
--- a/functions/src/userUpdates/updateMapPins.ts
+++ b/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
diff --git a/functions/src/userUpdates/utils.ts b/functions/src/userUpdates/utils.ts
index 860ec9f1ea..5515ca7fbb 100644
--- a/functions/src/userUpdates/utils.ts
+++ b/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,
@@ -81,3 +83,14 @@ export const getCreatorImage = (userImage: IUserDB['userImage']) => {
 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
+}
diff --git a/packages/components/src/CardProfile/CardDetailsSpaceProfile.tsx b/packages/components/src/CardProfile/CardDetailsSpaceProfile.tsx
index 6879ce7a28..6949b5241a 100644
--- a/packages/components/src/CardProfile/CardDetailsSpaceProfile.tsx
+++ b/packages/components/src/CardProfile/CardDetailsSpaceProfile.tsx
@@ -96,7 +96,7 @@ export const CardDetailsSpaceProfile = ({ creator, isLink }: IProps) => {
           />
         )}
 
-        {tags && <ProfileTagsList tagIds={tags} />}
+        {tags && <ProfileTagsList tags={tags} />}
 
         {about && (
           <Text variant="quiet" sx={{ fontSize: 2 }}>
diff --git a/packages/components/src/ProfileTagsList/ProfileTagsList.stories.tsx b/packages/components/src/ProfileTagsList/ProfileTagsList.stories.tsx
index 9056c6b71d..5df447e884 100644
--- a/packages/components/src/ProfileTagsList/ProfileTagsList.stories.tsx
+++ b/packages/components/src/ProfileTagsList/ProfileTagsList.stories.tsx
@@ -9,6 +9,19 @@ export default {
 
 export const Default: StoryFn<typeof ProfileTagsList> = () => (
   <ProfileTagsList
-    tagIds={{ uCzWZbz3aVKyx2keoqRi: true, J3LF7fMsDfniYT2ZX3rf: false }}
+    tags={[
+      {
+        _id: 'hwh',
+        _created: 'today',
+        _deleted: false,
+        label: 'Electronics',
+      },
+      {
+        _id: 'a45397uh',
+        _created: 'yesterday',
+        _deleted: false,
+        label: 'Electronics II',
+      },
+    ]}
   />
 )
diff --git a/packages/components/src/ProfileTagsList/ProfileTagsList.test.tsx b/packages/components/src/ProfileTagsList/ProfileTagsList.test.tsx
index d048994d15..0d6b9564ff 100644
--- a/packages/components/src/ProfileTagsList/ProfileTagsList.test.tsx
+++ b/packages/components/src/ProfileTagsList/ProfileTagsList.test.tsx
@@ -9,11 +9,8 @@ import type { IProps } from './ProfileTagsList'
 
 describe('ProfileTagsList', () => {
   it('validates the component behaviour', () => {
-    const { getByText, queryByText } = render(
-      <Default {...(Default.args as IProps)} />,
-    )
+    const { getByText } = render(<Default {...(Default.args as IProps)} />)
 
     expect(getByText('Electronics')).toBeInTheDocument()
-    expect(queryByText('Machining')).toBeNull()
   })
 })
diff --git a/packages/components/src/ProfileTagsList/ProfileTagsList.tsx b/packages/components/src/ProfileTagsList/ProfileTagsList.tsx
index f32769919d..7ed4c4b1e1 100644
--- a/packages/components/src/ProfileTagsList/ProfileTagsList.tsx
+++ b/packages/components/src/ProfileTagsList/ProfileTagsList.tsx
@@ -1,24 +1,14 @@
-import { profileTags } from 'oa-shared'
 import { Flex } from 'theme-ui'
 
 import { Category } from '../Category/Category'
 
-import type { ISelectedTags } from 'oa-shared'
+import type { ITag } from 'oa-shared'
 
 export interface IProps {
-  tagIds: ISelectedTags
+  tags: ITag[]
 }
 
-export const ProfileTagsList = ({ tagIds }: IProps) => {
-  const selectedTagIds = Object.keys(tagIds).filter((id) => tagIds[id] === true)
-  const tags = selectedTagIds
-    .map((id) => profileTags.find(({ _id }) => id === _id))
-    .filter((tag) => tag !== undefined)
-
-  if (tags.length === 0) {
-    return null
-  }
-
+export const ProfileTagsList = ({ tags }: IProps) => {
   return (
     <Flex sx={{ gap: 2, flexWrap: 'wrap' }}>
       {tags.map(
diff --git a/shared/models/maps.ts b/shared/models/maps.ts
index 6c8ed0bdaa..e050c1d834 100644
--- a/shared/models/maps.ts
+++ b/shared/models/maps.ts
@@ -1,6 +1,6 @@
 import type { ILatLng } from './common'
 import type { IModerationStatus } from './moderation'
-import type { ISelectedTags } from './tags'
+import type { ITag } from './tags'
 import type { IUserBadges, ProfileTypeName, WorkspaceType } from './user'
 
 /**
@@ -69,7 +69,7 @@ export interface IProfileCreator {
   displayName: string
   isContactableByPublic: boolean
   profileType: ProfileTypeName
-  tags?: ISelectedTags
+  tags?: ITag[]
   workspaceType?: string
   userImage?: string
 }
diff --git a/src/common/ProfileTags.tsx b/src/common/ProfileTags.tsx
new file mode 100644
index 0000000000..d16bd97f86
--- /dev/null
+++ b/src/common/ProfileTags.tsx
@@ -0,0 +1,18 @@
+import { ProfileTagsList } from 'oa-components'
+import { getValidTags } from 'src/utils/getValidTags'
+
+import type { ISelectedTags } from 'oa-shared'
+
+interface IProps {
+  tagIds: ISelectedTags
+}
+
+export const ProfileTags = ({ tagIds }: IProps) => {
+  const tags = getValidTags(tagIds)
+
+  if (tags.length === 0) {
+    return null
+  }
+
+  return <ProfileTagsList tags={tags} />
+}
diff --git a/src/pages/User/content/SpaceProfile.tsx b/src/pages/User/content/SpaceProfile.tsx
index 8bb306a212..8a2c163adf 100644
--- a/src/pages/User/content/SpaceProfile.tsx
+++ b/src/pages/User/content/SpaceProfile.tsx
@@ -1,7 +1,6 @@
 import {
   ImageGallery,
   MemberBadge,
-  ProfileTagsList,
   Tab,
   TabPanel,
   Tabs,
@@ -19,6 +18,7 @@ import PPIcon from 'src/assets/images/plastic-types/pp.svg'
 import PSIcon from 'src/assets/images/plastic-types/ps.svg'
 import PVCIcon from 'src/assets/images/plastic-types/pvc.svg'
 import { AuthWrapper } from 'src/common/AuthWrapper'
+import { ProfileTags } from 'src/common/ProfileTags'
 import { isPreciousPlastic } from 'src/config/config'
 import { cdnImageUrl } from 'src/utils/cdnImageUrl'
 import { formatImagesForGallery } from 'src/utils/formatImageListForGallery'
@@ -247,7 +247,7 @@ export const SpaceProfile = ({ user, docs }: IProps) => {
                       width: ['100%', '100%', '80%'],
                     }}
                   >
-                    {tags && <ProfileTagsList tagIds={tags} />}
+                    {tags && <ProfileTags tagIds={tags} />}
                     {about && <Paragraph>{about}</Paragraph>}
 
                     {profileType === ProfileTypeList.COLLECTION_POINT &&
diff --git a/src/pages/UserSettings/SettingsPageUserProfile.tsx b/src/pages/UserSettings/SettingsPageUserProfile.tsx
index 6ae83de95a..26e960d0ea 100644
--- a/src/pages/UserSettings/SettingsPageUserProfile.tsx
+++ b/src/pages/UserSettings/SettingsPageUserProfile.tsx
@@ -110,7 +110,7 @@ export const SettingsPageUserProfile = () => {
       user.isContactableByPublic || DEFAULT_PUBLIC_CONTACT_PREFERENCE,
     userImage: user.userImage || null,
     coverImages,
-    tags: user.tags || [],
+    tags: user.tags || {},
   }
 
   const formId = 'userProfileForm'
diff --git a/src/pages/UserSettings/content/sections/ProfileTags.section.tsx b/src/pages/UserSettings/content/sections/ProfileTags.section.tsx
index 76350a67d0..e47e1183c7 100644
--- a/src/pages/UserSettings/content/sections/ProfileTags.section.tsx
+++ b/src/pages/UserSettings/content/sections/ProfileTags.section.tsx
@@ -2,6 +2,7 @@ import { Field } from 'react-final-form'
 import TagsSelect from 'src/common/Tags/TagsSelect'
 import { fields } from 'src/pages/UserSettings/labels'
 import { userService } from 'src/services/user.service'
+import { COMPARISONS } from 'src/utils/comparisons'
 import { Flex, Heading, Text } from 'theme-ui'
 
 import { FlexSectionContainer } from '../elements'
@@ -21,7 +22,11 @@ export const ProfileTags = () => {
       >
         <Heading as="h2">{title}</Heading>
         <Text variant="quiet">{description}</Text>
-        <Field name="tags" component={WrappedTagsSelect} />
+        <Field
+          name="tags"
+          component={WrappedTagsSelect}
+          isEqual={COMPARISONS.tags}
+        />
       </Flex>
     </FlexSectionContainer>
   )
diff --git a/src/stores/Maps/maps.store.ts b/src/stores/Maps/maps.store.ts
index 36ffcb8771..626dfa88b9 100644
--- a/src/stores/Maps/maps.store.ts
+++ b/src/stores/Maps/maps.store.ts
@@ -2,6 +2,7 @@ import { action, makeObservable, observable } from 'mobx'
 import { IModerationStatus, ProfileTypeList } from 'oa-shared'
 import { logger } from 'src/logger'
 import { DEFAULT_PUBLIC_CONTACT_PREFERENCE } from 'src/pages/UserSettings/constants'
+import { getValidTags } from 'src/utils/getValidTags'
 import {
   hasAdminRights,
   isAllowedToPin,
@@ -180,7 +181,6 @@ export class MapsStore extends ModuleStore {
       location,
       profileType,
       userImage,
-      tags,
       verified,
       workspaceType,
     } = user
@@ -193,6 +193,7 @@ export class MapsStore extends ModuleStore {
 
     const isMember = type === ProfileTypeList.MEMBER
     const subType = !isMember && workspaceType
+    const tags = user.tags && getValidTags(user.tags)
 
     // Member pins do not require moderation.
     if (isMember) {
diff --git a/src/utils/getValidTags.test.ts b/src/utils/getValidTags.test.ts
new file mode 100644
index 0000000000..b6fa594283
--- /dev/null
+++ b/src/utils/getValidTags.test.ts
@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest'
+
+import { getValidTags } from './getValidTags'
+
+describe('getValidTags', () => {
+  it('returns only true valid tags', () => {
+    const tagIds = {
+      uCzWZbz3aVKyx2keoqRi: true, // A valid tag
+      J3LF7fMsDfniYT2ZX3rf: false, // A valid tag
+      'not-a-tag': false,
+    }
+    const tags = getValidTags(tagIds)
+    expect(tags.length).toEqual(1)
+    expect(tags[0]._id).toEqual('uCzWZbz3aVKyx2keoqRi')
+  })
+})
diff --git a/src/utils/getValidTags.ts b/src/utils/getValidTags.ts
new file mode 100644
index 0000000000..9c89149084
--- /dev/null
+++ b/src/utils/getValidTags.ts
@@ -0,0 +1,15 @@
+import { profileTags } from 'oa-shared'
+
+import type { ISelectedTags, ITag } from 'oa-shared'
+
+// For ease, duplicated from functions/src/uperUpdates/utils.ts
+export const getValidTags = (tagIds: ISelectedTags): ITag[] => {
+  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
+}