update gec features

UniversityOfHelsinkiCS · Oct 28, 2024 · ff8b3d2 · ff8b3d2
1 parent c5f211f
commit ff8b3d2
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 61 deletions.
diff --git a/client/components/GecView/index.js b/client/components/GecView/index.js
@@ -1,9 +1,9 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { useDispatch, useSelector } from 'react-redux'
 import { checkGrammar, updateEssay } from 'Utilities/redux/gecReducer'
 
-const Word = ({ word, isError, edit, index }) => {
+const Word = ({ word, isError, edit, index, onEditChange }) => {
   const [hovered, setHovered] = useState(false)
 
   return isError ? (
@@ -24,6 +24,7 @@ const Word = ({ word, isError, edit, index }) => {
           padding: '2px',
           margin: '0 2px',
         }}
+        onChange={(e) => onEditChange(e.target.value, index)} 
       />
       {hovered && (
         <span
@@ -53,63 +54,106 @@ const Word = ({ word, isError, edit, index }) => {
 
 const GrammarCheck = () => {
   const dispatch = useDispatch()
-  const { essay, edits, pending } = useSelector(state => state.gec)
+  const { essay, edits, pending, error } = useSelector(state => state.gec)
   const [submitted, setSubmitted] = useState(false)
+  const [editedWords, setEditedWords] = useState({})
 
   const handleEssayChange = event => {
     const newValue = event.target.value
     dispatch(updateEssay(newValue))
   }
 
-  const handleGrammarCheck = () => {
-    if (essay.trim() !== '') {
-      dispatch(checkGrammar(essay))
-      setSubmitted(true)
+  const handleEditChange = (newValue, index) => {
+    setEditedWords(prev => ({ ...prev, [index]: newValue }));
+  }
+
+  const handleGrammarCheck = async () => {
+    const updatedSentences = []
+    const sentences = essay.split(/(?<=[.!?])\s+/)
+
+    sentences.forEach((sentence, sentenceIndex) => {
+      const words = sentence.split(' ')
+      const sentenceEdits = edits[sentenceIndex] || []
+
+      const modifiedWords = words.map((word, wordIndex) => {
+        const currentEdit = sentenceEdits.find(edit => 
+          wordIndex >= edit.c_start && wordIndex < edit.c_end
+        )
+        return currentEdit ? editedWords[wordIndex] || word : word
+      })
+
+      updatedSentences.push(modifiedWords.join(' ') + (sentence.endsWith(' ') ? ' ' : ''))
+    })
+
+    const updatedEssay = updatedSentences.join(' ')
+    dispatch(updateEssay(updatedEssay))
+
+    console.log("handleGrammarCheck", updatedEssay)
+    if (updatedEssay.trim() !== '') {
+      dispatch(checkGrammar(updatedEssay));
+      setSubmitted(true);
     }
   }
 
+  const handleReset = () => {
+    dispatch(updateEssay(''));
+    setEditedWords({}); 
+    setSubmitted(false);
+  }
+
   const renderTextWithHighlights = (text, edits) => {
-    const words = text.split(' ')
-    let modifiedText = []
-    let currentEditIndex = 0
-    let currentWordIndex = 0
-
-    // Iterate through each word in the essay
-    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
-
-      // If the current word falls under an edit's range
-      if (currentEdit && currentWordIndex >= o_start && currentWordIndex < o_end) {
-        modifiedText.push(
-          <Word
-            key={currentWordIndex}
-            word={word}
-            isError={true}
-            edit={currentEdit}
-            index={currentWordIndex}
-          />
-        )
+    const sentences = text.split('. ').map((sentence, idx) => ({
+      text: sentence,
+      index: idx
+    }));
+
+    return sentences.map(({ text, index }) => {
+      const words = text.split(' ')
+      const sentenceEdits = edits[index] || []
+      const modifiedSentence = []
 
-        // Move to the next edit once we've processed all the words for the current edit
-        if (currentWordIndex + 1 === o_end) {
-          currentEditIndex++
+      let currentEditIndex = 0
+      let currentWordIndex = 0
+
+      while (currentWordIndex < words.length) {
+        const word = words[currentWordIndex]
+        const currentEdit = sentenceEdits[currentEditIndex]
+        const c_start = currentEdit ? currentEdit.c_start : null
+        const c_end = currentEdit ? currentEdit.c_end : null
+
+        if (currentEdit && currentWordIndex >= c_start && currentWordIndex < c_end) {
+          modifiedSentence.push(
+            <Word
+              key={`${index}-${currentWordIndex}`}
+              word={word}
+              isError={true}
+              edit={currentEdit}
+              index={currentWordIndex}
+              onEditChange={handleEditChange}
+            />
+          )
+
+          if (currentWordIndex + 1 === c_end) {
+            currentEditIndex++
+          }
+        } else {
+          modifiedSentence.push(
+            <span key={`${index}-${currentWordIndex}`} style={{ marginRight: '5px' }}>
+              {word}{' '}
+            </span>
+          )
         }
-      } else {
-        // Render a regular word (without edit)
-        modifiedText.push(
-          <span key={currentWordIndex} style={{ marginRight: '5px' }}>
-            {word}{' '}
-          </span>
-        )
-      }
 
-      currentWordIndex++
-    }
+        currentWordIndex++
+      }
 
-    return modifiedText
+      return (
+        <div key={`sentence-${index}`} style={{ marginBottom: '10px' }}>
+          {modifiedSentence}
+          {index < sentences.length - 1 && '.'}
+        </div>
+      )
+    })
   }
 
   return (
@@ -143,23 +187,41 @@ const GrammarCheck = () => {
         </div>
       )}
 
-      <button
-        style={{
-          backgroundColor: '#007BFF',
-          padding: '15px',
-          borderRadius: '5px',
-          color: 'white',
-          fontSize: '16px',
-          border: 'none',
-          cursor: 'pointer',
-        }}
-        onClick={handleGrammarCheck}
-        disabled={pending}
-      >
-        {pending ? '...' : <FormattedMessage id="check-gec-grammar" />}
-      </button>
+      <div style={{ marginTop: '20px', display: 'flex', gap: '10px' }}>
+        <button
+          style={{
+            backgroundColor: '#007BFF',
+            padding: '15px',
+            borderRadius: '5px',
+            color: 'white',
+            fontSize: '16px',
+            border: 'none',
+            cursor: 'pointer',
+          }}
+          onClick={handleGrammarCheck}
+          disabled={pending}
+        >
+          {pending ? '...' : <FormattedMessage id="check-gec-grammar" />}
+        </button>
+
+        <button
+          style={{
+            backgroundColor: '#FF5733',
+            padding: '15px',
+            borderRadius: '5px',
+            color: 'white',
+            fontSize: '16px',
+            border: 'none',
+            cursor: 'pointer',
+          }}
+          onClick={handleReset}
+        >
+          <FormattedMessage id="reset-essay" />
+        </button>
+      </div>
+      {error && <FormattedMessage id="please-try-again" />}
     </div>
   )
 }
 
-export default GrammarCheck
+export default GrammarCheck
diff --git a/client/util/redux/gecReducer.js b/client/util/redux/gecReducer.js
@@ -39,7 +39,7 @@ export default (state = initialState, action) => {
       return {
         ...state,
         pending: false,
-        error: action.error, 
+        error: action.response, 
       }
     case 'UPDATE_ESSAY': 
       return {