From 565ec1fa69d64326f4f17453d3201ddb6aa32a08 Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Thu, 1 Feb 2024 01:31:05 -0500
Subject: [PATCH] fixed slider, new subrouter, etc

---
 .../common/NumberSliderV2/NumberSliderV2.tsx  |  7 +---
 .../fakeyou.com/src/v2/view/PageContainer.tsx |  2 +-
 .../storyteller_filter/StorytellerFilter.tsx  | 31 ++++-------------
 .../components/pageFilterControls.tsx         |  7 ++--
 .../components/pageVideoProvision.tsx         | 10 ++----
 .../components/tabContentLibrary.tsx          | 17 ++++++----
 .../storytellerFilterReducer.tsx              |  2 +-
 .../storytellerFilterRoutes.tsx               | 34 +++++++++++++++++++
 8 files changed, 60 insertions(+), 50 deletions(-)
 create mode 100644 packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterRoutes.tsx

diff --git a/packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.tsx b/packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.tsx
index cf29ef02d3..4796403494 100644
--- a/packages/fakeyou.com/src/components/common/NumberSliderV2/NumberSliderV2.tsx
+++ b/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 }} />
diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
index 8383dff0ed..3066020d41 100644
--- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx
+++ b/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,
diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/StorytellerFilter.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/StorytellerFilter.tsx
index 2e223acdf9..5ee9447359 100644
--- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/StorytellerFilter.tsx
+++ b/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>
   );
 }
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx
index 8b1683244d..6a9a39a76b 100644
--- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageFilterControls.tsx
+++ b/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}
diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageVideoProvision.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageVideoProvision.tsx
index 095356ae63..78105ce4d1 100644
--- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/pageVideoProvision.tsx
+++ b/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">
diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentLibrary.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentLibrary.tsx
index 7608460c6f..0f4ebcdfaa 100644
--- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/components/tabContentLibrary.tsx
+++ b/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>
   );
diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx
index 1362a3ab13..7da0a9e6cd 100644
--- a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterReducer.tsx
+++ b/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}
diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterRoutes.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_filter/storytellerFilterRoutes.tsx
new file mode 100644
index 0000000000..ce67ca1a19
--- /dev/null
+++ b/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>
+  )
+}
+  
\ No newline at end of file