Merge pull request #3707 from overleaf/ae-refactor-word-count-modal

Refactor "Word Count" modal

GitOrigin-RevId: 00561b5b3f8f161238321c440ecde67cd42ece1c

services/web/frontend/js/features/word-count-modal/components/word-count-modal-content.js

@@ -3,12 +3,25 @@ import { Row, Col, Modal, Grid, Alert, Button } from 'react-bootstrap'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import Icon from '../../../shared/components/icon'
+import AccessibleModal from '../../../shared/components/accessible-modal'
 
-function WordCountModalContent({ data, error, handleHide, loading }) {
+export default function WordCountModalContent({
+  animation = true,
+  show,
+  data,
+  error,
+  handleHide,
+  loading
+}) {
   const { t } = useTranslation()
 
   return (
-    <>
+    <AccessibleModal
+      animation={animation}
+      show={show}
+      onHide={handleHide}
+      id="clone-project-modal"
+    >
       <Modal.Header closeButton>
         <Modal.Title>{t('word_count')}</Modal.Title>
       </Modal.Header>
@@ -16,7 +29,7 @@ function WordCountModalContent({ data, error, handleHide, loading }) {
       <Modal.Body>
         {loading && !error && (
           <div className="loading">
-            <Loading /> &nbsp; {t('loading')}…
+            <Icon type="refresh" spin modifier="fw" /> &nbsp; {t('loading')}…
           </div>
         )}
 
@@ -70,11 +83,13 @@ function WordCountModalContent({ data, error, handleHide, loading }) {
       <Modal.Footer>
         <Button onClick={handleHide}>{t('done')}</Button>
       </Modal.Footer>
-    </>
+    </AccessibleModal>
   )
 }
 
 WordCountModalContent.propTypes = {
+  animation: PropTypes.bool,
+  show: PropTypes.bool.isRequired,
   handleHide: PropTypes.func.isRequired,
   loading: PropTypes.bool.isRequired,
   error: PropTypes.bool,
@@ -86,9 +101,3 @@ WordCountModalContent.propTypes = {
     textWords: PropTypes.number
   })
 }
-
-function Loading() {
-  return <Icon type="refresh" spin modifier="fw" accessibilityLabel="Loading" />
-}
-
-export default WordCountModalContent

services/web/frontend/js/features/word-count-modal/components/word-count-modal.js

@@ -1,7 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react'
-import { Modal } from 'react-bootstrap'
 import PropTypes from 'prop-types'
+import AbortController from 'abort-controller'
 import WordCountModalContent from './word-count-modal-content'
+import { fetchWordCount } from '../utils/api'
 
 function WordCountModal({ clsiServerId, handleHide, projectId, show }) {
   const [loading, setLoading] = useState(true)
@@ -21,25 +22,17 @@ function WordCountModal({ clsiServerId, handleHide, projectId, show }) {
     const _abortController = new AbortController()
     setAbortController(_abortController)
 
-    let query = ''
-    if (clsiServerId) {
-      query = `?clsiserverid=${clsiServerId}`
-    }
-
-    fetch(`/project/${projectId}/wordcount${query}`, {
+    fetchWordCount(projectId, clsiServerId, {
       signal: _abortController.signal
     })
-      .then(async response => {
-        if (response.ok) {
-          const { texcount } = await response.json()
-          setData(texcount)
-        } else {
+      .then(data => {
+        setData(data.texcount)
+      })
+      .catch(error => {
+        if (error.cause?.name !== 'AbortError') {
           setError(true)
         }
       })
-      .catch(() => {
-        setError(true)
-      })
       .finally(() => {
         setLoading(false)
       })
@@ -55,14 +48,13 @@ function WordCountModal({ clsiServerId, handleHide, projectId, show }) {
   }, [abortController, handleHide])
 
   return (
-    <Modal show={show} onHide={abortAndHide}>
-      <WordCountModalContent
-        data={data}
-        error={error}
-        handleHide={abortAndHide}
-        loading={loading}
-      />
-    </Modal>
+    <WordCountModalContent
+      data={data}
+      error={error}
+      show={show}
+      handleHide={abortAndHide}
+      loading={loading}
+    />
   )
 }
 

services/web/frontend/js/features/word-count-modal/utils/api.js

@@ -0,0 +1,10 @@
+import { getJSON } from '../../../infrastructure/fetch-json'
+
+export function fetchWordCount(projectId, clsiServerId, options) {
+  let query = ''
+  if (clsiServerId) {
+    query = `?clsiserverid=${clsiServerId}`
+  }
+
+  return getJSON(`/project/${projectId}/wordcount${query}`, options)
+}