From 7ad79c8e17b21a6a3789a594db26d34810090e4a Mon Sep 17 00:00:00 2001
From: "duc.vu" <anh-duc.vu@helsinki.fi>
Date: Tue, 17 Sep 2024 09:29:37 +0300
Subject: [PATCH] add gec view

---
 client/components/GecView/index.js | 82 ++++++++++++++++++++++++++++++
 client/components/Router.js        |  9 +---
 client/util/redux/gecReducer.js    | 57 +++++++++++++++++++++
 client/util/redux/index.js         |  3 ++
 4 files changed, 144 insertions(+), 7 deletions(-)
 create mode 100644 client/components/GecView/index.js
 create mode 100644 client/util/redux/gecReducer.js

diff --git a/client/components/GecView/index.js b/client/components/GecView/index.js
new file mode 100644
index 00000000..dc5ef2fe
--- /dev/null
+++ b/client/components/GecView/index.js
@@ -0,0 +1,82 @@
+import React 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 + ' '}
+    </span>
+  )
+}
+
+const GrammarCheck = () => {
+  const dispatch = useDispatch()
+  const { essay, edits, pending } = useSelector(state => state.gec)
+
+  const handleEssayChange = (event) => {
+    const newValue = event.target.value
+    dispatch(updateEssay(newValue))
+  }
+
+  const handleGrammarCheck = () => {
+    if (essay.trim() !== "") {
+      dispatch(checkGrammar(essay))
+    }
+  }
+
+  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} />
+    })
+  }
+
+  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}
+      />
+      <button
+        style={{
+          backgroundColor: '#007BFF',
+          padding: '15px',
+          borderRadius: '5px',
+          color: 'white',
+          fontSize: '16px',
+          border: 'none',
+          cursor: 'pointer',
+        }}
+        onClick={handleGrammarCheck}
+        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
diff --git a/client/components/Router.js b/client/components/Router.js
index efe45872..43e8d016 100644
--- a/client/components/Router.js
+++ b/client/components/Router.js
@@ -47,6 +47,7 @@ import ReferenceView from './ReferenceView'
 import EditStoryView from './EditStoryView'
 import LessonPracticeView from './Lessons/LessonPracticeView'
 import LessonLibrary from './Lessons/LessonLibrary'
+import GecView from './GecView'
 
 export default () => {
   const userData = useSelector(state => state.user?.data?.user)
@@ -58,7 +59,6 @@ export default () => {
   const dispatch = useDispatch()
 
   useEffect(() => {
-    // This closes and opens recommendations on page changes
     dispatch(closeEncouragement())
     dispatch(closeFCEncouragement())
     if (
@@ -147,11 +147,6 @@ export default () => {
             <ProtectedRoute exact path="/stories/:id/group/review" component={ReadViews} />
             <ProtectedRoute exact path="/stories/:id/group/preview" component={ReadViews} />
 
-            {/* <ProtectedRoute
-              exact
-              path="/stories/:id/preview-controlled-story/"
-              component={ControlledStoryPreviewView}
-            /> */}
             <ProtectedRoute exact path="/stories/:id/compete/" component={CompeteView} />
             <ProtectedRoute
               exact
@@ -186,7 +181,7 @@ export default () => {
             <ProtectedRoute exact path="/test-construction" component={ConstructTestView} />
             <ProtectedRoute exact path="/test-debug" component={DebugTestView} />
             <ProtectedRoute exact path="/vocabulary-view" component={VocabularyView} />
-
+            <ProtectedRoute exact path="/gec" component={GecView} />
             <ProtectedRoute exact path="/reference" component={ReferenceView} />
           </Switch>
         </main>
diff --git a/client/util/redux/gecReducer.js b/client/util/redux/gecReducer.js
new file mode 100644
index 00000000..01f7dce7
--- /dev/null
+++ b/client/util/redux/gecReducer.js
@@ -0,0 +1,57 @@
+import callBuilder from '../apiConnection'
+
+export const checkGrammar = (essay) => {
+  const route = '/gec' 
+  const prefix = 'CHECK_GRAMMAR'
+  const payload = { essay } 
+  return callBuilder(route, prefix, 'post', payload) // Use POST method
+}
+
+export const updateEssay = (text) => ({
+    type: 'UPDATE_ESSAY',
+    payload: text,
+  });
+  
+
+const initialState = {
+  essay: "",           // Essay input by the user
+  edits: null,         // Grammar corrections received
+  pending: false,      // Loading state
+  error: null,         // Error message if request fails
+}
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case 'CHECK_GRAMMAR_ATTEMPT':  
+      return {
+        ...state,
+        pending: true,
+        error: null,
+      }
+    case 'CHECK_GRAMMAR_SUCCESS': 
+      return {
+        ...state,
+        edits: action.response.edits, 
+        pending: false,
+        error: null,
+      }
+    case 'CHECK_GRAMMAR_FAILURE': 
+      return {
+        ...state,
+        pending: false,
+        error: action.error, 
+      }
+    case 'UPDATE_ESSAY': 
+      return {
+        ...state,
+        essay: action.payload,
+      }
+    case 'CLEAR_EDITS':
+      return {
+        ...state,
+        edits: null,
+      }
+    default:
+      return state
+  }
+}
diff --git a/client/util/redux/index.js b/client/util/redux/index.js
index 79d84fd4..42cf2fe5 100644
--- a/client/util/redux/index.js
+++ b/client/util/redux/index.js
@@ -53,6 +53,8 @@ import levelUp from './levelUpReducer'
 import activity from './activityReducer'
 import contextTranslation from './contextTranslationReducer'
 import chatbot from './chatbotReducer'
+import gec from './gecReducer'
+
 
 const rootReducer = combineReducers({
   stories,
@@ -108,6 +110,7 @@ const rootReducer = combineReducers({
   contextTranslation,
   activity,
   chatbot,
+  gec,
 })
 
 export default (state, action) =>