diff --git a/src/main/webapp/src/components/SearchBar.jsx b/src/main/webapp/src/components/SearchBar.jsx index 6140436..172f668 100644 --- a/src/main/webapp/src/components/SearchBar.jsx +++ b/src/main/webapp/src/components/SearchBar.jsx @@ -7,8 +7,8 @@ const removeDiacritics = str => { } -export function SearchBar({search}) { - const [searchInput, setSearchInput] = useState(""); +export function SearchBar({search, defaultValue = ""}) { + const [searchInput, setSearchInput] = useState(defaultValue); const handelChange = (e) => { setSearchInput(e.target.value); @@ -40,4 +40,4 @@ export function SearchBar({search}) { -} \ No newline at end of file +} diff --git a/src/main/webapp/src/pages/MemberList.jsx b/src/main/webapp/src/pages/MemberList.jsx index bf55622..f454860 100644 --- a/src/main/webapp/src/pages/MemberList.jsx +++ b/src/main/webapp/src/pages/MemberList.jsx @@ -14,37 +14,52 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import {faEuroSign} from "@fortawesome/free-solid-svg-icons"; +let lastRefresh = ""; + export function MemberList({source}) { const {hash} = useLocation(); const navigate = useNavigate(); - let page = Number(hash.substring(1)); - page = (page > 0) ? page : 1; const [memberData, setMemberData] = useState([]); const [licenceData, setLicenceData] = useState([]); const [showLicenceState, setShowLicenceState] = useState(false); - const [clubFilter, setClubFilter] = useState(""); - const [stateFilter, setStateFilter] = useState(4) - const [lastSearch, setLastSearch] = useState(""); - const [paymentFilter, setPaymentFilter] = useState(2); - const [order, setOrder] = useState(""); - const [catFilter, setCatFilter] = useState(""); + + const setFilter = (filter) => { + navigate("#" + encodeURI(JSON.stringify(filter))) + } + const filter = { + page: 1, + search: "", + club: "", + licenceRequest: 4, + payment: 2, + order: "", + categorie: "", + ...JSON.parse(decodeURI(hash.substring(1)) || "{}"), + } const setLoading = useLoadingSwitcher() const { data, error, refresh - } = useFetch(`/member/find/${source}?page=${page}&licenceRequest=${stateFilter}&payment=${paymentFilter}&order=${order}&categorie=${catFilter}`, setLoading, 1) - + } = useFetch(`/member/find/${source}?page=${filter.page}&search=${filter.search}&club=${filter.club}&licenceRequest=${filter.licenceRequest}&payment=${filter.payment}&order=${filter.order}&categorie=${filter.categorie}`, setLoading, 1) useEffect(() => { - refresh(`/member/find/${source}?page=${page}&search=${lastSearch}&club=${clubFilter}&licenceRequest=${stateFilter}&payment=${paymentFilter}&order=${order}&categorie=${catFilter}`); - }, [hash, clubFilter, stateFilter, lastSearch, paymentFilter, order, catFilter]); + const tmp = `/member/find/${source}?page=${filter.page}&search=${filter.search}&club=${filter.club}&licenceRequest=${filter.licenceRequest}&payment=${filter.payment}&order=${filter.order}&categorie=${filter.categorie}`; + if (tmp === lastRefresh) + return; + lastRefresh = tmp + refresh(lastRefresh); + }, [hash]); useEffect(() => { if (!data) return; + if (data.page_count < filter.page) { + setFilter({...filter, page: 1}); + } + const data2 = []; for (const e of data.result) { data2.push({ @@ -81,23 +96,19 @@ export function MemberList({source}) { }, [showLicenceState]); const search = (search) => { - if (search === lastSearch) + if (search === filter.search) return; - setLastSearch(search); - } - - const onOrderChange = (newOrder) => { - setOrder(newOrder.join(",")); + setFilter({...filter, search: search}); } return <>