added react query

package.json

@@ -12,6 +12,7 @@
     "@mui/icons-material": "^5.15.3",
     "@mui/material": "^5.15.3",
     "@react-google-maps/api": "^2.19.2",
+    "@tanstack/react-query": "^5.17.9",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
@@ -25,7 +26,6 @@
     "react": "^18.2.0",
     "react-auth-kit": "2.8.2",
     "react-dom": "^18.2.0",
-    "react-google-autocomplete": "^2.7.3",
     "react-google-places-autocomplete": "^4.0.1",
     "react-lines-ellipsis": "^0.15.4",
     "react-paginate": "^8.2.0",
@@ -62,6 +62,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@tanstack/eslint-plugin-query": "^5.17.7",
     "tailwindcss": "^3.4.1"
   }
 }

src/App.js

@@ -7,10 +7,10 @@ import Footer from "./components/Footer";
 import {ConfigProvider, theme} from "antd";
 
 function App() {
-    const { darkAlgorithm } = theme;
+    const {darkAlgorithm} = theme;
     return (
 
-                <ConfigProvider theme={{algorithm:darkAlgorithm,hashed:false}}>
+        <ConfigProvider theme={{algorithm: darkAlgorithm, hashed: false}}>
             <AuthProvider
                 authName={"_auth"} authType={"cookie"}
                 refresh={refreshApi}
@@ -20,7 +20,7 @@ function App() {
                 <Footer/>
 
             </AuthProvider>
-                </ConfigProvider>
+        </ConfigProvider>
 
     );
 }

src/components/Error.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import {Alert} from "antd";
 
-function Error(props) {
+function Error({search}) {
     return (
         <div className="container mb-8">
-            <Alert message={<div className="text-text text-xl">Keine Events gefunden</div>} type="error" showIcon></Alert>
+            <Alert message={<div className="text-text text-xl">Keine Events gefunden für "{search}"</div>} type="error" showIcon></Alert>
         </div>
     );
 }

src/components/FilterAndSearchBar.js

@@ -3,7 +3,7 @@ import {Button, Dropdown, Input, Space} from "antd";
 import {ArrowDownOutlined, ArrowUpOutlined, DownOutlined, SearchOutlined} from "@ant-design/icons";
 
 
-function FilterAndSearchBar({setSort, setSearch, search, setLoading}) {
+function FilterAndSearchBar({setSort, setSearch, search}) {
 
 
     const [searchValue, setSearchValue] = useState("")
@@ -12,7 +12,6 @@ function FilterAndSearchBar({setSort, setSearch, search, setLoading}) {
     function searchfunction() {
         setSearch(searchValue)
         setShowState(false)
-        setLoading(true)
     }
 
     const items = [

src/components/Home.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react'
+import React, { useState} from 'react'
 
 
 import EventCard from "./EventCard";
@@ -8,104 +8,80 @@ import FilterAndSearchBar from "./FilterAndSearchBar";
 import Error from "./Error";
 import Loading from "./Loading";
 import {Divider, Pagination} from "antd";
+import {useQuery} from "@tanstack/react-query";
 
 
 const Home = () => {
 
-
-    const [currentPage, setCurrentPage] = useState(1)
-    const [eventsPerPage, setEventsPerPage] = useState(5)
-    const [events, setEvents] = useState([])
+    const [page, setPage] = useState(1)
+    const [eventsPerPage, setEventsPerPage] = useState(3)
     const [sort, setSort] = useState("")
     const [search, setSearch] = useState("")
-    const [loading, setLoading] = useState(true)
 
 
-    useEffect(() => {
-        axios.get(process.env.REACT_APP_BACKEND_URL + "/api/event", {
-            params: {
-                sort: sort,
-                search: search.toLowerCase()
-            }
-        }).then((res) => {
-            setLoading(false)
-            setEvents(res.data)
-        }, (err) => {
-            setLoading(false)
-            console.log(err)
-        })
-
-// eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [sort, search]);
-
-    const startIndex = (currentPage - 1) * eventsPerPage
-    const endIndex = startIndex + eventsPerPage
-    const currentEvents = events.slice(startIndex, endIndex)
-
-    const handlePageChange = (selectedPage) => {
-        console.log(selectedPage)
-        setCurrentPage(selectedPage)
-    }
+
+    const eventsQuery = useQuery({
+        queryKey: ["events", page, eventsPerPage,sort,search],
+        queryFn: async () => {
+            const res = await axios.get(process.env.REACT_APP_BACKEND_URL + "/api/event", {
+                params: {
+                    sort: sort,
+                    search: search.toLowerCase(),
+                    page: page-1,
+                    size: eventsPerPage
+                }
+            })
+            return await res.data
+        },
+        keepPreviousData:true
+    })
+
+
+
+
+
+
+
     const onShowSizeChange = (current, pageSize) => {
         setEventsPerPage(pageSize)
-        console.log(current, pageSize);
     };
 
+
+
+
     return (
         <div className="container">
             <HomeHeader/>
             <Divider className="bg-primary-100 w-full mt-5 m-0 opacity-50" orientationMargin=""/>
             <div className="pb-4 pt-5">
                 <div className="flex md:flex-row flex-col justify-between "><FilterAndSearchBar
-                    setLoading={setLoading} setSort={setSort} setSearch={setSearch}
+                    setSort={setSort} setSearch={setSearch}
                     search={search}></FilterAndSearchBar>
                     <div
                         className="text-text text-center md:text-end font-heading text-4xl order-first md:order-last pb-4 md:pb-0">Aktuelle
                         Events
                     </div>
                 </div>
             </div>
-            {loading &&
+            {eventsQuery.isLoading &&
                 <Loading></Loading>
 
 
             }
-            {!loading &&
-                currentEvents.map(event => (
-
-                    <EventCard key={event.id} event={event} button={true}></EventCard>
-                ))}
-            {currentEvents.length < 1 && search.length > 0 && <Error></Error>}
-
-            {/*
-            <nav aria-label="Event page navigation" className="mt-5">
-                <div className="d-flex flex-row justify-content-between">
-                    <EventsPerPage eventsPerPage={eventsPerPage} setEventsPerPage={setEventsPerPage} events={events}
-                                   setTotalPages={setTotalPages}></EventsPerPage>
-                    <ReactPaginate pageCount={totalPages}
-                                   onPageChange={handlePageChange}
-                                   forcePage={currentPage}
-                                   previousLabel={"<<"}
-                                   nextLabel={">>"}
-                                   breakClassName="page-item"
-                                   breakLinkClassName="page-link"
-                                   containerClassName="pagination justify-content-center"
-                                   pageClassName="page-item"
-                                   pageLinkClassName="page-link"
-                                   previousClassName="page-item"
-                                   previousLinkClassName="page-link"
-                                   nextClassName="page-item"
-                                   nextLinkClassName="page-link"
-                                   activeClassName="active color-pagination"
-
-                    />
-                    <div></div>
-                </div>
-            </nav>*/}
+
+
+            {eventsQuery.data && eventsQuery.data.content.map((e) => (
+            <EventCard key={e.id} event={e} button={true}></EventCard>
+            ))}
+            {!eventsQuery.isLoading &&eventsQuery.data.empty && <Error search={search}></Error>
+            }
+
+
             <div className="flex flex-row justify-center">
-                <Pagination showSizeChanger pageSizeOptions={[3, 5, 10, 20, 50]}
-                            onShowSizeChange={onShowSizeChange} current={currentPage} total={events.length}
-                            defaultPageSize={eventsPerPage} onChange={(page) => handlePageChange(page)}/>;
+                {!eventsQuery.isLoading && <Pagination showSizeChanger pageSizeOptions={[3, 5, 10, 20, 50]}
+                                                       onShowSizeChange={onShowSizeChange} current={page} total={eventsQuery.data.totalElements}
+                                                       defaultPageSize={eventsPerPage} onChange={(page)=>{setPage(page)
+                                                       console.log(page)}}/>}
             </div>
 
         </div>

src/index.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
+import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
 
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
+const queryClient = new QueryClient()
 root.render(
   <React.StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <App /></QueryClientProvider>
   </React.StrictMode>,
   document.getElementById('root')
 );