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 | 4x 4x 4x 4x | import { useState } from "react";
import { Accordion } from "@canonical/react-components";
import PublishedSnapList from "../PublishedSnapList";
import PublisherMetrics from "../PublisherMetrics";
import { ITEMS_PER_PAGE } from "../../constants";
import type { ISnap } from "../../types";
function PublishedSnapSection({
snaps,
currentUser,
}: {
snaps: ISnap[];
currentUser: string;
}): React.JSX.Element {
const [currentPage, setCurrentPage] = useState<number>(1);
const firstItemOfPage = (currentPage - 1) * ITEMS_PER_PAGE;
const snapsInPage = snaps.slice(
firstItemOfPage,
firstItemOfPage + ITEMS_PER_PAGE,
);
return (
<>
{snaps.length > 0 && (
<>
<Accordion
className="accordion-bold-titles"
sections={[
{
key: "publisher-metrics",
title: "Snap installs",
content: <PublisherMetrics snaps={snapsInPage} />,
},
]}
expanded="publisher-metrics"
/>
<div className="accordion-actions">
<div className="accordion-actions__row u-align--right">
<a
href="/account/register-snap"
className="p-button u-float-right p-snap-list__register u-no-margin--top is-dense"
>
Register a snap name
</a>
</div>
</div>
</>
)}
<hr className="u-no-margin--bottom" />
<Accordion
className="accordion-bold-titles"
sections={[
{
key: "published-snaps-list",
title: `My published snaps (${snaps.length})`,
content: (
<PublishedSnapList
currentUser={currentUser}
snaps={snapsInPage}
currentPage={currentPage}
setCurrentPage={setCurrentPage}
totalItems={snaps.length}
/>
),
},
]}
expanded="published-snaps-list"
/>
<hr className="u-no-margin--bottom" />
</>
);
}
export default PublishedSnapSection;
|