Fixed bug that caused all videos to show when starting Q-Tube on subscriptions tab

SubscriptionData type moved from persistSlice.ts to SubscribeButton.tsx

Added check when subscribing to make sure both userName AND subscriberName are not already in subscribeList before subscribing. This ensures that a subscription from another username doesn't prevent a subscription from the current name.

src/App.tsx

@@ -15,7 +15,7 @@ import { PlaylistContent } from "./pages/PlaylistContent/PlaylistContent";
 import { PersistGate } from "redux-persist/integration/react";
 import { persistStore } from "redux-persist";
 import { setFilteredSubscriptions } from "./state/features/videoSlice.ts";
-import { SubscriptionObject } from "./state/features/persistSlice.ts";
+import { SubscriptionData } from "./components/common/SubscribeButton.tsx";
 
 export const getUserName = async () => {
   const account = await qortalRequest({
@@ -31,7 +31,7 @@ export const getUserName = async () => {
 };
 
 export const filterVideosByName = (
-  subscriptionList: SubscriptionObject[],
+  subscriptionList: SubscriptionData[],
   userName: string
 ) => {
   return subscriptionList.filter(item => {
@@ -39,7 +39,15 @@ export const filterVideosByName = (
   });
 };
 
-export const subscriptionListFilter = async () => {
+export const subscriptionListFilter = async (reset = true) => {
+  const filteredSubscriptionList =
+    store.getState().video.filteredSubscriptionList;
+  const isFilteredSubscriptionListEmpty = filteredSubscriptionList.length === 0;
+
+  if (!reset && !isFilteredSubscriptionListEmpty) {
+    return filteredSubscriptionList;
+  }
+
   const subscriptionList = store.getState().persist.subscriptionList;
   const filterByUserName =
     store.getState().persist.subscriptionListFilter === "currentNameOnly";
@@ -58,7 +66,7 @@ function App() {
 
   useEffect(() => {
     const subscriptionList = store.getState().persist.subscriptionList;
-    subscriptionListFilter().then(filteredList => {
+    subscriptionListFilter(false).then(filteredList => {
       store.dispatch(setFilteredSubscriptions(filteredList));
     });
   }, []);

src/components/common/SubscribeButton.tsx

@@ -2,11 +2,7 @@ import { Button, ButtonProps } from "@mui/material";
 import { MouseEvent, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../../state/store.ts";
-import {
-  subscribe,
-  SubscriptionObject,
-  unSubscribe,
-} from "../../state/features/persistSlice.ts";
+import { subscribe, unSubscribe } from "../../state/features/persistSlice.ts";
 import { setFilteredSubscriptions } from "../../state/features/videoSlice.ts";
 import { subscriptionListFilter } from "../../App.tsx";
 
@@ -14,14 +10,16 @@ interface SubscribeButtonProps extends ButtonProps {
   subscriberName: string;
 }
 
+export type SubscriptionData = {
+  userName: string;
+  subscriberName: string;
+};
+
 export const SubscribeButton = ({
   subscriberName,
   ...props
 }: SubscribeButtonProps) => {
   const dispatch = useDispatch();
-  const subscriptionList = useSelector((state: RootState) => {
-    return state.persist.subscriptionList;
-  });
 
   const filteredSubscriptionList = useSelector((state: RootState) => {
     return state.video.filteredSubscriptionList;
@@ -30,7 +28,7 @@ export const SubscribeButton = ({
   const userName = useSelector((state: RootState) => state.auth.user?.name);
   const [isSubscribed, setIsSubscribed] = useState<boolean>(false);
 
-  const isSubscribedToName = (subscriptionList: SubscriptionObject[]) => {
+  const isSubscribedToName = (subscriptionList: SubscriptionData[]) => {
     return (
       subscriptionList.find(item => {
         return item.subscriberName === subscriberName;
@@ -49,7 +47,7 @@ export const SubscribeButton = ({
     }
   }, []);
 
-  const subscriptionData = {
+  const subscriptionData: SubscriptionData = {
     userName: userName,
     subscriberName: subscriberName,
   };

src/hooks/useFetchVideos.tsx

@@ -26,6 +26,7 @@ import {
 } from "../constants/Identifiers.ts";
 import { allTabValue, subscriptionTabValue } from "../constants/Misc.ts";
 import { persistReducer } from "redux-persist";
+import { subscriptionListFilter } from "../App.tsx";
 
 export const useFetchVideos = () => {
   const dispatch = useDispatch();
@@ -231,8 +232,9 @@ export const useFetchVideos = () => {
         if (name) {
           defaultUrl = defaultUrl + `&name=${name}`;
         }
+
         if (listType === subscriptionTabValue) {
-          const filteredSubscribeList = videoReducer.filteredSubscriptionList;
+          const filteredSubscribeList = await subscriptionListFilter(false);
           filteredSubscribeList.map(sub => {
             defaultUrl += `&name=${sub.subscriberName}`;
           });

src/pages/Home/Home.tsx

@@ -137,6 +137,7 @@ export const Home = ({ mode }: HomeProps) => {
       if (!firstFetch.current || !afterFetch.current) return;
       if (isFetching.current) return;
       isFetching.current = true;
+      console.log("in getvideoshandler");
       await getVideos(
         {
           name: filterName,
@@ -170,6 +171,7 @@ export const Home = ({ mode }: HomeProps) => {
     getVideosCount();
     if (isFiltering && filterValue !== prevVal?.current) {
       prevVal.current = filterValue;
+
       getVideosHandler();
     }
   }, [filterValue, isFiltering, filteredVideos, getVideosCount]);
@@ -178,7 +180,6 @@ export const Home = ({ mode }: HomeProps) => {
     if (firstFetch.current) return;
     firstFetch.current = true;
     setIsLoading(true);
-
     await getVideos(
       {
         name: "",
@@ -283,6 +284,7 @@ export const Home = ({ mode }: HomeProps) => {
   };
 
   useEffect(() => {
+    console.log("useeffect 5");
     getVideosHandler(true);
   }, [tabValue]);
 

src/state/features/persistSlice.ts

@@ -1,19 +1,15 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { allTabValue, subscriptionTabValue } from "../../constants/Misc.ts";
+import { SubscriptionData } from "../../components/common/SubscribeButton.tsx";
 
 type StretchVideoType = "contain" | "fill" | "cover" | "none" | "scale-down";
 type SubscriptionListFilterType = "ALL" | "currentNameOnly";
 
-export type SubscriptionObject = {
-  userName: string;
-  subscriberName: string;
-};
-
 interface settingsState {
   selectedTab: string;
   stretchVideoSetting: StretchVideoType;
   filterType: string;
-  subscriptionList: SubscriptionObject[];
+  subscriptionList: SubscriptionData[];
   playbackRate: number;
   subscriptionListFilter: SubscriptionListFilterType;
   showStats: boolean;
@@ -42,18 +38,21 @@ export const persistSlice = createSlice({
     setShowStats: (state, action) => {
       state.showStats = action.payload;
     },
-    subscribe: (state, action: PayloadAction<SubscriptionObject>) => {
+    subscribe: (state, action: PayloadAction<SubscriptionData>) => {
       const currentSubscriptions = state.subscriptionList;
       const notSubscribedToName =
         currentSubscriptions.find(item => {
-          return item.subscriberName === action.payload.subscriberName;
+          return (
+            item.subscriberName === action.payload.subscriberName &&
+            item.userName === action.payload.userName
+          );
         }) === undefined;
       if (notSubscribedToName) {
         state.subscriptionList = [...currentSubscriptions, action.payload];
       }
       console.log("subscribeList after subscribe: ", state.subscriptionList);
     },
-    unSubscribe: (state, action: PayloadAction<SubscriptionObject>) => {
+    unSubscribe: (state, action: PayloadAction<SubscriptionData>) => {
       state.subscriptionList = state.subscriptionList.filter(
         item => item.subscriberName !== action.payload.subscriberName
       );

src/state/features/videoSlice.ts

@@ -1,5 +1,5 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { SubscriptionObject } from "./persistSlice.ts";
+import { SubscriptionData } from "../../components/common/SubscribeButton";
 
 interface GlobalState {
   videos: Video[];
@@ -15,7 +15,7 @@ interface GlobalState {
   selectedSubCategoryVideos: any;
   editVideoProperties: any;
   editPlaylistProperties: any;
-  filteredSubscriptionList: SubscriptionObject[];
+  filteredSubscriptionList: SubscriptionData[];
 }
 
 const initialState: GlobalState = {
@@ -174,7 +174,7 @@ export const videoSlice = createSlice({
 
     setFilteredSubscriptions: (
       state,
-      action: PayloadAction<SubscriptionObject[]>
+      action: PayloadAction<SubscriptionData[]>
     ) => {
       state.filteredSubscriptionList = action.payload;
     },