use prop types

zfletch · zfletch · commit ed2aa84b01e7 · 2023-03-12T12:46:42.000-04:00
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "deploy": "gh-pages -d example/build"
   },
   "dependencies": {
+    "prop-types": "^15.8.1",
     "xml2js": "^0.4.23"
   },
   "peerDependencies": {
diff --git a/src/components/Alignment/Alignment.js b/src/components/Alignment/Alignment.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import { node, string } from 'prop-types';
+
 import { xmlToJson } from '../../utils/parsing';
 
 import AlignmentContext from './alignment-context';
@@ -13,4 +15,13 @@ const Alignment = ({ alignment, children }) => {
   );
 };
 
+Alignment.propTypes = {
+  alignment: string.isRequired,
+  children: node,
+};
+
+Alignment.defaultProps = {
+  children: null,
+};
+
 export default Alignment;
diff --git a/src/components/Alignment/Segment.js b/src/components/Alignment/Segment.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import { string } from 'prop-types';
+
 import SentenceContext from './sentence-context';
 
 import Segment from '../Segment';
@@ -16,4 +18,8 @@ const SegmentWithContext = ({ lnum }) => (
   </SentenceContext.Consumer>
 );
 
+SegmentWithContext.propTypes = {
+  lnum: string.isRequired,
+};
+
 export default SegmentWithContext;
diff --git a/src/components/Alignment/Sentence/Sentence.js b/src/components/Alignment/Sentence/Sentence.js
@@ -1,4 +1,7 @@
 import React, { useState, useEffect } from 'react';
+import { node, string } from 'prop-types';
+
+import { alignmentType } from '../../../types';
 
 import AlignmentContext from '../alignment-context';
 import SentenceContext from '../sentence-context';
@@ -63,7 +66,7 @@ const buildIdMap = (alignedText, sentence) => {
     idMap[lnum2][n2][lnum2] = idMap[lnum1][n1][lnum2];
   };
 
-  (sentence.wds || []).forEach((wd) => {
+  sentence.wds.forEach((wd) => {
     const { lnum } = wd.$;
 
     wd.w.forEach((word) => {
@@ -90,16 +93,16 @@ const buildIdMap = (alignedText, sentence) => {
   return idMap;
 };
 
+// eslint-disable-next-line react/prop-types
 const WrappedSentence = ({ id, json, children }) => {
-  const [active, setActive] = useState({});
+  const [active, setActive] = useState(null);
   const [idMap, setIdMap] = useState({});
   const [sentence, setSentence] = useState({});
 
   useEffect(() => {
     const alignedText = json['aligned-text'];
-    const newSentence = alignedText
-      ? alignedText.sentence.find(({ $: { id: sentenceId } }) => sentenceId === id)
-      : {};
+    const newSentence = (alignedText.sentence || [])
+      .find(({ $: { id: sentenceId } }) => sentenceId === id);
 
     setSentence(newSentence);
     setIdMap(buildIdMap(alignedText, newSentence));
@@ -133,4 +136,23 @@ const Sentence = ({ id, children }) => (
   </AlignmentContext.Consumer>
 );
 
+WrappedSentence.propTypes = {
+  id: string.isRequired,
+  json: alignmentType.isRequired,
+  children: node,
+};
+
+WrappedSentence.defaultProps = {
+  children: null,
+};
+
+Sentence.propTypes = {
+  id: string.isRequired,
+  children: node,
+};
+
+Sentence.defaultProps = {
+  children: null,
+};
+
 export default Sentence;
diff --git a/src/components/Segment/Segment.js b/src/components/Segment/Segment.js
@@ -1,4 +1,8 @@
 import React from 'react';
+import { func, string } from 'prop-types';
+
+import { activeType, sentenceType } from '../../types';
+
 import styles from './Segment.module.scss';
 
 const wordSpans = (words, lnum, active, setActive) => {
@@ -8,7 +12,7 @@ const wordSpans = (words, lnum, active, setActive) => {
     const { text, $: { n } } = word;
     const classes = [styles.word];
 
-    if (active[lnum] && active[lnum].has(n)) {
+    if (active && active[lnum] && active[lnum].has(n)) {
       classes.push(styles.active);
     }
     const onClick = () => {
@@ -31,7 +35,7 @@ const wordSpans = (words, lnum, active, setActive) => {
         onClick={onClick}
         onKeyDown={onKeyDown}
       >
-        {text[0]}
+        {(text || []).join('')}
       </span>,
     );
     spans.push(' ');
@@ -58,4 +62,15 @@ const Segment = ({
   );
 };
 
+Segment.propTypes = {
+  lnum: string.isRequired,
+  sentence: sentenceType.isRequired,
+  active: activeType,
+  setActive: func.isRequired,
+};
+
+Segment.defaultProps = {
+  active: null,
+};
+
 export default Segment;
diff --git a/src/types/index.js b/src/types/index.js
@@ -0,0 +1,15 @@
+import {
+  wordType,
+  wordListType,
+  sentenceType,
+  alignmentType,
+  activeType,
+} from './types';
+
+export {
+  wordType,
+  wordListType,
+  sentenceType,
+  alignmentType,
+  activeType,
+};
diff --git a/src/types/types.js b/src/types/types.js
@@ -0,0 +1,44 @@
+import {
+  arrayOf,
+  instanceOf,
+  objectOf,
+  shape,
+  string,
+} from 'prop-types';
+
+const wordType = shape({
+  $: shape({
+    n: string.isRequired,
+  }),
+  text: arrayOf(string),
+});
+
+const wordListType = shape({
+  $: shape({
+    lnum: string.isRequired,
+  }),
+  w: arrayOf(wordType),
+});
+
+const sentenceType = shape({
+  $: shape({
+    id: string.isRequired,
+  }),
+  wds: arrayOf(wordListType),
+});
+
+const alignmentType = shape({
+  'aligned-text': shape({
+    sentence: arrayOf(sentenceType),
+  }),
+});
+
+const activeType = objectOf(instanceOf(Set));
+
+export {
+  wordType,
+  wordListType,
+  sentenceType,
+  alignmentType,
+  activeType,
+};
diff --git a/yarn.lock b/yarn.lock
@@ -9484,7 +9484,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
