diff --git a/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx b/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx index d1a4568554..d6cf6cda6e 100644 --- a/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx +++ b/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx @@ -1,21 +1,36 @@ import React from 'react'; import { FrontendInferenceJobType, InferenceJob } from "@storyteller/components/src/jobs/InferenceJob"; -// import { springs } from "resources"; +// import { useTransition } from "@react-spring/web"; import JobItem from './JobItem'; import { useInferenceJobs, useLocalize } from "hooks"; import "./InferenceJobsList.scss"; interface JobsListProps{ + failures: (fail: string) => string, jobType: FrontendInferenceJobType, onSelect?: (e:any) => any, } -export default function InferenceJobsList({ jobType, onSelect }: JobsListProps) { +export default function InferenceJobsList({ failures, jobType, onSelect }: JobsListProps) { const { inferenceJobs = [], jobStatusDescription } = useInferenceJobs(jobType); const { t } = useLocalize("InferenceJobs"); + // let height = 0; + // const transitions = useTransition(inferenceJobs,{ not right now }); + return inferenceJobs.length ?
{ t("core.heading") }
- { inferenceJobs.map((job: InferenceJob, key: number) => ).reverse() } + { + inferenceJobs.map((job: InferenceJob, key: number) => + console.log(ref), + ...job }} />).reverse() + }
: null; }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/layout/InferenceJobsList/JobItem.tsx b/packages/fakeyou.com/src/components/layout/InferenceJobsList/JobItem.tsx index 808132df5a..6a2c180732 100644 --- a/packages/fakeyou.com/src/components/layout/InferenceJobsList/JobItem.tsx +++ b/packages/fakeyou.com/src/components/layout/InferenceJobsList/JobItem.tsx @@ -1,15 +1,17 @@ import React, { useEffect, useState } from 'react'; -import { Link } from "react-router-dom"; import { a, useSpring } from "@react-spring/web"; import { Check } from 'components/common'; -import { useInterval } from "hooks"; import { FrontendInferenceJobType, InferenceJob } from "@storyteller/components/src/jobs/InferenceJob"; import { JobState } from "@storyteller/components/src/jobs/JobStates"; +// import { useInterval } from "hooks"; // for animation debugging + interface JobListItem extends InferenceJob { + failures: (fail: string) => string, jobType: FrontendInferenceJobType, jobStatusDescription?: any, - onSelect?: any + onSelect?: any, + refSet?: any, t?: any } @@ -33,22 +35,16 @@ const AniX = ({ checked = false }) => { ; } -const OuterItem = ({ className, children, maybeResultToken, jobState}: { className?: string, children?: any, maybeResultToken?: any, jobState: number }) => jobState === 3 ? - { children } : -
{ children }
; - -export default function JobItem({ maybeFailureCategory, maybeResultToken, onSelect, jobState: nah, jobStatusDescription, jobType: inputType, t }: JobListItem) { - const [jobState,jobStateSet] = useState(0); +const OuterItem = ({ className, children, isComplete, jobToken, maybeResultToken, onSelect = () => {}, refSet }: { className?: string, children?: any, jobToken: string, isComplete: boolean, maybeResultToken?: any, onSelect?: any, refSet?: any }) => isComplete ? + onSelect(), ref: refSet }}>{ children } : + { children }; +export default function JobItem({ failures, maybeFailureCategory, maybeResultToken, onSelect, jobToken, jobState, jobStatusDescription, jobType: inputType, refSet, t, ...rest }: JobListItem) { const [hasBounced,hasBouncedSet] = useState(false); - useInterval({ interval: 3000, onTick: ({ index }: { index: number }) => { jobStateSet(index); if (!index) hasBouncedSet(false) } }); - const processFail = (fail = "") => { - switch (fail) { - case "face_not_detected": return "Face not detected, try another picture"; - default: return "Uknown failure"; - } - }; + // const [jobState,jobStateSet] = useState(0); // for animation debugging + // useInterval({ interval: 3000, onTick: ({ index }: { index: number }) => { jobStateSet(index); if (!index) hasBouncedSet(false) } }); + const jobType = FrontendInferenceJobType[inputType]; const jobStatus = jobStatusDescription(jobState); const jobStatusClass = jobStatus.toLowerCase().replace("_","-"); @@ -85,9 +81,10 @@ export default function JobItem({ maybeFailureCategory, maybeResultToken, onSele }); const headingBounce = useSpring(makeBounce(8)); const subtitleBounce = useSpring(makeBounce(6,30)); - const subtitle = maybeFailureCategory ?`${ processFail(maybeFailureCategory) }` : t(`subtitles.${jobStatus}`); + const subtitle = maybeFailureCategory ?`${ failures(maybeFailureCategory) }` : t(`subtitles.${jobStatus}`); const className = `face-animator-job job-status-${jobStatusClass}`; + useEffect(() => { if (!bounce && !hasBounced && isComplete) { hasBouncedSet(true); @@ -96,7 +93,7 @@ export default function JobItem({ maybeFailureCategory, maybeResultToken, onSele } },[bounce, hasBounced, isComplete ]); - return + return @@ -107,7 +104,7 @@ export default function JobItem({ maybeFailureCategory, maybeResultToken, onSele { t(`${jobType}.${jobStatus}`) } - { isComplete ? subtitle + " >" : subtitle } + { isComplete ? subtitle + " >" : subtitle } ; }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/hooks/useInterval/useInterval.tsx b/packages/fakeyou.com/src/hooks/useInterval/useInterval.tsx index 3eab4e5076..97a5fbd84f 100644 --- a/packages/fakeyou.com/src/hooks/useInterval/useInterval.tsx +++ b/packages/fakeyou.com/src/hooks/useInterval/useInterval.tsx @@ -23,5 +23,5 @@ export default function useInterval(props: any) { return () => clearInterval(ticker); },[]); - return things.current.index || 0; + return things.current; }; \ No newline at end of file