🐛 fix infite loop

pouyio · Nov 6, 2024 · 23ac111 · 23ac111
1 parent 1051d3a
commit 23ac111
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 36 deletions.
diff --git a/src/pages/movies/MoviesWatched.tsx b/src/pages/movies/MoviesWatched.tsx
@@ -1,5 +1,4 @@
-import { MovieWatched } from 'models';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { filterByGenres } from 'state/slices/movies';
 import { useAppSelector } from 'state/store';
 import ImageLink from '../../components/ImageLink';
@@ -9,19 +8,14 @@ import { EmptyState } from 'components/EmptyState';
 import { NoResults } from 'components/NoResults';
 
 export const MoviesWatched: React.FC = () => {
-  const [orderedMovies, setOrderedMovies] = useState<MovieWatched[]>([]);
-  const { getItemsByPage } = usePagination(orderedMovies);
   const [genres, setGenres] = useState<string[]>([]);
   const { watched } = useAppSelector(filterByGenres(genres));
 
-  useEffect(() => {
-    const newItems = watched
-      .map((m) => m)
-      .sort((a, b) =>
-        new Date(a.watched_at) < new Date(b.watched_at) ? 1 : -1
-      );
-    setOrderedMovies(newItems);
-  }, [watched]);
+  const orderedMovies = watched
+    .map((m) => m)
+    .sort((a, b) => (new Date(a.watched_at) < new Date(b.watched_at) ? 1 : -1));
+
+  const { getItemsByPage } = usePagination(orderedMovies);
 
   return !genres.length && !orderedMovies.length ? (
     <EmptyState />

diff --git a/src/pages/shows/ShowsWatched.tsx b/src/pages/shows/ShowsWatched.tsx
@@ -1,5 +1,4 @@
-import { ShowWatched } from 'models';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { filterByGenres } from 'state/slices/shows';
 import { useAppSelector } from 'state/store';
 import ImageLink from '../../components/ImageLink';
@@ -9,31 +8,20 @@ import { EmptyState } from 'components/EmptyState';
 import { NoResults } from 'components/NoResults';
 
 const ShowsWatched: React.FC = () => {
-  const [orderedShows, setOrderedShows] = useState<ShowWatched[]>([]);
   const [genres, setGenres] = useState<string[]>([]);
   const { watched } = useAppSelector(filterByGenres(genres));
 
-  useEffect(() => {
-    setOrderedShows(
-      watched.sort((a, b) => {
-        if (
-          !a.progress?.next_episode ||
-          a.progress?.next_episode?.season === 0
-        ) {
-          return 1;
-        }
-        if (
-          !b.progress?.next_episode ||
-          b.progress?.next_episode?.season === 0
-        ) {
-          return -1;
-        }
-        const aDate = new Date(a.progress?.last_watched_at ?? '');
-        const bDate = new Date(b.progress?.last_watched_at ?? '');
-        return aDate < bDate ? 1 : -1;
-      })
-    );
-  }, [watched]);
+  const orderedShows = watched.sort((a, b) => {
+    if (!a.progress?.next_episode || a.progress?.next_episode?.season === 0) {
+      return 1;
+    }
+    if (!b.progress?.next_episode || b.progress?.next_episode?.season === 0) {
+      return -1;
+    }
+    const aDate = new Date(a.progress?.last_watched_at ?? '');
+    const bDate = new Date(b.progress?.last_watched_at ?? '');
+    return aDate < bDate ? 1 : -1;
+  });
 
   const { getItemsByPage } = usePagination(orderedShows);