Comparaison entre working copy et version

export/src/export.js

@@ -91,7 +91,7 @@ const getArticleExportContext = async (articleId) => {
 
 const getBookExportContext = async (bookId) => {
   const book = await getCorpusById(bookId)
-  console.log({book})
+
   const { articles: chapters, _id: id, name: title } = book
 
   // we can create empty books… but no need to preview them

front/src/components/Write/Versions.jsx

@@ -1,8 +1,9 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import { shallowEqual, useDispatch, useSelector } from 'react-redux'
+import { useLocation } from 'react-router-dom'
 import { ArrowLeft, Check, ChevronDown, ChevronRight, Edit3 } from 'react-feather'
 import TimeAgo from '../TimeAgo.jsx'
 
@@ -22,14 +23,20 @@ import clsx from 'clsx'
 
 function Version ({ articleId, compareTo, readOnly, selectedVersion, v }) {
   const { t } = useTranslation()
-  const className = clsx({
-    [styles.selected]: v._id === selectedVersion,
-    [styles.compareTo]: v._id === compareTo
-  })
 
   const articleVersionId = v._id
-  const versionPart = selectedVersion ? `version/${selectedVersion}/` : ''
-  const compareLink = `/article/${articleId}/${versionPart}compare/${v._id}`
+
+  const isComparing = useMemo(() => compareTo || selectedVersion, [compareTo, selectedVersion])
+  const isSelected = useMemo(() => articleVersionId === selectedVersion, [articleVersionId, selectedVersion])
+  const versionPart = useMemo(() => selectedVersion ? `version/${selectedVersion}/` : '', [selectedVersion])
+  const compareLink = useMemo(() => `/article/${articleId}/${versionPart}compare/${articleVersionId}`, [articleId, versionPart, articleVersionId])
+  const canCompare = useMemo(() => ![compareTo, selectedVersion].includes(articleVersionId), [compareTo, selectedVersion, articleVersionId])
+  const canStopCompare = useMemo(() => isComparing && compareTo && articleVersionId === compareTo, [compareTo, articleVersionId])
+
+  const className = clsx({
+    [styles.selected]: isSelected,
+    [styles.compareTo]: isComparing && articleVersionId === compareTo
+  })
 
   const runQuery = useGraphQL()
   const [renaming, setRenaming] = useState(false)
@@ -48,6 +55,7 @@ function Version ({ articleId, compareTo, readOnly, selectedVersion, v }) {
   }, [title])
 
   return <li
+    aria-current={isSelected}
     className={clsx(className, styles.version, manualVersion ? styles.manualVersion : styles.automaticVersion)}>
     {renaming && (
       <form className={styles.renamingForm} onSubmit={handleRename}>
@@ -92,28 +100,25 @@ function Version ({ articleId, compareTo, readOnly, selectedVersion, v }) {
       </span>
       </p>}
     </Link>
-    {!renaming && selectedVersion && <ul className={styles.actions}>
-      {![compareTo, selectedVersion].includes(v._id) && (
-        <li>
-          <Link
-            className={clsx(buttonStyles.button, buttonStyles.secondary, styles.action)}
-            to={compareLink}
-          >
-            {t('write.compareVersion.button')}
-          </Link>
-        </li>
-      )}
-      {v._id === compareTo && (
-        <li>
-          <Link
-            className={clsx(buttonStyles.button, buttonStyles.secondary, styles.action)}
-            to={`/article/${articleId}/${versionPart}`}
-          >
-            {t('write.stopCompareVersion.button')}
-          </Link>
-        </li>
-      )}
-    </ul>}
+
+    <ul className={styles.actions}>
+      <li hidden={!canCompare}>
+        <Link
+          className={clsx(buttonStyles.button, buttonStyles.secondary, styles.action)}
+          to={compareLink}
+        >
+          {t('write.compareVersion.button')}
+        </Link>
+      </li>
+      <li hidden={!canStopCompare}>
+        <Link
+          className={clsx(buttonStyles.button, buttonStyles.secondary, styles.action)}
+          to={`/article/${articleId}/${versionPart}`}
+        >
+          {t('write.stopCompareVersion.button')}
+        </Link>
+      </li>
+    </ul>
   </li>
 }
 
@@ -125,6 +130,67 @@ Version.propTypes = {
   readOnly: PropTypes.bool,
 }
 
+export function WorkingVersion ({ articleId, selectedVersion = null, compareTo = null, readOnly }) {
+  const updatedAt = useSelector(state => state.workingArticle.updatedAt)
+  const { t } = useTranslation()
+  const { pathname } = useLocation()
+
+  const articleVersionId = null
+  const isComparing = useMemo(() => pathname.includes('/compare'), [pathname])
+
+  const isSelected = useMemo(() => articleVersionId === selectedVersion, [articleVersionId, selectedVersion])
+  const compareLink = useMemo(() => selectedVersion ? `/article/${articleId}/version/${selectedVersion}/compare/working-copy` : `/article/${articleId}/compare/${selectedVersion}`, [articleId, selectedVersion, articleVersionId])
+  const canCompare = useMemo(() => isComparing ? ![compareTo, selectedVersion].includes(articleVersionId) : selectedVersion, [isComparing, compareTo, selectedVersion, articleVersionId])
+  const canStopCompare = useMemo(() => isComparing && compareTo === articleVersionId, [isComparing, isSelected])
+
+  const className = clsx({
+    [styles.selected]: isSelected,
+    [styles.compareTo]: isComparing && articleVersionId === compareTo
+  })
+
+  return <li className={clsx(styles.version, className, styles.automaticVersion)} aria-current={isSelected}>
+    <Link to={`/article/${articleId}`} className={clsx(styles.versionLink, selectedVersion && styles.versionLinkCompare)}>
+      <header>
+        <span className={styles.versionLabel}>
+          {t('workingVersion.spanWorkingCopy.text')}
+        </span>
+      </header>
+
+      <p>
+        <span className={styles.momentsAgo}>
+         <TimeAgo date={updatedAt}/>
+      </span>
+      </p>
+    </Link>
+
+    <ul className={styles.actions}>
+      <li hidden={!canCompare}>
+        <Link
+          className={clsx(buttonStyles.button, buttonStyles.secondary, styles.action)}
+          to={compareLink}
+        >
+          {t('write.compareVersion.button')}
+        </Link>
+      </li>
+      <li hidden={!canStopCompare}>
+        <Link
+          className={clsx(buttonStyles.button, buttonStyles.secondary, styles.action)}
+          to={`/article/${articleId}`}
+        >
+          {t('write.stopCompareVersion.button')}
+        </Link>
+      </li>
+    </ul>
+  </li>
+}
+
+WorkingVersion.propTypes = {
+  articleId: PropTypes.string.isRequired,
+  selectedVersion: PropTypes.string,
+  compareTo: PropTypes.string,
+  readOnly: PropTypes.bool,
+}
+
 export default function Versions ({ article, selectedVersion, compareTo, readOnly }) {
   const articleVersions = useSelector(state => state.articleVersions, shallowEqual)
   const expand = useSelector(state => state.articlePreferences.expandVersions)
@@ -168,13 +234,19 @@ export default function Versions ({ article, selectedVersion, compareTo, readOnl
           </p>)}
 
           <ul className={styles.versionsList}>
+            <WorkingVersion
+              articleId={article._id}
+              selectedVersion={selectedVersion}
+              compareTo={compareTo}
+              readOnly={readOnly} />
+
             {articleVersions.map((v) => (
               <Version key={`showVersion-${v._id}`}
-                       articleId={article._id}
-                       selectedVersion={selectedVersion}
-                       compareTo={compareTo}
-                       readOnly={readOnly}
-                       v={v}/>
+                articleId={article._id}
+                selectedVersion={selectedVersion}
+                compareTo={compareTo}
+                readOnly={readOnly}
+                v={v}/>
             ))}
           </ul>
         </>

front/src/components/Write/Write.graphql

@@ -1,8 +1,14 @@
-query compareVersion ($to: ID!) {
-  version(version: $to) {
+query compareVersion ($to: ID!, $article: ID!, $hasVersion: Boolean!) {
+  version(version: $to) @include(if: $hasVersion) {
     _id
     md
   }
+
+  article (article: $article) {
+    workingVersion @skip(if: $hasVersion) {
+      md
+    }
+  }
 }
 
 query renameVersion ($version: ID!, $name: String) {

front/src/components/Write/bibliographe/CitationsPanel.jsx

@@ -58,9 +58,6 @@ export default function CitationsPanel ({ onChange }) {
 
   const handleChanges = useCallback(() => onChange(bib), [bib])
 
-  console.log({ isValid, isEmpty})
-  console.log(citationValidationResult)
-
   return (<div className={styles.citations}>
     <section className={styles.section}>
       <MonacoBibtexEditor

front/src/components/Write/providers/monaco/DiffEditor.jsx

@@ -30,8 +30,8 @@ export default function MonacoDiffEditor ({ text, compareTo, articleId, selected
   }, [])
 
   useEffect(() => {
-    runQuery({ query, variables: { to: compareTo } })
-      .then(({ version }) => setModifiedText(version.md))
+    runQuery({ query, variables: { article: articleId, to: compareTo ?? 'working-copy', hasVersion: Boolean(compareTo) } })
+      .then(({ article, version }) => setModifiedText(version?.md ?? article.workingVersion?.md))
   }, [compareTo])
 
   const monacoOptions = useMemo(() => ({

front/src/components/Write/providers/monaco/Editor.jsx

@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { useMemo } from 'react'
+import { useLocation } from 'react-router-dom'
 import MonacoTextEditor from './TextEditor'
 import MonacoDiffEditor from './DiffEditor'
 
@@ -12,14 +13,17 @@ export default function Editor ({
                                   readOnly,
                                   onTextUpdate,
                                 }) {
+  const location = useLocation()
+  const isComparing = useMemo(() => location.pathname.includes('/compare'), [location.pathname, compareTo])
+
   return (
     <>
-      {!compareTo && <MonacoTextEditor
+      {!isComparing && <MonacoTextEditor
         text={text}
         readOnly={readOnly}
         onTextUpdate={onTextUpdate}/>
       }
-      {compareTo && <MonacoDiffEditor
+      {isComparing && <MonacoDiffEditor
         text={text}
         articleId={articleId}
         selectedVersion={selectedVersion}

front/src/components/Write/versions.module.scss

@@ -27,26 +27,23 @@
   padding: 0 .25em;
 }
 
-.momentAgo {
-  opacity: .5;
-  margin-left: .5em;
-}
-
 .version {
   border: 1px solid transparent;
   border-left: 4px solid;
   margin-bottom: 0.25em;
   margin-left: 0.5rem;
   margin-right: 0.25em;
-  cursor: pointer;
   display: flex;
 }
 
 .versionLink {
   color: inherit;
+  cursor: pointer;
   text-decoration: none;
   flex-grow: 1;
   background-color: transparent;
+  margin: -0.5rem;  /* counter act the 0.5rem padding of its container */
+  padding: 0.5rem;  /* ^^^^^^ */
 
   > header {
     max-width: 265px;

front/src/components/article.module.scss

@@ -130,9 +130,12 @@
   display: inline-flex;
 }
 
+.author {
+  margin-right: 0.5em;
+}
+
 .momentsAgo {
   opacity: .5;
-  margin-left: .5em;
 }
 
 .workspaces {

front/src/index.jsx

@@ -158,8 +158,8 @@ root.render(
                 </Route>
                 {/* Write and Compare */}
                 <PrivateRoute
-                  path={[`/article/:id/compare/:compareTo`, `/article/:id/version/:version/compare/:compareTo`]} exact>
-                  <Write/>
+                  path={[`/article/:id/compare/:compareTo`, `/article/:id/version/:version/compare/working-copy`, `/article/:id/version/:version/compare/:compareTo`]} exact>
+                  <Write />
                 </PrivateRoute>
                 {/* Write with a given version */}
                 <PrivateRoute path={`/article/:id/version/:version`} exact>