✨ add certified flag (#337)

- This creates the certified flag that can be added by a specialist when one of his specialties matches one of the question's tags.
- Automatically add the certified flag when the answer is edited by a specialist
- Automatically remove the certified flag when the tag corresponding to the certified answer is removed

Author: thibaudbrault

.circleci/config.yml

@@ -45,7 +45,6 @@ executors:
                 user: prisma
                 password: prisma
                 migrations: true
-
 jobs:
   server-lint:
     executor: app-builder
@@ -174,7 +173,6 @@ jobs:
             clever login --secret=$CLEVER_SECRET --token=$CLEVER_TOKEN
             clever link << parameters.clever-app-id >>
             clever deploy --force
-
   prisma-deploy-service:
     executor: app-builder
     steps:
@@ -220,7 +218,6 @@ jobs:
             clever login --secret=$CLEVER_SECRET --token=$CLEVER_TOKEN
             clever link << parameters.clever-app-id >>
             clever deploy --force
-
 workflows:
   version: 2
   build-deploy:

client/src/components/Flags/Flag.jsx

@@ -21,6 +21,10 @@ const flagMeta = {
   unanswered: {
     icon: 'help_outline',
     color: '#157B5F'
+  },
+  certified: {
+    icon: 'verified',
+    color: '#caac00'
   }
 }
 
@@ -52,13 +56,15 @@ Flag.translations = {
     duplicate: 'duplicate',
     outdated: 'outdated',
     incomplete: 'incomplete',
-    unanswered: 'unanswered'
+    unanswered: 'unanswered',
+    certified: 'certified'
   },
   fr: {
     duplicate: 'doublon',
     outdated: 'obsolète',
     incomplete: 'incomplète',
-    unanswered: 'sans réponse'
+    unanswered: 'sans réponse',
+    certified: 'certifiée'
   }
 }
 

client/src/contexts/User/queries.js

@@ -8,6 +8,9 @@ export const GET_ME = gql`
       name
       email
       picture
+      specialties {
+        name
+      }
     }
   }
 `

client/src/helpers/answerCanBeCertified.js

@@ -0,0 +1,11 @@
+export const answerCanBeCertified = (specialties, tags, answer, flagTypes) => {
+  if (answer) {
+    tags.forEach(tag => {
+      specialties.forEach(specialty => {
+        if (tag.label.name === specialty.name) {
+          flagTypes.push('certified')
+        }
+      })
+    })
+  }
+}

client/src/scenes/Question/queries.js

@@ -26,6 +26,9 @@ export const zNodeFragment = `
       id
       name
       picture
+      specialties {
+        name
+      }
     }
     createdAt
   }

client/src/scenes/Question/scenes/Answer/Answer.jsx

@@ -1,28 +1,28 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import { Redirect, Prompt } from 'react-router-dom'
 import { useApolloClient } from '@apollo/react-hooks'
+import PropTypes from 'prop-types'
+import { useState } from 'react'
+import { Prompt, Redirect } from 'react-router-dom'
 
-import { SUBMIT_ANSWER, EDIT_ANSWER } from './queries'
+import { EDIT_ANSWER, SUBMIT_ANSWER } from './queries'
 
-import { alert, markdown, getIntl } from 'services'
 import { onListChange } from 'helpers'
+import { alert, getIntl, markdown } from 'services'
 
 import NotFound from 'scenes/NotFound'
 
-import { Loading, Flags, Button, MarkdownEditor, CtrlEnter, PairInputList } from 'components'
-import Card, { CardTitle, CardText, CardActions, PermanentClosableCard } from 'components/Card'
+import { Button, CtrlEnter, Flags, Loading, MarkdownEditor, PairInputList } from 'components'
+import Card, { CardActions, CardText, CardTitle, PermanentClosableCard } from 'components/Card'
 
 import { ActionMenu } from '../../components'
 
-import { sourcesToKeyValuePairs, keyValuePairsToSources, canSubmit } from './helpers'
+import { canSubmit, keyValuePairsToSources, sourcesToKeyValuePairs } from './helpers'
 
 import Tips from './components/Tips'
 
 const Answer = ({ zNode }) => {
-  const [state, setState] = useState(() => {
-    const answer = zNode && zNode.answer
+  const answer = zNode && zNode.answer
 
+  const [state, setState] = useState(() => {
     const initialText = answer ? answer.content : ''
     const initialSources = sourcesToKeyValuePairs(answer ? answer.sources : [])
 
@@ -44,7 +44,7 @@ const Answer = ({ zNode }) => {
 
   const { loadingSubmit, slug, showTips, sources } = state
 
-  const onTextChange = value => setState(state => ({ ...state, answer: value }))
+  const onTextChange = value => setState({ ...state, answer: value })
   const onSourcesChange = onListChange(
     changes => setState(state => ({ ...state, ...changes(state) })),
     'sources'

client/src/scenes/Question/scenes/Edit/Edit.jsx

@@ -1,14 +1,14 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import { Redirect, Prompt } from 'react-router-dom'
 import { useApolloClient } from '@apollo/react-hooks'
+import PropTypes from 'prop-types'
+import { useState } from 'react'
+import { Prompt, Redirect } from 'react-router-dom'
 
-import { SUBMIT_QUESTION, EDIT_QUESTION } from './queries'
+import { EDIT_QUESTION, SUBMIT_QUESTION } from './queries'
 
 import { alert, getIntl } from 'services'
 
-import Card, { CardText, CardActions, PermanentClosableCard } from 'components/Card'
-import { Loading, Button, Input, CtrlEnter, TagPicker } from 'components'
+import { Button, CtrlEnter, Input, Loading, TagPicker } from 'components'
+import Card, { CardActions, CardText, PermanentClosableCard } from 'components/Card'
 
 import { ActionMenu } from '../../components'
 

client/src/scenes/Question/scenes/Read/Read.jsx

@@ -1,21 +1,21 @@
-import React, { useState, useEffect } from 'react'
+import { useMutation } from '@apollo/react-hooks'
 import PropTypes from 'prop-types'
-import { Link, Redirect } from 'react-router-dom'
+import { useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet'
-import { useMutation } from '@apollo/react-hooks'
+import { Link, Redirect } from 'react-router-dom'
 
-import { CREATE_FLAG, REMOVE_FLAG, INCREMENT_VIEWS_COUNTER } from './queries'
+import { CREATE_FLAG, INCREMENT_VIEWS_COUNTER, REMOVE_FLAG } from './queries'
 
-import { markdown, getIntl } from 'services'
+import { getIntl, markdown } from 'services'
 
 import NotFound from 'scenes/NotFound'
 
-import { Loading, Button, Flags, Tags } from 'components'
-import Card, { CardTitle, CardText } from 'components/Card'
+import { Button, Flags, Loading, Tags } from 'components'
+import Card, { CardText, CardTitle } from 'components/Card'
 import Dropdown, { DropdownItem } from 'components/Dropdown'
 
 import { ActionMenu } from '../../components'
-import { Views, FlagsDropdown, Sources, Meta, Share, History } from './components'
+import { FlagsDropdown, History, Meta, Share, Sources, Views } from './components'
 
 const Read = ({ history, match, zNode, loading }) => {
   const [loaded, setLoaded] = useState(false)
@@ -56,7 +56,7 @@ const Read = ({ history, match, zNode, loading }) => {
       </Helmet>
       <ActionMenu backLink="/" backLabel={intl('menu.home')} goBack>
         <FlagsDropdown
-          flags={zNode.flags}
+          zNode={zNode}
           onSelect={type => createFlag({ variables: { type, nodeId: zNode.id } })}
           onRemove={type => removeFlag({ variables: { type, nodeId: zNode.id } })}
         />

client/src/scenes/Question/scenes/Read/components/FlagsDropdown/FlagsDropdown.jsx

@@ -1,20 +1,26 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 
 import { getIntl } from 'services'
 
-import { Flag, flagMeta } from 'components/Flags'
-import Dropdown, { DropdownItem } from 'components/Dropdown'
 import Button from 'components/Button'
+import Dropdown, { DropdownItem } from 'components/Dropdown'
+import { Flag, flagMeta } from 'components/Flags'
 
 import './FlagsDropdown.css'
+import { answerCanBeCertified } from 'helpers/answerCanBeCertified'
+import { useUser } from 'contexts'
 
-const FlagsDropdown = ({ flags, onSelect, onRemove }) => {
+const FlagsDropdown = ({ zNode, onSelect, onRemove }) => {
   const intl = getIntl(FlagsDropdown)
   const flagIntl = getIntl(Flag)
 
+  const { flags, tags, answer } = zNode
+  const { specialties } = useUser()
+
   const flagTypes = ['incomplete', 'outdated', 'duplicate']
 
+  answerCanBeCertified(specialties, tags, answer, flagTypes)
+
   const items = flagTypes.map(type => {
     const isSelected = flags.filter(f => f.type === type).length > 0
     return (

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'