re-enable persistant state

move some screen local state out of the persisted store handle reseting of stale data better
cleech · Jun 9, 2021 · 43c9cd3 · 43c9cd3
1 parent 5726a6e
commit 43c9cd3
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 26 deletions.
diff --git a/src/App.js b/src/App.js
@@ -53,7 +53,7 @@ const DarkTheme = _.merge(
 );
 
 const RootStore = createRootStore();
-// persist('GBPlaybook', RootStore, {storage: AsyncStorage, jsonify: true});
+persist('GBPlaybook', RootStore, {storage: AsyncStorage, jsonify: true});
 
 const RootDrawer = createDrawerNavigator();
 const GameStack = createStackNavigator();

diff --git a/src/components/DraftList.js b/src/components/DraftList.js
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useState, useEffect} from 'react';
 import {StyleSheet, View, TouchableOpacity} from 'react-native';
 import {Text, withTheme} from 'react-native-paper';
 import AwesomeIcons from 'react-native-vector-icons/FontAwesome';
@@ -172,12 +172,8 @@ export const DraftList = withTheme((props) => {
 
     if (captain && mascot && squaddieCount === 4) {
       setReady(true);
-      let team = _.cloneDeep(props.guild);
-      team.roster = _.cloneDeep(roster.filter((m) => m.selected));
-      props.ready && props.ready(team.roster);
     } else if (ready) {
       setReady(false);
-      props.unready && props.unready();
     }
 
     setRoster(roster);
@@ -189,6 +185,16 @@ export const DraftList = withTheme((props) => {
   let [squaddieCount, setSquadCount] = useState(0);
   let [ready, setReady] = useState(false);
 
+  useEffect(() => {
+    if (ready) {
+      let team = _.cloneDeep(props.guild);
+      team.roster = _.cloneDeep(roster.filter(m => m.selected));
+      props.ready && props.ready(team.roster);
+    } else {
+      props.unready && props.unready();
+    }
+  }, [ready]);
+
   let [roster, setRoster] = useState(() => {
     // need to make a deep copy of the roster data
     let tmpRoster = _.cloneDeep(
@@ -296,12 +302,8 @@ export const BlacksmithDraftList = withTheme((props) => {
 
     if (masterCount === 3 && apprenticeCount === 3) {
       setReady(true);
-      let team = _.cloneDeep(props.guild);
-      team.roster = _.cloneDeep(roster.filter((m) => m.selected));
-      props.ready && props.ready(team.roster);
     } else if (ready) {
       setReady(false);
-      props.unready && props.unready();
     }
 
     setRoster(roster);
@@ -311,6 +313,16 @@ export const BlacksmithDraftList = withTheme((props) => {
   let [apprenticeCount, setApprenticeCount] = useState(0);
   let [ready, setReady] = useState(false);
 
+  useEffect(() => {
+    if (ready) {
+      let team = _.cloneDeep(props.guild);
+      team.roster = _.cloneDeep(roster.filter(m => m.selected));
+      props.ready && props.ready(team.roster);
+    } else {
+      props.unready && props.unready();
+    }
+  }, [ready]);
+
   let [roster, setRoster] = useState(() => {
     // need to make a deep copy of the roster data
     let tmpRoster = _.cloneDeep(

diff --git a/src/screens/DraftScreen.js b/src/screens/DraftScreen.js
@@ -35,8 +35,7 @@ const DraftScreen = props => {
   }
   const Guilds = data.Guilds;
 
-  let guild1 = store.team1.name;
-  let guild2 = store.team2.name;
+  const { guild1, guild2 } = props.route.params;
 
   // const orientation = useDeviceOrientation();
   const {height, width} = useDimensions().window;

diff --git a/src/screens/TeamSelectScreen.js b/src/screens/TeamSelectScreen.js
@@ -17,7 +17,6 @@ import GuildGrid, {itemSize} from '../components/GuildGrid';
 
 import {types} from 'mobx-state-tree';
 import {observer, Observer} from 'mobx-react-lite';
-import {useStore} from '../stores/RootStore';
 // import NavRail from '../components/NavRail';
 import {Appbar} from 'react-native-paper';
 import {CommonActions} from '@react-navigation/native';
@@ -32,19 +31,29 @@ import {useData} from '../components/DataContext';
 const TeamScreenStore = types
   .model({
     selector: types.enumeration(['P1', 'P2', 'GO']),
+    team1: types.string,
+    team2: types.string,
   })
   .actions(self => ({
     setSelector(s) {
       self.selector = s;
     },
+    setTeam1(s) {
+      self.team1 = s;
+    },
+    setTeam2(s) {
+      self.team2 = s;
+    },
   }));
 
 const screenStore = TeamScreenStore.create({
   selector: 'P1',
+  team1: '',
+  team2: '',
 });
 
 const TeamSelectScreen = withTheme(props => {
-  const store = useStore();
+  // const store = useStore();
   const theme = useTheme();
   const {version} = useData();
 
@@ -56,15 +65,15 @@ const TeamSelectScreen = withTheme(props => {
 
   function pickTeam(name) {
     if (screenStore.selector === 'P1') {
-      store.setTeam1(name);
-      if (!store.team2.name) {
+      screenStore.setTeam1(name);
+      if (!screenStore.team2) {
         screenStore.setSelector('P2');
       } else {
         screenStore.setSelector('GO');
       }
     } else if (screenStore.selector === 'P2') {
-      store.setTeam2(name);
-      if (!store.team1.name) {
+      screenStore.setTeam2(name);
+      if (!screenStore.team1) {
         screenStore.setSelector('P1');
       } else {
         screenStore.setSelector('GO');
@@ -132,7 +141,7 @@ const TeamSelectScreen = withTheme(props => {
                   flexDirection: 'row',
                   alignItems: 'center',
                 }}>
-                <SelectorIcon id="P1" team={store.team1} />
+                <SelectorIcon id="P1" team={screenStore.team1} />
 
                 <View
                   style={{
@@ -156,18 +165,18 @@ const TeamSelectScreen = withTheme(props => {
                     // )}
                     onPress={() => {
                       if (screenStore.selector === 'GO') {
-                        props.navigation.navigate('Draft');
+                        props.navigation.navigate('Draft', {guild1: screenStore.team1, guild2: screenStore.team2});
                       } else if (
-                        store.team1.name != '' &&
-                        store.team2.name != ''
+                        screenStore.team1.name != '' &&
+                        screenStore.team2.name != ''
                       ) {
                         screenStore.setSelector('GO');
                       }
                     }}
                   />
                 </View>
 
-                <SelectorIcon id="P2" team={store.team2} />
+                <SelectorIcon id="P2" team={screenStore.team2} />
               </View>
             )}
           </Observer>
@@ -202,7 +211,7 @@ const SelectorIcon = withTheme(
             overflow: 'hidden',
           }}>
           <Text style={{fontSize: itemsize / 2}}>{props.id}</Text>
-          {!props.team.name ? (
+          {!props.team ? (
             <></>
           ) : (
             <View
@@ -214,15 +223,15 @@ const SelectorIcon = withTheme(
                 zIndex: -1,
               }}>
               <GBIcon
-                name={props.team.name}
+                name={props.team}
                 size={itemsize}
                 style={{
                   color: props.theme.dark ? '#000a' : '#fff6',
                 }}
               />
             </View>
           )}
-          <Text>{props.team.name}</Text>
+          <Text>{props.team}</Text>
         </View>
       </TouchableOpacity>
     );