diff --git a/packages/fakeyou/src/v2/view/profile/profile_view/Profile_TtsModelListFc.tsx b/packages/fakeyou/src/v2/view/profile/profile_view/Profile_TtsModelListFc.tsx index 0679a6f79e..b6c29a1a0d 100644 --- a/packages/fakeyou/src/v2/view/profile/profile_view/Profile_TtsModelListFc.tsx +++ b/packages/fakeyou/src/v2/view/profile/profile_view/Profile_TtsModelListFc.tsx @@ -2,6 +2,10 @@ import React, { useState, useEffect } from "react"; import { ApiConfig } from "@storyteller/components"; import { Link } from "react-router-dom"; import { formatDistance } from "date-fns"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons"; + +const PER_PAGE = 10; interface TtsModelListResponsePayload { success: boolean; @@ -25,6 +29,7 @@ interface Props { function ProfileTtsModelListFc(props: Props) { const [ttsModels, setTtsModels] = useState>([]); + const [currentPageIndex, setCurrentPageIndex] = useState(0); useEffect(() => { const api = new ApiConfig(); @@ -49,11 +54,23 @@ function ProfileTtsModelListFc(props: Props) { .catch((e) => {}); }, [props.username]); // NB: Empty array dependency sets to run ONLY on mount + const nextPage = () => { + setCurrentPageIndex(currentPageIndex + 1); + }; + + const previousPage = () => { + setCurrentPageIndex(Math.max(currentPageIndex - 1, 0)); + }; + + const start = currentPageIndex * PER_PAGE; + const end = start + PER_PAGE; + const pageTtsModels = ttsModels.slice(start, end); + const now = new Date(); let rows: Array = []; - ttsModels.slice(0, 10).forEach((model) => { + pageTtsModels.forEach((model) => { const modelTitle = model.title.length < 5 ? `Model: ${model.title}` : model.title; @@ -74,6 +91,9 @@ function ProfileTtsModelListFc(props: Props) { ); }); + const isLastButtonDisabled = currentPageIndex < 1; + const isNextButtonDisabled = ttsModels.length === 0 || end > ttsModels.length; + return (
@@ -89,7 +109,27 @@ function ProfileTtsModelListFc(props: Props) { {rows}
-
ADD OLDER/NEWER PAGINATION BUTTON HERE
+
+ + + +
); }