getDerivedStateFromProps, could use reorganizing

Author: eastcoastcoder

.eslintrc

@@ -47,6 +47,7 @@
     "no-prototype-builtins": "off",
     "no-bitwise": "off",        
     "no-console": "off",    
+    "no-nested-ternary": "off",
     "no-underscore-dangle": "off",    
     "object-curly-newline": "off",    
     "no-use-before-define": "off",

components/frogimage.js

@@ -5,10 +5,24 @@ import contextWrap from '../util/contextWrap';
 import FrogVideo from './FrogVideo';
 
 class FrogImage extends React.Component {
-  state = { currentDude: 0 };
+  state = {
+    currentDude: 0,
+  };
+
+  static getDerivedStateFromProps({ context: { REEEEE, notWednesday, notWednesdayDude, isWednesday, todaysDudes, isLoading } }, prevState) {
+    return {
+      currentDude: prevState.currentDude,
+      REEEEE,
+      notWednesday,
+      notWednesdayDude,
+      isWednesday,
+      todaysDudes,
+      isLoading,
+    };
+  }
+
   render() {
-    const { currentDude } = this.state;
-    const { REEEEE, notWednesday, notWednesdayDude, isWednesday, todaysDudes, isLoading } = this.props.context;
+    const { currentDude, REEEEE, notWednesday, notWednesdayDude, isWednesday, todaysDudes, isLoading } = this.state;
     return !isLoading
       ?
         <TouchableOpacity onPress={

contexts/GlobalProvider.js

@@ -36,10 +36,7 @@ export default class GlobalProvider extends Component {
     }
     const notWedUrl = `https://graph.facebook.com/v3.0/1726444857365752/photos?fields=images&access_token=${this.state.token}`;
     const curDate = (new Date()).toLocaleDateString();
-    const { dudesRepository, lastFetched } = storageObj;
-    if (!dudesRepository || !dudesRepository.length) {
-      await this.cacheFroggos();
-    }
+    const { lastFetched } = storageObj;
     if (this.state.isWednesday && (lastFetched !== curDate)) {
       await this.fetchFroggos();
     }
@@ -60,8 +57,8 @@ export default class GlobalProvider extends Component {
           onPress: async () => {
             const allKeys = await AsyncStorage.getAllKeys();
             await AsyncStorage.multiRemove(allKeys);
-            this.setState({ dudesCollection: [], godmode: false, isWednesday: this.state.trueWednesday });
-            await this.cacheFroggos();
+            this.setState({ dudesCollection: [], todaysDudes: [], godmode: false, isWednesday: this.state.trueWednesday });
+            await this.fetchFroggos();
           } },
       ],
       { cancelable: false }
@@ -72,11 +69,11 @@ export default class GlobalProvider extends Component {
     this.setState({ isLoading: true });
     const { todaysDudes } = this.state;
     try {
-      const dudesRepository = JSON.parse(await AsyncStorage.getItem('dudesRepository')) || [];
+      if (!this.state.dudesRepository) await this.cacheFroggos();
       for (let i = 0; i < 5; i++) {
-        const randomIndex = (Math.random() * dudesRepository.length | 0);
+        const randomIndex = (Math.random() * this.state.dudesRepository.length | 0);
         // Implement categorization strats here
-        const loopDude = dudesRepository[randomIndex];
+        const loopDude = this.state.dudesRepository[randomIndex];
         const { id } = loopDude;
         const { source } = loopDude.images[0];
         const thumbnail = findThumbnailDude(loopDude.images);
@@ -115,14 +112,15 @@ export default class GlobalProvider extends Component {
       dudesRepository = dudesRepository.concat(response.data);
       url = response.paging.next;
     }
+    this.setState({ dudesRepository });
     await AsyncStorage.setItem('dudesRepository', JSON.stringify(dudesRepository));
   }
 
   _toggleGodmode = async () => {
     if (!this.state.trueWednesday) {
       console.log('toggling godmode');
       const godmode = !this.state.godmode;
-      this.setState({ godmode });
+      this.setState({ godmode, isLoading: true });
       const lastFetched = await AsyncStorage.getItem('lastFetched');
       const curDate = (new Date()).toLocaleDateString();
       if (godmode && (lastFetched !== curDate)) {

screens/Collection.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { StyleSheet, View, Image, Text, Platform, AsyncStorage } from 'react-native';
+import { StyleSheet, View, Image, Text, Platform, ActivityIndicator } from 'react-native';
 import GridView from 'react-native-super-grid';
 import Lightbox from 'react-native-lightbox';
 import contextWrap from '../util/contextWrap';
@@ -11,44 +11,38 @@ class Collection extends Component {
 
   state = {
     dudesCollection: this.props.context.dudesCollection,
+    isLoading: this.props.context.isLoading,
   }
 
-  componentWillReceiveProps(nextProps) {
-    const { dudesCollection } = nextProps.context;
-    this.setState({ dudesCollection });
-  }
-
-  // Hack until I figure out contexutal state issues
-  componentDidMount() {
-    this.props.navigation.addListener(
-      'didFocus',
-      async () => {
-        const dudesCollection = JSON.parse(await AsyncStorage.getItem('dudesCollection')) || [];
-        this.setState({ dudesCollection });
-      }
-    );
+  static getDerivedStateFromProps({ context: { dudesCollection, isLoading } }) {
+    return {
+      dudesCollection,
+      isLoading,
+    };
   }
 
   render() {
-    const { dudesCollection } = this.state;
-    return dudesCollection.length
-      ?
-        <GridView
-          itemDimension={130}
-          items={dudesCollection}
-          style={styles.gridView}
-          renderItem={({ thumbnail }) => (
-            <Lightbox>
-              <View style={styles.itemContainer}>
-                <Image source={{ uri: thumbnail }} style={styles.backgroundImage} />
-              </View>
-            </Lightbox>
+    const { dudesCollection, isLoading } = this.state;
+    return !isLoading
+      ? dudesCollection.length
+        ?
+          <GridView
+            itemDimension={130}
+            items={dudesCollection}
+            style={styles.gridView}
+            renderItem={({ thumbnail }) => (
+              <Lightbox>
+                <View style={styles.itemContainer}>
+                  <Image source={{ uri: thumbnail }} style={styles.backgroundImage} />
+                </View>
+              </Lightbox>
         )}
-        />
-      :
-        <View style={styles.tabBarInfoContainer}>
-          <Text style={styles.tabBarInfoText}>No Frogs to see here just yet.</Text>
-        </View>;
+          />
+        :
+          <View style={styles.tabBarInfoContainer}>
+            <Text style={styles.tabBarInfoText}>No Frogs to see here just yet.</Text>
+          </View>
+      : <ActivityIndicator size="large" color="#0000ff" />;
   }
 }
 

screens/Settings.js

@@ -8,21 +8,22 @@ class SettingsScreen extends Component {
   };
 
   state = {
-    godmode: false,
-    listViewData: [
-      {
-        key: 'toggleGodmode', displayItems: ['It\'s Always Wednesday in Philadelphia'], type: 'toggle'
-      },
-      {
-        key: 'clearDudes', displayItems: ['Clear Dudes'], type: 'alert',
-      },
-    ],
-  };
+    godmode: this.props.context.godmode,
+    listViewData: [],
+  }
 
-  // Unsafe, deprecated, probably an anti-pattern
-  componentWillReceiveProps(nextProps) {
-    const { godmode } = nextProps.context;
-    this.setState({ godmode });
+  static getDerivedStateFromProps(nextProps) {
+    return {
+      godmode: nextProps.context.godmode,
+      listViewData: [
+        {
+          key: 'toggleGodmode', displayItems: ['It\'s Always Wednesday in Philadelphia'], type: 'toggle'
+        },
+        {
+          key: 'clearDudes', displayItems: ['Clear Dudes'], type: 'alert',
+        },
+      ],
+    };
   }
 
   _renderItem = data => {