From 74b811d59bce3f5a29d3b53a7dd387ad1f4bb5f3 Mon Sep 17 00:00:00 2001 From: Qortal Seth Date: Fri, 16 Feb 2024 09:15:14 -0700 Subject: [PATCH] Fixed bug that caused subscriptions to not work properly if Q-Tube was opened through a link Default Tab is now "All Tabs" since people running Q-Tube for the first time won't have any subscriptions. Stats section of home page uses no horizontal padding to prevent the numbers from going to another line. Average videos per publisher doesn't show decimals for the same reason. --- src/App.tsx | 64 +++++++++++------------ src/components/common/SubscribeButton.tsx | 28 +++++++--- src/hooks/useFetchVideos.tsx | 49 +++++++++-------- src/pages/Home/Home.tsx | 6 +-- src/pages/Home/VideoList-styles.tsx | 2 +- src/state/features/persistSlice.ts | 4 +- 6 files changed, 84 insertions(+), 69 deletions(-) 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: [],