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 = () => { +
+
+ +
+
diff --git a/src/screens/Library/AllVocabs/AllVocabs.scss b/src/screens/Library/AllVocabs/AllVocabs.scss index ce554e73..5d03a8dd 100644 --- a/src/screens/Library/AllVocabs/AllVocabs.scss +++ b/src/screens/Library/AllVocabs/AllVocabs.scss @@ -34,4 +34,13 @@ } } } + + .filters { + display: flex; + justify-content: flex-end; + + .search { + width: 300px; + } + } } diff --git a/src/utils/api.js b/src/utils/api.js index cb5b34bb..af392ef5 100644 --- a/src/utils/api.js +++ b/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) =>