diff --git a/src/components/IssueGrid/IssueGrid.tsx b/src/components/IssueGrid/IssueGrid.tsx index 7e69216..aaa6d94 100644 --- a/src/components/IssueGrid/IssueGrid.tsx +++ b/src/components/IssueGrid/IssueGrid.tsx @@ -2,10 +2,7 @@ import { useEffect, useState } from "preact/hooks"; import { useStore } from "@nanostores/preact"; import { $sort } from "../../stores/sort.store"; import { PageNavigator } from "../PageNavigator"; -import type { - ComicvineImage, - ShortIssue, -} from "../../pages/api/comicvine.types"; +import type { ComicvineImage, ShortIssue } from "../../util/comicvine.types"; import type { Sort } from "../../stores/sort.store"; export type Props = { @@ -37,10 +34,12 @@ function clampIssuesPerPage({ (a, b) => parseInt(a.issue_number) - parseInt(b.issue_number) ); } - return issueList.slice( + const trimmedList = issueList.slice( (currentPage - 1) * issuesPerPage, currentPage * issuesPerPage ); + + return trimmedList; } function Issue({ id, name, image, issue_number }: ShortIssue) { @@ -54,9 +53,9 @@ function Issue({ id, name, image, issue_number }: ShortIssue) { } if (!image) { getIssue(); - console.warn("Issue", id, "is missing an image"); } - }, [image]); + }, []); + return (
  • @@ -83,7 +82,6 @@ export function IssueGrid({ issuesPerPage = 50, }: Props) { const $sortDirection = useStore($sort); - const [issues, setIssues] = useState( clampIssuesPerPage({ issuesPerPage, @@ -103,6 +101,7 @@ export function IssueGrid({ }) ); }, [issueList, currentPage, issuesPerPage, $sortDirection]); + return ( <>