Error component added

Author: gabriel-hahn

__tests__/components/ErrorMessage.spec.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import createStore from 'redux-mock-store';
+import ReactTestRender from 'react-test-renderer';
+
+import ErrorMessage from '~/components/ErrorMessage';
+
+const mockStore = createStore();
+
+const INITIAL_STATE = {
+  error:  {
+    visible: true,
+    message: "Message error test",
+  }    
+};
+
+const INVISIBLE_STATE = {
+    error:  {
+      visible: false,
+      message: "Message error test",
+    }    
+  };
+
+let wrapper;
+let invisibleWrapper;
+
+beforeEach(() => {
+  wrapper = ReactTestRender.create(
+    <Provider store={mockStore(INITIAL_STATE)}>
+      <ErrorMessage />
+    </Provider>,
+  );
+  
+  invisibleWrapper = ReactTestRender.create(
+    <Provider store={mockStore(INVISIBLE_STATE)}>
+      <ErrorMessage />
+    </Provider>,
+  );
+});
+
+describe('ErrorMessage Component', () => {
+  describe('Smoke tests', () => {
+    it('Should render ErrorMessage component correctly', () => {
+      expect(wrapper.toJSON()).toMatchSnapshot();
+    });    
+  });
+
+  describe('Component structure', () => {
+    it('Should render message and Icon error', () => {
+      expect(wrapper.root.findAllByType('Text').length).toBe(2);
+    });
+
+    it('Should not render component when visible prop is false', () => {
+      expect(invisibleWrapper.root.findAllByType('Text').length).toEqual(0);
+    });
+  });
+});

src/components/ErrorMessage/index.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import ErrorActions from '~/store/ducks/error';
+
+import {
+  Container, Error, HideButton, HideIcon,
+} from './styles';
+
+const ErrorMessage = ({ error: { message, visible }, hideError }) => visible && (
+  <Container>
+    <Error>{message}</Error>
+    <HideButton onPress={hideError}>
+      <HideIcon />
+    </HideButton>
+  </Container>
+);
+
+ErrorMessage.propTypes = {
+  hideError: PropTypes.func.isRequired,
+  error: PropTypes.shape({
+    visible: PropTypes.bool.isRequired,
+    message: PropTypes.string,
+  }).isRequired,
+};
+
+const mapStateToProps = state => ({
+  error: state.error,
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators(ErrorActions, dispatch);
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(ErrorMessage);

src/components/ErrorMessage/styles.js

@@ -0,0 +1,34 @@
+import styled from 'styled-components/native';
+import { Platform } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+import { colors, metrics } from '~/styles';
+
+export const Container = styled.View`
+  width: ${metrics.screenWidth - metrics.basePadding}px;
+  position: absolute;
+  top: ${Platform.OS === 'android'
+    ? metrics.baseMargin
+    : metrics.baseMargin + 20}px;
+  left: ${metrics.baseMargin}px;
+  padding: ${metrics.baseMargin}px ${metrics.basePadding}px;
+  background-color: ${colors.danger};
+  font-size: 14px;
+  border-radius: ${metrics.baseRadius};
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const Error = styled.Text`
+  flex: 1;
+  color: ${colors.white};
+`;
+
+export const HideButton = styled.TouchableOpacity``;
+
+export const HideIcon = styled(Icon).attrs({
+  size: 20,
+  color: colors.white,
+  name: 'times',
+})``;

src/index.js

@@ -4,13 +4,16 @@ import '~/config/ReactotronConfig';
 import '~/config/StatusBarConfig';
 
 import { Provider } from 'react-redux';
-import store from './store';
+import store from '~/store';
 
 import Routes from '~/routes';
 
+import ErrorMessage from '~/components/ErrorMessage';
+
 const App = () => (
   <Provider store={store}>
     <Routes />
+    <ErrorMessage />
   </Provider>
 );