Add vocabsearch to "All Vocabs" screen (#110)

* fix: fix empty placeholder in textinput

* feat: add vocab search to all-vocabs screen

* feat: use debounce hook for vocab search

src/Components/Form/TextInput/TextInput.jsx

@@ -9,7 +9,7 @@ import "./TextInput.scss";
 const TextInput = ({
   type = "text",
   inputRef = null,
-  placeholder = null,
+  placeholder = "",
   onChange = () => null,
   error = false,
   errorText = null,

src/i18n/locales/en/default.json

@@ -55,7 +55,8 @@
     "termsAndConditions": "Terms and Conditions",
     "privacyPolicy": "Privacy Policy",
     "daysAgo_one": "{{count}} day ago",
-    "daysAgo_other": "{{count}} days ago"
+    "daysAgo_other": "{{count}} days ago",
+    "search": "Search"
   },
   "components": {
     "groupForm": {

src/screens/Library/AllVocabs/AllVocabs.jsx

@@ -11,10 +11,12 @@ import RemoveCircleIcon from "@material-ui/icons/RemoveCircle";
 
 import Button from "../../../Components/Button/Button.jsx";
 import ConfirmDialog from "../../../Components/ConfirmDialog/ConfirmDialog.jsx";
+import TextInput from "../../../Components/Form/TextInput/TextInput.jsx";
 import Modal from "../../../Components/Modal/Modal.jsx";
 import Table from "../../../Components/Table/Table.jsx";
 import VocabForm from "../../../Forms/VocabForm/VocabForm.jsx";
 
+import useDebounce from "../../../hooks/useDebounce.js";
 import useSnack from "../../../hooks/useSnack.js";
 import { getGroupVocabulary, deleteVocabulary } from "../../../utils/api.js";
 
@@ -27,13 +29,16 @@ const AllVocabs = () => {
   const { packageId, groupId } = useParams();
 
   const [data, setData] = useState([]);
+  const [search, setSearch] = useState("");
   const [currentVocab, setCurrentVocab] = useState(null);
   const [showVocabModal, setShowVocabModal] = useState(false);
   const [showDeleteConfirmationModal, setShowDeleteConfirmationModal] =
     useState(false);
 
+  const debouncedSearch = useDebounce(search, 200);
+
   const fetchVocabs = useCallback(() => {
-    getGroupVocabulary(groupId).then((response) => {
+    getGroupVocabulary(groupId, debouncedSearch).then((response) => {
       setData(() =>
         response.data.map((elem) => {
           return {
@@ -43,7 +48,7 @@ const AllVocabs = () => {
         })
       );
     });
-  }, [groupId]);
+  }, [groupId, debouncedSearch]);
 
   const editVocab = useCallback((voc) => {
     setCurrentVocab(voc);
@@ -163,6 +168,15 @@ const AllVocabs = () => {
             <AddCircleOutlinedIcon onClick={addVocab} />
           </Button>
         </div>
+        <div class="filters">
+          <div className="search">
+            <TextInput
+              placeholder={t("global.search")}
+              onChange={setSearch}
+              value={search}
+            />
+          </div>
+        </div>
         <div>
           <Table columns={columns} data={data} />
         </div>

src/screens/Library/AllVocabs/AllVocabs.scss

@@ -34,4 +34,13 @@
       }
     }
   }
+
+  .filters {
+    display: flex;
+    justify-content: flex-end;
+
+    .search {
+      width: 300px;
+    }
+  }
 }

src/utils/api.js

@@ -63,8 +63,8 @@ export const createVocabulary = (
     `/languagePackage/${languagePackageId}/group/${groupId}/vocabulary?activate=${activate}`,
     data
   );
-export const getGroupVocabulary = (groupId) =>
-  api.get(`/group/${groupId}/vocabulary`);
+export const getGroupVocabulary = (groupId, search) =>
+  api.get(`/group/${groupId}/vocabulary?search=${search}`);
 export const modifyVocabulary = (data) =>
   api.put(`/vocabulary/${data.id}`, data);
 export const deleteVocabulary = (vocabularyId) =>