Merge pull request #20 from QortalSeth/main

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

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;
     },