From 88a94ec06e40084a0253042a645b9b12d525d70c Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Wed, 22 Aug 2018 14:31:16 +0200 Subject: [PATCH] Added redbox to see erorrs in UI --- package.json | 1 + src/js/components/DeviceHeader/index.js | 18 ++++------- src/js/components/Icon/index.js | 40 ++++++++++++++++++++++--- src/js/support/ErrorBoundary.js | 12 +++----- yarn.lock | 29 ++++++++++++++++++ 5 files changed, 76 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index 9f764b5f..9916257b 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "react-scale-text": "^1.2.2", "react-select": "^1.2.1", "react-transition-group": "^2.2.1", + "redbox-react": "^1.6.0", "redux": "4.0.0", "redux-logger": "^3.0.6", "redux-raven-middleware": "^1.2.0", diff --git a/src/js/components/DeviceHeader/index.js b/src/js/components/DeviceHeader/index.js index 3d7757d8..9ec80d71 100644 --- a/src/js/components/DeviceHeader/index.js +++ b/src/js/components/DeviceHeader/index.js @@ -1,5 +1,5 @@ import React from 'react'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import PropTypes from 'prop-types'; import Icon from 'components/Icon'; import icons from 'config/icons'; @@ -34,7 +34,7 @@ const Name = styled.div` display: block; text-overflow: ellipsis; overflow: hidden; - white-space: nowrap; + white-space: no-wrap; font-weight: 500; font-size: 14px; color: ${colors.TEXT_PRIMARY}; @@ -82,10 +82,6 @@ const Dot = styled.div` height: 10px; `; -const StyledIcon = styled(Icon)` - transform: rotate(180deg); -`; - const DeviceHeader = ({ disabled = false, handleOpen, @@ -99,22 +95,20 @@ const DeviceHeader = ({ - + {label} {getStatusName(status)} - {deviceCount > 1 ? {deviceCount} : null} - 1 && {deviceCount}} + diff --git a/src/js/components/Icon/index.js b/src/js/components/Icon/index.js index d36e8b76..20711ffb 100644 --- a/src/js/components/Icon/index.js +++ b/src/js/components/Icon/index.js @@ -1,7 +1,36 @@ import React from 'react'; import PropTypes from 'prop-types'; +import styled, { css, keyframes } from 'styled-components'; -const Icon = ({ icon, size = 32, color = 'black' }) => { +const rotate180up = keyframes` + from { + transform: rotate(0deg); + } + + to { + transform: rotate(180deg); + } +`; + +const rotate180down = keyframes` + from { + transform: rotate(180deg); + } + + to { + transform: rotate(0deg); + } +`; + +const SvgWrapper = styled.svg` + animation: ${props => (props.isActive ? rotate180up : rotate180down)} 0.2s linear 1 forwards; +`; + +const Path = styled.path``; + +const Icon = ({ + icon, size = 32, color = 'black', isActive = false, +}) => { const styles = { svg: { display: 'inline-block', @@ -13,24 +42,27 @@ const Icon = ({ icon, size = 32, color = 'black' }) => { }; return ( - - - + ); }; Icon.propTypes = { icon: PropTypes.string.isRequired, size: PropTypes.number, + isActive: PropTypes.bool, color: PropTypes.string, }; diff --git a/src/js/support/ErrorBoundary.js b/src/js/support/ErrorBoundary.js index 38624521..b72cf451 100644 --- a/src/js/support/ErrorBoundary.js +++ b/src/js/support/ErrorBoundary.js @@ -1,23 +1,19 @@ import React, { Component } from 'react'; +import RedBox from 'redbox-react'; class ErrorBoundary extends Component { constructor(props) { super(props); - this.state = { hasError: false }; + this.state = { hasError: false, error: false }; } componentDidCatch(error, info) { - // Display fallback UI - this.setState({ hasError: true }); - console.error('error', error); - // You can also log the error to an error reporting service - // logErrorToMyService(error, info); + this.setState({ hasError: true, error }); } render() { if (this.state.hasError) { - // You can render any custom fallback UI - return
Something went wrong.
; + return ; } return this.props.children; } diff --git a/yarn.lock b/yarn.lock index 3076e96f..e5c19095 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3234,6 +3234,12 @@ error-ex@^1.2.0, error-ex@^1.3.1: dependencies: is-arrayish "^0.2.1" +error-stack-parser@^1.3.6: + version "1.3.6" + resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-1.3.6.tgz#e0e73b93e417138d1cd7c0b746b1a4a14854c292" + dependencies: + stackframe "^0.3.1" + error@^7.0.2: version "7.0.2" resolved "https://registry.yarnpkg.com/error/-/error-7.0.2.tgz#a5f75fff4d9926126ddac0ea5dc38e689153cb02" @@ -8100,6 +8106,15 @@ rechoir@^0.6.2: dependencies: resolve "^1.1.6" +redbox-react@^1.6.0: + version "1.6.0" + resolved "https://registry.yarnpkg.com/redbox-react/-/redbox-react-1.6.0.tgz#e753ac02595bc1bf695b3935889a4f5b1b5a21a1" + dependencies: + error-stack-parser "^1.3.6" + object-assign "^4.0.1" + prop-types "^15.5.4" + sourcemapped-stacktrace "^1.1.6" + redent@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde" @@ -8861,6 +8876,10 @@ source-map-url@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3" +source-map@0.5.6: + version "0.5.6" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412" + source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" @@ -8875,6 +8894,12 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" +sourcemapped-stacktrace@^1.1.6: + version "1.1.8" + resolved "https://registry.yarnpkg.com/sourcemapped-stacktrace/-/sourcemapped-stacktrace-1.1.8.tgz#6b7a3f1a6fb15f6d40e701e23ce404553480d688" + dependencies: + source-map "0.5.6" + spdx-correct@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40" @@ -8956,6 +8981,10 @@ stack-utils@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.1.tgz#d4f33ab54e8e38778b0ca5cfd3b3afb12db68620" +stackframe@^0.3.1: + version "0.3.1" + resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-0.3.1.tgz#33aa84f1177a5548c8935533cbfeb3420975f5a4" + state-toggle@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.1.tgz#c3cb0974f40a6a0f8e905b96789eb41afa1cde3a"