rename

src/components/UploadItem/index.jsx

@@ -1,101 +0,0 @@
-import UploadItem from "./UploadItem"
-import {cancelUpload} from "../../actions/uploads";
-import {connect} from "react-redux";
-import React from "react";
-
-class UploadItemContainer extends React.Component {
-
-    constructor(props) {
-        super(props);
-
-        const completed = this.props.completed;
-        const canceled = this.props.canceled;
-
-        this.uploadFinished = false;
-
-        this.state = {
-            progressBarStyle: {visibility: (completed || canceled) ? "hidden" : "visible"},
-            stopUploadButtonStyle: (completed || canceled) ? {visibility:"visible", opacity: 1} : {visibility: "hidden", opacity: 0}
-        }
-    }
-    
-    hideProgress = () => {
-
-        this.setState(() => ({
-            ...this.state,
-            progressBarStyle: {visibility: "hidden"},
-            stopUploadButtonStyle: {opacity: 1, visibility: "visible"}
-
-        }))
-    }
-
-    showProgress = () => {
-
-        this.setState(() => ({
-            ...this.state,
-            progressBarStyle: {visibility: "visible"},
-            stopUploadButtonStyle: {opacity: 0, visibility: "hidden"}
-
-        }))
-    }
-
-    cancelUploadEvent = () => {
-
-        if (!this.props.completed) {
-            this.props.source.cancel("User Canceled Upload")
-            this.props.dispatch(cancelUpload(this.props.id))
-        }
-        
-    }
-
-    getUploadImage = () => {
-
-        if (this.props.canceled) {
-            return "/images/error-red.png"
-        } else if (this.props.completed) {
-            return "/images/check-green.png"
-        } else {
-            return "/images/close-circle-outline.svg"
-        }
-    }
-
-    componentDidUpdate = () => {
-
-        if (this.props.completed && !this.uploadFinished) {
-
-            this.uploadFinished = true; 
-
-            this.setState(() => ({
-            ...this.state,
-            progressBarStyle: {visibility: "hidden"},
-            stopUploadButtonStyle: {opacity: 1, visibility: "visible"}
-
-            }))
-        }
-
-        if (this.props.canceled && !this.uploadFinished) {
-
-            this.uploadFinished = true;
-            const completed = this.props.completed;
-            const canceled = this.props.canceled;
-
-            this.setState(() => {
-                return {progressBarStyle: {visibility: (completed || canceled) ? "hidden" : "visible"},
-                stopUploadButtonStyle: (completed || canceled) ? {visibility:"visible", opacity: 1} : {visibility: "hidden", opacity: 0}}
-            })
-        }
-    }
-
-    render() {
-
-        return <UploadItem 
-                hideProgress={this.hideProgress}
-                showProgress={this.showProgress}
-                cancelUploadEvent={this.cancelUploadEvent}
-                getUploadImage={this.getUploadImage}
-                state={this.state}
-                {...this.props}/>
-    }
-}
-
-export default connect()(UploadItemContainer)

src/components/UploadItem/index.tsx

@@ -5,8 +5,9 @@ import { getCancelToken } from "../../utils/cancelTokenManager";
 import CloseIcon from "../../icons/CloseIcon";
 import CheckCircleIcon from "../../icons/CheckCircleIcon";
 import AlertIcon from "../../icons/AlertIcon";
+import { UploadItemType } from "../../reducers/uploader";
 
-const UploadItem = (props) => {
+const UploadItem: React.FC<UploadItemType> = (props) => {
   const filesRefreshed = useRef(false);
   const { invalidateFilesCache } = useFilesClient();
   const { invalidateQuickFilesCache } = useQuickFilesClient();

src/reducers/uploader.ts

@@ -1,6 +1,6 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
-interface UploadItemType {
+export interface UploadItemType {
   id: string;
   progress: number;
   name: string;