feat: membre list filter history

src/main/webapp/src/components/SearchBar.jsx

@@ -7,8 +7,8 @@ const removeDiacritics = str => {
 }
 
 
-export function SearchBar({search}) {
+export function SearchBar({search, defaultValue = ""}) {
-    const [searchInput, setSearchInput] = useState("");
+    const [searchInput, setSearchInput] = useState(defaultValue);
 
     const handelChange = (e) => {
         setSearchInput(e.target.value);
@@ -40,4 +40,4 @@ export function SearchBar({search}) {
             </button>
         </div>
     </div>
-}
+}

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 setFilter = (filter) => {
-    const [lastSearch, setLastSearch] = useState("");
+        navigate("#" + encodeURI(JSON.stringify(filter)))
-    const [paymentFilter, setPaymentFilter] = useState(2);
+    }
-    const [order, setOrder] = useState("");
+    const filter = {
-    const [catFilter, setCatFilter] = useState("");
+        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}`);
+        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}`;
-    }, [hash, clubFilter, stateFilter, lastSearch, paymentFilter, order, catFilter]);
+        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);
+        setFilter({...filter, search: search});
-    }
-
-    const onOrderChange = (newOrder) => {
-        setOrder(newOrder.join(","));
     }
 
     return <>
         <div>
             <div className="row">
                 <div className="col-lg-9">
-                    <SearchBar search={search}/>
+                    <SearchBar search={search} defaultValue={filter.search}/>
                     {data
                         ? <MakeCentralPanel data={data} visibleMember={memberData} navigate={navigate} showLicenceState={showLicenceState}
-                                            page={page} source={source}/>
+                                            page={filter.page} setPage={e => setFilter({...filter, page: e})} source={source}/>
                         : error
                             ? <AxiosError error={error}/>
                             : <Def/>
@@ -117,17 +128,24 @@ export function MemberList({source}) {
                     <div className="card mb-4">
                         <div className="card-header">Trie</div>
                         <div className="card-body">
-                            <OrderBar onOrderChange={onOrderChange} source={source}/>
+                            <OrderBar onOrderChange={e => setFilter({...filter, order: e.join(",")})} defaultValues={filter.order} source={source}/>
                         </div>
                     </div>
 
                     <div className="card mb-4">
                         <div className="card-header">Filtre</div>
                         <div className="card-body">
-                            <FiltreBar showLicenceState={showLicenceState} setShowLicenceState={setShowLicenceState}
+                            <FiltreBar showLicenceState={showLicenceState}
-                                       clubFilter={clubFilter} setClubFilter={setClubFilter} source={source}
+                                       setShowLicenceState={setShowLicenceState}
-                                       stateFilter={stateFilter} setStateFilter={setStateFilter} paymentFilter={paymentFilter}
+                                       clubFilter={filter.club}
-                                       setPaymentFilter={setPaymentFilter} catFilter={catFilter} setCatFilter={setCatFilter}/>
+                                       setClubFilter={e => setFilter({...filter, club: e})}
+                                       source={source}
+                                       stateFilter={filter.licenceRequest}
+                                       setStateFilter={e => setFilter({...filter, licenceRequest: e})}
+                                       paymentFilter={filter.payment}
+                                       setPaymentFilter={e => setFilter({...filter, payment: e})}
+                                       catFilter={filter.categorie}
+                                       setCatFilter={e => setFilter({...filter, categorie: e})}/>
                         </div>
                     </div>
 
@@ -355,11 +373,11 @@ function FileInput() {
     );
 }
 
-function MakeCentralPanel({data, visibleMember, navigate, showLicenceState, page, source}) {
+function MakeCentralPanel({data, visibleMember, navigate, showLicenceState, page, setPage, source}) {
     const pages = []
     for (let i = 1; i <= data.page_count; i++) {
         pages.push(<li key={i} className={"page-item " + ((page === i) ? "active" : "")}>
-            <span className="page-link" onClick={() => navigate("#" + i)}>{i}</span>
+            <span className="page-link" onClick={() => setPage(i)}>{i}</span>
         </li>);
     }
 
@@ -376,10 +394,10 @@ function MakeCentralPanel({data, visibleMember, navigate, showLicenceState, page
             <nav aria-label="Page navigation">
                 <ul className="pagination justify-content-center">
                     <li className={"page-item" + ((page <= 1) ? " disabled" : "")}>
-                        <span className="page-link" onClick={() => navigate("#" + (page - 1))}>&laquo;</span></li>
+                        <span className="page-link" onClick={() => setPage(page - 1)}>&laquo;</span></li>
                     {pages}
                     <li className={"page-item" + ((page >= data.page_count) ? " disabled" : "")}>
-                        <span className="page-link" onClick={() => navigate("#" + (page + 1))}>&raquo;</span></li>
+                        <span className="page-link" onClick={() => setPage(page + 1)}>&raquo;</span></li>
                 </ul>
             </nav>
         </div>
@@ -430,8 +448,8 @@ function MakeRow({member, showLicenceState, navigate, source}) {
     }
 }
 
-function OrderBar({onOrderChange, source}) {
+function OrderBar({onOrderChange, defaultValues = "", source}) {
-    const [orderCriteria, setOrderCriteria] = useState(['']);
+    const [orderCriteria, setOrderCriteria] = useState([...defaultValues.split(",").filter(c => c !== ''), '']);
 
     const handleChange = (index, value) => {
         const newCriteria = [...orderCriteria];

src/main/webapp/src/pages/admin/member/MemberPage.jsx

@@ -34,13 +34,13 @@ export function MemberPage() {
                 }
             }
         ).then(_ => {
-            navigate("/admin/member")
+            navigate(-1)
         })
     }
 
     return <>
         <h2>Page membre</h2>
-        <button type="button" className="btn btn-link" onClick={() => navigate("/admin/member")}>
+        <button type="button" className="btn btn-link" onClick={() => navigate(-1)}>
             &laquo; retour
         </button>
         {data

src/main/webapp/src/pages/club/member/MemberPage.jsx

@@ -33,13 +33,13 @@ export function MemberPage() {
                 }
             }
         ).then(_ => {
-            navigate("/club/member")
+            navigate(-1)
         })
     }
 
     return <>
         <h2>Page membre</h2>
-        <button type="button" className="btn btn-link" onClick={() => navigate("/club/member")}>
+        <button type="button" className="btn btn-link" onClick={() => navigate(-1)}>
             &laquo; retour
         </button>
         {data