Upgrade react

src/auth/screens/events.screen.js

@@ -100,12 +100,6 @@ class Events extends Component {
     this.getUserEvents();
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.user.login && !this.props.user.login) {
-      this.getUserEvents(nextProps);
-    }
-  }
-
   getUserEvents = ({ user, accessToken } = this.props) => {
     this.props.getUserEvents(user.login, { forceRefresh: true });
     this.props.getNotificationsCount(accessToken);
@@ -676,6 +670,7 @@ class Events extends Component {
   }
 }
 
-export const EventsScreen = connect(mapStateToProps, mapDispatchToProps)(
-  Events
-);
+export const EventsScreen = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Events);

src/auth/screens/language-setting.screen.js

@@ -45,19 +45,23 @@ class LanguageSettings extends Component {
   props: {
     locale: string,
     changeLocale: () => void,
+    navigation: object,
   };
 
-  componentWillReceiveProps(nextState) {
-    if (nextState.locale !== this.props.locale) {
-      const navigationParams = NavigationActions.setParams({
-        params: {
-          title: t('Language', nextState.locale),
-        },
-        key: nextState.navigation.state.key,
-      });
+  shouldComponentUpdate(nextProps) {
+    return nextProps.locale !== this.props.locale;
+  }
+
+  componentDidUpdate() {
+    const { locale, navigation } = this.props;
+    const navigationParams = NavigationActions.setParams({
+      params: {
+        title: t('Language', locale),
+      },
+      key: navigation.state.key,
+    });
 
-      nextState.navigation.dispatch(navigationParams);
-    }
+    navigation.dispatch(navigationParams);
   }
 
   renderListItem = ({ item }) => {

src/auth/screens/user-options.screen.js

@@ -65,6 +65,15 @@ const updateText = locale => ({
 });
 
 class UserOptions extends Component {
+  static getDerivedStateFromProps(props, state) {
+    return props.locale !== state.locale
+      ? {
+          updateText: updateText(props.locale).check,
+          locale: props.locale,
+        }
+      : null;
+  }
+
   props: {
     locale: string,
     signOut: () => void,
@@ -77,24 +86,24 @@ class UserOptions extends Component {
 
     this.state = {
       updateText: updateText(props.locale).check,
+      locale: props.locale,
     };
   }
 
-  componentWillReceiveProps(nextState) {
-    if (nextState.locale !== this.props.locale) {
-      this.setState({
-        updateText: updateText(nextState.locale).check,
-      });
+  shouldComponentUpdate(nextProps) {
+    return nextProps.locale !== this.props.locale;
+  }
 
-      const navigationParams = NavigationActions.setParams({
-        params: {
-          title: t('Options', nextState.locale),
-        },
-        key: nextState.navigation.state.key,
-      });
+  componentDidUpdate() {
+    const { locale, navigation } = this.props;
+    const navigationParams = NavigationActions.setParams({
+      params: {
+        title: t('Options', locale),
+      },
+      key: navigation.state.key,
+    });
 
-      nextState.navigation.dispatch(navigationParams);
-    }
+    navigation.dispatch(navigationParams);
   }
 
   checkForUpdate = () => {
@@ -183,6 +192,7 @@ class UserOptions extends Component {
   }
 }
 
-export const UserOptionsScreen = connect(mapStateToProps, mapDispatchToProps)(
-  UserOptions
-);
+export const UserOptionsScreen = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(UserOptions);

src/notifications/screens/notifications.screen.js

@@ -184,18 +184,18 @@ class Notifications extends Component {
     this.getNotifications();
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps) {
     const pendingType = this.getPendingType();
 
     if (
-      !nextProps.isPendingMarkAllNotificationsAsRead &&
-      this.props.isPendingMarkAllNotificationsAsRead &&
+      !this.props.isPendingMarkAllNotificationsAsRead &&
+      prevProps.isPendingMarkAllNotificationsAsRead &&
       !this.isLoading()
     ) {
       this.getNotificationsForCurrentType()();
     }
 
-    if (!nextProps[pendingType] && this.props[pendingType]) {
+    if (!this.props[pendingType] && prevProps[pendingType]) {
       this.props.getNotificationsCount();
     }
   }
@@ -385,16 +385,15 @@ class Notifications extends Component {
 
     return (
       <View>
-        {isFirstItem &&
-          isFirstTab && (
-            <MarkAllAsReadButtonContainer>
-              <Button
-                icon={{ name: 'check', type: 'octicon' }}
-                onPress={() => markAllNotificationsAsRead()}
-                title={t('Mark all as read')}
-              />
-            </MarkAllAsReadButtonContainer>
-          )}
+        {isFirstItem && isFirstTab && (
+          <MarkAllAsReadButtonContainer>
+            <Button
+              icon={{ name: 'check', type: 'octicon' }}
+              onPress={() => markAllNotificationsAsRead()}
+              title={t('Mark all as read')}
+            />
+          </MarkAllAsReadButtonContainer>
+        )}
 
         <RepositoryContainer>
           <HeaderContainer>
@@ -504,6 +503,7 @@ class Notifications extends Component {
   }
 }
 
-export const NotificationsScreen = connect(mapStateToProps, mapDispatchToProps)(
-  Notifications
-);
+export const NotificationsScreen = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Notifications);

src/organization/screens/organization-profile.screen.js

@@ -37,6 +37,10 @@ const LoadingMembersContainer = styled.View`
 `;
 
 class OrganizationProfile extends Component {
+  static getDerivedStateFromProps() {
+    return { refreshing: false };
+  }
+
   props: {
     org: Object,
     orgId: String,
@@ -68,10 +72,6 @@ class OrganizationProfile extends Component {
     getOrgMembers(orgId);
   }
 
-  componentWillReceiveProps() {
-    this.setState({ refreshing: false });
-  }
-
   refresh = () => {
     this.setState({ refreshing: true });
     const { orgId, getOrgById, getOrgMembers } = this.props;
@@ -162,15 +162,14 @@ class OrganizationProfile extends Component {
             />
           )}
 
-          {!!org.description &&
-            org.description !== '' && (
-              <SectionList title={t('DESCRIPTION', locale)}>
-                <DescriptionListItem
-                  subtitle={emojifyText(org.description)}
-                  hideChevron
-                />
-              </SectionList>
-            )}
+          {!!org.description && org.description !== '' && (
+            <SectionList title={t('DESCRIPTION', locale)}>
+              <DescriptionListItem
+                subtitle={emojifyText(org.description)}
+                hideChevron
+              />
+            </SectionList>
+          )}
 
           {org && (
             <EntityInfo entity={org} navigation={navigation} locale={locale} />

src/user/screens/starred-repository-list.screen.js

@@ -47,7 +47,7 @@ class StarredRepositoryList extends Component {
     navigation: Object,
   };
 
-  componentWillMount() {
+  componentDidMount() {
     const { getStarredReposForUser, userId } = this.props;
 
     getStarredReposForUser(userId);