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,44 +17,44 @@ import { persistStore } from "redux-persist";
 import { setFilteredSubscriptions } from "./state/features/videoSlice.ts";
 import { SubscriptionObject } from "./state/features/persistSlice.ts";
 
-function App() {
+export const getUserName = async () => {
-  // const themeColor = window._qdnTheme
+  const account = await qortalRequest({
+    action: "GET_USER_ACCOUNT",
+  });
+  const nameData = await qortalRequest({
+    action: "GET_ACCOUNT_NAMES",
+    address: account.address,
+  });
 
-  const [theme, setTheme] = useState("dark");
+  if (nameData?.length > 0) return nameData[0].name;
-  let persistor = persistStore(store);
+  else return "";
+};
 
-  const filterVideosByName = (
+export const filterVideosByName = (
-    subscriptionList: SubscriptionObject[],
+  subscriptionList: SubscriptionObject[],
-    userName: string
+  userName: string
-  ) => {
+) => {
-    return subscriptionList.filter(item => {
+  return subscriptionList.filter(item => {
-      return item.userName === userName;
+    return item.userName === userName;
-    });
+  });
-  };
+};
 
-  const getUserName = async () => {
+export const subscriptionListFilter = async () => {
-    const account = await qortalRequest({
+  const subscriptionList = store.getState().persist.subscriptionList;
-      action: "GET_USER_ACCOUNT",
+  const filterByUserName =
-    });
+    store.getState().persist.subscriptionListFilter === "currentNameOnly";
-    const nameData = await qortalRequest({
+  const userName = await getUserName();
-      action: "GET_ACCOUNT_NAMES",
-      address: account.address,
-    });
 
-    if (nameData?.length > 0) return nameData[0].name;
+  if (filterByUserName && userName) {
-    else return "";
+    return filterVideosByName(subscriptionList, userName);
-  };
+  } else return subscriptionList;
+};
 
-  const subscriptionListFilter = async () => {
+function App() {
-    const subscriptionList = store.getState().persist.subscriptionList;
+  // const themeColor = window._qdnTheme
-    const filterByUserName =
-      store.getState().persist.subscriptionListFilter === "currentNameOnly";
-    const userName = await getUserName();
 
-    if (filterByUserName && userName) {
+  const [theme, setTheme] = useState("dark");
-      return filterVideosByName(subscriptionList, userName);
+  let persistor = persistStore(store);
-    } else return subscriptionList;
-  };
 
   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 = (subscriptionList: SubscriptionObject[]) => {
-    const isSubscribedToName =
+    return (
-      filteredSubscriptionList.find(item => {
+      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,34 +414,33 @@ export const useFetchVideos = () => {
     } catch (error) {}
   }, [videos]);
 
-  const getVideosCount = React.useCallback(
+  const getVideosCount = React.useCallback(async () => {
-    async () => {
+    try {
-      try {
+      let url = `/arbitrary/resources/search?mode=ALL&includemetadata=false&limit=0&service=DOCUMENT&identifier=${QTUBE_VIDEO_BASE}`;
-        let url = `/arbitrary/resources/search?mode=ALL&includemetadata=false&limit=0&service=DOCUMENT&identifier=${QTUBE_VIDEO_BASE}`;
 
-        const response = await fetch(url, {
+      const response = await fetch(url, {
-          method: "GET",
+        method: "GET",
-          headers: {
+        headers: {
-            "Content-Type": "application/json",
+          "Content-Type": "application/json",
-          },
+        },
-        });
+      });
-        const responseData = await response.json();
+      const responseData = await response.json();
 
-        const totalVideosPublished = responseData.length;
+      const totalVideosPublished = responseData.length;
-        const uniqueNames = new Set(responseData.map(video => video.name));
+      const uniqueNames = new Set(responseData.map(video => video.name));
-        const totalNamesPublished = uniqueNames.size;
+      const totalNamesPublished = uniqueNames.size;
-        const videosPerNamePublished = (totalVideosPublished / totalNamesPublished).toFixed(2);
+      const videosPerNamePublished = (
+        totalVideosPublished / totalNamesPublished
+      ).toFixed(0);
 
-        dispatch(setTotalVideosPublished(totalVideosPublished));
+      dispatch(setTotalVideosPublished(totalVideosPublished));
-        dispatch(setTotalNamesPublished(totalNamesPublished));
+      dispatch(setTotalNamesPublished(totalNamesPublished));
-        dispatch(setVideosPerNamePublished(videosPerNamePublished));
+      dispatch(setVideosPerNamePublished(videosPerNamePublished));
-      } catch (error) {
+    } catch (error) {
-        console.log({ error });
+      console.log({ error });
-      } finally {
+    } 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: [],