Merge pull request #1388 from guardian/pf/uploads-page-to-tsx

Convert Uploads page to TypeScript

Author: bryophyta

public/video-ui/src/components/Header.jsx

@@ -27,7 +27,7 @@ export default class Header extends React.Component {
   };
 
   renderProgress() {
-    if (this.props.s3Upload.total) {
+    if (this.props.s3Upload.status === 'uploading') {
       // Start prompting the user about reloading the page
       window.onbeforeunload = () => {
         return false;

public/video-ui/src/components/Pluto/PlutoProjectPicker.tsx

@@ -1,18 +1,18 @@
-import React, { useEffect } from 'react';
-import { ManagedForm, ManagedField } from '../ManagedForm';
-import SelectBox from '../FormFields/SelectBox';
-import { Video } from '../../services/VideosApi';
+import React, { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { saveVideo } from '../../actions/VideoActions/saveVideo';
+import { Video } from '../../services/VideosApi';
 import {
   fetchCommissions,
   fetchProjects,
   PlutoState
 } from '../../slices/pluto';
 import { AppDispatch, RootState } from '../../util/setupStore';
+import SelectBox from '../FormFields/SelectBox';
+import { ManagedField, ManagedForm } from '../ManagedForm';
 
 type Props = {
   video: Video;
-  saveVideo: { (video: Video): Promise<void> };
 };
 
 const cloneVideoWithoutPlutoProjectId = (video: Video): Video => {
@@ -23,7 +23,7 @@ const cloneVideoWithoutPlutoProjectId = (video: Video): Video => {
   return clone;
 };
 
-export const PlutoProjectPicker = ({ video, saveVideo }: Props) => {
+export const PlutoProjectPicker = ({ video }: Props) => {
   const dispatch = useDispatch<AppDispatch>();
 
   const { commissions, projects } = useSelector<RootState, PlutoState>(
@@ -34,15 +34,17 @@ export const PlutoProjectPicker = ({ video, saveVideo }: Props) => {
     dispatch(fetchCommissions());
   }, []);
 
+  const dispatchSaveVideo = (video: Video) => dispatch(saveVideo(video));
+
   useEffect(() => {
     const commissionId = video.plutoData?.commissionId;
     if (commissionId) {
       dispatch(fetchProjects(video.plutoData.commissionId));
     }
   }, [video.plutoData?.commissionId]);
 
-  const onCommissionSelection = () => {
-    saveVideo(cloneVideoWithoutPlutoProjectId(video)).then(() => {
+  const onCommissionSelection = useCallback(() => {
+    dispatchSaveVideo(cloneVideoWithoutPlutoProjectId(video)).then(() => {
       // commissionId is expected to be set since this method is a side effect
       // of a commissionId being selected, but testing to maintain
       // type safety.
@@ -51,12 +53,12 @@ export const PlutoProjectPicker = ({ video, saveVideo }: Props) => {
         dispatch(fetchProjects(commissionId));
       }
     });
-  };
+  }, [video]);
 
   return (
     <ManagedForm
       data={video}
-      updateData={saveVideo}
+      updateData={dispatchSaveVideo}
       editable={true}
       formName="Pluto"
     >

public/video-ui/src/components/VideoUpload/AddSelfHostedAsset.jsx

@@ -17,7 +17,7 @@ export default class AddSelfHostedAsset extends React.Component {
   };
 
   render() {
-    const { video, permissions, uploading, startUpload } = this.props;
+    const { video, permissions, isUploading, startUpload } = this.props;
 
     if (!permissions || !permissions.addSelfHostedAsset) {
       return false;
@@ -34,13 +34,13 @@ export default class AddSelfHostedAsset extends React.Component {
               className="form__field__file"
               type="file"
               onChange={this.setFile}
-              disabled={uploading}
+              disabled={isUploading}
               accept="video/*,.mxf"
             />
             <button
               type="button"
               className="btn button__secondary__assets"
-              disabled={!this.state.file || uploading}
+              disabled={!this.state.file || isUploading}
               onClick={() =>
                 startUpload({
                   id: video.id,

public/video-ui/src/components/VideoUpload/VideoAsset.test.tsx

@@ -166,7 +166,9 @@ describe('VideoAsset', () => {
       expect(deleteButton).toBeDisabled();
 
       // Check that processing status is displayed
-      expect(screen.getByText('Uploading to YouTube')).toBeInTheDocument();
+      expect(
+        screen.getAllByText('Uploading to YouTube').length
+      ).toBeGreaterThan(0);
     });
 
     it('does not call selectAsset when disabled activate button is clicked', async () => {

public/video-ui/src/components/VideoUpload/VideoAsset.tsx

@@ -274,9 +274,10 @@ export function Asset({
   permissions: Record<string, boolean>;
   activatingAssetNumber: number;
 }) {
-  const { asset, metadata, processing } = upload;
   const dispatch = useDispatch<AppDispatch>();
 
+  const { asset, metadata, processing } = upload;
+
   const user = metadata?.user ?? '';
   const info = `Asset ${upload.id} - ${metadata?.originalFilename || '(no filename)'}`;
   const timestamp = metadata?.startTimestamp || false;
@@ -336,6 +337,7 @@ export function Asset({
       <div className="video-trail__item">
         <div className="video-trail__upload">
           <AssetProgress {...processing} />
+          <div>{processing.status}</div>
         </div>
         <div className="video-trail__item__details">
           <AssetControls

public/video-ui/src/components/VideoUpload/YoutubeUpload.jsx

@@ -33,7 +33,7 @@ export default class YoutubeUpload extends React.Component {
               className="form__field__file"
               type="file"
               onChange={this.setFile}
-              disabled={!canUploadToYouTube || this.props.uploading}
+              disabled={!canUploadToYouTube || this.props.isUploading}
               accept="video/*,.mxf"
             />
             { !canUploadToYouTube ?
@@ -44,7 +44,7 @@ export default class YoutubeUpload extends React.Component {
             <button
               type="button"
               className="btn button__secondary__assets"
-              disabled={!canUploadToYouTube || this.props.uploading || !this.state.file}
+              disabled={!canUploadToYouTube || this.props.isUploading || !this.state.file}
               onClick={() =>
                 startUpload({
                   id: video.id,

public/video-ui/src/pages/Upload/index.jsx

@@ -0,0 +1,110 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { createAsset } from '../../actions/VideoActions/createAsset';
+import { getVideo } from '../../actions/VideoActions/getVideo';
+import { revertAsset } from '../../actions/VideoActions/revertAsset';
+import { saveVideo } from '../../actions/VideoActions/saveVideo';
+import PlutoProjectLink from '../../components/Pluto/PlutoProjectLink';
+import { PlutoProjectPicker } from '../../components/Pluto/PlutoProjectPicker';
+import AddAssetFromURL from '../../components/VideoUpload/AddAssetFromURL';
+import AddSelfHostedAsset from '../../components/VideoUpload/AddSelfHostedAsset';
+import { VideoTrail } from '../../components/VideoUpload/VideoTrail';
+import YoutubeUpload from '../../components/VideoUpload/YoutubeUpload';
+import { startVideoUpload } from '../../slices/s3Upload';
+import { fetchCategories, fetchChannels } from '../../slices/youtube';
+import { AppDispatch, RootState } from '../../util/setupStore';
+
+export const VideoUpload = (props: { params: { id: string } }) => {
+  const dispatch = useDispatch<AppDispatch>();
+
+  const store = useSelector(
+    ({
+      config,
+      error,
+      formFieldsWarning,
+      search,
+      s3Upload,
+      usage,
+      videoEditOpen,
+      youtube,
+      video,
+      uploads
+    }: RootState) => ({
+      config,
+      error,
+      formFieldsWarning,
+      search,
+      s3Upload,
+      usage,
+      videoEditOpen,
+      youtube,
+      video: video.video,
+      uploads,
+      activatingAssetNumber: video.activatingAssetNumber
+    })
+  );
+
+  useEffect(() => {
+    dispatch(getVideo(props.params.id));
+    if (store.youtube.categories.length === 0) {
+      dispatch(fetchCategories());
+    }
+    if (store.youtube.channels.length === 0) {
+      dispatch(fetchChannels());
+    }
+  }, [
+    dispatch,
+    props.params.id,
+    store.youtube.categories,
+    store.youtube.channels
+  ]);
+
+  const isUploading = store.s3Upload.status === 'uploading';
+
+  const projectId = store.video.plutoData?.projectId;
+
+  return (
+    <div>
+      <div className="video__main">
+        <div className="video__main__header">
+          <div className="video__detailbox">
+            <div>
+              <div className="form__group">
+                {projectId && <PlutoProjectLink projectId={projectId} />}
+                <PlutoProjectPicker video={store.video} />
+              </div>
+            </div>
+            <YoutubeUpload
+              video={store.video}
+              categories={store.youtube.categories}
+              channels={store.youtube.channels}
+              isUploading={isUploading}
+              saveVideo={bindActionCreators(saveVideo, dispatch)}
+              startUpload={bindActionCreators(startVideoUpload, dispatch)}
+            />
+            <AddAssetFromURL
+              video={store.video}
+              createAsset={bindActionCreators(createAsset, dispatch)}
+            />
+            <AddSelfHostedAsset
+              video={store.video}
+              permissions={store.config.permissions}
+              isUploading={isUploading}
+              startUpload={bindActionCreators(startVideoUpload, dispatch)}
+            />
+          </div>
+          <VideoTrail
+            video={store.video}
+            uploads={store.uploads}
+            selectAsset={(version: number) =>
+              bindActionCreators(revertAsset(store.video.id, version), dispatch)
+            }
+            permissions={store.config.permissions}
+            activatingAssetNumber={store.activatingAssetNumber}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};