feat: affiche une barre de statistique dans le pied de page

front/src/components/collaborative/CollaborativeEditorArticleStats.jsx → front/src/components/ArticleStats.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { shallowEqual, useSelector } from 'react-redux'
-import styles from './CollaborativeEditorArticleStats.module.scss'
+import styles from './articleStats.module.scss'
 
 
-export default function CollaborativeEditorArticleStats () {
+export default function ArticleStats () {
   const articleStats = useSelector(state => state.articleStats, shallowEqual)
   return (<ul className={styles.stats}>
     <li>Words : {articleStats.wordCount}</li>

front/src/components/Write/ArticleEditorMenu.jsx

@@ -1,25 +1,23 @@
 import React, { useCallback } from 'react'
-import { shallowEqual, useDispatch, useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 
 import styles from './articleEditorMenu.module.scss'
-import Stats from './Stats'
 import Biblio from './Biblio'
 import Sommaire from './Sommaire'
 import Versions from './Versions'
 import { Sidebar } from 'react-feather'
 
 export default function ArticleEditorMenu ({ articleInfos, readOnly, compareTo, selectedVersion }) {
   const expanded = useSelector(state => state.articlePreferences.expandSidebarLeft)
-  const articleStats = useSelector(state => state.articleStats, shallowEqual)
   const dispatch = useDispatch()
   const toggleExpand = useCallback(() => dispatch({ type: 'ARTICLE_PREFERENCES_TOGGLE', key: 'expandSidebarLeft' }), [])
   const { t } = useTranslation()
 
   return (
     <nav className={`${expanded ? styles.expandleft : styles.retractleft}`}>
       <button onClick={toggleExpand} className={expanded ? styles.close : styles.open}>
-        <Sidebar /> {expanded ? t('write.sidebar.closeButton') : t('write.sidebar.biblioAndCoButton')}
+        <Sidebar/> {expanded ? t('write.sidebar.closeButton') : t('write.sidebar.biblioAndCoButton')}
       </button>
       {expanded && (<div>
         <Versions
@@ -28,9 +26,8 @@ export default function ArticleEditorMenu ({ articleInfos, readOnly, compareTo,
           compareTo={compareTo}
           readOnly={readOnly}
         />
-        <Sommaire />
-        <Biblio readOnly={readOnly} article={articleInfos} />
-        <Stats stats={articleStats} />
+        <Sommaire/>
+        <Biblio readOnly={readOnly} article={articleInfos}/>
       </div>)}
     </nav>
   )

front/src/components/Write/WorkingVersion.jsx

@@ -1,10 +1,8 @@
-import { Modal as GeistModal } from '@geist-ui/core'
 import React, { useEffect, useMemo, useState, useCallback } from 'react'
 import { shallowEqual, useSelector } from 'react-redux'
 import { Link } from "react-router-dom";
 import { AlertCircle, AlignLeft, Check, Edit3, Eye, Loader, Printer } from 'react-feather'
 import { useTranslation } from 'react-i18next'
-import ArticleContributors from '../ArticleContributors.jsx'
 import TimeAgo from '../TimeAgo.jsx'
 
 import styles from './workingVersion.module.scss'

front/src/components/Write/Write.jsx

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types'
 import throttle from 'lodash.throttle'
 import debounce from 'lodash.debounce'
 import { useMutation } from '../../hooks/graphql.js'
+import ArticleStats from '../ArticleStats.jsx'
 import ErrorMessageCard from '../ErrorMessageCard.jsx'
 
 import styles from './write.module.scss'
@@ -349,6 +350,8 @@ export default function Write() {
               selectedVersion={currentVersion}
               compareTo={compareTo}
               currentArticleVersion={live.version} />
+
+            <ArticleStats/>
           </Route>
         </Switch>
       </article>

front/src/components/Write/providers/monaco/TextEditor.module.scss

@@ -4,7 +4,7 @@
 .editor {
   border: 1px solid $main-border-color;
   min-height: 200px;
-  height: calc(100vh - 160px);
+  height: calc(100vh - 195px);
 
   :global {
     .monaco-editor {

front/src/components/collaborative/CollaborativeEditorArticleStats.module.scss → front/src/components/articleStats.module.scss

@@ -1,9 +1,13 @@
 .stats {
+  position: sticky;
+  bottom: 2px;
   display: flex;
   justify-content: center;
-  margin: 1em auto 2em;
   color: #4a4a4a;
   font-size: 0.85rem;
+  background-color: #f9f9f9;
+  padding: 0.5rem;
+  border: 1px solid #d8d8d8;
 }
 
 .stats > li:not(:last-child)::after {

front/src/components/collaborative/CollaborativeEditor.jsx

@@ -2,11 +2,11 @@ import { Loading } from '@geist-ui/core'
 import React, { useCallback } from 'react'
 import { useParams } from 'react-router-dom'
 import useGraphQL from '../../hooks/graphql.js'
+import ArticleStats from '../ArticleStats.jsx'
 
 import { getCollaborativeSession } from './CollaborativeSession.graphql'
 
 import CollaborativeEditorArticleHeader from './CollaborativeEditorArticleHeader.jsx'
-import CollaborativeEditorArticleStats from './CollaborativeEditorArticleStats.jsx'
 import CollaborativeSessionError from './CollaborativeSessionError.jsx'
 import CollaborativeTextEditor from './CollaborativeTextEditor.jsx'
 
@@ -49,6 +49,6 @@ export default function CollaborativeEditor () {
         collaborativeSessionId={collaborativeSessionId}
         onCollaborativeSessionStateUpdated={handleCollaborativeSessionStateUpdated}
       />
-      <CollaborativeEditorArticleStats/>
+      <ArticleStats/>
     </div>)
 }

front/src/components/collaborative/CollaborativeTextEditor.jsx

@@ -2,7 +2,7 @@ import { Loading } from '@geist-ui/core'
 import PropTypes from 'prop-types'
 import Editor from '@monaco-editor/react'
 import throttle from 'lodash.throttle'
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { shallowEqual, useDispatch, useSelector } from 'react-redux'
 import { MonacoBinding } from 'y-monaco'
 import * as collaborating from './collaborating.js'
@@ -41,10 +41,13 @@ const colors = [
   '#DDDDDD',
 ]
 
-export default function CollaborativeTextEditor ({ articleId, collaborativeSessionCreatorId, collaborativeSessionId, onCollaborativeSessionStateUpdated }) {
+export default function CollaborativeTextEditor ({
+  articleId,
+  collaborativeSessionCreatorId,
+  collaborativeSessionId,
+  onCollaborativeSessionStateUpdated
+}) {
   const connectingRef = useRef(false)
-  const [viewportHeight, setViewportHeight] = useState(window.innerHeight)
-  const [editorVerticalOffset, setEditorVerticalOffset] = useState(0)
   const [dynamicStyles, setDynamicStyles] = useState('')
   const [websocketStatus, setWebsocketStatus] = useState('')
   const [yText, setYText] = useState(null)
@@ -140,16 +143,15 @@ export default function CollaborativeTextEditor ({ articleId, collaborativeSessi
         wsProvider.disconnect()
         wsProvider.destroy()
       } catch (err) {
-        // try to disconnect..
+        // try to disconnect...
       }
     }
   }, [collaborativeSessionId, websocketEndpoint, writerInfo])
 
   const handleEditorDidMount = useCallback((editor) => {
     editorRef.current = editor
-    setEditorVerticalOffset(editor._domElement.getBoundingClientRect().y + window.scrollY + 50)
     new MonacoBinding(yText, editor.getModel(), new Set([editor]), awareness)
-  }, [yText, awareness, setEditorVerticalOffset])
+  }, [yText, awareness])
 
   useEffect(() => {
     const line = editorCursorPosition.lineNumber
@@ -160,23 +162,6 @@ export default function CollaborativeTextEditor ({ articleId, collaborativeSessi
     editor?.revealLine(line + 1, 1) // smooth
   }, [editorRef, editorCursorPosition])
 
-  const updateViewportHeight = useCallback(() => {
-    setViewportHeight(window.innerHeight)
-    const editor = editorRef.current
-    if (editor) {
-      setEditorVerticalOffset(editor._domElement.getBoundingClientRect().y + window.scrollY + 50)
-    }
-  }, [setViewportHeight, editorRef, setEditorVerticalOffset])
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      window.addEventListener('resize', updateViewportHeight)
-    }
-    return () => {
-      window.removeEventListener('resize', updateViewportHeight)
-    }
-  }, [updateViewportHeight])
-
   if (!yText) {
     return <Loading/>
   }
@@ -191,9 +176,9 @@ export default function CollaborativeTextEditor ({ articleId, collaborativeSessi
     <Editor
       options={options}
       className={styles.editor}
-      height={viewportHeight - editorVerticalOffset + "px"}
       defaultLanguage="markdown"
       onMount={handleEditorDidMount}
+      on
     />
   </>)
 }

front/src/components/collaborative/CollaborativeTextEditor.module.scss

@@ -4,6 +4,7 @@
 .editor {
   border: 1px solid $main-border-color;
   min-height: 200px;
+  height: calc(100vh - 225px);
 
   :global {
     .monaco-editor {