first commit

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

@@ -0,0 +1,109 @@
+import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
+import { useProjectContext } from '@/shared/context/project-context'
+import { useLocalCompileContext } from '@/shared/context/local-compile-context'
+import { useWordCount } from '../hooks/use-word-count'
+import {
+  OLModalBody,
+  OLModalFooter,
+  OLModalHeader,
+  OLModalTitle,
+} from '@/features/ui/components/ol/ol-modal'
+import OLNotification from '@/features/ui/components/ol/ol-notification'
+import OLRow from '@/features/ui/components/ol/ol-row'
+import OLCol from '@/features/ui/components/ol/ol-col'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import { Spinner } from 'react-bootstrap-5'
+
+// NOTE: this component is only mounted when the modal is open
+export default function WordCountModalContent({ handleHide }) {
+  const { _id: projectId } = useProjectContext()
+  const { clsiServerId } = useLocalCompileContext()
+  const { t } = useTranslation()
+  const { data, error, loading } = useWordCount(projectId, clsiServerId)
+
+  return (
+    <>
+      <OLModalHeader closeButton>
+        <OLModalTitle>{t('word_count')}</OLModalTitle>
+      </OLModalHeader>
+
+      <OLModalBody>
+        {loading && !error && (
+          <div className="loading">
+            <Spinner
+              animation="border"
+              aria-hidden="true"
+              size="sm"
+              role="status"
+            />
+            &nbsp;
+            {t('loading')}…
+          </div>
+        )}
+
+        {error && (
+          <OLNotification
+            type="error"
+            content={t('generic_something_went_wrong')}
+          />
+        )}
+
+        {data && (
+          <div className="container-fluid">
+            {data.messages && (
+              <OLRow>
+                <OLCol xs={12}>
+                  <OLNotification
+                    type="error"
+                    content={
+                      <p style={{ whiteSpace: 'pre-wrap' }}>{data.messages}</p>
+                    }
+                  />
+                </OLCol>
+              </OLRow>
+            )}
+
+            <OLRow>
+              <OLCol xs={4}>
+                <div className="pull-right">{t('total_words')}:</div>
+              </OLCol>
+              <OLCol xs={6}>{data.textWords}</OLCol>
+            </OLRow>
+
+            <OLRow>
+              <OLCol xs={4}>
+                <div className="pull-right">{t('headers')}:</div>
+              </OLCol>
+              <OLCol xs={6}>{data.headers}</OLCol>
+            </OLRow>
+
+            <OLRow>
+              <OLCol xs={4}>
+                <div className="pull-right">{t('math_inline')}:</div>
+              </OLCol>
+              <OLCol xs={6}>{data.mathInline}</OLCol>
+            </OLRow>
+
+            <OLRow>
+              <OLCol xs={4}>
+                <div className="pull-right">{t('math_display')}:</div>
+              </OLCol>
+              <OLCol xs={6}>{data.mathDisplay}</OLCol>
+            </OLRow>
+          </div>
+        )}
+      </OLModalBody>
+
+      <OLModalFooter>
+        <OLButton variant="secondary" onClick={handleHide}>
+          {t('close')}
+        </OLButton>
+      </OLModalFooter>
+    </>
+  )
+}
+
+WordCountModalContent.propTypes = {
+  handleHide: PropTypes.func.isRequired,
+}

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import WordCountModalContent from './word-count-modal-content'
+import withErrorBoundary from '../../../infrastructure/error-boundary'
+import OLModal from '@/features/ui/components/ol/ol-modal'
+
+const WordCountModal = React.memo(function WordCountModal({
+  show,
+  handleHide,
+}) {
+  return (
+    <OLModal animation show={show} onHide={handleHide} id="word-count-modal">
+      <WordCountModalContent handleHide={handleHide} />
+    </OLModal>
+  )
+})
+
+WordCountModal.propTypes = {
+  show: PropTypes.bool,
+  handleHide: PropTypes.func.isRequired,
+}
+
+export default withErrorBoundary(WordCountModal)