update gec view

client/components/GecView/index.js

@@ -1,55 +1,140 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { useDispatch, useSelector } from 'react-redux'
 import { checkGrammar, updateEssay } from 'Utilities/redux/gecReducer'
 
-const Word = ({ word, isError }) => {
-  return (
-    <span style={{ color: isError ? 'red' : 'black', fontWeight: isError ? 'bold' : 'normal' }}>
-      {word + ' '}
+const Word = ({ word, isError, edit, index }) => {
+  const [hovered, setHovered] = useState(false)
+
+  return isError ? (
+    <span
+      key={index}
+      style={{ position: 'relative', display: 'inline-block' }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      <input
+        type="text"
+        defaultValue={edit.o_str}
+        placeholder={edit.o_str}
+        style={{
+          color: 'red',
+          fontWeight: 'bold',
+          border: '1px solid red',
+          padding: '2px',
+          margin: '0 2px',
+        }}
+      />
+      {hovered && (
+        <span
+          style={{
+            position: 'absolute',
+            top: '-25px',
+            left: '0',
+            backgroundColor: '#333',
+            color: '#fff',
+            padding: '5px',
+            borderRadius: '3px',
+            fontSize: '12px',
+            zIndex: '10',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {edit.type}
+        </span>
+      )}
+    </span>
+  ) : (
+    <span key={index} style={{ marginRight: '5px' }}>
+      {word}
     </span>
   )
 }
 
 const GrammarCheck = () => {
   const dispatch = useDispatch()
   const { essay, edits, pending } = useSelector(state => state.gec)
+  const [submitted, setSubmitted] = useState(false)
 
-  const handleEssayChange = (event) => {
+  const handleEssayChange = event => {
     const newValue = event.target.value
     dispatch(updateEssay(newValue))
   }
 
   const handleGrammarCheck = () => {
-    if (essay.trim() !== "") {
+    if (essay.trim() !== '') {
       dispatch(checkGrammar(essay))
+      setSubmitted(true)
     }
   }
 
   const renderTextWithHighlights = (text, edits) => {
     const words = text.split(' ')
-    return words.map((word, index) => {
-      const isError = edits && edits.some(edit => edit.word === word)
-      return <Word key={index} word={word} isError={isError} />
-    })
+    let modifiedText = []
+    let currentEditIndex = 0
+    let currentWordIndex = 0
+
+    // Find matching edits and insert editable inputs
+    while (currentWordIndex < words.length) {
+      const word = words[currentWordIndex]
+      const currentEdit = edits[currentEditIndex]
+      const o_start = currentEdit ? currentEdit.o_start : null
+      const o_end = currentEdit ? currentEdit.o_end : null
+
+      // Check if the current word is in the range of the edit
+      if (currentEdit && currentWordIndex >= o_start && currentWordIndex < o_end) {
+        // Wrap the word in an input box if it's within the edit range
+        modifiedText.push(
+          <Word
+            key={currentWordIndex}
+            word={word}
+            isError={true}
+            edit={currentEdit}
+            index={currentWordIndex}
+          />
+        )
+
+        if (currentWordIndex + 1 === o_end) {
+          currentEditIndex++
+        }
+      } else {
+        // Regular word (no edit)
+        modifiedText.push(
+          <span key={currentWordIndex} style={{ marginRight: '5px' }}>
+            {word + ' '}
+          </span>
+        )
+      }
+
+      currentWordIndex++
+    }
+
+    return modifiedText
   }
 
   return (
     <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', height: '100vh' }}>
-      <textarea
-        style={{
-          height: '150px',
-          borderColor: '#ccc',
-          borderWidth: '1px',
-          padding: '10px',
-          fontSize: '16px',
-          marginBottom: '20px',
-          width: '100%',
-          resize: 'vertical',
-        }}
-        value={essay}
-        onChange={handleEssayChange}
-      />
+      {!submitted ? (
+        <textarea
+          style={{
+            height: '150px',
+            borderColor: '#ccc',
+            borderWidth: '1px',
+            padding: '10px',
+            fontSize: '16px',
+            marginBottom: '20px',
+            width: '100%',
+            resize: 'vertical',
+          }}
+          value={essay}
+          onChange={handleEssayChange}
+        />
+      ) : (
+        <div style={{ marginTop: '20px', padding: '10px', border: '1px solid #ccc', height: '200px', overflowY: 'auto' }}>
+          <span>{renderTextWithHighlights(essay, edits[0])}</span>
+        </div>
+      )}
+
       <button
         style={{
           backgroundColor: '#007BFF',
@@ -61,22 +146,12 @@ const GrammarCheck = () => {
           cursor: 'pointer',
         }}
         onClick={handleGrammarCheck}
-        disabled={pending}  // Disable button when pending
+        disabled={pending} // Disable button when pending
       >
         {pending ? '...' : <FormattedMessage id="check-gec-grammar" />}
       </button>
-
-      {/* <div style={{ marginTop: '20px', borderColor: '#ccc', borderWidth: '1px', padding: '10px', height: '200px', overflowY: 'auto' }}>
-        {pending ? (
-          <span>Checking...</span>
-        ) : (
-          <span>
-            {renderTextWithHighlights(essay, edits)}
-          </span>
-        )}
-      </div> */}
     </div>
   )
 }
 
-export default GrammarCheck
+export default GrammarCheck

client/util/redux/gecReducer.js

@@ -15,7 +15,7 @@ export const updateEssay = (text) => ({
 
 const initialState = {
   essay: "",           // Essay input by the user
-  edits: null,         // Grammar corrections received
+  edits: {},         // Grammar corrections received
   pending: false,      // Loading state
   error: null,         // Error message if request fails
 }