Merge pull request #276 from Expensify/tgolen-fix-refs

Fix refs and defaultProps issue

src/components/WithIon.js

@@ -33,12 +33,6 @@ export default function (mapIonToState) {
                 // this.props. These are stored differently because anytime the props change, the component has to be
                 // reconnected to Ion with the new props.
                 this.activeConnectionIDsWithPropsData = {};
-
-                // Initialize the state with each of the property names from the mapping
-                this.state = _.reduce(_.keys(mapIonToState), (finalResult, propertyName) => ({
-                    ...finalResult,
-                    [propertyName]: null,
-                }), {});
             }
 
             componentDidMount() {
@@ -146,7 +140,6 @@ export default function (mapIonToState) {
                         {...this.props}
                         // eslint-disable-next-line react/jsx-props-no-spreading
                         {...this.state}
-                        ref={el => this.wrappedComponent = el}
                     />
                 );
             }

src/page/HomePage/HeaderView.js

@@ -22,7 +22,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-    reportName: '',
+    reportName: null,
 };
 
 const HeaderView = props => (

src/page/HomePage/MainView.js

@@ -16,18 +16,18 @@ const propTypes = {
     /* Ion Props */
 
     // List of reports to display
-    reports: PropTypes.arrayOf(PropTypes.shape({
+    reports: PropTypes.objectOf(PropTypes.shape({
         reportID: PropTypes.number,
     })),
 };
 
 const defaultProps = {
-    reports: [],
+    reports: {},
 };
 
 class MainView extends React.Component {
     render() {
-        if (this.props.reports.length === 0) {
+        if (!_.size(this.props.reports)) {
             return null;
         }
 

src/page/HomePage/Report/ReportHistoryView.js

@@ -20,14 +20,14 @@ const propTypes = {
     /* Ion Props */
 
     // Array of report history items for this report
-    reportHistory: PropTypes.arrayOf(PropTypes.shape(ReportHistoryPropsTypes)),
+    reportHistory: PropTypes.PropTypes.objectOf(PropTypes.shape(ReportHistoryPropsTypes)),
 
     // Current user authToken
     authToken: PropTypes.string,
 };
 
 const defaultProps = {
-    reportHistory: [],
+    reportHistory: {},
     authToken: '',
 };
 
@@ -85,7 +85,7 @@ class ReportHistoryView extends React.Component {
      * action when scrolled
      */
     recordMaxAction() {
-        const reportHistory = lodashGet(this.props, 'reportHistory', []);
+        const reportHistory = lodashGet(this.props, 'reportHistory', {});
         const maxVisibleSequenceNumber = _.chain(reportHistory)
             .pluck('sequenceNumber')
             .max()
@@ -127,7 +127,7 @@ class ReportHistoryView extends React.Component {
     }
 
     render() {
-        if (this.props.reportHistory.length === 0) {
+        if (!_.size(this.props.reportHistory)) {
             return (
                 <View style={[styles.chatContent, styles.chatContentEmpty]}>
                     <Text style={[styles.textP]}>Be the first person to comment!</Text>

src/page/HomePage/SidebarView.js

@@ -36,20 +36,20 @@ const propTypes = {
     avatarURL: PropTypes.string,
 
     // List of reports
-    reports: PropTypes.arrayOf(PropTypes.shape({
-        hasUnread: PropTypes.bool,
-        reportName: PropTypes.string,
+    reports: PropTypes.objectOf(PropTypes.shape({
         reportID: PropTypes.number,
+        reportName: PropTypes.string,
+        hasUnread: PropTypes.bool,
     })),
 
     // Is this person offline?
     isOffline: PropTypes.bool,
 };
 
 const defaultProps = {
-    userDisplayName: '',
+    userDisplayName: null,
     avatarURL: '',
-    reports: [],
+    reports: {},
     isOffline: false,
 };
 

src/page/SignInPage.js

@@ -28,7 +28,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-    error: '',
+    error: null,
 };
 
 class App extends Component {