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
;
};
\ 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