diff --git a/src/Components/Form/TextInput/TextInput.jsx b/src/Components/Form/TextInput/TextInput.jsx
index 02426fd8..3d632798 100644
--- a/src/Components/Form/TextInput/TextInput.jsx
+++ b/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,
diff --git a/src/i18n/locales/en/default.json b/src/i18n/locales/en/default.json
index 4e701f73..7c36f555 100644
--- a/src/i18n/locales/en/default.json
+++ b/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": {
diff --git a/src/screens/Library/AllVocabs/AllVocabs.jsx b/src/screens/Library/AllVocabs/AllVocabs.jsx
index 39594001..ed368bd7 100644
--- a/src/screens/Library/AllVocabs/AllVocabs.jsx
+++ b/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 = () => {