some cleanup around InferenceJobsList

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 ? <div {...{ className: "face-animator-jobs panel" }}>
     <h5>{ t("core.heading") }</h5>
-    { inferenceJobs.map((job: InferenceJob, key: number) => <JobItem {...{ jobStatusDescription, jobType, key, onSelect, t, ...job }} />).reverse() }
+    { 
+      inferenceJobs.map((job: InferenceJob, key: number) =>
+        <JobItem {...{
+          failures,
+          jobStatusDescription,
+          jobType,
+          key,
+          onSelect,
+          t,
+          // refSet: (ref: any) => console.log(ref),
+          ...job }} />).reverse()
+    }
   </div> : null;
 };

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 ?
-  <Link {...{ className, to: `media/${maybeResultToken}` }}>{ children }</Link> :
-  <div {...{ className }}>{ children }</div>;
-
-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 ?
+  <a.a {...{ className, href: `/media/${maybeResultToken}`, id: `ijobitem-${ jobToken }`, onClick: () => onSelect(),  ref: refSet }}>{ children }</a.a> :
+  <a.div {...{ className, id: `ijobitem-${ jobToken }`, ref: refSet }}>{ children }</a.div>;
 
+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 <OuterItem {...{ className, maybeResultToken, jobState }}>
+  return <OuterItem {...{ className, isComplete, jobToken, maybeResultToken, onSelect, refSet }}>
     <svg {...{ }}>
       <circle {...{ ...circle, className: "work-indicator-circle-track" }} />
       <a.circle {...{ ...circle, className: "work-indicator-circle-marker", style: dashy }} />
@@ -107,7 +104,7 @@ export default function JobItem({ maybeFailureCategory, maybeResultToken, onSele
       <a.h6 {...{  style: headingBounce }}>
         { t(`${jobType}.${jobStatus}`) }
       </a.h6>
-      <a.span {...{  style: subtitleBounce }}>{ isComplete ? subtitle + " >" : subtitle }</a.span>
+      <a.span {...{ style: subtitleBounce }}>{ isComplete ? subtitle + " >" : subtitle }</a.span>
     </div>
   </OuterItem>;
 };

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