diff --git a/src/App.tsx b/src/App.tsx index e6f629b..a68a143 100644 --- a/src/App.tsx +++ b/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() { - // const themeColor = window._qdnTheme +export const getUserName = async () => { + const account = await qortalRequest({ + action: "GET_USER_ACCOUNT", + }); + const nameData = await qortalRequest({ + action: "GET_ACCOUNT_NAMES", + address: account.address, + }); - const [theme, setTheme] = useState("dark"); - let persistor = persistStore(store); + if (nameData?.length > 0) return nameData[0].name; + else return ""; +}; - const filterVideosByName = ( - subscriptionList: SubscriptionObject[], - userName: string - ) => { - return subscriptionList.filter(item => { - return item.userName === userName; - }); - }; +export const filterVideosByName = ( + subscriptionList: SubscriptionObject[], + userName: string +) => { + return subscriptionList.filter(item => { + return item.userName === userName; + }); +}; - const getUserName = async () => { - const account = await qortalRequest({ - action: "GET_USER_ACCOUNT", - }); - const nameData = await qortalRequest({ - action: "GET_ACCOUNT_NAMES", - address: account.address, - }); +export const subscriptionListFilter = async () => { + const subscriptionList = store.getState().persist.subscriptionList; + const filterByUserName = + store.getState().persist.subscriptionListFilter === "currentNameOnly"; + const userName = await getUserName(); - if (nameData?.length > 0) return nameData[0].name; - else return ""; - }; + if (filterByUserName && userName) { + return filterVideosByName(subscriptionList, userName); + } else return subscriptionList; +}; - const subscriptionListFilter = async () => { - const subscriptionList = store.getState().persist.subscriptionList; - const filterByUserName = - store.getState().persist.subscriptionListFilter === "currentNameOnly"; - const userName = await getUserName(); +function App() { + // const themeColor = window._qdnTheme - if (filterByUserName && userName) { - return filterVideosByName(subscriptionList, userName); - } else return subscriptionList; - }; + const [theme, setTheme] = useState("dark"); + let persistor = persistStore(store); useEffect(() => { const subscriptionList = store.getState().persist.subscriptionList; diff --git a/src/components/common/SubscribeButton.tsx b/src/components/common/SubscribeButton.tsx index 9412cb0..a330225 100644 --- a/src/components/common/SubscribeButton.tsx +++ b/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(false); - useEffect(() => { - const isSubscribedToName = - filteredSubscriptionList.find(item => { + const isSubscribedToName = (subscriptionList: SubscriptionObject[]) => { + return ( + 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 = { diff --git a/src/hooks/useFetchVideos.tsx b/src/hooks/useFetchVideos.tsx index 8a8b3d4..00f86ab 100644 --- a/src/hooks/useFetchVideos.tsx +++ b/src/hooks/useFetchVideos.tsx @@ -414,34 +414,33 @@ export const useFetchVideos = () => { } catch (error) {} }, [videos]); - const getVideosCount = React.useCallback( - async () => { - try { - let url = `/arbitrary/resources/search?mode=ALL&includemetadata=false&limit=0&service=DOCUMENT&identifier=${QTUBE_VIDEO_BASE}`; + const getVideosCount = React.useCallback(async () => { + try { + let url = `/arbitrary/resources/search?mode=ALL&includemetadata=false&limit=0&service=DOCUMENT&identifier=${QTUBE_VIDEO_BASE}`; - const response = await fetch(url, { - method: "GET", - headers: { - "Content-Type": "application/json", - }, - }); - const responseData = await response.json(); + const response = await fetch(url, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + const responseData = await response.json(); - const totalVideosPublished = responseData.length; - const uniqueNames = new Set(responseData.map(video => video.name)); - const totalNamesPublished = uniqueNames.size; - const videosPerNamePublished = (totalVideosPublished / totalNamesPublished).toFixed(2); + const totalVideosPublished = responseData.length; + const uniqueNames = new Set(responseData.map(video => video.name)); + const totalNamesPublished = uniqueNames.size; + const videosPerNamePublished = ( + totalVideosPublished / totalNamesPublished + ).toFixed(0); - dispatch(setTotalVideosPublished(totalVideosPublished)); - dispatch(setTotalNamesPublished(totalNamesPublished)); - dispatch(setVideosPerNamePublished(videosPerNamePublished)); - } catch (error) { - console.log({ error }); - } finally { - } - }, - [] - ); + dispatch(setTotalVideosPublished(totalVideosPublished)); + dispatch(setTotalNamesPublished(totalNamesPublished)); + dispatch(setVideosPerNamePublished(videosPerNamePublished)); + } catch (error) { + console.log({ error }); + } finally { + } + }, []); return { getVideos, diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 61f1213..0c3b1c4 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -300,19 +300,19 @@ export const Home = ({ mode }: HomeProps) => { sx={{ display: persistReducer.showStats ? "block" : "none" }} >
- # of Videos:{" "} + Videos:{" "} {totalVideosPublished}
- Names Publishing:{" "} + Publishers:{" "} {totalNamesPublished}
- Videos per Name:{" "} + Average:{" "} {videosPerNamePublished} diff --git a/src/pages/Home/VideoList-styles.tsx b/src/pages/Home/VideoList-styles.tsx index 3719962..e084142 100644 --- a/src/pages/Home/VideoList-styles.tsx +++ b/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}`, diff --git a/src/state/features/persistSlice.ts b/src/state/features/persistSlice.ts index eb1f74c..39d127a 100644 --- a/src/state/features/persistSlice.ts +++ b/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: [],