change active to include selected word

zfletch · zfletch · commit c62ba14c85d0 · 2023-03-14T23:01:46.000-04:00
diff --git a/src/components/Alignment/Sentence/Sentence.js b/src/components/Alignment/Sentence/Sentence.js
@@ -106,7 +106,10 @@ const WrappedSentence = ({ n, json, children }) => {
     if (active && active[lnum] && active[lnum].has(wordId)) {
       setActive(null);
     } else if (idMap[lnum] && idMap[lnum][wordId]) {
-      setActive(idMap[lnum][wordId]);
+      setActive({
+        selected: { lnum, n },
+        aligned: idMap[lnum][wordId],
+      });
     }
   };
 
diff --git a/src/components/Segment/Segment.js b/src/components/Segment/Segment.js
@@ -13,7 +13,7 @@ const wordSpans = (words, lnum, active, toggleActive) => {
     const classes = [styles.word];
     const innerText = text.map(({ _ }) => _).join(<br />);
 
-    if (active && active[lnum] && active[lnum].has(n)) {
+    if (active && active.aligned && active.aligned[lnum] && active.aligned[lnum].has(n)) {
       classes.push(styles.active);
     }
     const onClick = () => {
diff --git a/src/components/Segment/Segment.test.js b/src/components/Segment/Segment.test.js
@@ -49,7 +49,8 @@ it('renders a sentence', () => {
 
 it('displays active words differently', () => {
   const active = {
-    L1: new Set(['1-2']),
+    selected: { lnum: 'L1', n: '1-1' },
+    aligned: { L1: new Set(['1-2']) },
   };
 
   const component = (
diff --git a/src/components/Xml/Xml.js b/src/components/Xml/Xml.js
@@ -102,7 +102,7 @@ const renderWord = (word, key, lnum, active, toggleActive, indent) => {
     }
   };
 
-  if (active && active[lnum] && active[lnum].has(n)) {
+  if (active && active.aligned && active.aligned[lnum] && active.aligned[lnum].has(n)) {
     classes.push(styles.active);
   }
 
diff --git a/src/components/Xml/Xml.test.js b/src/components/Xml/Xml.test.js
@@ -49,8 +49,11 @@ it('renders a sentence as XML', () => {
 
 it('displays active words differently', () => {
   const active = {
-    L1: new Set(['1-2']),
-    L2: new Set(['1-2', '1-3']),
+    selected: { lnum: 'L1', n: '1-1' },
+    aligned: {
+      L1: new Set(['1-2']),
+      L2: new Set(['1-2', '1-3']),
+    },
   };
 
   const component = (
diff --git a/src/types/types.js b/src/types/types.js
@@ -51,7 +51,13 @@ const alignmentType = shape({
   }).isRequired,
 });
 
-const activeType = objectOf(instanceOf(Set));
+const activeType = shape({
+  selected: shape({
+    lnum: string.isRequired,
+    n: string.isRequired,
+  }).isRequired,
+  aligned: objectOf(instanceOf(Set)).isRequired,
+});
 
 export {
   commentType,

Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ const wordSpans = (words, lnum, active, toggleActive) => {`
`13`	`13`	`const classes = [styles.word];`
`14`	`14`	`const innerText = text.map(({ _ }) => _).join(<br />);`
`15`	`15`
`16`		`- if (active && active[lnum] && active[lnum].has(n)) {`
	`16`	`+ if (active && active.aligned && active.aligned[lnum] && active.aligned[lnum].has(n)) {`
`17`	`17`	`classes.push(styles.active);`
`18`	`18`	`}`
`19`	`19`	`const onClick = () => {`
Original file line number	Diff line number	Diff line change
`@@ -102,7 +102,7 @@ const renderWord = (word, key, lnum, active, toggleActive, indent) => {`
`102`	`102`	`}`
`103`	`103`	`};`
`104`	`104`
`105`		`- if (active && active[lnum] && active[lnum].has(n)) {`
	`105`	`+ if (active && active.aligned && active.aligned[lnum] && active.aligned[lnum].has(n)) {`
`106`	`106`	`classes.push(styles.active);`
`107`	`107`	`}`
`108`	`108`