Update SnackbarHandler

App.js

@@ -10,7 +10,7 @@ import AuthHandler from './handlers/AuthHandler';
 import DatabaseHandler from './handlers/DatabaseHandler';
 import NetworkHandler from './handlers/NetworkHandler';
 import LocationHandler from './handlers/LocationHandler';
-import SnackBarHandler from './handlers/SnackBarHandler';
+import SnackbarHandler from './handlers/SnackbarHandler';
 
 // Connect router to store
 const ConnectedRouter = connect()(Router);
@@ -23,9 +23,8 @@ export default function App() {
         <DatabaseHandler />
         <NetworkHandler />
         <LocationHandler />
-        <SnackBarHandler>
-          <ConnectedRouter navigator={navigator} />
-        </SnackBarHandler>
+        <SnackbarHandler />
+        <ConnectedRouter navigator={navigator} />
       </ErrorHandler>
     </Provider>
   );

README.md

@@ -11,8 +11,6 @@ Feel free to [get in touch](mailto:shaun@aux.co.za) if you have questions or sug
 
 # TODOS
 
-* Add components for external deps
-* SnackbarHandler
 * Work on a method of handling action's nextAction payloads (ie. one batch action with a bunch of sequential actions that depend on payloads returned by the previous action)
 * Style the troubleshooting guide
 * Performance improvements:

handlers/SnackBarHandler.js

@@ -1,42 +1,50 @@
 import React from 'react';
-import { View } from 'react-native';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import Snackbar from 'react-native-snackbar';
 
-import SnackBar from '../components/SnackBar';
-
-export class SnackBarHandler extends React.Component {
+export class SnackbarHandler extends React.Component {
   static get propTypes() {
     return {
       dispatch: PropTypes.func,
-      children: PropTypes.node,
       systemMessage: PropTypes.shape({
         message: PropTypes.string,
-        code: PropTypes.string,
-        error: PropTypes.bool,
+        // code: PropTypes.string,
+        // error: PropTypes.bool,
       }),
     };
   }
 
+  componentDidUpdate(prevProps) {
+    if (
+      this.props.systemMessage.message &&
+      this.props.systemMessage.message !== prevProps.systemMessage.message
+    ) {
+      this.showSnackbar();
+    }
+  }
+
+  duration = 2750;
+
+  showSnackbar = () => {
+    Snackbar.show({
+      title: this.props.systemMessage.message,
+      duration: this.duration,
+    });
+
+    setTimeout(() => {
+      this.resetError();
+    }, this.duration); // Snackbar.LENGTH_LONG does not work here so we need to manually add the duration
+  };
+
   resetError = () => {
     this.props.dispatch({
       type: 'RESET_SYSTEM_MESSAGE',
     });
   };
 
   render() {
-    const { message } = this.props.systemMessage;
-
-    const snackBarComponent = message ? (
-      <SnackBar message={message} handleClose={this.resetError} shouldAutoHide />
-    ) : null;
-
-    return (
-      <View style={{ flex: 1, alignSelf: 'stretch' }}>
-        {this.props.children}
-        {snackBarComponent}
-      </View>
-    );
+    return null;
   }
 }
 
@@ -46,4 +54,4 @@ function mapStateToProps(state) {
   };
 }
 
-export default connect(mapStateToProps)(SnackBarHandler);
+export default connect(mapStateToProps)(SnackbarHandler);

handlers/SnackbarHandler.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import Snackbar from 'react-native-snackbar';
+
+export class SnackbarHandler extends React.Component {
+  static get propTypes() {
+    return {
+      dispatch: PropTypes.func,
+      systemMessage: PropTypes.shape({
+        message: PropTypes.string,
+        // code: PropTypes.string,
+        // error: PropTypes.bool,
+      }),
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (
+      this.props.systemMessage.message &&
+      this.props.systemMessage.message !== prevProps.systemMessage.message
+    ) {
+      this.showSnackbar();
+    }
+  }
+
+  duration = 2750;
+
+  showSnackbar = () => {
+    Snackbar.show({
+      title: this.props.systemMessage.message,
+      duration: this.duration,
+    });
+
+    setTimeout(() => {
+      this.resetError();
+    }, this.duration); // Snackbar.LENGTH_LONG does not work here so we need to manually add the duration
+  };
+
+  resetError = () => {
+    this.props.dispatch({
+      type: 'RESET_SYSTEM_MESSAGE',
+    });
+  };
+
+  render() {
+    return null;
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    systemMessage: state.appState.systemMessage,
+  };
+}
+
+export default connect(mapStateToProps)(SnackbarHandler);