Merge pull request #19 from QortalSeth/main

Fixed bug that caused Subscribe Button to not work properly if Q-Tube was opened through a link

src/App.tsx

@@ -17,22 +17,7 @@ import { persistStore } from "redux-persist";
 import { setFilteredSubscriptions } from "./state/features/videoSlice.ts";
 import { SubscriptionObject } from "./state/features/persistSlice.ts";
 
-function App() {
-  // const themeColor = window._qdnTheme
-
-  const [theme, setTheme] = useState("dark");
-  let persistor = persistStore(store);
-
-  const filterVideosByName = (
-    subscriptionList: SubscriptionObject[],
-    userName: string
-  ) => {
-    return subscriptionList.filter(item => {
-      return item.userName === userName;
-    });
-  };
-
-  const getUserName = async () => {
+export const getUserName = async () => {
   const account = await qortalRequest({
     action: "GET_USER_ACCOUNT",
   });
@@ -43,9 +28,18 @@ function App() {
 
   if (nameData?.length > 0) return nameData[0].name;
   else return "";
-  };
+};
 
-  const subscriptionListFilter = async () => {
+export const filterVideosByName = (
+  subscriptionList: SubscriptionObject[],
+  userName: string
+) => {
+  return subscriptionList.filter(item => {
+    return item.userName === userName;
+  });
+};
+
+export const subscriptionListFilter = async () => {
   const subscriptionList = store.getState().persist.subscriptionList;
   const filterByUserName =
     store.getState().persist.subscriptionListFilter === "currentNameOnly";
@@ -54,7 +48,13 @@ function App() {
   if (filterByUserName && userName) {
     return filterVideosByName(subscriptionList, userName);
   } else return subscriptionList;
-  };
+};
+
+function App() {
+  // const themeColor = window._qdnTheme
+
+  const [theme, setTheme] = useState("dark");
+  let persistor = persistStore(store);
 
   useEffect(() => {
     const subscriptionList = store.getState().persist.subscriptionList;

src/components/common/SubscribeButton.tsx

@@ -3,11 +3,12 @@ import { MouseEvent, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../../state/store.ts";
 import {
-  resetSubscriptions,
   subscribe,
+  SubscriptionObject,
   unSubscribe,
 } from "../../state/features/persistSlice.ts";
 import { setFilteredSubscriptions } from "../../state/features/videoSlice.ts";
+import { subscriptionListFilter } from "../../App.tsx";
 
 interface SubscribeButtonProps extends ButtonProps {
   subscriberName: string;
@@ -18,19 +19,34 @@ export const SubscribeButton = ({
   ...props
 }: SubscribeButtonProps) => {
   const dispatch = useDispatch();
+  const subscriptionList = useSelector((state: RootState) => {
+    return state.persist.subscriptionList;
+  });
+
   const filteredSubscriptionList = useSelector((state: RootState) => {
     return state.video.filteredSubscriptionList;
   });
+
   const userName = useSelector((state: RootState) => state.auth.user?.name);
   const [isSubscribed, setIsSubscribed] = useState<boolean>(false);
 
-  useEffect(() => {
-    const isSubscribedToName =
-      filteredSubscriptionList.find(item => {
+  const isSubscribedToName = (subscriptionList: SubscriptionObject[]) => {
+    return (
+      subscriptionList.find(item => {
         return item.subscriberName === subscriberName;
-      }) !== undefined;
+      }) !== undefined
+    );
+  };
 
-    setIsSubscribed(isSubscribedToName);
+  useEffect(() => {
+    if (!filteredSubscriptionList || filteredSubscriptionList.length === 0) {
+      subscriptionListFilter().then(filteredList => {
+        dispatch(setFilteredSubscriptions(filteredList));
+        setIsSubscribed(isSubscribedToName(filteredList));
+      });
+    } else {
+      setIsSubscribed(isSubscribedToName(filteredSubscriptionList));
+    }
   }, []);
 
   const subscriptionData = {

src/hooks/useFetchVideos.tsx

@@ -414,8 +414,7 @@ export const useFetchVideos = () => {
     } catch (error) {}
   }, [videos]);
 
-  const getVideosCount = React.useCallback(
-    async () => {
+  const getVideosCount = React.useCallback(async () => {
     try {
       let url = `/arbitrary/resources/search?mode=ALL&includemetadata=false&limit=0&service=DOCUMENT&identifier=${QTUBE_VIDEO_BASE}`;
 
@@ -430,7 +429,9 @@ export const useFetchVideos = () => {
       const totalVideosPublished = responseData.length;
       const uniqueNames = new Set(responseData.map(video => video.name));
       const totalNamesPublished = uniqueNames.size;
-        const videosPerNamePublished = (totalVideosPublished / totalNamesPublished).toFixed(2);
+      const videosPerNamePublished = (
+        totalVideosPublished / totalNamesPublished
+      ).toFixed(0);
 
       dispatch(setTotalVideosPublished(totalVideosPublished));
       dispatch(setTotalNamesPublished(totalNamesPublished));
@@ -439,9 +440,7 @@ export const useFetchVideos = () => {
       console.log({ error });
     } finally {
     }
-    },
-    []
-  );
+  }, []);
 
   return {
     getVideos,

src/pages/Home/Home.tsx

@@ -300,19 +300,19 @@ export const Home = ({ mode }: HomeProps) => {
               sx={{ display: persistReducer.showStats ? "block" : "none" }}
             >
               <div>
-                # of Videos:{" "}
+                Videos:{" "}
                 <span style={{ fontWeight: "bold" }}>
                   {totalVideosPublished}
                 </span>
               </div>
               <div>
-                Names Publishing:{" "}
+                Publishers:{" "}
                 <span style={{ fontWeight: "bold" }}>
                   {totalNamesPublished}
                 </span>
               </div>
               <div>
-                Videos per Name:{" "}
+                Average:{" "}
                 <span style={{ fontWeight: "bold" }}>
                   {videosPerNamePublished}
                 </span>

src/pages/Home/VideoList-styles.tsx

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

src/state/features/persistSlice.ts

@@ -1,5 +1,5 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { subscriptionTabValue } from "../../constants/Misc.ts";
+import { allTabValue, subscriptionTabValue } from "../../constants/Misc.ts";
 
 type StretchVideoType = "contain" | "fill" | "cover" | "none" | "scale-down";
 type SubscriptionListFilterType = "ALL" | "currentNameOnly";
@@ -20,7 +20,7 @@ interface settingsState {
 }
 
 const initialState: settingsState = {
-  selectedTab: subscriptionTabValue,
+  selectedTab: allTabValue,
   stretchVideoSetting: "contain",
   filterType: "videos",
   subscriptionList: [],