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