Merge pull request #88 from containerum/develop

Develop

Author: MargoTuleninova

package.json

@@ -294,6 +294,7 @@
     "react-google-recaptcha": "^0.9.9",
     "react-helmet": "^5.2.0",
     "react-hot-loader": "4.0.0-beta.18",
+    "react-json-pretty": "^1.7.9",
     "react-markdown": "^3.3.0",
     "react-modal": "^3.1.12",
     "react-redux": "^5.0.6",

src/actions/statusActions/getStatus.js

@@ -0,0 +1,76 @@
+/* @flow */
+
+import { push } from 'react-router-redux';
+import cookie from 'react-cookies';
+
+import type { Dispatch, GetState, ThunkAction } from '../../types';
+import {
+  GET_STATUS_REQUESTING,
+  GET_STATUS_SUCCESS,
+  GET_STATUS_FAILURE
+} from '../../constants/statusConstants/getStatus';
+import { webApi, routerLinks } from '../../config';
+
+const getStatusRequest = () => ({
+  type: GET_STATUS_REQUESTING,
+  isFetching: true
+});
+
+const getStatusSuccess = data => ({
+  type: GET_STATUS_SUCCESS,
+  isFetching: false,
+  data
+});
+
+const getStatusFailure = err => ({
+  type: GET_STATUS_FAILURE,
+  isFetching: false,
+  err
+});
+
+const getStatusInvalidToken = () => ({
+  type: 'GET_INVALID_TOKEN'
+});
+
+export const fetchGetStatus = (
+  axios: any,
+  URL: string = webApi
+): ThunkAction => async (dispatch: Dispatch) => {
+  const browser = cookie.load('browser');
+  const accessToken = cookie.load('accessToken');
+
+  dispatch(getStatusRequest());
+
+  const response = await axios.get(`${URL}/status`, {
+    headers: {
+      'User-Client': browser,
+      'User-Token': accessToken
+    },
+    validateStatus: status => status >= 200 && status <= 505
+  });
+
+  const { status, data } = response;
+  switch (status) {
+    case 200: {
+      dispatch(getStatusSuccess(data));
+      break;
+    }
+    case 400: {
+      if (data.message === 'invalid token received') {
+        dispatch(getStatusInvalidToken());
+      } else if (data.message === 'invalid request body format') {
+        dispatch(push(routerLinks.login));
+      } else dispatch(getStatusFailure(data.message));
+      break;
+    }
+    default: {
+      dispatch(getStatusFailure(data.message));
+    }
+  }
+};
+
+export const fetchGetStatusIfNeeded = (): ThunkAction => (
+  dispatch: Dispatch,
+  getState: GetState,
+  axios: any
+) => dispatch(fetchGetStatus(axios));

src/components/ProfileSidebar/index.js

@@ -114,12 +114,31 @@ const ProfileSidebar = ({ type }: Props) => (
         Settings
       </div>
       <Scrollspy
-        items={['ips', 'storages']}
+        items={['status', 'ips', 'storages']}
         style={{
           padding: '20px 0 0 20px'
         }}
         currentClassName={accountStyles.accountMenuNavActive}
       >
+        <li className={`${accountStyles.navItem} nav-item`}>
+          {type === 'settings' ? (
+            <div
+              className={`${accountStyles.navLink} nav-link`}
+              onClick={() => scrollById('status')}
+              onKeyPress={() => scrollById('status')}
+              role="presentation"
+            >
+              Status
+            </div>
+          ) : (
+            <HashLink
+              to={`${routerLinks.settings}#status`}
+              className={`${accountStyles.navLink} nav-link`}
+            >
+              Status
+            </HashLink>
+          )}
+        </li>
         <li className={`${accountStyles.navItem} nav-item`}>
           {type === 'settings' ? (
             <div

src/components/SettingsViewList/index.js

@@ -25,7 +25,6 @@ const containerClassName = globalClass(
 
 const SettingsViewList = ({ getDomainsReducer, handleDeleteIP }: Props) => (
   <div className={globalStyles.blockItem} id="settings">
-    <div className={globalStyles.blockItemTitle}>Settings</div>
     <div className="row">
       <div className="col-md-10">
         <div className={globalStyles.textLight} style={{ fontSize: 20 }}>
@@ -96,7 +95,7 @@ const SettingsViewList = ({ getDomainsReducer, handleDeleteIP }: Props) => (
                     >
                       <button
                         onClick={() =>
-                          handleDeleteIP(domain._id, domain.ip.join())
+                          handleDeleteIP(domain.ip[0], domain.ip.join())
                         }
                         className={`dropdown-item text-danger ${
                           globalStyles.dropdownItem

src/components/SolutionsList/index.js

@@ -48,9 +48,10 @@ const SolutionsList = ({
     {data.map(solution => {
       const { name, url, limits } = solution;
       const { cpu, ram } = limits;
-      const imageHref = `${url}/master/${url.substring(
-        url.lastIndexOf('/') + 1
-      )}.png`.replace('github.com', 'raw.githubusercontent.com');
+      const imageHref = `${url}/master/${name}.png`.replace(
+        'github.com',
+        'raw.githubusercontent.com'
+      );
       return (
         <div
           className="col-md-4"

src/constants/statusConstants/getStatus.js

@@ -0,0 +1,4 @@
+export const GET_STATUS_INVALID = 'GET_STATUS_INVALID';
+export const GET_STATUS_REQUESTING = 'GET_STATUS_REQUESTING';
+export const GET_STATUS_SUCCESS = 'GET_STATUS_SUCCESS';
+export const GET_STATUS_FAILURE = 'GET_STATUS_FAILURE';