Refactor utils into stand-alone functions

src/Avatar.js

@@ -7,6 +7,8 @@ import {
 
 import GiftedAvatar from './GiftedAvatar';
 
+import { isSameUser, isSameDay, warnDeprecated } from './utils';
+
 export default class Avatar extends React.Component {
   renderAvatar() {
     if (this.props.renderAvatar) {
@@ -22,7 +24,7 @@ export default class Avatar extends React.Component {
   }
 
   render() {
-    if (this.props.isSameUser(this.props.currentMessage, this.props.nextMessage) && this.props.isSameDay(this.props.currentMessage, this.props.nextMessage)) {
+    if (isSameUser(this.props.currentMessage, this.props.nextMessage) && isSameDay(this.props.currentMessage, this.props.nextMessage)) {
       return (
         <View style={[styles[this.props.position].container, this.props.containerStyle[this.props.position]]}>
           <GiftedAvatar
@@ -63,23 +65,25 @@ const styles = {
 };
 
 Avatar.defaultProps = {
-  isSameDay: () => {},
-  isSameUser: () => {},
   position: 'left',
   currentMessage: {
     user: null,
   },
   nextMessage: {},
   containerStyle: {},
   imageStyle: {},
+  //TODO: remove in next major release
+  isSameDay: warnDeprecated(isSameDay),
+  isSameUser: warnDeprecated(isSameUser)
 };
 
 Avatar.propTypes = {
-  isSameDay: React.PropTypes.func,
-  isSameUser: React.PropTypes.func,
   position: React.PropTypes.oneOf(['left', 'right']),
   currentMessage: React.PropTypes.object,
   nextMessage: React.PropTypes.object,
   containerStyle: View.propTypes.style,
   imageStyle: React.PropTypes.oneOfType([View.propTypes.style, Image.propTypes.style]),
+  //TODO: remove in next major release
+  isSameDay: React.PropTypes.func,
+  isSameUser: React.PropTypes.func
 };

src/Bubble.js

@@ -10,21 +10,23 @@ import MessageText from './MessageText';
 import MessageImage from './MessageImage';
 import Time from './Time';
 
+import { isSameUser, isSameDay, warnDeprecated } from './utils';
+
 export default class Bubble extends React.Component {
   constructor(props) {
     super(props);
     this.onLongPress = this.onLongPress.bind(this);
   }
 
   handleBubbleToNext() {
-    if (this.props.isSameUser(this.props.currentMessage, this.props.nextMessage) && this.props.isSameDay(this.props.currentMessage, this.props.nextMessage)) {
+    if (isSameUser(this.props.currentMessage, this.props.nextMessage) && isSameDay(this.props.currentMessage, this.props.nextMessage)) {
       return StyleSheet.flatten([styles[this.props.position].containerToNext, this.props.containerToNextStyle[this.props.position]]);
     }
     return null;
   }
 
   handleBubbleToPrevious() {
-    if (this.props.isSameUser(this.props.currentMessage, this.props.previousMessage) && this.props.isSameDay(this.props.currentMessage, this.props.previousMessage)) {
+    if (isSameUser(this.props.currentMessage, this.props.previousMessage) && isSameDay(this.props.currentMessage, this.props.previousMessage)) {
       return StyleSheet.flatten([styles[this.props.position].containerToPrevious, this.props.containerToPreviousStyle[this.props.position]]);
     }
     return null;
@@ -169,8 +171,6 @@ Bubble.defaultProps = {
   renderMessageText: null,
   renderCustomView: null,
   renderTime: null,
-  isSameUser: () => {},
-  isSameDay: () => {},
   position: 'left',
   currentMessage: {
     text: null,
@@ -183,6 +183,9 @@ Bubble.defaultProps = {
   wrapperStyle: {},
   containerToNextStyle: {},
   containerToPreviousStyle: {},
+  //TODO: remove in next major release
+  isSameDay: warnDeprecated(isSameDay),
+  isSameUser: warnDeprecated(isSameUser),
 };
 
 Bubble.propTypes = {
@@ -192,8 +195,6 @@ Bubble.propTypes = {
   renderMessageText: React.PropTypes.func,
   renderCustomView: React.PropTypes.func,
   renderTime: React.PropTypes.func,
-  isSameUser: React.PropTypes.func,
-  isSameDay: React.PropTypes.func,
   position: React.PropTypes.oneOf(['left', 'right']),
   currentMessage: React.PropTypes.object,
   nextMessage: React.PropTypes.object,
@@ -214,4 +215,7 @@ Bubble.propTypes = {
     left: View.propTypes.style,
     right: View.propTypes.style,
   }),
+  //TODO: remove in next major release
+  isSameDay: React.PropTypes.func,
+  isSameUser: React.PropTypes.func,
 };

src/Day.js

@@ -7,9 +7,11 @@ import {
 
 import moment from 'moment/min/moment-with-locales.min';
 
+import { isSameDay, isSameUser, warnDeprecated } from './utils';
+
 export default class Day extends React.Component {
   render() {
-    if (!this.props.isSameDay(this.props.currentMessage, this.props.previousMessage)) {
+    if (!isSameDay(this.props.currentMessage, this.props.previousMessage)) {
       return (
         <View style={[styles.container, this.props.containerStyle]}>
           <View style={[styles.wrapper, this.props.wrapperStyle]}>
@@ -52,7 +54,6 @@ Day.contextTypes = {
 };
 
 Day.defaultProps = {
-  isSameDay: () => {},
   currentMessage: {
     // TODO test if crash when createdAt === null
     createdAt: null,
@@ -61,13 +62,18 @@ Day.defaultProps = {
   containerStyle: {},
   wrapperStyle: {},
   textStyle: {},
+  //TODO: remove in next major release
+  isSameDay: warnDeprecated(isSameDay),
+  isSameUser: warnDeprecated(isSameUser),
 };
 
 Day.propTypes = {
-  isSameDay: React.PropTypes.func,
   currentMessage: React.PropTypes.object,
   previousMessage: React.PropTypes.object,
   containerStyle: View.propTypes.style,
   wrapperStyle: View.propTypes.style,
   textStyle: Text.propTypes.style,
+  //TODO: remove in next major release
+  isSameDay: React.PropTypes.func,
+  isSameUser: React.PropTypes.func,
 };

src/GiftedChat.js

@@ -11,6 +11,7 @@ import ActionSheet from '@exponent/react-native-action-sheet';
 import dismissKeyboard from 'react-native-dismiss-keyboard';
 import moment from 'moment/min/moment-with-locales.min';
 
+import * as utils from './utils';
 import Actions from './Actions';
 import Avatar from './Avatar';
 import Bubble from './Bubble';
@@ -542,4 +543,5 @@ export {
   Message,
   Send,
   Time,
+  utils
 };

src/Message.js

@@ -1,88 +1,69 @@
 import React from 'react';
 import {
   View,
-  StyleSheet,
+  StyleSheet
 } from 'react-native';
 
-import moment from 'moment';
-
 import Avatar from './Avatar';
 import Bubble from './Bubble';
 import Day from './Day';
 
-export default class Message extends React.Component {
-
-  isSameDay(currentMessage = {}, diffMessage = {}) {
-    let diff = 0;
-    if (diffMessage.createdAt && currentMessage.createdAt) {
-      diff = Math.abs(moment(diffMessage.createdAt).startOf('day').diff(moment(currentMessage.createdAt).startOf('day'), 'days'));
-    } else {
-      diff = 1;
-    }
-    if (diff === 0) {
-      return true;
-    }
-    return false;
-  }
+import { isSameUser, isSameDay, warnDeprecated } from './utils';
 
-  isSameUser(currentMessage = {}, diffMessage = {}) {
-    if (diffMessage.user && currentMessage.user) {
-      if (diffMessage.user._id === currentMessage.user._id) {
-        return true;
-      }
-    }
-    return false;
-  }
+export default class Message extends React.Component {
 
   renderDay() {
     if (this.props.currentMessage.createdAt) {
-      const {containerStyle, ...other} = this.props;
-      const dayProps = {
-        ...other,
-        isSameUser: this.isSameUser,
-        isSameDay: this.isSameDay,
-      };
+      const {containerStyle, ...dayProps} = this.props;
       if (this.props.renderDay) {
-        return this.props.renderDay(dayProps);
+        return this.props.renderDay({
+          ...dayProps,
+          //TODO: remove in next major release
+          isSameUser: warnDeprecated(isSameUser),
+          isSameDay: warnDeprecated(isSameDay)
+        });
       }
       return <Day {...dayProps}/>;
     }
     return null;
   }
 
   renderBubble() {
-    const {containerStyle, ...other} = this.props;
-    const bubbleProps = {
-      ...other,
-      isSameUser: this.isSameUser,
-      isSameDay: this.isSameDay,
-    };
+    const {containerStyle, ...bubbleProps} = this.props;
     if (this.props.renderBubble) {
-      return this.props.renderBubble(bubbleProps);
+      return this.props.renderBubble({
+        ...bubbleProps,
+        //TODO: remove in next major release
+        isSameUser: warnDeprecated(isSameUser),
+        isSameDay: warnDeprecated(isSameDay)
+      });
     }
     return <Bubble {...bubbleProps}/>;
   }
 
   renderAvatar() {
-    if (this.props.user._id !== this.props.currentMessage.user._id) {
-      const {containerStyle, ...other} = this.props;
-      const avatarProps = {
-        ...other,
-        isSameUser: this.isSameUser,
-        isSameDay: this.isSameDay,
-      };
 
-      return <Avatar {...avatarProps}/>;
+    if (this.props.user._id === this.props.currentMessage.user._id) {
+      return null;
     }
-    return null;
+
+    const {containerStyle, ...other} = this.props;
+    const avatarProps = {
+      ...other,
+      //TODO: remove in next major release
+      isSameUser: warnDeprecated(isSameUser),
+      isSameDay: warnDeprecated(isSameDay)
+    };
+    return <Avatar {...avatarProps}/>;
+
   }
 
   render() {
     return (
       <View>
         {this.renderDay()}
         <View style={[styles[this.props.position].container, {
-          marginBottom: this.isSameUser(this.props.currentMessage, this.props.nextMessage) ? 2 : 10,
+          marginBottom: isSameUser(this.props.currentMessage, this.props.nextMessage) ? 2 : 10,
         }, this.props.containerStyle[this.props.position]]}>
           {this.props.position === 'left' ? this.renderAvatar() : null}
           {this.renderBubble()}

src/utils.js

@@ -0,0 +1,31 @@
+import moment from 'moment';
+
+const DEPRECATION_MESSAGE = 'isSameUser and isSameDay should be imported from the utils module instead of using the props functions';
+
+export function isSameDay(currentMessage = {}, diffMessage = {}) {
+
+  let currentCreatedAt = moment(currentMessage.createdAt);
+  let diffCreatedAt = moment(diffMessage.createdAt);
+
+  if (!currentCreatedAt.isValid() || !diffCreatedAt.isValid()) {
+    return false;
+  }
+
+  return currentCreatedAt.isSame(diffCreatedAt, 'day');
+
+}
+
+export function isSameUser(currentMessage = {}, diffMessage = {}) {
+
+  return !!(diffMessage.user && currentMessage.user && diffMessage.user._id === currentMessage.user._id);
+
+}
+
+export function warnDeprecated(fn) {
+
+  return (...args) => {
+    console.warn(DEPRECATION_MESSAGE);
+    return fn(...args);
+  };
+
+}