Q-Tube Statistics shown on main page are now in their own component for easier porting to other Q-Apps.

src/components/StatsData.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect } from "react";
+import { styled } from "@mui/system";
+import { Grid } from "@mui/material";
+import { useFetchVideos } from "../hooks/useFetchVideos.tsx";
+import { useSelector } from "react-redux";
+import { RootState } from "../state/store.ts";
+
+export const StatsData = () => {
+  const StatsCol = styled(Grid)(({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    padding: "20px 0px",
+    backgroundColor: theme.palette.background.default,
+    borderTop: `1px solid ${theme.palette.background.paper}`,
+    borderRight: `1px solid ${theme.palette.background.paper}`,
+  }));
+
+  const {
+    getVideos,
+    getNewVideos,
+    checkNewVideos,
+    getVideosFiltered,
+    getVideosCount,
+  } = useFetchVideos();
+
+  const persistReducer = useSelector((state: RootState) => state.persist);
+  const totalVideosPublished = useSelector(
+    (state: RootState) => state.global.totalVideosPublished
+  );
+  const totalNamesPublished = useSelector(
+    (state: RootState) => state.global.totalNamesPublished
+  );
+  const videosPerNamePublished = useSelector(
+    (state: RootState) => state.global.videosPerNamePublished
+  );
+
+  useEffect(() => {
+    getVideosCount();
+  }, [getVideosCount]);
+
+  return (
+    <StatsCol sx={{ display: persistReducer.showStats ? "block" : "none" }}>
+      <div>
+        Videos:{" "}
+        <span style={{ fontWeight: "bold" }}>{totalVideosPublished}</span>
+      </div>
+      <div>
+        Publishers:{" "}
+        <span style={{ fontWeight: "bold" }}>{totalNamesPublished}</span>
+      </div>
+      <div>
+        Average:{" "}
+        <span style={{ fontWeight: "bold" }}>{videosPerNamePublished}</span>
+      </div>
+    </StatsCol>
+  );
+};

src/pages/Home/Home.tsx

@@ -25,7 +25,6 @@ import {
   FiltersSubContainer,
   ProductManagerRow,
   FiltersRadioButton,
-  StatsCol,
 } from "./VideoList-styles";
 import { SubtitleContainer } from "./Home-styles";
 
@@ -45,6 +44,7 @@ import { TabContext, TabList, TabPanel } from "@mui/lab";
 import VideoList from "./VideoList.tsx";
 import { allTabValue, subscriptionTabValue } from "../../constants/Misc.ts";
 import { setHomePageSelectedTab } from "../../state/features/persistSlice.ts";
+import { StatsData } from "../../components/StatsData.tsx";
 
 interface HomeProps {
   mode?: string;
@@ -68,15 +68,6 @@ export const Home = ({ mode }: HomeProps) => {
   const selectedCategoryVideos = useSelector(
     (state: RootState) => state.video.selectedCategoryVideos
   );
-  const totalVideosPublished = useSelector(
-    (state: RootState) => state.global.totalVideosPublished
-  );
-  const totalNamesPublished = useSelector(
-    (state: RootState) => state.global.totalNamesPublished
-  );
-  const videosPerNamePublished = useSelector(
-    (state: RootState) => state.global.videosPerNamePublished
-  );
 
   const { videos: globalVideos, filteredSubscriptionList } = useSelector(
     (state: RootState) => state.video
@@ -124,13 +115,8 @@ export const Home = ({ mode }: HomeProps) => {
   const afterFetch = useRef(false);
   const isFetching = useRef(false);
 
-  const {
-    getVideos,
-    getNewVideos,
-    checkNewVideos,
-    getVideosFiltered,
-    getVideosCount,
-  } = useFetchVideos();
+  const { getVideos, getNewVideos, checkNewVideos, getVideosFiltered } =
+    useFetchVideos();
 
   const getVideosHandler = React.useCallback(
     async (reset?: boolean, resetFilters?: boolean) => {
@@ -168,13 +154,12 @@ export const Home = ({ mode }: HomeProps) => {
   );
 
   useEffect(() => {
-    getVideosCount();
     if (isFiltering && filterValue !== prevVal?.current) {
       prevVal.current = filterValue;
 
       getVideosHandler();
     }
-  }, [filterValue, isFiltering, filteredVideos, getVideosCount]);
+  }, [filterValue, isFiltering, filteredVideos]);
 
   const getVideosHandlerMount = React.useCallback(async () => {
     if (firstFetch.current) return;
@@ -298,28 +283,7 @@ export const Home = ({ mode }: HomeProps) => {
       <Grid container sx={{ width: "100%" }}>
         <FiltersCol item xs={12} md={2} lg={2} xl={2} sm={3}>
           <FiltersContainer>
-            <StatsCol
-              sx={{ display: persistReducer.showStats ? "block" : "none" }}
-            >
-              <div>
-                Videos:{" "}
-                <span style={{ fontWeight: "bold" }}>
-                  {totalVideosPublished}
-                </span>
-              </div>
-              <div>
-                Publishers:{" "}
-                <span style={{ fontWeight: "bold" }}>
-                  {totalNamesPublished}
-                </span>
-              </div>
-              <div>
-                Average:{" "}
-                <span style={{ fontWeight: "bold" }}>
-                  {videosPerNamePublished}
-                </span>
-              </div>
-            </StatsCol>
+            <StatsData />
             <Input
               id="standard-adornment-name"
               onChange={e => {

src/pages/Home/VideoList-styles.tsx

@@ -237,16 +237,6 @@ export const FiltersCol = styled(Grid)(({ theme }) => ({
   borderRight: `1px solid ${theme.palette.background.paper}`,
 }));
 
-export const StatsCol = styled(Grid)(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  width: "100%",
-  padding: "20px 0px",
-  backgroundColor: theme.palette.background.default,
-  borderTop: `1px solid ${theme.palette.background.paper}`,
-  borderRight: `1px solid ${theme.palette.background.paper}`,
-}));
-
 export const FiltersContainer = styled(Box)(({ theme }) => ({
   display: "flex",
   flexDirection: "column",