fixed slider, new subrouter, etc

packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.tsx

@@ -57,20 +57,15 @@ export default function NumberSlider({
   const step = stepProps && stepProps <= max-min ? stepProps 
     : max-min >= 1 ? 1 : (max-min) / 10;
   const initialValue = initialValueProps && initialValueProps <= max && initialValueProps >= min ? initialValueProps
-  : max-min == step ? min : roundToStep((max+min)/2, step);
+  : max-min === step ? min : roundToStep((max+min)/2, step);
 
-  // const [value, setValue] = useState<number>(initialValue);
-  // const didMount = useRef(false);
   function handleInputOnChange(e: React.ChangeEvent<HTMLInputElement>){
-    // setValue(Number.parseInt(e.target.value));
     if(onChangeCallback)onChangeCallback(Number.parseInt(e.target.value))
   }
   function handleRangeOnChange(rangeValue: number[]){
     if(onChangeCallback)onChangeCallback(rangeValue[0])
-    // setValue(rangeValue[0])
   }
 
-
   return (
     <div>
       <Label {...{ label, required }} />

packages/fakeyou.com/src/v2/view/PageContainer.tsx

@@ -822,7 +822,7 @@ class PageContainer extends React.Component<
                   />
                 </Route>
 
-                <Route path="/storyteller-filter/:mediaToken?">
+                <Route path="/storyteller-filter">
                   <StorytellerFilterPage
                     {...{
                       enqueueInferenceJob: this.props.enqueueInferenceJob,

packages/fakeyou.com/src/v2/view/pages/storyteller_filter/StorytellerFilter.tsx

@@ -3,13 +3,11 @@ import React, {useReducer } from 'react';
 import { useLocalize } from "hooks";
 import { FrontendInferenceJobType, InferenceJob } from '@storyteller/components/src/jobs/InferenceJob';
 
-import { Container, ErrorMessage } from "components/common";
+import { Container } from "components/common";
 import PageHeader from "components/layout/PageHeader";
 
-import PageVideoProvision from './components/pageVideoProvision';
-import PageFilterControls from './components/pageFilterControls';
 import { states, reducer } from "./storytellerFilterReducer";
-
+import SubRoutes from "./storytellerFilterRoutes";
 
 export default function StorytellerFilter(props:{
   enqueueInferenceJob: (
@@ -20,37 +18,20 @@ export default function StorytellerFilter(props:{
   inferenceJobsByCategory: Map<FrontendInferenceJobType, Array<InferenceJob>>;
 }){
   const debug=true;
-  const { t } = useLocalize("StorytellerFilter");
-  const { NO_FILE, FILE_STAGED, FILE_UPLOADING, FILE_UPLOADED, FILE_SELECTED, FILE_LOADING, FILE_LOADED } = states;
+  const {t} = useLocalize("StorytellerFilter");
+  const { NO_FILE } = states;
   const [pageState, dispatchPageState] = useReducer(reducer, {
     status: NO_FILE,
   });
 
-  const pagePicker = () => {
-    switch (pageState.status){
-      case NO_FILE:
-      case FILE_STAGED:
-      case FILE_UPLOADING:
-      case FILE_SELECTED:
-        return <PageVideoProvision {...{debug, t, pageState, dispatchPageState}}/>
-      case FILE_UPLOADED:
-      case FILE_LOADING:
-      case FILE_LOADED:
-        return <PageFilterControls {...{debug, t, pageState, dispatchPageState}}/>
-      default:
-        return <ErrorMessage/>
-    }
-  }
-  const currPage = pagePicker();
-
   return(
     <Container type="panel" className="mb-5">
       <PageHeader
         title={t("headings.title")}
         subText={t("headings.subtitle")}
-        // imageUrl="/images/header/video-mocap.png"
       />
-      {currPage}
+
+      <SubRoutes {...{debug, t, pageState, dispatchPageState}}/>
     </Container>
   );
 }

packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx

@@ -1,4 +1,6 @@
 import React, {useState} from "react";
+import { useParams } from "react-router-dom";
+
 import { useMedia } from "hooks";
 import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
 import { states, Action, State } from "../storytellerFilterReducer";
@@ -22,11 +24,12 @@ export default function PageFilterControls({
   pageState: State;
   dispatchPageState: (action: Action) => void;
 }) {
+  const { mediaToken } = useParams<any>();
+
   useMedia({
-    mediaToken: pageState.mediaFileToken,
+    mediaToken: pageState.mediaFileToken || mediaToken,
     onSuccess: (res: any) => {
       // ratings.gather({ res, key: "token" });
-      console.log(res)
       dispatchPageState({
         type: 'loadFileSuccess',
         payload: {mediaFile: res}

packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageVideoProvision.tsx

@@ -1,9 +1,8 @@
 import React from "react";
-import { Redirect, useLocation } from "react-router-dom";
 
 import { BasicVideo, Panel, Tabs } from "components/common";
 
-import { Action, State } from "../storytellerFilterReducer";
+import { State, Action } from "../storytellerFilterReducer";
 import TabContentUpload from "./tabContentUpload";
 import TabContentLibrary from "./tabContentLibrary";
 
@@ -15,6 +14,7 @@ export default function PageVideoProvision({
   pageState: State;
   dispatchPageState: (action: Action) => void;
 }) {
+
   const tabs = [
     {
       label: t("tabTitle.upload"),
@@ -34,12 +34,6 @@ export default function PageVideoProvision({
     },
   ];
 
-  //pick default tab using pathname
-  const { pathname } = useLocation();
-  if (pathname === "/storyteller-filter" || pathname === "/storyteller-filter/") {
-    return <Redirect to={"/storyteller-filter/upload"} />;
-  }
-
   return(
     <Panel>
       <div className="row g-0">

packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentLibrary.tsx

@@ -1,7 +1,9 @@
-import SelectModal from "components/common/SelectModal/SelectModal";
 import React from "react";
+import { NavLink } from "react-router-dom";
 import { states, Action, State } from "../storytellerFilterReducer";
 import { Button } from "components/common";
+import SelectModal from "components/common/SelectModal/SelectModal";
+
 export default function TabContentLibrary({
   t, pageState, dispatchPageState
 }: {
@@ -9,7 +11,6 @@ export default function TabContentLibrary({
   pageState: State;
   dispatchPageState: (action: Action) => void;
 }){
-
   const handleProceed = ()=>{
     dispatchPageState({type: "loadFile"})
   }
@@ -35,11 +36,13 @@ export default function TabContentLibrary({
           },
         ]}
       />
-      {pageState.status === states.FILE_SELECTED && 
-        <Button 
-          label={t("button.proceed")}
-          onClick={handleProceed}
-        />
+      {pageState.status === states.FILE_SELECTED &&
+        <NavLink to={`load/${pageState.mediaFileToken}`}>
+          <Button 
+            label={t("button.proceed")}
+            onClick={handleProceed}
+          />
+        </NavLink>
       }
     </div>
   );

packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx

@@ -28,7 +28,7 @@ export type Action =
 
 
 export function reducer (state: State, action: Action): State {
-  console.log(action);
+
   switch(action.type){
     case 'stagedFile':
       return {...state, status: states.FILE_STAGED}

packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterRoutes.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import {Switch, Route, useRouteMatch, Redirect} from "react-router-dom";
+import PageFilterControls from "./components/pageFilterControls";
+import PageVideoProvision from "./components/pageVideoProvision";
+import {State,Action} from "./storytellerFilterReducer";
+
+export default function SubRoutes ({
+  debug, t, pageState, dispatchPageState
+}:{
+  debug?:boolean,
+  t:Function,
+  pageState:State,
+  dispatchPageState: (action: Action) => void
+}){
+  const { path } = useRouteMatch();
+
+  return(
+    <Switch>
+      <Route exact path={`${path}/load/:mediaToken`} >
+        <PageFilterControls {...{debug, t, pageState, dispatchPageState}}/>
+      </Route>
+      <Route exact path={`${path}/upload`}>
+        <PageVideoProvision {...{debug, t, pageState, dispatchPageState}}/>
+      </Route>
+      <Route exact path={`${path}/select-media`}>
+        <PageVideoProvision {...{debug, t, pageState, dispatchPageState}}/>
+      </Route>
+      <Route path={`${path}`}>
+        <Redirect to={`${path}/upload`} />
+      </Route>
+    </Switch>
+  )
+}
+