added datatable-translatable

package.json

@@ -35,7 +35,7 @@
     "@material-ui/styles": "^4.11.3",
     "axios": "^0.21.0",
     "bible-reference-range": "^1.0.1",
-    "datatable-translatable": "file:.yalc/datatable-translatable",
+    "datatable-translatable": "^1.0.16",
     "deep-freeze": "^0.0.1",
     "gitea-react-toolkit": "2.2.3",
     "lodash.isequal": "^4.5.0",

public/build_number

@@ -1 +1 @@
-208-75bb9d4
+209-dba0ed7

src/components/translatable/ChapterVerseFilters.js

@@ -1,5 +1,6 @@
 import { FormControl, InputLabel, ListItemText, MenuItem, Select, Box } from "@material-ui/core";
-import React, { useCallback,useState } from "react";
+import React, { useState } from "react";
+import { useDeepCompareCallback } from "use-deep-compare";
 
 const SelectSimple = ({options,onChange,label,value,...props}) => {
   return (
@@ -22,13 +23,13 @@ const SelectSimple = ({options,onChange,label,value,...props}) => {
   )
 }
 
+const column = { name: "Reference", filterType: "custom" };
 
 const ChapterVerseFilters = ({ cvData, filters, onChange, index }) => {
   const [chapter, setChapter] = useState("All");
   const [verse, setVerse] = useState("All");
-  const column = { name: "Reference", filterType: "custom" };
 
-  const handleChapterChange = useCallback((event) => {
+  const handleChapterChange = useDeepCompareCallback((event) => {
     event.preventDefault();
     const chapter = event.target.value;
     const verse = "All";
@@ -40,16 +41,16 @@ const ChapterVerseFilters = ({ cvData, filters, onChange, index }) => {
     }
     filters[index] = cvData[chapter].map((verse) => `${chapter}:${verse}`)
     onChange(filters[index], index, column)
-  }, [onChange, index, column])
+  }, [onChange,index,filters,cvData])
 
-  const handleVerseChange = useCallback((event) => {
+  const handleVerseChange = useDeepCompareCallback((event) => {
     event.preventDefault()
     if (chapter === "All") return;
     const verse = event.target.value;
     filters[index] = [`${chapter}:${verse}`]
     onChange(filters[index], index, column)
     setVerse(verse);
-  },[chapter,onChange, index, column])
+  }, [onChange,index,filters,chapter])
 
   return (
     <Box sx={{display:"grid", gridTemplateColumns: "1fr 1fr", gap: "17px"}}>

yarn.lock

@@ -5671,8 +5671,10 @@ data-urls@^1.0.0, data-urls@^1.1.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
-"datatable-translatable@file:.yalc/datatable-translatable":
-  version "1.0.15"
+datatable-translatable@^1.0.16:
+  version "1.0.16"
+  resolved "https://registry.yarnpkg.com/datatable-translatable/-/datatable-translatable-1.0.16.tgz#0868adad5bc818418fd6dd4982b18bf2445f3a92"
+  integrity sha512-rwKUIApCLa7Cqui4Qd+WDd7yvRghVVEvmkBfBAu1KcSl+2gPSQogspWYN/1PBpBdbm9KUmvan510Vqg/JNbiEw==
   dependencies:
     deep-freeze "^0.0.1"
     lodash.isequal "^4.5.0"