Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | 1x 5x 5x 5x 5x 5x 5x 48x | import { useSearchParams } from "react-router-dom";
import {
Strip,
Row,
Col,
Pagination,
Button,
} from "@canonical/react-components";
import { RockCard, LoadingCard } from "@canonical/store-components";
import { Rock } from "../../types";
const ITEMS_PER_PAGE = 12;
interface IPackagesProps {
packages?: Rock[];
numOfTotalItems: number;
isFetching: boolean;
status: "success" | "idle" | "error" | "loading";
currentPage: number;
onPageChange: (pageNumber: number) => void;
}
function Packages({
packages,
numOfTotalItems,
isFetching,
status,
currentPage,
onPageChange,
}: IPackagesProps) {
const firstResultNumber = (currentPage - 1) * ITEMS_PER_PAGE + 1;
const lastResultNumber =
(currentPage - 1) * ITEMS_PER_PAGE + (packages?.length || 0);
const isPackageExist = packages && packages.length > 0;
const [searchParams, setSearchParams] = useSearchParams();
const onClear = (): void => {
searchParams.delete("q");
searchParams.delete("page");
setSearchParams(searchParams);
};
return (
<Strip>
<Row>
<Col size={9} className="col-start-large-4">
{isPackageExist && (
<div className="u-fixed-width">
{searchParams.get("q") ? (
<p>
Showing {currentPage === 1 ? "1" : firstResultNumber} to{" "}
{lastResultNumber} of {numOfTotalItems} items for{" "}
<strong>"{searchParams.get("q")}"</strong>.{" "}
<Button appearance="link" onClick={onClear}>
Clear search
</Button>
</p>
) : (
<p>
Showing {currentPage === 1 ? "1" : firstResultNumber} to{" "}
{lastResultNumber} of {numOfTotalItems} items
</p>
)}
</div>
)}
<Row>
{isFetching &&
[...Array(ITEMS_PER_PAGE)].map((_item, index) => (
<Col size={3} key={index}>
<LoadingCard />
</Col>
))}
{!isFetching &&
status === "success" &&
isPackageExist &&
packages.map((packageData: Rock) => (
<Col
size={3}
style={{ marginBottom: "1.5rem" }}
key={packageData.id}
>
<RockCard data={packageData} />
</Col>
))}
{status === "success" && packages?.length === 0 && (
<h1 className="p-heading--2">No packages match this filter</h1>
)}
</Row>
{status === "success" && isPackageExist && (
<Pagination
itemsPerPage={ITEMS_PER_PAGE}
totalItems={numOfTotalItems}
paginate={onPageChange}
currentPage={currentPage}
centered
scrollToTop
/>
)}
</Col>
</Row>
</Strip>
);
}
export default Packages;
|