Merge pull request #401 from charlielee/issue-392

Pass take in prop through to modals to make components cleaner

package.json

@@ -43,7 +43,7 @@
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-redux": "^7.2.6",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.3.0",
     "redux": "^4.1.2",
     "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.4.1",
@@ -53,10 +53,9 @@
     "@types/node": "^16.5.0",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
-    "@types/react-router-dom": "^5.3.0",
     "@types/uuid": "^8.3.4",
-    "@types/webpack-node-externals": "^2.5.3",
     "@types/w3c-image-capture": "^1.0.5",
+    "@types/webpack-node-externals": "^2.5.3",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
     "cross-env": "^7.0.3",

src/renderer/components/animator/Animator/Animator.tsx

@@ -1,3 +1,4 @@
+import { Take } from "../../../../common/Project";
 import Content from "../../common/Content/Content";
 import IconName from "../../common/Icon/IconName";
 import Page from "../../common/Page/Page";
@@ -13,18 +14,22 @@ import Preview from "../Preview/Preview";
 import StatusToolbar from "../StatusToolbar/StatusToolbar";
 import Timeline from "../Timeline/Timeline";
 
-const Animator = (): JSX.Element => {
+interface AnimatorProps {
+  take: Take;
+}
+
+const Animator = ({ take }: AnimatorProps): JSX.Element => {
   return (
     <Page>
       <PageBody>
         <Content>
-          <StatusToolbar />
+          <StatusToolbar take={take} />
 
           <Preview />
 
           <AnimationToolbar />
 
-          <Timeline />
+          <Timeline take={take} />
         </Content>
 
         <Sidebar>
@@ -45,7 +50,7 @@ const Animator = (): JSX.Element => {
                 </SidebarBlock>
               </Tab>,
 
-              <MediaTab />,
+              <MediaTab take={take} />,
             ]}
           />
         </Sidebar>

src/renderer/components/animator/MediaTab/MediaTab.tsx

@@ -1,7 +1,5 @@
-import { useSelector } from "react-redux";
 import { PageRoute } from "../../../../common/PageRoute";
-import { getTrackLength } from "../../../../common/Project";
-import { RootState } from "../../../redux/store";
+import { getTrackLength, Take } from "../../../../common/Project";
 import Button from "../../common/Button/Button";
 import IconName from "../../common/Icon/IconName";
 import InputGroup from "../../common/Input/InputGroup/InputGroup";
@@ -10,13 +8,11 @@ import SidebarBlock from "../../common/SidebarBlock/SidebarBlock";
 import Tab from "../../common/Tab/Tab";
 import ExportDirectory from "../ExportDirectory/ExportDirectory";
 
-const MediaTab = (): JSX.Element => {
-  const { take } = useSelector((state: RootState) => state.project);
-
-  if (!take) {
-    return <></>;
-  }
+interface MediaTabProps {
+  take: Take;
+}
 
+const MediaTab = ({ take }: MediaTabProps): JSX.Element => {
   return (
     <Tab>
       <SidebarBlock title="Media" titleIcon={IconName.DOCUMENT}>

src/renderer/components/animator/StatusToolbar/StatusToolbar.tsx

@@ -1,22 +1,22 @@
-import { useSelector } from "react-redux";
 import { PageRoute } from "../../../../common/PageRoute";
 import { getTrackLength, Take } from "../../../../common/Project";
 import { zeroPad } from "../../../../common/utils";
-import { RootState } from "../../../redux/store";
 import Button from "../../common/Button/Button";
 import { ButtonColor } from "../../common/Button/ButtonColor";
 import Toolbar from "../../common/Toolbar/Toolbar";
 import ToolbarItem, {
   ToolbarItemAlign,
 } from "../../common/ToolbarItem/ToolbarItem";
 
-const StatusToolbar = (): JSX.Element => {
-  const [take] = useSelector((state: RootState) => [state.project.take]);
+interface StatusToolbarProps {
+  take: Take;
+}
 
+const StatusToolbar = ({ take }: StatusToolbarProps): JSX.Element => {
   const makeTakeTitle = (take: Take) =>
     `Shot ${zeroPad(take.shotNumber, 3)} Take ${zeroPad(take.takeNumber, 2)}`;
 
-  return take ? (
+  return (
     <Toolbar borderBottom>
       <ToolbarItem stretch align={ToolbarItemAlign.LEFT}>
         <Button
@@ -33,8 +33,6 @@ const StatusToolbar = (): JSX.Element => {
         {take.frameRate} FPS
       </ToolbarItem>
     </Toolbar>
-  ) : (
-    <Toolbar />
   );
 };
 

src/renderer/components/animator/Timeline/Timeline.tsx

@@ -1,41 +1,45 @@
 import { useEffect, useRef } from "react";
 import { useSelector } from "react-redux";
-import { getTrackLength } from "../../../../common/Project";
+import { getTrackLength, Take } from "../../../../common/Project";
 import { RootState } from "../../../redux/store";
 import "./Timeline.css";
 import TimelinePosition from "./TimelinePosition/TimelinePosition";
 import TimelineTrack from "./TimelineTrack/TimelineTrack";
 
-const Timeline = (): JSX.Element => {
-  const state = useSelector((state: RootState) => state);
-  const frameTrack = state.project.take?.frameTrack;
-  const playbackPosition = state.app.playback.position;
+interface TimelineProps {
+  take: Take;
+}
 
+const Timeline = ({ take }: TimelineProps): JSX.Element => {
+  const frameTrack = take.frameTrack;
+
+  const playbackPosition = useSelector(
+    (state: RootState) => state.app.playback.position
+  );
   const timelineRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (!timelineRef.current) {
       return;
     }
 
-    if (playbackPosition > 0 && frameTrack) {
+    if (playbackPosition > 0) {
       timelineRef.current.scrollLeft =
         playbackPosition *
         (timelineRef.current.scrollWidth / getTrackLength(frameTrack));
     } else {
       timelineRef.current.scrollLeft = timelineRef.current.scrollWidth;
     }
-  }, [playbackPosition, frameTrack?.trackItems]);
+  }, [playbackPosition, frameTrack.trackItems]);
 
   return (
     <div className="timeline" ref={timelineRef}>
       <div className="timeline__inner">
         <TimelinePosition
           frameRate={15}
-          totalFrames={frameTrack?.trackItems.length ?? 0}
+          totalFrames={frameTrack.trackItems.length ?? 0}
         />
-
-        {frameTrack && <TimelineTrack track={frameTrack} key={frameTrack.id} />}
+        <TimelineTrack track={frameTrack} key={frameTrack.id} />
       </div>
     </div>
   );

src/renderer/components/common/App/App.tsx

@@ -1,5 +1,7 @@
-import { Redirect, Route } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { Navigate, Outlet, Route, Routes } from "react-router-dom";
 import { PageRoute } from "../../../../common/PageRoute";
+import { RootState } from "../../../redux/store";
 import Animator from "../../animator/Animator/Animator";
 import ExportVideoModal from "../../modals/ExportVideoModal/ExportVideoModal";
 import PreferencesModal from "../../modals/PreferencesModal/PreferencesModal";
@@ -8,28 +10,40 @@ import AppListener from "../AppListener/AppListener";
 import AppLoad from "../AppLoad/AppLoad";
 
 const App = (): JSX.Element => {
+  const take = useSelector((state: RootState) => state.project.take);
+
   return (
     <>
       <AppListener />
       <AppLoad />
 
-      <Route exact path="/">
-        <Redirect to={PageRoute.STARTUP_MODAL} />
-      </Route>
+      <Routes>
+        <Route index element={<Navigate to={PageRoute.STARTUP_MODAL} />} />
+
+        <Route
+          path={PageRoute.ANIMATOR}
+          element={
+            <>
+              <Outlet />
+              {take && <Animator take={take} />}
+            </>
+          }
+        >
+          <Route path={PageRoute.STARTUP_MODAL} element={<StartupModal />} />
 
-      <Route
-        exact
-        path={PageRoute.EXPORT_VIDEO_MODAL}
-        component={ExportVideoModal}
-      />
-      <Route
-        exact
-        path={PageRoute.PREFERENCES_MODAL}
-        component={PreferencesModal}
-      />
-      <Route exact path={PageRoute.STARTUP_MODAL} component={StartupModal} />
+          <Route
+            path={PageRoute.PREFERENCES_MODAL}
+            element={<PreferencesModal />}
+          />
 
-      <Route path={PageRoute.ANIMATOR} component={Animator} />
+          {take && (
+            <Route
+              path={PageRoute.EXPORT_VIDEO_MODAL}
+              element={<ExportVideoModal take={take} />}
+            />
+          )}
+        </Route>
+      </Routes>
     </>
   );
 };

src/renderer/components/common/Button/Button.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { useHistory } from "react-router";
+import { useNavigate } from "react-router-dom";
 import { PageRoute } from "../../../../common/PageRoute";
 import Icon from "../Icon/Icon";
 import IconName from "../Icon/IconName";
@@ -35,10 +35,10 @@ const Button = ({
   onClick,
   disabled = false,
 }: ButtonProps): JSX.Element => {
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const handleClick = () => {
-    typeof onClick === "string" ? history.push(onClick) : onClick();
+    typeof onClick === "string" ? navigate(onClick) : onClick();
   };
 
   return (

src/renderer/components/modals/ExportVideoModal/ExportVideoModal.tsx

@@ -1,8 +1,13 @@
 import { useState } from "react";
+import { Take } from "../../../../common/Project";
 import ExportVideoModalOptions from "./ExportVideoModalOptions/ExportVideoModalOptions";
 import ExportVideoModalRendering from "./ExportVideoModalRendering/ExportVideoModalRendering";
 
-const ExportVideoModal = (): JSX.Element => {
+interface ExportVideoModalProps {
+  take: Take;
+}
+
+const ExportVideoModal = ({ take }: ExportVideoModalProps): JSX.Element => {
   const [ffmpegArguments, setFFmpegArguments] = useState("");
   const [videoFilePath, setVideoFilePath] = useState("");
 
@@ -11,6 +16,7 @@ const ExportVideoModal = (): JSX.Element => {
       <ExportVideoModalOptions
         onSubmit={setFFmpegArguments}
         onVideoFilePathChange={setVideoFilePath}
+        take={take}
       />
     );
   } else {

src/renderer/components/modals/ExportVideoModal/ExportVideoModalOptions/ExportVideoModalOptions.tsx

@@ -1,11 +1,10 @@
 import { useEffect, useState } from "react";
-import { useSelector } from "react-redux";
 import { PageRoute } from "../../../../../common/PageRoute";
 import {
   getTrackLength,
   makeFrameFilePath,
+  Take,
 } from "../../../../../common/Project";
-import { RootState } from "../../../../redux/store";
 import Button from "../../../common/Button/Button";
 import { ButtonColor } from "../../../common/Button/ButtonColor";
 import Content from "../../../common/Content/Content";
@@ -35,15 +34,16 @@ const fFmpegQualityPresets = {
 interface ExportVideoModalOptionsProps {
   onSubmit(ffmpegArguments: string): void;
   onVideoFilePathChange(videoFilePath: string): void;
+  take: Take;
 }
 
 const ExportVideoModalOptions = ({
   onSubmit,
   onVideoFilePathChange,
+  take,
 }: ExportVideoModalOptionsProps): JSX.Element => {
-  const { take } = useSelector((state: RootState) => state.project);
   const [currentFilePath, setCurrentFilePath] = useState(
-    `${take?.directoryPath}.mp4`
+    `${take.directoryPath}.mp4`
   );
   const [qualityPreset, setQualityPreset] = useState(
     fFmpegQualityPresets.Medium
@@ -63,10 +63,6 @@ const ExportVideoModalOptions = ({
   };
 
   useEffect(() => {
-    if (!take) {
-      return;
-    }
-
     const videoFilePath = window.preload.normalizePath(
       currentFilePath.endsWith(".mp4")
         ? currentFilePath
@@ -75,12 +71,12 @@ const ExportVideoModalOptions = ({
     onVideoFilePathChange(videoFilePath);
 
     const framePath = makeFrameFilePath(take, "%05d");
-    const totalFrames = getTrackLength(take?.frameTrack);
+    const totalFrames = getTrackLength(take.frameTrack);
 
     setFFmpegArguments(
       [
         "-y", // Overwrite output file if it already exists
-        `-framerate ${take?.frameRate}`,
+        `-framerate ${take.frameRate}`,
         `-start_number 0`,
         `-i "${framePath}"`,
         `-frames:v ${totalFrames}`,

src/renderer/components/modals/StartupModal/StartupModal.tsx

@@ -1,5 +1,5 @@
 import { useDispatch, useSelector } from "react-redux";
-import { useHistory } from "react-router";
+import { useNavigate } from "react-router-dom";
 import { Action } from "redux";
 import { ThunkDispatch } from "redux-thunk";
 import { PageRoute } from "../../../../common/PageRoute";
@@ -31,15 +31,15 @@ const StartupModal = (): JSX.Element => {
     (state: RootState) => state.app.userPreferences
   );
   const dispatch: ThunkDispatch<RootState, void, Action> = useDispatch();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const newProject = async () => {
     const directory =
       workingDirectory ?? (await dispatch(changeWorkingDirectory()));
 
     if (directory !== undefined) {
       dispatch(addTake(makeTake(directory, 1, 1, 15)));
-      history.push(PageRoute.ANIMATOR);
+      navigate(PageRoute.ANIMATOR);
     }
   };