Merge pull request #59 from jackw/add-version-to-nav

Add version to side navbar. CLoses#59

Author: negative0

src/actions/types.js

@@ -1,5 +1,6 @@
 export const FETCH_STATUS = 'FETCH_STATUS';
 export const GET_PROVIDERS = 'GET_PROVIDERS';
+export const GET_VERSION = 'GET_VERSION';
 export const GET_CONFIG_FOR_REMOTE = 'GET_CONFIG_FOR_REMOTE';
 export const GET_REMOTE_LIST = 'GET_REMOTE_LIST';
 export const GET_CONFIG_DUMP = 'GET_CONFIG_DUMP';

src/actions/versionActions.js

@@ -0,0 +1,22 @@
+import axiosInstance from '../utils/API/API';
+import urls from '../utils/API/endpoint';
+import { GET_VERSION, REQUEST_SUCCESS, REQUEST_ERROR } from './types';
+
+export const getVersion = () => {
+  return dispatch => {
+    axiosInstance.post(urls.getRcloneVersion).then(
+      res =>
+        dispatch({
+          type: GET_VERSION,
+          status: REQUEST_SUCCESS,
+          payload: res.data
+        }),
+      error =>
+        dispatch({
+          type: GET_VERSION,
+          status: REQUEST_ERROR,
+          payload: error
+        })
+    );
+  };
+};

src/containers/DefaultLayout/DefaultLayout.js

@@ -1,6 +1,7 @@
 import React, {Component, Suspense} from 'react';
 import {Redirect, Route, Switch} from 'react-router-dom';
 import {Container} from 'reactstrap';
+import {getVersion} from "../../actions/versionActions";
 
 import {
     AppAside,
@@ -26,14 +27,34 @@ const DefaultAside = React.lazy(() => import('./DefaultAside'));
 const DefaultFooter = React.lazy(() => import('./DefaultFooter'));
 const DefaultHeader = React.lazy(() => import('./DefaultHeader'));
 
+const VERSION_NAV_ITEM_ATTRS = {
+    attributes: { target: '_blank' },
+    class: 'mt-auto',
+    icon: 'cui-cog',
+    url: 'https://rclone.org/changelog',
+    variant: 'success'
+}
 class DefaultLayout extends Component {
 
     loading = () => <div className="animated fadeIn pt-1 text-center">Loading...</div>;
 
+    get navConfig() {
+        return {
+            items: [
+                ...navigation.items,
+                {
+                    name: this.props.version.version,
+                    ...VERSION_NAV_ITEM_ATTRS
+                }
+            ]
+        }
+    }
 
     componentWillMount() {
         if (!localStorage.getItem(AUTH_KEY)) {
             this.props.history.push('/login');
+        } else {
+            this.props.getVersion();
         }
     }
 
@@ -54,7 +75,7 @@ class DefaultLayout extends Component {
                             <AppSidebarHeader/>
                             <AppSidebarForm/>
                             <Suspense fallback={this.loading()}>
-                                <AppSidebarNav navConfig={navigation} {...this.props} />
+                                <AppSidebarNav navConfig={this.navConfig} />
                             </Suspense>
                             <AppSidebarFooter/>
                             <AppSidebarMinimizer/>
@@ -102,6 +123,7 @@ class DefaultLayout extends Component {
 
 const mapStateToProps = (state) => ({
     isConnected: state.status.isConnected,
+    version: state.version,
 });
 
-export default connect(mapStateToProps, {})(DefaultLayout);
+export default connect(mapStateToProps, { getVersion })(DefaultLayout);

src/containers/DefaultLayout/__snapshots__/DefaultLayout.test.js.snap

@@ -52,24 +52,6 @@ exports[`Remote Explorer renders should match snapshot 1`] = `
           }
         >
           <AppSidebarNav
-            history={
-              Object {
-                "push": [MockFunction] {
-                  "calls": Array [
-                    Array [
-                      "/login",
-                    ],
-                  ],
-                  "results": Array [
-                    Object {
-                      "type": "return",
-                      "value": undefined,
-                    },
-                  ],
-                },
-              }
-            }
-            isConnected={true}
             isOpen={false}
             navConfig={
               Object {
@@ -99,18 +81,19 @@ exports[`Remote Explorer renders should match snapshot 1`] = `
                     "name": "Log Out",
                     "url": "/login",
                   },
+                  Object {
+                    "attributes": Object {
+                      "target": "_blank",
+                    },
+                    "class": "mt-auto",
+                    "icon": "cui-cog",
+                    "name": "",
+                    "url": "https://rclone.org/changelog",
+                    "variant": "success",
+                  },
                 ],
               }
             }
-            store={
-              Object {
-                "dispatch": [Function],
-                "getState": [Function],
-                "replaceReducer": [Function],
-                "subscribe": [Function],
-                Symbol(observable): [Function],
-              }
-            }
             tag="nav"
           />
         </Suspense>

src/reducers/index.js

@@ -8,6 +8,7 @@ import {SIGNOUT_REQUEST} from "../actions/types";
 import providerStatusReducer from "./providerStatusReducer";
 import userActionsReducer from "./userActionsReducer";
 import imagesReducer from "./imagesReducer";
+import versionReducer from "./versionReducer";
 
 /**
  * Configures the root reducer to be executed before any other reducers configured in the system.
@@ -36,7 +37,8 @@ const appReducer = combineReducers({
     explorer: explorerState,
     providerStatus: providerStatusReducer,
     user: userActionsReducer,
-    imageLoader: imagesReducer
+    imageLoader: imagesReducer,
+    version: versionReducer
     // remoteOps: remoteOpsReducer
 });
 

src/reducers/versionReducer.js

@@ -0,0 +1,32 @@
+import { GET_VERSION, REQUEST_ERROR, REQUEST_SUCCESS } from '../actions/types';
+
+export const initialState = {
+  arch: '',
+  decomposed: [],
+  goVersion: '',
+  isGit: false,
+  os: '',
+  version: '',
+  hasError: false
+};
+
+export default (state = initialState, action) => {
+  if (action.type === GET_VERSION) {
+    if (action.status === REQUEST_SUCCESS) {
+      return {
+        ...state,
+        ...action.payload,
+        hasError: false
+      };
+    }
+    if (action.status === REQUEST_ERROR) {
+      return {
+        ...state,
+        error: action.payload,
+        hasError: true
+      };
+    }
+  }
+
+  return state;
+};

src/reducers/versionReducer.test.js

@@ -0,0 +1,28 @@
+import versionReducer, { initialState } from './versionReducer';
+import { GET_VERSION, REQUEST_SUCCESS } from '../actions/types';
+
+describe('Explorer Reducer', function() {
+  it('should return default state', function() {
+    const newState = versionReducer(undefined, {});
+    expect(newState).toEqual(initialState);
+  });
+
+  it('should return version information', function() {
+    const payload = {
+      arch: 'amd64',
+      decomposed: [1, 50, 2],
+      goVersion: 'go1.13.4',
+      isGit: false,
+      os: 'darwin',
+      version: 'v1.50.2',
+      hasError: false
+    };
+    const newState = versionReducer(undefined, {
+      type: GET_VERSION,
+      status: REQUEST_SUCCESS,
+      payload: payload
+    });
+    expect(newState).toEqual(payload);
+  });
+
+});

src/views/RCloneDashboard/RCloneDashboard.js

@@ -1,24 +1,25 @@
 import React from 'react';
+import {connect} from "react-redux";
 import {Card, CardBody, CardHeader, Col, Container, Form, FormGroup, Input, Label, Row} from "reactstrap";
 import axiosInstance from "../../utils/API/API";
 import ErrorBoundary from "../../ErrorHandling/ErrorBoundary";
 import urls from "../../utils/API/endpoint";
 
-
-function RCloneVersion({data, hasError}) {
-    if (hasError) {
+function RCloneVersion({data}) {
+    if (data.hasError) {
         return (<p>Error loading.</p>);
     }
+
     return (
         <Col sm={12} lg={4} md={6}>
             <Card>
                 <CardHeader>Version</CardHeader>
                 <CardBody>
-                    <p><strong>Arch:</strong>{data.arch}</p>
-                    <p><strong>goVersion:</strong>{data.goVersion}</p>
-                    <p><strong>OS:</strong>{data.os}</p>
-                    <p><strong>Rclone version:</strong>{data.version}</p>
-                    <p><strong>isGit:</strong>{data.isGit}</p>
+                    <p><strong>Arch: </strong>{data.arch}</p>
+                    <p><strong>goVersion: </strong>{data.goVersion}</p>
+                    <p><strong>OS: </strong>{data.os}</p>
+                    <p><strong>Rclone version: </strong>{data.version}</p>
+                    <p><strong>isGit: </strong>{`${data.isGit}`}</p>
                 </CardBody>
             </Card>
         </Col>
@@ -27,19 +28,6 @@ function RCloneVersion({data, hasError}) {
 
 
 class RCloneDashboard extends React.Component {
-
-    getRcloneStatus = () => {
-        axiosInstance.post(urls.getRcloneVersion).then((res) => {
-            this.setState({
-                version: res.data,
-                hasError: false
-            })
-        }, () => {
-            this.setState({
-                hasError: true
-            })
-        })
-    };
     getMemStats = () => {
         axiosInstance.post(urls.getRcloneMemStats).then((res) => {
             this.setState({
@@ -124,14 +112,12 @@ class RCloneDashboard extends React.Component {
     };
 
     componentDidMount() {
-        this.getRcloneStatus();
         this.getOptions();
     }
 
     constructor(props, context) {
         super(props, context);
         this.state = {
-            version: {},
             hasError: false,
             memStats: {},
             options: {}
@@ -145,8 +131,7 @@ class RCloneDashboard extends React.Component {
                 <ErrorBoundary>
                     <Container fluid={true}>
                         <Row>
-                            <RCloneVersion data={this.state.version} hasError={this.state.hasError}/>
-
+                            <RCloneVersion data={this.props.version} />
                         </Row>
                         {this.getOptionsView()}
                     </Container>
@@ -155,8 +140,9 @@ class RCloneDashboard extends React.Component {
     }
 }
 
-// const mapStateToProps = state => ({
-//
-// });
+const mapStateToProps = state => ({
+    version: state.version,
+});
+
+export default connect(mapStateToProps)(RCloneDashboard);
 
-export default RCloneDashboard;