diff --git a/packages/fakeyou.com/src/App.tsx b/packages/fakeyou.com/src/App.tsx index 1eaa81b114..7307cefdbe 100644 --- a/packages/fakeyou.com/src/App.tsx +++ b/packages/fakeyou.com/src/App.tsx @@ -837,11 +837,11 @@ class App extends React.Component { */}
- { sessionFetched: this.state.sessionFetched, }} > + + { /> + -
diff --git a/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx b/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx index 712dfc34ba..70a322d15f 100644 --- a/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx +++ b/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx @@ -6,12 +6,14 @@ import { // import { useTransition } from "@react-spring/web"; import JobItem from "./JobItem"; import { useInferenceJobs, useLocalize } from "hooks"; +import { JobListTypes } from "hooks/useInferenceJobs/useInferenceJobs"; import "./InferenceJobsList.scss"; import { Panel } from "components/common"; interface JobsListProps { failures: (fail: string) => string; - jobType: FrontendInferenceJobType; + jobType?: FrontendInferenceJobType; + value?: JobListTypes; onSelect?: (e: any) => any; showNoJobs?: boolean; } @@ -19,11 +21,16 @@ interface JobsListProps { export default function InferenceJobsList({ failures, jobType, + value, onSelect, showNoJobs = false, }: JobsListProps) { - const { inferenceJobs = [], jobStatusDescription } = - useInferenceJobs(jobType); + // undefined specified here to allow 0. + // jobType + 1 because the difference between FrontendInferenceJobType and JobListTypes is an "all" option + + const jobValue = value !== undefined ? value : jobType !== undefined ? (jobType || 0) + 1 : 0; + + const { inferenceJobs = [], jobStatusDescription } = useInferenceJobs(jobValue); const { t } = useLocalize("InferenceJobs"); if (inferenceJobs.length || showNoJobs) { @@ -36,7 +43,6 @@ export default function InferenceJobsList({ {...{ failures, jobStatusDescription, - jobType, key, onSelect, t, diff --git a/packages/fakeyou.com/src/components/layout/InferenceJobsList/JobItem.tsx b/packages/fakeyou.com/src/components/layout/InferenceJobsList/JobItem.tsx index 0eaa6d4c6e..55442b9927 100644 --- a/packages/fakeyou.com/src/components/layout/InferenceJobsList/JobItem.tsx +++ b/packages/fakeyou.com/src/components/layout/InferenceJobsList/JobItem.tsx @@ -8,7 +8,6 @@ import { JobState } from "@storyteller/components/src/jobs/JobStates"; interface JobListItem extends InferenceJob { failures: (fail: string) => string, - jobType: FrontendInferenceJobType, jobStatusDescription?: any, onSelect?: any, refSet?: any, @@ -20,13 +19,13 @@ const OuterItem = ({ className, children, success, jobToken, maybeResultToken, o onSelect(), ref: refSet }}>{ children } : { children }; -export default function JobItem({ failures, maybeFailureCategory, maybeResultToken, onSelect, jobToken, jobState, jobStatusDescription, jobType: inputType, refSet, t, ...rest }: JobListItem) { +export default function JobItem({ failures, frontendJobType, maybeFailureCategory, maybeResultToken, onSelect, jobToken, jobState, jobStatusDescription, refSet, t, ...rest }: JobListItem) { const [hasBounced,hasBouncedSet] = useState(false); // 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 jobType = FrontendInferenceJobType[frontendJobType]; const jobStatus = jobStatusDescription(jobState); const jobStatusClass = jobStatus.toLowerCase().replace("_","-"); diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx index 9242ee3a75..04787c54c8 100644 --- a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx +++ b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx @@ -20,6 +20,7 @@ import { faWandMagicSparkles, faWaveformLines, faTransporter, + faClipboardList } from "@fortawesome/pro-solid-svg-icons"; import { @@ -406,6 +407,19 @@ export default function SideNav({ Explore +
  • + + + My Jobs + +

  • {t("speechTitle")}
  • diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx index 8efc96e915..799fbd4458 100644 --- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx +++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx @@ -7,6 +7,7 @@ import { faWandMagicSparkles, faWaveformLines, faXmark, + faClipboardList } from "@fortawesome/pro-solid-svg-icons"; import { Button } from "components/common"; import SearchBar from "components/common/SearchBar"; @@ -14,6 +15,8 @@ import React, { useEffect, useState } from "react"; import { Link, useHistory } from "react-router-dom"; import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; import { Logout } from "@storyteller/components/src/api/session/Logout"; +import { useModal } from "hooks"; +import { InferenceJobsModal } from "components/modals"; import { useDomainConfig } from "context/DomainConfigContext"; import NavItem from "../../common/NavItem/NavItem"; import ProfileDropdown from "components/common/ProfileDropdown"; @@ -45,6 +48,9 @@ export default function TopNav({ window.location.pathname === "/signup" || window.location.pathname === "/signup/"; + const { open } = useModal(); + const openModal = () => open({ component: InferenceJobsModal }); + const handleMenuButtonClick = () => { if (window.innerWidth < 1200) { if (wrapper) { @@ -204,6 +210,7 @@ export default function TopNav({
    +
    mediaTokenSet(target.value); + const { open } = useModal(); + const options = [{ label: "Media", value: EntityType.media },{ label: "Weights", value: EntityType.weights }]; const changeFilter = ({ target }: { target: any }) => [mediaTypeSet,mediaTypeSet,weightTypeSet][entityType](target.value); + const openModal = () => open({ component: InferenceJobsModal }); + return
    @@ -34,6 +40,7 @@ export default function DevMediaInput({ value }: Props) { owner, ...([{},{ mediaType },{ weightType }][entityType]) }}/> +