✨ introduce specialists

client/src/contexts/User/UserProvider.jsx

@@ -1,5 +1,5 @@
-import React, { useMemo } from 'react'
 import { useQuery } from '@apollo/react-hooks'
+import React, { useMemo } from 'react'
 
 import { useAuth } from '../Auth'
 
@@ -10,9 +10,11 @@ export const UserContext = React.createContext({})
 const UserProvider = ({ children }) => {
   const { isAuth } = useAuth()
 
-  const { data } = useQuery(GET_ME, { skip: !isAuth })
+  const { data } = useQuery(GET_ME, {
+    skip: !isAuth && process.env.REACT_APP_DISABLE_AUTH !== 'true'
+  })
 
-  const value = useMemo(() => isAuth && data && data.me, [isAuth, data])
+  const value = useMemo(() => data && data.me, [data])
 
   return <UserContext.Provider value={value}>{children}</UserContext.Provider>
 }

client/src/scenes/UserProfile/UserProfile.jsx

@@ -7,6 +7,7 @@ import { alert, getIntl } from 'services'
 import { Avatar, Button, Card, Modal, Loading, Input } from 'components'
 
 import Logs from './components/Logs'
+import Specialties from './components/Specialties'
 
 import { UPDATE_INDENTITY, DELETE_IDENTITY } from './queries'
 
@@ -114,6 +115,7 @@ const UserProfile = ({ history }) => {
           </Button>
         </Card.Actions>
       </Card>
+      <Specialties userId={user.id} />
       <Logs userId={user.id} />
       <Card>
         <Card.Text>
@@ -167,7 +169,7 @@ const UserProfile = ({ history }) => {
 }
 
 UserProfile.translations = {
-  fr: {
+  en: {
     alert: {
       update_success: 'Your profile was successfully updated!',
       delete_success: 'Your personal data was succesfully deleted!'
@@ -204,7 +206,7 @@ UserProfile.translations = {
       button: 'I understand the consequences, delete my data'
     }
   },
-  en: {
+  fr: {
     alert: {
       update_success: 'Votre profil a été modifié avec succès !',
       delete_success: 'Vos données personnelles ont été supprimées avec succès !'

client/src/scenes/UserProfile/components/Logs/Logs.container.js

@@ -1,8 +1,8 @@
 import { withRouter } from 'react-router'
 
+import { withError, withPagination } from 'components'
 import { compose, unserialize } from 'helpers'
 import { query } from 'services/apollo'
-import { withError, withPagination } from 'components'
 
 import { meHistory } from './queries'
 

client/src/scenes/UserProfile/components/Logs/Logs.jsx

@@ -1,9 +1,8 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'react-router-dom'
 
-import { getIntl } from 'services'
 import { formatHistoryAction, nodeUrl } from 'helpers'
+import { getIntl } from 'services'
 
 import { Loading } from 'components'
 import Card, { CardText } from 'components/Card'

client/src/scenes/UserProfile/components/Specialties/Specialties.container.js

@@ -0,0 +1,15 @@
+import { withError } from 'components'
+import { compose } from 'helpers'
+import { query } from 'services/apollo'
+import { GET_SPECIALTIES } from './queries'
+
+import Specialties from './Specialties'
+
+export default compose(
+  query(GET_SPECIALTIES, {
+    parse: ({ me = {} }) => ({
+      spe: me.specialties
+    })
+  }),
+  withError()
+)(Specialties)

client/src/scenes/UserProfile/components/Specialties/Specialties.css

@@ -0,0 +1,21 @@
+.specialty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  padding: 0.3rem;
+  text-transform: capitalize;
+  background-color: transparent;
+  color: var(--primary-color);
+  border: 1px solid var(--primary-color);
+  border-radius: 4px;
+}
+
+.specialty .material-icons {
+  margin-right: 10px;
+  font-size: 1rem;
+}
+
+.emptyText {
+  text-align: center;
+}

client/src/scenes/UserProfile/components/Specialties/Specialties.jsx

@@ -0,0 +1,45 @@
+import Card, { CardText } from 'components/Card'
+import PropTypes from 'prop-types'
+import { getIntl } from 'services'
+
+import './Specialties.css'
+
+const Specialties = ({ spe }) => {
+  const intl = getIntl(Specialties)
+
+  return (
+    <Card>
+      <CardText className="specialties">
+        <h2 style={{ marginBottom: '1rem' }}>{intl('title')}</h2>
+        <hr />
+        {spe && spe.length > 0 ? (
+          spe.map(s => (
+            <p key={s.name} className="specialty">
+              <i className="material-icons">verified</i>
+              {s.name}
+            </p>
+          ))
+        ) : (
+          <p className="emptyText">{intl('empty')}</p>
+        )}
+      </CardText>
+    </Card>
+  )
+}
+
+Specialties.propTypes = {
+  spe: PropTypes.array
+}
+
+Specialties.translations = {
+  en: {
+    title: 'Specialties',
+    empty: 'No specialties yet'
+  },
+  fr: {
+    title: 'Spécialitées',
+    empty: 'Pas encore de spécialitées'
+  }
+}
+
+export default Specialties

client/src/scenes/UserProfile/components/Specialties/index.js

@@ -0,0 +1 @@
+export { default } from './Specialties.container'

client/src/scenes/UserProfile/components/Specialties/queries.js

@@ -0,0 +1,13 @@
+import gql from 'graphql-tag'
+
+export const GET_SPECIALTIES = gql`
+  query {
+    me {
+      id
+      specialties {
+        id
+        name
+      }
+    }
+  }
+`

e2e/client.test.js

@@ -34,7 +34,42 @@ const upsertConfig = /* GraphQL */ `mutation UpsertConfig{
       algoliaApiKey: "${process.env.ALGOLIA_API_KEY_ALL}"
       auth0Domain: "${process.env.AUTH0_DOMAIN}"
       auth0ClientId: "${process.env.AUTH0_CLIENT_ID}"
-      tagCategories: {create: [{name: "agencies", order: 1, labels: {create: [{ name: "paris", order: 1 }, { name: "nantes", order: 2 }]}}, {name: "theme", order: 2, labels: {create: [{name: "tutorial", order: 1}, {name: "meta", order: 2}]}}]}
+      tagCategories: {
+        create: [
+          {
+            name: "services",
+            order: 1,
+            labels: {
+              create: [
+                {name: "payroll", order: 1}
+                {name: "marketing", order: 2}
+                {name: "ce", order: 3}
+                {name: "sales", order: 4}
+              ]
+            }
+          },
+          {
+            name: "agencies",
+            order: 2,
+            labels: {
+              create: [
+                { name: "paris", order: 1 }
+                { name: "nantes", order: 2 }
+              ]
+            }
+          },
+          {
+            name: "theme",
+            order: 3,
+            labels: {
+              create: [
+                { name: "tutorial", order: 1 },
+                { name: "meta", order: 2 }
+              ]
+            }
+          }
+        ]
+      }
     }
     update: {
       name: "${process.env.SERVICE_NAME}"
@@ -403,6 +438,16 @@ test('Should be able to search by text and tag', async ({ page }) => {
   await expect(page.getByText('Ceci est une réponse différente', { exact: true })).toBeVisible()
 })
 
+test('Should see the marketing specialty on profile page', async ({ page }) => {
+  await page.goto('/')
+  await page.getByRole('img', { name: 'avatar' }).hover()
+  await page
+    .locator('a')
+    .filter({ hasText: 'Profil' })
+    .click()
+  await expect(page.getByText('verifiedmarketing')).toBeVisible()
+})
+
 test.afterEach(async () => {
   algolia.clearIndex({ prisma })
 })

server/prisma/datamodel.graphql

@@ -82,6 +82,7 @@ type TagLabel {
 
   name: String!
   tags: [Tag!]! @relation(name: "TagsLabel", onDelete: CASCADE)
+  specialists: [User!]! @relation(name: "UserSpecialties", link: TABLE)
 
   order: Int!
   category: TagCategory! @relation(name: "TagLabelsCategory", link: TABLE)
@@ -135,6 +136,7 @@ type User {
 
   flags: [Flag!]! @relation(name: "UserFlags")
   tags: [Tag!]! @relation(name: "UserTags")
+  specialties: [TagLabel!]! @relation(name: "UserSpecialties")
 
   history: [HistoryAction!]! @relation(name: "UserHistoryActions")
 

server/scripts/prisma_new_service/index.js

@@ -64,8 +64,20 @@ const main = async () => {
             tagCategories: {
               create: [
                 {
-                  name: "agencies"
-                  order: 1
+                  name: "services",
+                  order: 1,
+                  labels: {
+                    create: [
+                      {name: "payroll", order: 1}
+                      {name: "marketing", order: 2}
+                      {name: "ce", order: 3}
+                      {name: "sales", order: 4}
+                    ]
+                  }
+                },
+                {
+                  name: "agencies",
+                  order: 2,
                   labels: {
                     create: [
                       { name: "paris", order: 1 }
@@ -75,7 +87,7 @@ const main = async () => {
                 },
                 {
                   name: "theme",
-                  order: 2,
+                  order: 3,
                   labels: {
                     create: [
                       { name: "tutorial", order: 1 },