From cbfbe15de0218fd45147a8bba553259ef0745581 Mon Sep 17 00:00:00 2001 From: Qortal Seth Date: Thu, 22 Feb 2024 13:50:22 -0700 Subject: [PATCH] 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 | 16 ++++++++++++---- src/components/common/SubscribeButton.tsx | 18 ++++++++---------- src/hooks/useFetchVideos.tsx | 4 +++- src/pages/Home/Home.tsx | 4 +++- src/state/features/persistSlice.ts | 17 ++++++++--------- src/state/features/videoSlice.ts | 6 +++--- 6 files changed, 37 insertions(+), 28 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index a68a143..455ad31 100644 --- a/src/App.tsx +++ b/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)); }); }, []); diff --git a/src/components/common/SubscribeButton.tsx b/src/components/common/SubscribeButton.tsx index a330225..cdb7cb9 100644 --- a/src/components/common/SubscribeButton.tsx +++ b/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(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, }; diff --git a/src/hooks/useFetchVideos.tsx b/src/hooks/useFetchVideos.tsx index 00f86ab..f181bff 100644 --- a/src/hooks/useFetchVideos.tsx +++ b/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}`; }); diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 0c3b1c4..cb47280 100644 --- a/src/pages/Home/Home.tsx +++ b/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]); diff --git a/src/state/features/persistSlice.ts b/src/state/features/persistSlice.ts index 39d127a..8a3747d 100644 --- a/src/state/features/persistSlice.ts +++ b/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) => { + subscribe: (state, action: PayloadAction) => { 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) => { + unSubscribe: (state, action: PayloadAction) => { state.subscriptionList = state.subscriptionList.filter( item => item.subscriberName !== action.payload.subscriberName ); diff --git a/src/state/features/videoSlice.ts b/src/state/features/videoSlice.ts index ad07447..15c38a1 100644 --- a/src/state/features/videoSlice.ts +++ b/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 + action: PayloadAction ) => { state.filteredSubscriptionList = action.payload; },