fix pages using new features(lazy, data loader) of react-router

DirandU21 · May 8, 2023 · cbcddff · cbcddff
1 parent e0e92d4
commit cbcddff
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 45 deletions.
diff --git a/src/components/MainLoadingScreen.tsx b/src/components/MainLoadingScreen.tsx
@@ -1,17 +1,21 @@
-import Box from "@mui/material/Box";
 import CircularProgress from "@mui/material/CircularProgress";
 
 function MainLoadingScreen() {
   return (
-    <Box
-      flexGrow={1}
-      display="flex"
-      justifyContent="center"
-      alignItems="center"
-      sx={{ height: "100%" }}
+    <div
+      style={{
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        position: "absolute",
+      }}
     >
-      <CircularProgress sx={{ color: "white" }} />
-    </Box>
+      <CircularProgress sx={{ color: "white", zIndex: 10 }} />
+    </div>
   );
 }
 

diff --git a/src/components/layouts/Footer.tsx b/src/components/layouts/Footer.tsx
@@ -1,16 +1,16 @@
 import Box from "@mui/material/Box";
-// import Stack from "@mui/material/Stack";
 import Link from "@mui/material/Link";
 import Typography from "@mui/material/Typography";
 import Divider from "@mui/material/Divider";
 
 export default function Footer() {
   return (
     <Box
-      //   direction="row"
-      //   alignItems="center"
-      //   justifyContent="center"
       sx={{
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
         display: "flex",
         flexDirection: "column",
         justifyContent: "center",

diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
@@ -1,30 +1,32 @@
-import { Outlet, useLocation } from "react-router-dom";
+import { Outlet, useLocation, useNavigation } from "react-router-dom";
 import Box from "@mui/material/Box";
 
 import DetailModal from "src/components/DetailModal";
 import VideoPortalContainer from "src/components/VideoPortalContainer";
 import DetailModalProvider from "src/providers/DetailModalProvider";
 import PortalProvider from "src/providers/PortalProvider";
-import { Footer, MainHeader } from "src/components/layouts";
 import { MAIN_PATH } from "src/constant";
+import { Footer, MainHeader } from "src/components/layouts";
+import MainLoadingScreen from "src/components/MainLoadingScreen";
 
 export default function MainLayout() {
   const location = useLocation();
+  const navigation = useNavigation();
+  // console.log("Nav Stat: ", navigation.state);
   return (
     <Box
       sx={{
         width: "100%",
         minHeight: "100vh",
-        display: "flex",
-        flexDirection: "column",
         bgcolor: "background.default",
-        position: "relative",
       }}
     >
       <MainHeader />
+      {navigation.state !== "idle" && <MainLoadingScreen />}
       <DetailModalProvider>
         <DetailModal />
         <PortalProvider>
+          {/* <MainLoadingScreen /> */}
           <Outlet />
           <VideoPortalContainer />
         </PortalProvider>

diff --git a/src/pages/GenreExplore.tsx b/src/pages/GenreExplore.tsx
@@ -5,7 +5,7 @@ import { MEDIA_TYPE } from "src/types/Common";
 import { CustomGenre, Genre } from "src/types/Genre";
 import { useGetGenresQuery } from "src/store/slices/genre";
 
-export default function GenreExplore() {
+export function Component() {
   const { genreId } = useParams();
   const { data: genres } = useGetGenresQuery(MEDIA_TYPE.Movie);
   let genre: Genre | CustomGenre | undefined;
@@ -19,3 +19,5 @@ export default function GenreExplore() {
   }
   return null;
 }
+
+Component.displayName = "GenreExplore";
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -1,16 +1,24 @@
 import Stack from "@mui/material/Stack";
 import { COMMON_TITLES } from "src/constant";
 import HeroSection from "src/components/HeroSection";
-import { useGetGenresQuery } from "src/store/slices/genre";
+import { genreSliceEndpoints, useGetGenresQuery } from "src/store/slices/genre";
 import { MEDIA_TYPE } from "src/types/Common";
 import { CustomGenre, Genre } from "src/types/Genre";
 import SliderRowForGenre from "src/components/VideoSlider";
+import store from "src/store";
 
-function HomePage() {
+export async function loader() {
+  await store.dispatch(
+    genreSliceEndpoints.getGenres.initiate(MEDIA_TYPE.Movie)
+  );
+  return null;
+}
+export function Component() {
   const { data: genres, isSuccess } = useGetGenresQuery(MEDIA_TYPE.Movie);
+
   if (isSuccess && genres && genres.length > 0) {
     return (
-      <Stack spacing={2} sx={{ bgcolor: "background.default" }}>
+      <Stack spacing={2}>
         <HeroSection mediaType={MEDIA_TYPE.Movie} />
         {[...COMMON_TITLES, ...genres].map((genre: Genre | CustomGenre) => (
           <SliderRowForGenre
@@ -25,4 +33,4 @@ function HomePage() {
   return null;
 }
 
-export default HomePage;
+Component.displayName = "HomePage";
diff --git a/src/pages/WatchPage.tsx b/src/pages/WatchPage.tsx
@@ -21,7 +21,7 @@ import PlayerSeekbar from "src/components/watch/PlayerSeekbar";
 import PlayerControlButton from "src/components/watch/PlayerControlButton";
 import MainLoadingScreen from "src/components/MainLoadingScreen";
 
-export default function WatchPage() {
+export function Component() {
   const playerRef = useRef<Player | null>(null);
   const [playerState, setPlayerState] = useState({
     paused: false,
@@ -41,7 +41,7 @@ export default function WatchPage() {
       preload: "metadata",
       autoplay: true,
       controls: false,
-      responsive: true,
+      // responsive: true,
       // fluid: true,
       width: windowSize.width,
       height: windowSize.height,
@@ -103,8 +103,6 @@ export default function WatchPage() {
     navigate("/browse");
   };
 
-  console.log("PlayerRef: ", playerRef.current);
-
   if (!!videoJsOptions.width) {
     return (
       <Box
@@ -268,5 +266,7 @@ export default function WatchPage() {
       </Box>
     );
   }
-  return <MainLoadingScreen />;
+  return null;
 }
+
+Component.displayName = "WatchPage";
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -1,21 +1,7 @@
-import { ElementType, lazy, Suspense } from "react";
 import { Navigate, createBrowserRouter } from "react-router-dom";
-import MainLoadingScreen from "src/components/MainLoadingScreen";
 import { MAIN_PATH } from "src/constant";
 
 import MainLayout from "src/layouts/MainLayout";
-import WatchPage from "src/pages/WatchPage";
-
-const Loadable = (Component: ElementType) => (props: any) => {
-  return (
-    <Suspense fallback={<MainLoadingScreen />}>
-      <Component {...props} />
-    </Suspense>
-  );
-};
-
-const HomePage = Loadable(lazy(() => import("src/pages/HomePage")));
-const GenreExplorePage = Loadable(lazy(() => import("src/pages/GenreExplore")));
 
 const router = createBrowserRouter([
   {
@@ -28,15 +14,20 @@ const router = createBrowserRouter([
       },
       {
         path: MAIN_PATH.browse,
-        element: <HomePage />,
+        lazy: () => import("src/pages/HomePage"),
       },
       {
         path: MAIN_PATH.genreExplore,
-        children: [{ path: ":genreId", element: <GenreExplorePage /> }],
+        children: [
+          {
+            path: ":genreId",
+            lazy: () => import("src/pages/GenreExplore"),
+          },
+        ],
       },
       {
         path: MAIN_PATH.watch,
-        element: <WatchPage />,
+        lazy: () => import("src/pages/WatchPage"),
       },
     ],
   },