Add TwitchClipList

src/renderer/components/twitch/TwitchClipList.tsx

@@ -0,0 +1,44 @@
+import type { TwitchClip } from "common/types";
+import React from "react";
+import { Grid, Input, Pagination, Segment } from "semantic-ui-react";
+
+import { TwitchClipInfo } from "./TwitchClipInfo";
+
+export const TwitchClipList = ({
+  clips,
+  onRemove,
+  clipsPerPage = 20,
+}: {
+  clips: TwitchClip[];
+  onRemove: (key: string) => void;
+  clipsPerPage?: number;
+}) => {
+  const totalPages = Math.ceil(clips.length / clipsPerPage);
+  const [activePage, setActivePage] = React.useState(1); // Pagination needs to start from 1
+
+  const startIndex = (activePage - 1) * clipsPerPage;
+  const endIndex = activePage * clipsPerPage;
+  const currentPageClips = clips.slice(startIndex, endIndex);
+
+  return (
+    <div>
+      {currentPageClips.map((v) => (
+        <TwitchClipInfo key={v.clipID} clip={v} onRemove={onRemove} />
+      ))}
+      <div style={{ marginTop: 10, display: "flex", justifyContent: "space-between" }}>
+        <div>
+          Page {activePage} of {totalPages}
+        </div>
+        <Pagination
+          activePage={activePage}
+          onPageChange={(_e, { activePage }) => setActivePage(activePage as number)}
+          totalPages={totalPages}
+          ellipsisItem={null}
+          siblingRange={2}
+          boundaryRange={0}
+        />
+        <div>{clips.length} clips</div>
+      </div>
+    </div>
+  );
+};

src/renderer/components/twitch/index.ts

@@ -1,3 +1,4 @@
 export * from "./TwitchClipInfo";
+export * from "./TwitchClipList";
 export * from "./TwitchConnectButton";
 export * from "./TwitchUserStatus";

src/renderer/views/settings/TwitchIntegration.tsx

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { Header, Icon, Loader, Segment } from "semantic-ui-react";
 
 import { Field, FormContainer, PageHeader, Toggle } from "@/components/Form";
-import { TwitchClipInfo, TwitchConnectButton, TwitchUserStatus } from "@/components/twitch";
+import { TwitchClipList, TwitchConnectButton, TwitchUserStatus } from "@/components/twitch";
 import type { Dispatch, iRootState } from "@/store";
 
 export const TwitchIntegration: React.FC = () => {
@@ -43,9 +43,11 @@ export const TwitchIntegration: React.FC = () => {
 
       <h2>Clips</h2>
       {allClips.length > 0 ? (
-        allClips.map((v) => (
-          <TwitchClipInfo key={v.clipID} clip={v} onRemove={(key) => dispatch.twitch.removeTwitchClip(key)} />
-        ))
+        <TwitchClipList
+          clips={allClips}
+          clipsPerPage={TWITCH_CLIPS_PER_PAGE}
+          onRemove={(key) => dispatch.twitch.removeTwitchClip(key)}
+        />
       ) : (
         <Segment placeholder>
           <Header icon>