useSites Hook & Searchbar & Layout component

hooks/useSites.ts

@@ -0,0 +1,49 @@
+import { useState, useEffect, useCallback } from "react";
+import axios from "axios";
+import Cookies from "js-cookie";
+
+const useSites = () => {
+    const [sites, setSites] = useState([]);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [itemPerPage, setItemPerPage] = useState(5);
+    const [total, setTotal] = useState(0);
+    const [search, setSearch] = useState("");
+
+    const loadSites = useCallback(() => {
+        axios.get('/api/sites/get_all', {
+            params: { currentPage, itemPerPage, search }
+        }).then((response) => {
+            setSites(response.data.sites);
+            setTotal(response.data.total);
+        });
+    }, [currentPage, itemPerPage, search]);
+
+    useEffect(() => {
+        loadSites();
+    }, [loadSites]);
+
+    useEffect(() => {
+        const savedItemPerPage = Cookies.get('sites-itemPerPage');
+        if (savedItemPerPage) setItemPerPage(Number(savedItemPerPage));
+    }, []);
+
+    useEffect(() => {
+        Cookies.set('sites-itemPerPage', itemPerPage.toString());
+    }, [itemPerPage]);
+
+    const handlePageChange = (page: number) => setCurrentPage(page);
+
+    return {
+        sites,
+        currentPage,
+        itemPerPage,
+        total,
+        search,
+        setSearch,
+        handlePageChange,
+        setItemPerPage,
+        loadSites
+    };
+};
+
+export default useSites;