✨ introduce specialists (#336)

This introduces the notion of some users being specialists in some subjects (aka tag labels). Specialists will have more permissions on questions and answers which are tagged with their specialties, though no permissions are introduced here. The specialties of a user are displayed on their profile. This does not introduce means to define specialties through the UI, this will come later.

See also #334.

Author: thibaudbrault

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 })
 })