diff --git a/src/App-State.ts b/src/App-State.ts new file mode 100644 index 0000000..508a775 --- /dev/null +++ b/src/App-State.ts @@ -0,0 +1,57 @@ +import { useEffect, useState } from "react"; +import { SubscriptionData } from "./components/common/ContentButtons/SubscribeButton.tsx"; +import { setFilteredSubscriptions } from "./state/features/videoSlice.ts"; +import { store } from "./state/store.ts"; +import { persistStore } from "redux-persist"; + +export const useAppState = () => { + const [theme, setTheme] = useState("dark"); + const persistor = persistStore(store); + + useEffect(() => { + const subscriptionList = store.getState().persist.subscriptionList; + subscriptionListFilter(false).then(filteredList => { + store.dispatch(setFilteredSubscriptions(filteredList)); + }); + }, []); + return { persistor, theme, setTheme }; +}; + +export const getUserName = async () => { + const account = await qortalRequest({ + action: "GET_USER_ACCOUNT", + }); + const nameData = await qortalRequest({ + action: "GET_ACCOUNT_NAMES", + address: account.address, + }); + + if (nameData?.length > 0) return nameData[0].name; + else return ""; +}; +export const filterVideosByName = ( + subscriptionList: SubscriptionData[], + userName: string +) => { + return subscriptionList.filter(item => { + return item.userName === userName; + }); +}; +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"; + const userName = await getUserName(); + + if (filterByUserName && userName) { + return filterVideosByName(subscriptionList, userName); + } else return subscriptionList; +}; diff --git a/src/App.tsx b/src/App.tsx index 84231f3..5b08052 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,75 +1,23 @@ -import { useEffect, useState } from "react"; -import { Route, Routes } from "react-router-dom"; -import { ThemeProvider } from "@mui/material/styles"; import { CssBaseline } from "@mui/material"; -import { darkTheme, lightTheme } from "./styles/theme"; -import { store } from "./state/store"; +import { ThemeProvider } from "@mui/material/styles"; import { Provider } from "react-redux"; -import GlobalWrapper from "./wrappers/GlobalWrapper"; +import { Route, Routes } from "react-router-dom"; +import { PersistGate } from "redux-persist/integration/react"; +import { useAppState } from "./App-State.ts"; import Notification from "./components/common/Notification/Notification"; -import { Home } from "./pages/Home/Home"; -import { VideoContent } from "./pages/ContentPages/VideoContent/VideoContent"; -import DownloadWrapper from "./wrappers/DownloadWrapper"; import { IndividualProfile } from "./pages/ContentPages/IndividualProfile/IndividualProfile"; import { PlaylistContent } from "./pages/ContentPages/PlaylistContent/PlaylistContent"; -import { PersistGate } from "redux-persist/integration/react"; -import { persistStore } from "redux-persist"; -import { setFilteredSubscriptions } from "./state/features/videoSlice.ts"; -import { SubscriptionData } from "./components/common/ContentButtons/SubscribeButton.tsx"; - -export const getUserName = async () => { - const account = await qortalRequest({ - action: "GET_USER_ACCOUNT", - }); - const nameData = await qortalRequest({ - action: "GET_ACCOUNT_NAMES", - address: account.address, - }); - - if (nameData?.length > 0) return nameData[0].name; - else return ""; -}; - -export const filterVideosByName = ( - subscriptionList: SubscriptionData[], - userName: string -) => { - return subscriptionList.filter(item => { - return item.userName === userName; - }); -}; - -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"; - const userName = await getUserName(); - - if (filterByUserName && userName) { - return filterVideosByName(subscriptionList, userName); - } else return subscriptionList; -}; +import { VideoContent } from "./pages/ContentPages/VideoContent/VideoContent"; +import { Home } from "./pages/Home/Home"; +import { store } from "./state/store"; +import { darkTheme, lightTheme } from "./styles/theme"; +import DownloadWrapper from "./wrappers/DownloadWrapper"; +import GlobalWrapper from "./wrappers/GlobalWrapper"; +import { ScrollWrapper } from "./wrappers/ScrollWrapper.tsx"; function App() { // const themeColor = window._qdnTheme - - const [theme, setTheme] = useState("dark"); - let persistor = persistStore(store); - - useEffect(() => { - const subscriptionList = store.getState().persist.subscriptionList; - subscriptionListFilter(false).then(filteredList => { - store.dispatch(setFilteredSubscriptions(filteredList)); - }); - }, []); + const { persistor, theme, setTheme } = useAppState(); return ( @@ -78,16 +26,21 @@ function App() { setTheme(val)}> - - - } /> - } /> - } - /> - } /> - + + + + } /> + } /> + } + /> + } + /> + + diff --git a/src/components/common/ContentButtons/SubscribeButton.tsx b/src/components/common/ContentButtons/SubscribeButton.tsx index 2214289..14a3cba 100644 --- a/src/components/common/ContentButtons/SubscribeButton.tsx +++ b/src/components/common/ContentButtons/SubscribeButton.tsx @@ -1,13 +1,13 @@ import { Button, ButtonProps, Tooltip } from "@mui/material"; import { MouseEvent, useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; +import { subscriptionListFilter } from "../../../App-State.ts"; import { RootState } from "../../../state/store.ts"; import { subscribe, unSubscribe, } from "../../../state/features/persistSlice.ts"; import { setFilteredSubscriptions } from "../../../state/features/videoSlice.ts"; -import { subscriptionListFilter } from "../../../App.tsx"; import { styled } from "@mui/material/styles"; interface SubscribeButtonProps extends ButtonProps { diff --git a/src/hooks/useFetchVideos.tsx b/src/hooks/useFetchVideos.tsx index 5f3c226..1355101 100644 --- a/src/hooks/useFetchVideos.tsx +++ b/src/hooks/useFetchVideos.tsx @@ -1,5 +1,6 @@ import React from "react"; import { useDispatch, useSelector } from "react-redux"; +import { subscriptionListFilter } from "../App-State.ts"; import { addVideos, addToHashMap, @@ -26,7 +27,6 @@ import { QTUBE_VIDEO_BASE, } from "../constants/Identifiers.ts"; import { persistReducer } from "redux-persist"; -import { subscriptionListFilter } from "../App.tsx"; import { ContentType, VideoListType } from "../state/features/persistSlice.ts"; export const useFetchVideos = () => { diff --git a/src/wrappers/ScrollWrapper.tsx b/src/wrappers/ScrollWrapper.tsx new file mode 100644 index 0000000..6cc3f05 --- /dev/null +++ b/src/wrappers/ScrollWrapper.tsx @@ -0,0 +1,10 @@ +import { useLayoutEffect } from "react"; +import { useLocation } from "react-router-dom"; + +export const ScrollWrapper = ({ children }) => { + const location = useLocation(); + useLayoutEffect(() => { + document.documentElement.scrollTo(0, 0); + }, [location.pathname]); + return children; +};