work

TSTPrep · May 22, 2024 · 7080b2c · 7080b2c
1 parent c196c6f
commit 7080b2c
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 66 deletions.
diff --git a/public/assets/scss/components/_writing-evaluation-form.scss b/public/assets/scss/components/_writing-evaluation-form.scss
@@ -164,34 +164,30 @@ label {
 
         .popper-indicator {
             margin: 0;
-        }
-
-        .popper-feedback {
-            margin: 0;
-        }
-
-        span.popper-indication,
-            p.popper-indicator{
             font-weight: 500;
         }
-        
-        div.popper-body{
+
+        .popper-body {
             border-bottom: 1px solid;
         }
 
-        p.popper-feedback{
+        .popper-feedback {
+            margin: 0;
             line-height: 14px;
             font-size: 12px;
             padding-top: 10px;
         }
 
-        .popper-mistake{
+        .popper-indication {
+            font-weight: 500;
+        }
+
+        .popper-word {
             color: #d98686;
         }
-        
-        .popper-correction{
+
+        .popper-replace {
             color: #00b189;
         }
-
     }
 }
diff --git a/src/components/writing-evaluation/EvaluationResponseP.tsx b/src/components/writing-evaluation/EvaluationResponseP.tsx
@@ -3,13 +3,7 @@ import { Evaluation } from '../../redux/features/api.types';
 import Sentence, { SentenceViewType } from './SentenceP';
 import { usePopper } from 'react-popper';
 
-export type PopperState = {
-    indicator: string;
-    mistake: string;
-    indication: string;
-    correction?: string;
-    feedback: string;
-};
+export type PopperState = Evaluation.SingleFragmentData | Evaluation.DoubleFragmentData;
 
 type EvaluationResponseProps = {
     evaluation: Evaluation.EvaluateResponse;
@@ -77,21 +71,23 @@ export default function EvaluationResponse({ evaluation }: EvaluationResponsePro
                 ))}
             </p>
             <div
-                className='popper-tooltip'
+                className={
+                    'popper-tooltip' + (popperState ? ' popper-' + popperState.op : '')
+                }
                 ref={setPopperElement}
                 style={styles.popper}
                 {...attributes.popper}
             >
                 <p className='popper-indicator'>{popperState?.indicator}</p>
                 <div className='popper-body'>
-                    <span className='popper-indication'>{popperState?.indication}: </span>
-                    <span className='popper-mistake'>{popperState?.mistake}</span>
-                    {popperState?.correction && (
+                    <span className='popper-indication'>
+                        {getIndication(popperState?.op)}
+                    </span>
+                    <span className='popper-word'>{popperState?.word}</span>
+                    {popperState?.replace && (
                         <>
                             {' --> '}
-                            <span className='popper-correction'>
-                                {popperState?.correction}
-                            </span>
+                            <span className='popper-replace'>{popperState?.replace}</span>
                         </>
                     )}
                 </div>
@@ -100,3 +96,19 @@ export default function EvaluationResponse({ evaluation }: EvaluationResponsePro
         </>
     );
 }
+
+function getIndication(op?: PopperState['op']) {
+    if (op === 'addition') {
+        return 'Add: ';
+    }
+
+    if (op === 'deletion') {
+        return 'Delete: ';
+    }
+
+    if (op === 'replacement') {
+        return 'Replace: ';
+    }
+
+    return null;
+}
diff --git a/src/components/writing-evaluation/SentenceFragmentP.tsx b/src/components/writing-evaluation/SentenceFragmentP.tsx
@@ -26,16 +26,9 @@ export default function SentenceFragment({
 
         return (
             <span
-                onMouseEnter={e =>
-                    mouseEnter(e.target as HTMLElement, {
-                        indicator: data.indicator,
-                        feedback: data.feedback,
-                        mistake: data.word,
-                        indication: 'Add',
-                    })
-                }
+                onMouseEnter={e => mouseEnter(e.target as HTMLElement, data)}
                 onMouseLeave={() => mouseLeave()}
-                className='addition'
+                className={data.op}
             >
                 {data.word}
             </span>
@@ -49,16 +42,9 @@ export default function SentenceFragment({
 
         return (
             <span
-                onMouseEnter={e =>
-                    mouseEnter(e.target as HTMLElement, {
-                        indicator: data.indicator,
-                        feedback: data.feedback,
-                        mistake: data.word,
-                        indication: 'Delete',
-                    })
-                }
+                onMouseEnter={e => mouseEnter(e.target as HTMLElement, data)}
                 onMouseLeave={() => mouseLeave()}
-                className='deletion'
+                className={data.op}
             >
                 {data.word}
             </span>
@@ -68,17 +54,9 @@ export default function SentenceFragment({
     if (viewType === 'inline') {
         return (
             <span
-                onMouseEnter={e =>
-                    mouseEnter(e.target as HTMLElement, {
-                        indicator: data.indicator,
-                        feedback: data.feedback,
-                        mistake: data.word,
-                        correction: data.replace,
-                        indication: 'Replace',
-                    })
-                }
+                onMouseEnter={e => mouseEnter(e.target as HTMLElement, data)}
                 onMouseLeave={() => mouseLeave()}
-                className='replacement'
+                className={data.op}
             >
                 <span className='incorrect'>{data.word}</span>
                 <span className='correct'>{data.replace}</span>
@@ -88,15 +66,7 @@ export default function SentenceFragment({
 
     return (
         <span
-            onMouseEnter={e =>
-                mouseEnter(e.target as HTMLElement, {
-                    indicator: data.indicator,
-                    feedback: data.feedback,
-                    mistake: data.word,
-                    correction: data.replace,
-                    indication: 'Replace',
-                })
-            }
+            onMouseEnter={e => mouseEnter(e.target as HTMLElement, data)}
             onMouseLeave={() => mouseLeave()}
             className={viewType === 'student' ? 'incorrect' : 'correct'}
         >