Layout save fix

components/SearchAndLayout.tsx

@@ -1,4 +1,5 @@
 import { ChangeEvent } from "react";
+import Cookies from "js-cookie";
 
 interface SearchAndLayoutProps {
     search: string;
@@ -11,8 +12,9 @@ const SearchAndLayout = ({
     search,
     setSearch,
     itemPerPage,
-    setItemPerPage
+    setItemPerPage,
-}: SearchAndLayoutProps) => (
+}: SearchAndLayoutProps) => {
+   return (
     <div className="flex gap-2 items-center pt-4">
         <input
             type="text"
@@ -34,5 +36,6 @@ const SearchAndLayout = ({
         </select>
     </div>
 );
+};
 
 export default SearchAndLayout;

hooks/useSites.ts

@@ -3,9 +3,12 @@ import axios from "axios";
 import Cookies from "js-cookie";
 
 const useSites = () => {
+    const savedLayout = Cookies.get('sites-itemPerPage');
+    const defaultLayout = savedLayout ? Number(savedLayout) : 5;
+    
     const [sites, setSites] = useState([]);
     const [currentPage, setCurrentPage] = useState(1);
-    const [itemPerPage, setItemPerPage] = useState(5);
+    const [itemPerPage, setItemPerPage] = useState(defaultLayout);
     const [total, setTotal] = useState(0);
     const [search, setSearch] = useState("");
 
@@ -22,10 +25,6 @@ const useSites = () => {
         loadSites();
     }, [loadSites]);
 
-    useEffect(() => {
-        const savedItemPerPage = Cookies.get('sites-itemPerPage');
-        if (savedItemPerPage) setItemPerPage(Number(savedItemPerPage));
-    }, []);
 
     useEffect(() => {
         Cookies.set('sites-itemPerPage', itemPerPage.toString());