✨ Save and show the certified version of an answer (#376)

This ensures that the latest certified answer is always accessible, even after the answer has been modified.

Also:
- Adds a confirm modal when editing a certified answer
- Adds the date of certification to the Certified flag
- Upgrade date-fns
- Fixes Algolia synonyms in some cases

Author: thibaudbrault

client/package-lock.json

@@ -10,7 +10,7 @@
     "babel-runtime": "^6.26.0",
     "classnames": "^2.2.5",
     "copy-to-clipboard": "^3.2.0",
-    "date-fns": "^1.29.0",
+    "date-fns": "^2.30.0",
     "eslint-config-react-app": "^7.0.1",
     "graphql": "^14.7.0",
     "graphql-tag": "^2.8.0",

client/package.json

@@ -4,6 +4,7 @@ import capitalize from 'lodash/capitalize'
 import cn from 'classnames'
 
 import { getIntl } from 'services'
+import { format } from 'date-fns'
 
 const flagMeta = {
   duplicate: {
@@ -40,7 +41,16 @@ const Flag = ({ flag, withlabel, style, ...otherProps }) => {
       {...otherProps}
     >
       <i className="material-icons">{flagMeta[flag.type].icon}</i>
-      {withlabel && <span className="label">{capitalize(intl(flag.type))}</span>}
+      {withlabel && (
+        <span className="label">
+          {capitalize(intl(flag.type))}
+          {flag.type === 'certified' &&
+            `
+          ${intl('certifiedAdd')}
+          ${format(new Date(flag.createdAt), 'P')}
+          `}
+        </span>
+      )}
     </div>
   )
 }
@@ -57,14 +67,16 @@ Flag.translations = {
     outdated: 'outdated',
     incomplete: 'incomplete',
     unanswered: 'unanswered',
-    certified: 'certified'
+    certified: 'certified',
+    certifiedAdd: ' on '
   },
   fr: {
     duplicate: 'doublon',
     outdated: 'obsolète',
     incomplete: 'incomplète',
     unanswered: 'sans réponse',
-    certified: 'certifiée'
+    certified: 'certifiée',
+    certifiedAdd: ' le '
   }
 }
 

client/src/components/Flags/Flag.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import clone from 'lodash/clone'
 import find from 'lodash/find'
 import map from 'lodash/map'
-import format from 'date-fns/format'
+import { format } from 'date-fns'
 
 import { getIntl } from 'services'
 
@@ -29,7 +29,7 @@ const Flags = ({ node, withLabels }) => {
         let tooltip
 
         if (withLabels && flag.user) {
-          tooltip = intl('tooltip')(flag.user.name, format(flag.createdAt, 'D MMM YYYY'))
+          tooltip = intl('tooltip')(flag.user.name, format(new Date(flag.createdAt), 'P'))
         } else {
           tooltip = flagIntl(flag.type).toUpperCase()
         }

client/src/components/Flags/Flags.jsx

@@ -1,8 +1,5 @@
 import compact from 'lodash/compact'
-import subMonths from 'date-fns/sub_months'
-import differenceInMilliseconds from 'date-fns/difference_in_milliseconds'
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'
-import format from 'date-fns/format'
+import { format, formatDistanceToNow, differenceInMilliseconds, subMonths } from 'date-fns'
 
 import { markdown } from 'services'
 
@@ -84,12 +81,13 @@ export const formatHistoryAction = (historyAction, options = { relative: true })
 
   const monthOld = subMonths(new Date(), 1)
 
+  const createdAtDate = new Date(createdAt)
   const date =
-    differenceInMilliseconds(createdAt, monthOld) > 0
-      ? distanceInWordsToNow(createdAt, {
+    differenceInMilliseconds(createdAtDate, monthOld) > 0
+      ? formatDistanceToNow(createdAtDate, {
           addSuffix: true
         })
-      : format(createdAt, 'D MMM YYYY, HH:mm')
+      : format(createdAtDate, 'Pp')
 
   return {
     date,

client/src/helpers/history.js

@@ -1,9 +1,11 @@
 import React from 'react'
 import { Helmet } from 'react-helmet'
+import { setDefaultOptions } from 'date-fns'
+import { enUS, fr } from 'date-fns/locale'
 
 import { ConfigurationProvider, AuthProvider, UserProvider } from 'contexts'
-
 import { AlertStack, AlertProvider } from 'components'
+import { getNavigatorLanguage } from 'helpers'
 
 import Navbar from './components/Navbar'
 import Footer from './components/Footer'
@@ -12,6 +14,10 @@ import AppBody from './AppBody'
 
 import 'styles'
 
+setDefaultOptions({
+  locale: getNavigatorLanguage() === 'en' ? enUS : fr
+})
+
 const App = () => (
   <div className="app theme">
     <Helmet>

client/src/scenes/App/App.jsx

@@ -4,10 +4,10 @@ import { query } from 'services/apollo'
 
 import { withError } from 'components'
 
-import { getNode } from './queries'
+import { GET_NODE } from './queries'
 
 export const withNode = compose(
-  query(getNode, {
+  query(GET_NODE, {
     skip: props => !props.match.params.slug,
     variables: props => ({ id: routing.getUIDFromSlug(props.match) })
   }),

client/src/scenes/Question/Question.container.js

@@ -24,6 +24,7 @@ export const zNodeFragment = `
     id
     content
     language
+    certified
     translation {
       language
       text
@@ -59,10 +60,16 @@ export const zNodeFragment = `
       name
     }
   }
+  history {
+    id
+    meta
+    action
+    model
+  }
 `
 
-export const getNode = gql`
-  query($id: ID!) {
+export const GET_NODE = gql`
+  query getNode($id: ID!) {
     zNode(where: { id: $id }) {
       ${zNodeFragment}
     }

client/src/scenes/Question/queries.js

@@ -17,6 +17,7 @@ import Dropdown, { DropdownItem } from 'components/Dropdown'
 import { getNavigatorLanguage, handleTranslation } from 'helpers'
 import { ActionMenu } from '../../components'
 import { FlagsDropdown, History, LanguageDropdown, Meta, Share, Sources, Views } from './components'
+import { useUser } from 'contexts'
 
 const Read = ({ history, match, zNode, loading }) => {
   const [loaded, setLoaded] = useState(false)
@@ -26,10 +27,12 @@ const Read = ({ history, match, zNode, loading }) => {
   const [answerContent, setAnswerContent] = useState('')
   const [isTranslated, setIsTranslated] = useState(false)
 
-  const [createFlag] = useMutation(CREATE_FLAG)
+  const [createFlag] = useMutation(CREATE_FLAG, { refetchQueries: ['getNode'] })
   const [removeFlag] = useMutation(REMOVE_FLAG)
   const [incrementViewsCounter] = useMutation(INCREMENT_VIEWS_COUNTER)
 
+  const user = useUser()
+
   const originalQuestionLanguage = zNode?.question.language
   const navigatorLanguage = getNavigatorLanguage()
 
@@ -61,6 +64,20 @@ const Read = ({ history, match, zNode, loading }) => {
     return <NotFound />
   }
 
+  const preventAnswerEdit = () => {
+    const certified = zNode?.flags.find(flag => flag.type === 'certified')
+    const isSpecialist = user.specialties.some(specialty =>
+      zNode.tags.some(tag => specialty.name === tag.label.name)
+    )
+    if (certified && !isSpecialist) {
+      if (window.confirm(intl('alert'))) {
+        return history.push(`/q/${match.params.slug}/answer`)
+      }
+    } else {
+      return history.push(`/q/${match.params.slug}/answer`)
+    }
+  }
+
   /* Redirect to correct URL if old slug used */
   const correctSlug = zNode.question.slug + '-' + zNode.id
   if (match.params.slug !== correctSlug) {
@@ -82,10 +99,7 @@ const Read = ({ history, match, zNode, loading }) => {
           <DropdownItem icon="edit" onClick={() => history.push(`/q/${match.params.slug}/edit`)}>
             {intl('menu.edit.question')}
           </DropdownItem>
-          <DropdownItem
-            icon="question_answer"
-            onClick={() => history.push(`/q/${match.params.slug}/answer`)}
-          >
+          <DropdownItem icon="question_answer" onClick={preventAnswerEdit}>
             {intl('menu.edit.answer')}
           </DropdownItem>
         </Dropdown>
@@ -125,9 +139,24 @@ const Read = ({ history, match, zNode, loading }) => {
             />
           )}
         </CardTitle>
+        {zNode.answer?.certified && (
+          <CardText style={{ border: '2px solid #caac00', marginTop: '0.5rem' }}>
+            <p className="small-text centered" style={{ padding: '0.5rem', margin: '0' }}>
+              {intl('certified_answer')}
+            </p>
+            <div style={{ padding: '0.5rem', margin: '0' }}>
+              {markdown.html(zNode.answer.certified)}
+            </div>
+          </CardText>
+        )}
         <CardText>
           {zNode.answer ? (
             <>
+              {zNode.answer.certified && (
+                <p className="small-text centered" style={{ padding: '0.5rem', margin: '0' }}>
+                  {intl('recent_answer')}
+                </p>
+              )}
               <div style={{ padding: '0.5rem', marginBottom: '0.5rem' }}>
                 {markdown.html(answerContent)}
               </div>
@@ -177,9 +206,14 @@ Read.translations = {
         answer: 'Answer'
       }
     },
+    certified: 'Certified on',
     auto_translated: 'Automatic translation',
     no_answer: 'No answer yet...',
-    answer: 'Answer the question'
+    answer: 'Answer the question',
+    certified_answer: 'Certified answer',
+    recent_answer: 'Latest answer',
+    alert:
+      'This answer has been certified by a specialist in this field.\nAre you sure that you want to modify it ?\nThis version will still be kept'
   },
   fr: {
     menu: {
@@ -190,9 +224,14 @@ Read.translations = {
         answer: 'Réponse'
       }
     },
+    certified: 'Certifiée le',
     auto_translated: 'Traduction automatique',
     no_answer: 'Pas encore de réponse...',
-    answer: 'Répondre à la question'
+    answer: 'Répondre à la question',
+    certified_answer: 'Réponse certifiée',
+    recent_answer: 'Dernière réponse',
+    alert:
+      'Cette réponse a été certifiée par une personne spécialisée dans le domaine.\nEtes-vous sûr de vouloir la modifier ?\nCelle-ci sera tout de même conservée'
   }
 }
 

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

@@ -21,15 +21,15 @@ const Meta = ({ node }) => {
         <div>
           {intl('asked')} {node.question.user.name}
           <br />
-          {format(node.question.createdAt, 'D MMM YYYY')}
+          {format(new Date(node.question.createdAt), 'P')}
         </div>
       </div>
       {node.answer && (
         <div className="answered">
           <div>
             {intl('answered')} {node.answer.user.name}
             <br />
-            {format(node.answer.createdAt, 'D MMM YYYY')}
+            {format(new Date(node.answer.createdAt), 'P')}
           </div>
           <Avatar
             image={node.answer.user.picture}