Added refresh on item count per row change

CyferShepard · Dec 27, 2024 · be3c3fc · be3c3fc
1 parent 58804e0
commit be3c3fc
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 16 deletions.
diff --git a/backend/routes/api.js b/backend/routes/api.js
@@ -1122,7 +1122,7 @@ router.get("/getHistory", async (req, res) => {
     });
 
     const groupedResults = groupActivity(result.results);
-    res.send({ current_page: page, pages: result.pages, results: Object.values(groupedResults) });
+    res.send({ current_page: page, pages: result.pages, size: size, results: Object.values(groupedResults) });
   } catch (error) {
     console.log(error);
   }
@@ -1171,7 +1171,7 @@ router.post("/getLibraryHistory", async (req, res) => {
     });
 
     const groupedResults = groupActivity(result.results);
-    res.send({ current_page: page, pages: result.pages, results: Object.values(groupedResults) });
+    res.send({ current_page: page, pages: result.pages, size: size, results: Object.values(groupedResults) });
   } catch (error) {
     console.log(error);
     res.status(503);
@@ -1225,7 +1225,7 @@ router.post("/getItemHistory", async (req, res) => {
       pageSize: size,
     });
 
-    res.send({ current_page: page, pages: result.pages, results: result.results });
+    res.send({ current_page: page, pages: result.pages, size: size, results: result.results });
   } catch (error) {
     console.log(error);
     res.status(503);
@@ -1275,7 +1275,7 @@ router.post("/getUserHistory", async (req, res) => {
       pageSize: size,
     });
 
-    res.send({ current_page: page, pages: result.pages, results: result.results });
+    res.send({ current_page: page, pages: result.pages, size: size, results: result.results });
   } catch (error) {
     console.log(error);
     res.status(503);

diff --git a/src/pages/activity.jsx b/src/pages/activity.jsx
@@ -33,7 +33,7 @@ function Activity() {
   };
 
   function setItemLimit(limit) {
-    setItemCount(limit);
+    setItemCount(parseInt(limit));
     localStorage.setItem("PREF_ACTIVITY_ItemCount", limit);
   }
 
@@ -121,7 +121,7 @@ function Activity() {
     };
 
     if (config) {
-      if (!data || data.current_page !== currentPage) {
+      if (!data || (data.current_page && data.current_page !== currentPage) || (data.size && data.size !== itemCount)) {
         fetchHistory();
         fetchLibraries();
       }

diff --git a/src/pages/components/item-info.jsx b/src/pages/components/item-info.jsx
@@ -27,6 +27,7 @@ import FileMusicLineIcon from "remixicon-react/FileMusicLineIcon";
 import CheckboxMultipleBlankLineIcon from "remixicon-react/CheckboxMultipleBlankLineIcon";
 import baseUrl from "../../lib/baseurl";
 import GlobalStats from "./general/globalStats";
+import ErrorBoundary from "./general/ErrorBoundary.jsx";
 
 function ItemInfo() {
   const { Id } = useParams();
@@ -257,7 +258,7 @@ function ItemInfo() {
                   <Link
                     className="px-2"
                     to={
-                     (config.settings?.EXTERNAL_URL ?? config.hostUrl) +
+                      (config.settings?.EXTERNAL_URL ?? config.hostUrl) +
                       `/web/index.html#!/${config.IS_JELLYFIN ? "details" : "item"}?id=` +
                       (data.EpisodeId || data.Id) +
                       (config.settings.ServerID ? "&serverId=" + config.settings.ServerID : "")
@@ -357,7 +358,9 @@ function ItemInfo() {
           {["Series", "Season"].includes(data && data.Type) ? <MoreItems data={data} /> : <></>}
         </Tab>
         <Tab eventKey="tabActivity" title="Activity" className="bg-transparent">
-          <ItemActivity itemid={Id} />
+          <ErrorBoundary>
+            <ItemActivity itemid={Id} />
+          </ErrorBoundary>
         </Tab>
         <Tab eventKey="tabOptions" title="Options" className="bg-transparent">
           <ItemOptions itemid={Id} />

diff --git a/src/pages/components/item-info/item-activity.jsx b/src/pages/components/item-info/item-activity.jsx
@@ -9,7 +9,7 @@ import Config from "../../../lib/config.jsx";
 function ItemActivity(props) {
   const [data, setData] = useState();
   const token = localStorage.getItem("token");
-  const [itemCount, setItemCount] = useState(10);
+  const [itemCount, setItemCount] = useState(parseInt(localStorage.getItem("PREF_ACTIVITY_ItemCount") ?? "10"));
   const [searchQuery, setSearchQuery] = useState("");
   const [streamTypeFilter, setStreamTypeFilter] = useState("All");
   const [config, setConfig] = useState();
@@ -19,6 +19,10 @@ function ItemActivity(props) {
   const handlePageChange = (newPage) => {
     setCurrentPage(newPage);
   };
+  function setItemLimit(limit) {
+    setItemCount(parseInt(limit));
+    localStorage.setItem("PREF_ACTIVITY_ItemCount", limit);
+  }
 
   useEffect(() => {
     const fetchConfig = async () => {
@@ -56,7 +60,7 @@ function ItemActivity(props) {
       }
     };
 
-    if (!data || data.current_page !== currentPage) {
+    if (!data || (data.current_page && data.current_page !== currentPage) || (data.size && data.size !== itemCount)) {
       fetchData();
     }
 
@@ -122,7 +126,7 @@ function ItemActivity(props) {
             </div>
             <FormSelect
               onChange={(event) => {
-                setItemCount(event.target.value);
+                setItemLimit(event.target.value);
               }}
               value={itemCount}
               className="my-md-3 w-md-75 rounded-0 rounded-end"

diff --git a/src/pages/components/library/library-activity.jsx b/src/pages/components/library/library-activity.jsx
@@ -24,7 +24,7 @@ function LibraryActivity(props) {
   };
 
   function setItemLimit(limit) {
-    setItemCount(limit);
+    setItemCount(parseInt(limit));
     localStorage.setItem("PREF_LIBRARY_ACTIVITY_ItemCount", limit);
   }
 
@@ -68,7 +68,7 @@ function LibraryActivity(props) {
       }
     };
 
-    if (!data || data.current_page !== currentPage) {
+    if (!data || (data.current_page && data.current_page !== currentPage) || (data.size && data.size !== itemCount)) {
       fetchData();
     }
 

diff --git a/src/pages/components/user-info/user-activity.jsx b/src/pages/components/user-info/user-activity.jsx
@@ -13,7 +13,7 @@ import Config from "../../../lib/config.jsx";
 function UserActivity(props) {
   const [data, setData] = useState();
   const token = localStorage.getItem("token");
-  const [itemCount, setItemCount] = useState(10);
+  const [itemCount, setItemCount] = useState(parseInt(localStorage.getItem("PREF_ACTIVITY_ItemCount") ?? "10"));
   const [searchQuery, setSearchQuery] = useState("");
   const [streamTypeFilter, setStreamTypeFilter] = useState("All");
   const [libraryFilters, setLibraryFilters] = useState([]);
@@ -23,6 +23,11 @@ function UserActivity(props) {
   const [currentPage, setCurrentPage] = useState(1);
   const [isBusy, setIsBusy] = useState(false);
 
+  function setItemLimit(limit) {
+    setItemCount(parseInt(limit));
+    localStorage.setItem("PREF_ACTIVITY_ItemCount", limit);
+  }
+
   useEffect(() => {
     const fetchConfig = async () => {
       try {
@@ -105,7 +110,10 @@ function UserActivity(props) {
         });
     };
 
-    fetchHistory();
+    if (!data || (data.current_page && data.current_page !== currentPage) || (data.size && data.size !== itemCount)) {
+      fetchHistory();
+    }
+
     fetchLibraries();
 
     const intervalId = setInterval(fetchHistory, 60000 * 5);
@@ -190,7 +198,7 @@ function UserActivity(props) {
             </div>
             <FormSelect
               onChange={(event) => {
-                setItemCount(event.target.value);
+                setItemLimit(event.target.value);
               }}
               value={itemCount}
               className="my-md-3 w-md-75 rounded-0 rounded-end"