Refactor: Moved files according to their view categories

package.json

@@ -11,42 +11,44 @@
     "url": "git@github.com:negative0/rclone-webui-react.git"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.1.9",
-    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
+    "@coreui/coreui": "^2.1.12",
+    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
     "@coreui/icons": "0.3.0",
-    "@coreui/react": "~2.1.5",
-    "axios": "^0.18.0",
+    "@coreui/react": "~2.5.1",
+    "axios": "^0.19.0",
     "bootstrap": "^4.3.1",
     "chart.js": "^2.8.0",
     "classnames": "^2.2.6",
-    "core-js": "^2.6.5",
-    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.11.2",
+    "core-js": "^3.1.4",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
     "flag-icon-css": "^3.3.0",
     "font-awesome": "^4.7.0",
     "lodash": "^4.17.11",
-    "node-sass": "^4.11.0",
+    "node-sass": "^4.12.0",
     "package.json": "^2.0.1",
     "prop-types": "^15.7.2",
-    "react": "^16.8.5",
-    "react-app-polyfill": "^0.2.2",
+    "react": "^16.8.6",
+    "react-app-polyfill": "^1.0.1",
     "react-autosuggest": "^9.4.3",
-    "react-chartjs-2": "^2.7.4",
-    "react-dnd": "^7.4.5",
-    "react-dnd-html5-backend": "^7.4.4",
-    "react-dom": "^16.8.5",
-    "react-router-config": "^4.4.0-beta.8",
-    "react-router-dom": "~4.3.1",
-    "react-test-renderer": "^16.8.5",
-    "reactstrap": "^7.1.0",
-    "simple-line-icons": "^2.4.1",
+    "react-chartjs-2": "^2.7.6",
+    "react-dnd": "^8.0.0",
+    "react-dnd-html5-backend": "^8.0.0",
+    "react-dom": "^16.8.6",
+    "react-redux": "^7.1.0",
+    "react-router-config": "^5.0.1",
+    "react-router-dom": "~5.0.1",
+    "react-test-renderer": "^16.8.6",
     "react-toastify": "^5.2.1",
+    "reactstrap": "^8.0.0",
     "redux": "^4.0.1",
-    "react-redux": "^7.0.3",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "simple-line-icons": "^2.4.1"
   },
   "devDependencies": {
-    "react-scripts": "^2.1.8"
+    "react-scripts": "^3.0.1",
+    "redux-mock-store": "^1.5.3",
+    "fetch-mock": "^7.3.3"
   },
   "scripts": {
     "start": "react-scripts start",

src/actions/configActions.js

@@ -1,4 +1,4 @@
-import axiosInstance from "../utils/API";
+import axiosInstance from "../utils/API/API";
 import {GET_CONFIG_DUMP, GET_PROVIDERS, REQUEST_ERROR, REQUEST_SUCCESS} from "./types";
 
 export const getProviders = () => dispatch => {

src/actions/explorerActions.js

@@ -1,4 +1,4 @@
-import axiosInstance from "../utils/API";
+import axiosInstance from "../utils/API/API";
 import {GET_CONFIG_FOR_REMOTE, GET_FILES_LIST, GET_REMOTE_LIST, REQUEST_ERROR, REQUEST_SUCCESS} from "./types";
 import {addColonAtLast} from "../utils/Tools";
 

src/actions/statusActions.js

@@ -1,4 +1,4 @@
-import axiosInstance from "../utils/API";
+import axiosInstance from "../utils/API/API";
 import {FETCH_STATUS, REQUEST_ERROR, REQUEST_SUCCESS} from "./types";
 
 

src/containers/DefaultLayout/DefaultHeader.js

@@ -49,7 +49,7 @@ class DefaultHeader extends Component {
                     </NavItem>
                     <AppHeaderDropdown direction="down">
                         <DropdownToggle nav>
-                            <img src={'../../assets/img/avatars/6.jpg'} className="img-avatar"
+                            <img className="img-avatar"
                                  alt="admin@bootstrapmaster.com"/>
                         </DropdownToggle>
                         <DropdownMenu right style={{right: 'auto'}}>

src/polyfill.js

@@ -12,12 +12,12 @@
 // import 'core-js/es6/math'
 // import 'core-js/es6/string'
 // import 'core-js/es6/date'
-import 'core-js/es6/array'
+import 'core-js/es/array'
 // import 'core-js/es6/regexp'
-import 'core-js/es6/map'
+import 'core-js/es/map'
 // import 'core-js/es6/weak-map'
-import 'core-js/es6/set'
-import 'core-js/es7/object'
+import 'core-js/es/set'
+import 'core-js/es/object'
 
 /** IE10 and IE11 requires the following for the Reflect API. */
 // import 'core-js/es6/reflect'

src/reducers/explorerState.js → src/reducers/explorerStateReducer.js

@@ -9,7 +9,7 @@ import {
     NAVIGATE_FWD,
     NAVIGATE_UP
 } from "../actions/types";
-import BackStack from "../utils/BackStack";
+import BackStack from "../utils/classes/BackStack";
 
 const initialState = {
     backStacks: {},

src/reducers/index.js

@@ -3,7 +3,7 @@ import {combineReducers} from 'redux';
 import statusReducer from './statusReducer';
 import configReducer from "./configReducer";
 import explorerReducer from "./explorerReducer";
-import explorerState from "./explorerState";
+import explorerState from "./explorerStateReducer";
 
 export default combineReducers({
     status: statusReducer,

src/routes.js

@@ -1,12 +1,13 @@
 import React from 'react';
 
-const MyDashboard = React.lazy(() => import('./views/NewDrive'));
+const MyDashboard = React.lazy(() => import('./views/RemoteManagement/NewDrive'));
 const Home = React.lazy(() => import('./views/Home'));
-const ShowConfig = React.lazy(() => import('./views/ShowConfig'));
-const RemoteExplorerLayout = React.lazy(() => import("./views/RemoteExplorerLayout"))
+const ShowConfig = React.lazy(() => import('./views/RemoteManagement/ShowConfig'));
+const RemoteExplorerLayout = React.lazy(() => import("./views/Explorer/RemoteExplorerLayout"))
 const Login = React.lazy(() => import("./views/Pages/Login"))
 
 // https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
+// Define the routes as required
 const routes = [
     {path: '/', exact: true, name: 'Home'},
     {path: '/newdrive', exact: true, name: 'New Drive', component: MyDashboard},

src/utils/API.js → src/utils/API/API.js

@@ -1,5 +1,4 @@
 import axios from "axios";
-import './Global'
 
 
 let axiosInstance = axios.create({

src/utils/StateLoader.js

@@ -1,3 +1,4 @@
+// Used to persist redux-state to the localStorage.
 export class StateLoader {
 
     loadState() {

src/utils/BackStack.js → src/utils/classes/BackStack.js

@@ -1,4 +1,5 @@
 import Stack from './Stack'
+
 // A very simple stack implementation to handle back links in remote explorer
 class BackStack {
     constructor() {

src/views/Base/BackendStatusCard/BackendStatusCard.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {Button, Card, CardBody, CardHeader} from "reactstrap";
-import "../../../utils/Global.js";
 import PropTypes from "prop-types";
 import ReactDOM from "react-dom";
 import RunningJobs from "../RunningJobs";

src/views/Base/BandwidthStatusCard/BandwidthStatusCard.js

@@ -1,5 +1,4 @@
 import React from "react";
-import "../../../utils/Global.js";
 import BandwidthWidget from "../Widgets/BandwidthWidget";
 
 

src/views/Base/NewFolder/FileOperations.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import {Button} from "reactstrap";
+import {Button, Input} from "reactstrap";
 import NewFolder from "./NewFolder";
 import PropTypes from "prop-types";
-import Input from "reactstrap/es/Input";
 import {connect} from "react-redux";
 import {
     changeGridMode,

src/views/Base/NewFolder/NewFolder.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Button, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader} from "reactstrap";
 import PropTypes from "prop-types";
-import axiosInstance from "../../../utils/API";
+import axiosInstance from "../../../utils/API/API";
 import {toast} from "react-toastify";
 import {addColonAtLast} from "../../../utils/Tools";
 import {connect} from "react-redux";

src/views/Base/RunningJobs/RunningJobs.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import {Card, CardBody, CardHeader, Col, Progress, Row} from "reactstrap";
-import "../../../utils/Global";
 import {formatBytes, secondsToStr} from "../../../utils/Tools";
 import PropTypes from "prop-types";
 import {connect} from "react-redux";

src/views/FilesView/FileComponent.js → src/views/Explorer/FilesView/FileComponent.js

@@ -3,8 +3,8 @@ import {Button, Card, CardBody, CardFooter} from "reactstrap";
 
 import {ItemTypes} from './Constants'
 import {DragSource} from 'react-dnd'
-import {formatBytes} from "../../utils/Tools";
-import {performCopyFile, performMoveFile} from "../../utils/API";
+import {formatBytes} from "../../../utils/Tools";
+import {performCopyFile, performMoveFile} from "../../../utils/API/API";
 import {toast} from "react-toastify";
 import {compose} from "redux";
 import {connect} from "react-redux";

src/views/FilesView/FilesView.js → src/views/Explorer/FilesView/FilesView.js

@@ -1,18 +1,16 @@
 import React from "react";
 import PropTypes from "prop-types";
-import axiosInstance from "../../utils/API";
-import {Alert, Button, Col, Row, Table} from "reactstrap";
-import "../../utils/Global";
+import axiosInstance from "../../../utils/API/API";
+import {Alert, Button, Col, Container, Row, Table} from "reactstrap";
 import {DropTarget} from "react-dnd";
 import FileComponent from "./FileComponent";
 import {ItemTypes} from "./Constants";
 import {toast} from "react-toastify";
-import {addColonAtLast, changeListVisibility} from "../../utils/Tools";
+import {addColonAtLast, changeListVisibility} from "../../../utils/Tools";
 import {connect} from "react-redux";
-import {getFiles} from "../../actions/explorerActions";
+import {getFiles} from "../../../actions/explorerActions";
 import {compose} from "redux";
-import {changePath, navigateUp} from "../../actions/explorerStateActions";
-import Container from "reactstrap/es/Container";
+import {changePath, navigateUp} from "../../../actions/explorerStateActions";
 
 
 /*
@@ -74,6 +72,7 @@ function renderOverlay() {
 * END code for react DND
 * */
 
+// Provides the up button view in the files view
 function UpButtonComponent({upButtonHandle, gridMode}) {
     if (gridMode === "card") {
         return (

src/views/RemoteExplorer/RemoteExplorer.js → src/views/Explorer/RemoteExplorer/RemoteExplorer.js

@@ -1,12 +1,11 @@
 import React from 'react';
-import "../../utils/Global";
 import {Card, CardBody, CardHeader} from "reactstrap";
 import RemotesList from "../RemotesList";
 import FilesView from "../FilesView/FilesView";
-import ScrollableDiv from "../Base/ScrollableDiv/ScrollableDiv";
-import {addColonAtLast} from "../../utils/Tools";
+import ScrollableDiv from "../../Base/ScrollableDiv/ScrollableDiv";
+import {addColonAtLast} from "../../../utils/Tools";
 import {connect} from "react-redux";
-import {getFsInfo} from "../../actions/explorerActions";
+import {getFsInfo} from "../../../actions/explorerActions";
 import PropTypes from 'prop-types';
 import {
     changePath,
@@ -16,8 +15,8 @@ import {
     navigateBack,
     navigateFwd,
     navigateUp
-} from "../../actions/explorerStateActions";
-import FileOperations from "../Base/NewFolder/FileOperations";
+} from "../../../actions/explorerStateActions";
+import FileOperations from "../../Base/NewFolder/FileOperations";
 
 
 class RemoteExplorer extends React.Component {

src/views/RemoteExplorerLayout/RemoteExplorerLayout.js → src/views/Explorer/RemoteExplorerLayout/RemoteExplorerLayout.js

@@ -6,7 +6,7 @@ import HTML5Backend from "react-dnd-html5-backend";
 import {DragDropContext} from "react-dnd";
 import {connect} from "react-redux";
 import {compose} from "redux";
-import {createPath} from "../../actions/explorerStateActions";
+import {createPath} from "../../../actions/explorerStateActions";
 import PropTypes from 'prop-types';
 
 function RemoteExplorerList({cols, backStacks}) {

src/views/RemotesList/RemotesList.js → src/views/Explorer/RemotesList/RemotesList.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import "../../utils/Global";
 import RemoteListAutoSuggest from "./RemoteListAutoSuggest";
 import {connect} from "react-redux";
-import {getFsInfo, getRemoteNames} from "../../actions/explorerActions";
+import {getFsInfo, getRemoteNames} from "../../../actions/explorerActions";
 import PropTypes from 'prop-types'
-import {changeRemoteName} from "../../actions/explorerStateActions";
+import {changeRemoteName} from "../../../actions/explorerStateActions";
 import {Button, Col, Form, Row} from "reactstrap";
 
 class RemotesList extends React.Component {

src/views/Home/Home.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import {Col, Row} from "reactstrap";
 import BackendStatusCard from "../Base/BackendStatusCard/BackendStatusCard";
-import "../../utils/Global";
 import RunningJobs from "../Base/RunningJobs";
 
 class Home extends React.Component {

src/views/Pages/Login/Login.js

@@ -14,7 +14,6 @@ import {
     InputGroupText,
     Row
 } from 'reactstrap';
-import '../../../utils/Global';
 
 class Login extends Component {
 

src/views/NewDrive/NewDrive.js → src/views/RemoteManagement/NewDrive/NewDrive.js

@@ -14,13 +14,13 @@ import {
     Label
 } from "reactstrap";
 // import {config} from "./config.js";
-import NewDriveAuthModal from "../Base/NewDriveAuthModal";
-import axiosInstance from "../../utils/API";
-import isEmpty, {findFromConfig, validateDuration, validateInt, validateSizeSuffix} from "../../utils/Tools";
+import NewDriveAuthModal from "../../Base/NewDriveAuthModal";
+import axiosInstance from "../../../utils/API/API";
+import isEmpty, {findFromConfig, validateDuration, validateInt, validateSizeSuffix} from "../../../utils/Tools";
 import ProviderAutoSuggest from "./ProviderAutoSuggest";
 import {toast} from "react-toastify";
 import PropTypes from 'prop-types';
-import {getProviders} from "../../actions/configActions";
+import {getProviders} from "../../../actions/configActions";
 import {connect} from "react-redux";
 
 function DriveParameters({drivePrefix, loadAdvanced, changeHandler, currentValues, isValidMap, errorsMap, config}) {

src/views/NewDrive/ProviderAutoSuggest.js → src/views/RemoteManagement/NewDrive/ProviderAutoSuggest.js

@@ -1,6 +1,6 @@
 import Autosuggest from 'react-autosuggest';
 import React from "react";
-import {findFromConfig} from "../../utils/Tools";
+import {findFromConfig} from "../../../utils/Tools";
 
 // Teach Autosuggest how to calculate suggestions for any given input value.
 const getSuggestions = (config, value) => {

src/views/ShowConfig/ConfigRow.js → src/views/RemoteManagement/ShowConfig/ConfigRow.js

@@ -1,5 +1,5 @@
 import React from "react";
-import axiosInstance from "../../utils/API";
+import axiosInstance from "../../../utils/API/API";
 import {Button} from "reactstrap";
 import PropTypes from "prop-types";
 

src/views/ShowConfig/ShowConfig.js → src/views/RemoteManagement/ShowConfig/ShowConfig.js

@@ -2,7 +2,7 @@ import React from "react";
 import {Button, Col, Row, Table} from "reactstrap";
 import ConfigRow from "./ConfigRow";
 import {connect} from "react-redux";
-import {getConfigDump} from "../../actions/configActions";
+import {getConfigDump} from "../../../actions/configActions";
 
 
 function RemoteRows({remotes, refreshHandle}) {

src/views/index.js

@@ -1,5 +1,4 @@
 import {Login, Page404, Page500, Register} from './Pages';
-import "../utils/Global"
 
 export {