Added error boundaries.

Author: negative0

CONTRIBUTING.md

@@ -1,14 +1,14 @@
-# Contributing to CoreUI Free React Admin Template
+# Contributing to Rclone web ui
 
-Looking to contribute something to CoreUI Free React Admin Template? **Here's how you can help.**
+Looking to contribute something to Rclone web UI? **Here's how you can help.**
 
 Please take a moment to review this document in order to make the contribution process easy and effective for everyone involved.
 
 Following these guidelines helps to communicate that you respect the time of the developers managing and developing this open source project. In return, they should reciprocate that respect in addressing your issue or assessing patches and features.
 
 ## Using the issue tracker
 
-The [issue tracker](https://github.com/coreui/coreui-free-react-admin-template/issues) is the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests) and [submitting pull requests](#pull-requests), but please respect the following restrictions:
+The [issue tracker](https://github.com/negative0/rclone-webui-react/issues) is the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests) and [submitting pull requests](#pull-requests), but please respect the following restrictions:
 
 * Please **do not** use the issue tracker for personal support requests.
 
@@ -86,9 +86,9 @@ included in the project:
 
    ```bash
    # Clone your fork of the repo into the current directory
-   git clone https://github.com/<your-username>/free-react-admin-template.git
+   git clone https://github.com/<your-username>/rclone-webui-react.git
    # Navigate to the newly cloned directory
-   cd free-react-admin-template
+   cd rclone-webui-react
    # Assign the original repo to a remote called "upstream"
    git remote add upstream https://github.com/coreui/coreui-free-react-admin-template.git
    ```
@@ -162,8 +162,7 @@ Inspired by Sparkbox's awesome article on [semantic commit messages](http://sees
 ### JS
 
 - No semicolons (in client-side JS)
-- 2 spaces (no tabs)
-- strict mode
+- 4 spaces (no tabs)
 - "Attractive"
 - Don't use [jQuery event alias convenience methods](https://github.com/jquery/jquery/blob/master/src/event/alias.js) (such as `$().focus()`). Instead, use [`$().trigger(eventType, ...)`](http://api.jquery.com/trigger/) or [`$().on(eventType, ...)`](http://api.jquery.com/on/), depending on whether you're firing an event or listening for an event. (For example, `$().trigger('focus')` or `$().on('focus', function (event) { /* handle focus event */ })`) We do this to be compatible with custom builds of jQuery where the event aliases module has been excluded.
 

README.md

@@ -2,7 +2,6 @@
 
 [![CCExtractor](https://img.shields.io/badge/CCExtractor-org-blue.svg)](https://www.ccextractor.org/) [![RClone](https://img.shields.io/badge/RClone-org-blue.svg)](https://rclone.org/)
 
-
 This is a reactjs based web UI for the rclone cli project @ [Rclone Website](rclone.org)  
 
 This project can be unstable and is being actively developed. Feel free to create any issues, feature requests or enhancements as you encounter them. 
@@ -13,7 +12,8 @@ This project can be unstable and is being actively developed. Feel free to creat
 [![Coverage Status](https://coveralls.io/repos/github/negative0/rclone-webui-react/badge.svg?branch=master)](https://coveralls.io/github/negative0/rclone-webui-react?branch=master)
 ## Getting Started
 
-The project currently requires you to install and configure react and npm to run correctly
+The project currently requires you to install and configure react and npm to run correctly.
+Read more about the project details at [good2be.me](http://good2be.me/blog)
 
 ## Screenshots
 ### Dashboard
@@ -36,22 +36,43 @@ The project currently requires you to install and configure react and npm to run
 OR download a zip from the option above.
 
 ### Install dependencies
+If you are using NPM:
+
+**Make sure that you are using the latest LTS version of NPM**
+```
+    cd <cloned directory>
+    npm install 
 ```
-  cd <cloned directory>
-  npm install 
+
+Using yarn:
+```
+    cd <cloned directory>
+    yarn install
 ```
 
+
 ### Run the project
 ```
-  npm start
+    npm start
 ```
+OR
+```
+    npm run start
+```
+
+### Run tests
+```npm test```OR ```yarn test``` if you want to run all jest tests. 
+Test specific environment can be set using setupTests.js
+
+**With Coverage**: ```npm run test:cov```
+
 
 ### Run Rclone
 You have to run rclone with the following flags:
 ```
     rclone rcd --rc-user=<username> --rc-pass=<password> --rc-serve
 ```
-Replace username and password with your custom username password. This will be required to login to rclone.
+Replace username and password with your custom username password. This will be required to login to rclone. rc-no-auth is not available due to security concerns.
 
 --rc-serve:  It serves the remote objects at localhost:5572/[remoteName:remotePath]/path/to/file. It enables us to download files via the RemoteExplorer through the browser.
 

src/App.js

@@ -4,6 +4,7 @@ import {HashRouter, Route, Switch} from 'react-router-dom';
 import './App.scss';
 import {ToastContainer} from "react-toastify";
 import 'react-toastify/dist/ReactToastify.css';
+import ErrorBoundary from "./ErrorHandling/ErrorBoundary";
 
 const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;
 
@@ -21,19 +22,21 @@ class App extends Component {
     render() {
         return (
             <div data-test="appComponent">
-                <ToastContainer/>
-                <HashRouter>
-                    <React.Suspense fallback={loading()}>
-                        <Switch>
-                            <Route exact path="/login" name="Login Page" render={props => <Login {...props}/>}/>
-                            <Route exact path="/register" name="Register Page"
-                                   render={props => <Register {...props}/>}/>
-                            <Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>}/>
-                            <Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>}/>
-                            <Route path="/" name="Home" render={props => <DefaultLayout {...props}/>}/>
-                        </Switch>
-                    </React.Suspense>
-                </HashRouter>
+                <ErrorBoundary>
+                    <ToastContainer/>
+                    <HashRouter>
+                        <React.Suspense fallback={loading()}>
+                            <Switch>
+                                <Route exact path="/login" name="Login Page" render={props => <Login {...props}/>}/>
+                                <Route exact path="/register" name="Register Page"
+                                       render={props => <Register {...props}/>}/>
+                                <Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>}/>
+                                <Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>}/>
+                                <Route path="/" name="Home" render={props => <DefaultLayout {...props}/>}/>
+                            </Switch>
+                        </React.Suspense>
+                    </HashRouter>
+                </ErrorBoundary>
             </div>
         );
     }

src/App.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import {shallow} from 'enzyme/build';
 import App from './App';
 import {findByTestAttr, testStore} from "../Utils";
 import {Provider} from "react-redux";
 import toJson from 'enzyme-to-json';
+import {shallow} from "enzyme";
 
 const setUp = (initialState = {}) => {
     const store = testStore(initialState);

src/ErrorHandling/ErrorBoundary.js

@@ -0,0 +1,62 @@
+import React from "react";
+import {Col, Container, Row} from "reactstrap";
+
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {hasError: false};
+    }
+
+    static getDerivedStateFromError(error) {
+        // Update state so the next render will show the fallback UI.
+        return {hasError: true};
+    }
+
+    componentDidCatch(error, info) {
+        // You can also log the error to an error reporting service
+        // logErrorToMyService(error, info);
+        // Send error to Rclone backend.
+        this.setState({error, info});
+
+
+        console.log("Hey");
+    }
+
+    render() {
+        if (this.state.hasError) {
+            // You can render any custom fallback UI
+            return (
+                <div className="d-flex align-items-center">
+                    <Container fluid={true}>
+                        <Row>
+                            <Col lg={3} sm={12}/>
+                            <Col lg={6} sm={12}>
+                                <h3>Something went wrong. </h3>
+                                <Row>
+                                    <Col>
+                                        Try refreshing the page.
+                                        If the issue persists, please consider opening a new issue on our Github page.
+                                    </Col>
+                                </Row>
+                                <Row>
+                                    <Col>
+                                        <a href="https://github.com/negative0/rclone-webui-react/issues"
+                                           className="btn btn-primary">
+                                            Create new Issue.
+                                        </a>
+                                    </Col>
+                                </Row>
+
+                            </Col>
+                            <Col lg={3} sm={12}/>
+                        </Row>
+                    </Container>
+                </div>
+            );
+        }
+
+        return this.props.children;
+    }
+}
+
+export default ErrorBoundary;

src/__snapshots__/App.test.js.snap

@@ -4,73 +4,75 @@ exports[`App Component should match snapshot 1`] = `
 <div
   data-test="appComponent"
 >
-  <ToastContainer
-    autoClose={5000}
-    bodyClassName={null}
-    className={null}
-    closeButton={
-      <CloseButton
-        ariaLabel="close"
-      />
-    }
-    closeOnClick={true}
-    draggable={true}
-    draggablePercent={80}
-    hideProgressBar={false}
-    newestOnTop={false}
-    pauseOnFocusLoss={true}
-    pauseOnHover={true}
-    position="top-right"
-    progressClassName={null}
-    progressStyle={null}
-    role="alert"
-    rtl={false}
-    style={null}
-    toastClassName={null}
-    transition={[Function]}
-  />
-  <HashRouter>
-    <Suspense
-      fallback={
-        <div
-          className="animated fadeIn pt-3 text-center"
-        >
-          Loading...
-        </div>
-      }
-    >
-      <Switch>
-        <Route
-          exact={true}
-          name="Login Page"
-          path="/login"
-          render={[Function]}
-        />
-        <Route
-          exact={true}
-          name="Register Page"
-          path="/register"
-          render={[Function]}
-        />
-        <Route
-          exact={true}
-          name="Page 404"
-          path="/404"
-          render={[Function]}
+  <ErrorBoundary>
+    <ToastContainer
+      autoClose={5000}
+      bodyClassName={null}
+      className={null}
+      closeButton={
+        <CloseButton
+          ariaLabel="close"
         />
-        <Route
-          exact={true}
-          name="Page 500"
-          path="/500"
-          render={[Function]}
-        />
-        <Route
-          name="Home"
-          path="/"
-          render={[Function]}
-        />
-      </Switch>
-    </Suspense>
-  </HashRouter>
+      }
+      closeOnClick={true}
+      draggable={true}
+      draggablePercent={80}
+      hideProgressBar={false}
+      newestOnTop={false}
+      pauseOnFocusLoss={true}
+      pauseOnHover={true}
+      position="top-right"
+      progressClassName={null}
+      progressStyle={null}
+      role="alert"
+      rtl={false}
+      style={null}
+      toastClassName={null}
+      transition={[Function]}
+    />
+    <HashRouter>
+      <Suspense
+        fallback={
+          <div
+            className="animated fadeIn pt-3 text-center"
+          >
+            Loading...
+          </div>
+        }
+      >
+        <Switch>
+          <Route
+            exact={true}
+            name="Login Page"
+            path="/login"
+            render={[Function]}
+          />
+          <Route
+            exact={true}
+            name="Register Page"
+            path="/register"
+            render={[Function]}
+          />
+          <Route
+            exact={true}
+            name="Page 404"
+            path="/404"
+            render={[Function]}
+          />
+          <Route
+            exact={true}
+            name="Page 500"
+            path="/500"
+            render={[Function]}
+          />
+          <Route
+            name="Home"
+            path="/"
+            render={[Function]}
+          />
+        </Switch>
+      </Suspense>
+    </HashRouter>
+  </ErrorBoundary>
 </div>
 `;