Merge pull request #41 from QortalSeth/main

ScrollWrapper.tsx added to App.tsx to ensure that new pages always open at the top.

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

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 (
     <Provider store={store}>
@@ -78,16 +26,21 @@ function App() {
           <Notification />
           <DownloadWrapper>
             <GlobalWrapper setTheme={(val: string) => setTheme(val)}>
-              <CssBaseline />
-              <Routes>
-                <Route path="/" element={<Home />} />
-                <Route path="/video/:name/:id" element={<VideoContent />} />
-                <Route
-                  path="/playlist/:name/:id"
-                  element={<PlaylistContent />}
-                />
-                <Route path="/channel/:name" element={<IndividualProfile />} />
-              </Routes>
+              <ScrollWrapper>
+                <CssBaseline />
+                <Routes>
+                  <Route path="/" element={<Home />} />
+                  <Route path="/video/:name/:id" element={<VideoContent />} />
+                  <Route
+                    path="/playlist/:name/:id"
+                    element={<PlaylistContent />}
+                  />
+                  <Route
+                    path="/channel/:name"
+                    element={<IndividualProfile />}
+                  />
+                </Routes>
+              </ScrollWrapper>
             </GlobalWrapper>
           </DownloadWrapper>
         </ThemeProvider>

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 {

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 = () => {

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