add data loader to GenreExplore page

vijayaj2022 · May 9, 2023 · c0e6e5e · c0e6e5e
1 parent 72ba3b3
commit c0e6e5e
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 14 deletions.
diff --git a/src/pages/GenreExplore.tsx b/src/pages/GenreExplore.tsx
@@ -1,19 +1,45 @@
-import { useParams } from "react-router-dom";
+import {
+  LoaderFunctionArgs,
+  useLoaderData,
+  // useParams
+} from "react-router-dom";
 import { COMMON_TITLES } from "src/constant";
 import GridPage from "src/components/GridPage";
 import { MEDIA_TYPE } from "src/types/Common";
 import { CustomGenre, Genre } from "src/types/Genre";
-import { useGetGenresQuery } from "src/store/slices/genre";
+import {
+  genreSliceEndpoints,
+  // useGetGenresQuery
+} from "src/store/slices/genre";
+import store from "src/store";
 
-export function Component() {
-  const { genreId } = useParams();
-  const { data: genres } = useGetGenresQuery(MEDIA_TYPE.Movie);
-  let genre: Genre | CustomGenre | undefined;
-  if (isNaN(parseInt(genreId as string))) {
-    genre = COMMON_TITLES.find((t) => t.apiString === genreId);
-  } else {
-    genre = genres?.find((t) => t.id.toString() === genreId);
+export async function loader({ params }: LoaderFunctionArgs) {
+  let genre: CustomGenre | Genre | undefined = COMMON_TITLES.find(
+    (t) => t.apiString === (params.genreId as string)
+  );
+  if (!genre) {
+    const genres = await store
+      .dispatch(genreSliceEndpoints.getGenres.initiate(MEDIA_TYPE.Movie))
+      .unwrap();
+    genre = genres?.find((t) => t.id.toString() === (params.genreId as string));
   }
+
+  return genre;
+}
+
+export function Component() {
+  const genre: CustomGenre | Genre | undefined = useLoaderData() as
+    | CustomGenre
+    | Genre
+    | undefined;
+  // const { genreId } = useParams();
+  // const { data: genres } = useGetGenresQuery(MEDIA_TYPE.Movie);
+  // let genre: Genre | CustomGenre | undefined;
+  // if (isNaN(parseInt(genreId!))) {
+  //   genre = COMMON_TITLES.find((t) => t.apiString === genreId);
+  // } else {
+  //   genre = genres?.find((t) => t.id.toString() === genreId);
+  // }
   if (genre) {
     return <GridPage mediaType={MEDIA_TYPE.Movie} genre={genre} />;
   }

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -22,10 +22,6 @@ const router = createBrowserRouter([
           {
             path: ":genreId",
             lazy: () => import("src/pages/GenreExplore"),
-            loader: async () => {
-              const { loader: mainLoader } = await import("src/pages/HomePage");
-              return mainLoader();
-            },
           },
         ],
       },