From 7d71bab6a2eaf00bf1365f2f99a3ebf90e456b00 Mon Sep 17 00:00:00 2001
From: Guillaume Grossetie <ggrossetie@yuzutech.fr>
Date: Thu, 7 Nov 2024 17:30:29 +0100
Subject: [PATCH] feat: affiche une barre de statistique dans le pied de page

---
 ...ditorArticleStats.jsx => ArticleStats.jsx} |  4 +--
 .../components/Write/ArticleEditorMenu.jsx    | 11 +++---
 front/src/components/Write/Stats.jsx          | 29 ---------------
 front/src/components/Write/WorkingVersion.jsx |  2 --
 front/src/components/Write/Write.jsx          |  3 ++
 .../providers/monaco/TextEditor.module.scss   |  2 +-
 ...s.module.scss => articleStats.module.scss} |  6 +++-
 .../collaborative/CollaborativeEditor.jsx     |  4 +--
 .../collaborative/CollaborativeTextEditor.jsx | 35 ++++++-------------
 .../CollaborativeTextEditor.module.scss       |  1 +
 10 files changed, 28 insertions(+), 69 deletions(-)
 rename front/src/components/{collaborative/CollaborativeEditorArticleStats.jsx => ArticleStats.jsx} (76%)
 delete mode 100644 front/src/components/Write/Stats.jsx
 rename front/src/components/{collaborative/CollaborativeEditorArticleStats.module.scss => articleStats.module.scss} (60%)

diff --git a/front/src/components/collaborative/CollaborativeEditorArticleStats.jsx b/front/src/components/ArticleStats.jsx
similarity index 76%
rename from front/src/components/collaborative/CollaborativeEditorArticleStats.jsx
rename to front/src/components/ArticleStats.jsx
index d3a756a6e..1122d3776 100644
--- a/front/src/components/collaborative/CollaborativeEditorArticleStats.jsx
+++ b/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>
diff --git a/front/src/components/Write/ArticleEditorMenu.jsx b/front/src/components/Write/ArticleEditorMenu.jsx
index 7919bdb9e..f6b99b492 100644
--- a/front/src/components/Write/ArticleEditorMenu.jsx
+++ b/front/src/components/Write/ArticleEditorMenu.jsx
@@ -1,9 +1,8 @@
 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'
@@ -11,7 +10,6 @@ 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()
@@ -19,7 +17,7 @@ export default function ArticleEditorMenu ({ articleInfos, readOnly, compareTo,
   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>
   )
diff --git a/front/src/components/Write/Stats.jsx b/front/src/components/Write/Stats.jsx
deleted file mode 100644
index 249f19131..000000000
--- a/front/src/components/Write/Stats.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { useCallback } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { ChevronDown, ChevronRight } from 'react-feather'
-import { useTranslation } from 'react-i18next'
-
-import menuStyles from './menu.module.scss'
-
-export default function WriteStats ({ stats }) {
-  const expand = useSelector(state => state.articlePreferences.expandStats)
-  const dispatch = useDispatch()
-  const toggleExpand = useCallback(() => dispatch({ type: 'ARTICLE_PREFERENCES_TOGGLE', key: 'expandStats' }), [])
-  const { t } = useTranslation()
-
-  return (
-    <section className={menuStyles.section}>
-      <h1 onClick={toggleExpand}>
-        {expand ? <ChevronDown/> : <ChevronRight/>} Stats
-      </h1>
-      {expand && (
-        <>
-          <p>{t('write.wordCountStat.text', {stats: stats.wordCount})}</p>
-          <p>{t('write.charCountNoSpaceStat.text', {stats: stats.charCountNoSpace})}</p>
-          <p>{t('write.charCountPlusSpaceStat.text', {stats: stats.charCountPlusSpace})}</p>
-          <p>{t('write.citationsStat.text', {stats: stats.citationNb})}</p>
-        </>
-      )}
-    </section>
-  )
-}
diff --git a/front/src/components/Write/WorkingVersion.jsx b/front/src/components/Write/WorkingVersion.jsx
index 917d29eea..43aeb48ff 100644
--- a/front/src/components/Write/WorkingVersion.jsx
+++ b/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'
diff --git a/front/src/components/Write/Write.jsx b/front/src/components/Write/Write.jsx
index 5a524c9bb..46182d1e3 100644
--- a/front/src/components/Write/Write.jsx
+++ b/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>
diff --git a/front/src/components/Write/providers/monaco/TextEditor.module.scss b/front/src/components/Write/providers/monaco/TextEditor.module.scss
index 5d74e46a4..b24eb413c 100644
--- a/front/src/components/Write/providers/monaco/TextEditor.module.scss
+++ b/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 {
diff --git a/front/src/components/collaborative/CollaborativeEditorArticleStats.module.scss b/front/src/components/articleStats.module.scss
similarity index 60%
rename from front/src/components/collaborative/CollaborativeEditorArticleStats.module.scss
rename to front/src/components/articleStats.module.scss
index 8c1dd30d1..f83d649b2 100644
--- a/front/src/components/collaborative/CollaborativeEditorArticleStats.module.scss
+++ b/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 {
diff --git a/front/src/components/collaborative/CollaborativeEditor.jsx b/front/src/components/collaborative/CollaborativeEditor.jsx
index 3b2d52166..33ceb91cd 100644
--- a/front/src/components/collaborative/CollaborativeEditor.jsx
+++ b/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>)
 }
diff --git a/front/src/components/collaborative/CollaborativeTextEditor.jsx b/front/src/components/collaborative/CollaborativeTextEditor.jsx
index b3f16b2a0..3becd87a8 100644
--- a/front/src/components/collaborative/CollaborativeTextEditor.jsx
+++ b/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
     />
   </>)
 }
diff --git a/front/src/components/collaborative/CollaborativeTextEditor.module.scss b/front/src/components/collaborative/CollaborativeTextEditor.module.scss
index 8423196fb..a9b500336 100644
--- a/front/src/components/collaborative/CollaborativeTextEditor.module.scss
+++ b/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 {