Fixed home header button + fixed snackbar button not working

components/Custom/HeaderButton.js

@@ -13,7 +13,7 @@ function HeaderButton(props) {
         <IconButton
             icon={props.icon}
             size={26}
-            color={colors.text}
+            color={props.color !== undefined ? props.color : colors.text}
             onPress={props.onPress}
         />
     );

components/Lists/WebSectionList.js

@@ -57,8 +57,6 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
     onFetchSuccess: Function;
     onFetchError: Function;
     getEmptySectionHeader: Function;
-    showSnackBar: Function;
-    hideSnackBar: Function;
 
     constructor() {
         super();
@@ -67,8 +65,6 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
         this.onFetchSuccess = this.onFetchSuccess.bind(this);
         this.onFetchError = this.onFetchError.bind(this);
         this.getEmptySectionHeader = this.getEmptySectionHeader.bind(this);
-        this.showSnackBar = this.showSnackBar.bind(this);
-        this.hideSnackBar = this.hideSnackBar.bind(this);
     }
 
     /**
@@ -159,16 +155,12 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
     /**
      * Shows the error popup
      */
-    showSnackBar() {
+    showSnackBar = () => this.setState({snackbarVisible: true});
-        this.setState({snackbarVisible: true})
-    }
 
     /**
      * Hides the error popup
      */
-    hideSnackBar() {
+    hideSnackBar = () => this.setState({snackbarVisible: false});
-        this.setState({snackbarVisible: false})
-    }
 
     render() {
         let dataset = [];
@@ -177,17 +169,6 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
         const shouldRenderHeader = this.props.renderSectionHeader !== null;
         return (
             <View>
-                <Snackbar
-                    visible={this.state.snackbarVisible}
-                    onDismiss={this.hideSnackBar}
-                    action={{
-                        label: 'OK',
-                        onPress: this.hideSnackBar,
-                    }}
-                    duration={4000}
-                >
-                    {i18n.t("homeScreen.listUpdateFail")}
-                </Snackbar>
                 {/*$FlowFixMe*/}
                 <SectionList
                     sections={dataset}
@@ -212,6 +193,17 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
                             onRefresh={this.onRefresh}/>
                     }
                 />
+                <Snackbar
+                    visible={this.state.snackbarVisible}
+                    onDismiss={this.hideSnackBar}
+                    action={{
+                        label: 'OK',
+                        onPress: () => {},
+                    }}
+                    duration={4000}
+                >
+                    {i18n.t("homeScreen.listUpdateFail")}
+                </Snackbar>
             </View>
         );
     }

screens/HomeScreen.js

@@ -32,16 +32,10 @@ type Props = {
     theme: Object,
 }
 
-type State = {
-    imageModalVisible: boolean,
-    imageList: Array<Object>,
-    isLoggedIn: boolean,
-}
-
 /**
  * Class defining the app's home screen
  */
-class HomeScreen extends React.Component<Props, State> {
+class HomeScreen extends React.Component<Props> {
 
     onProxiwashClick: Function;
     onTutorInsaClick: Function;
@@ -52,15 +46,10 @@ class HomeScreen extends React.Component<Props, State> {
 
     colors: Object;
 
-    state = {
+    isLoggedIn: boolean | null;
-        imageModalVisible: false,
-        imageList: [],
-        isLoggedIn: ConnectionManager.getInstance().isLoggedIn(),
-    };
 
     constructor(props) {
         super(props);
-        ConnectionManager.getInstance().addLoginStateListener((value) => this.setState({isLoggedIn: value}));
         this.onProxiwashClick = this.onProxiwashClick.bind(this);
         this.onTutorInsaClick = this.onTutorInsaClick.bind(this);
         this.onMenuClick = this.onMenuClick.bind(this);
@@ -68,6 +57,8 @@ class HomeScreen extends React.Component<Props, State> {
         this.getRenderItem = this.getRenderItem.bind(this);
         this.createDataset = this.createDataset.bind(this);
         this.colors = props.theme.colors;
+
+        this.isLoggedIn = null;
     }
 
     /**
@@ -82,20 +73,32 @@ class HomeScreen extends React.Component<Props, State> {
     }
 
     componentDidMount() {
-        this.props.navigation.setOptions({
+        this.props.navigation.addListener('focus', this.onScreenFocus);
-            headerRight: this.getHeaderButton,
-        });
     }
 
+    onScreenFocus = () => {
+        if (this.isLoggedIn !== ConnectionManager.getInstance().isLoggedIn()) {
+            this.isLoggedIn = ConnectionManager.getInstance().isLoggedIn();
+            this.props.navigation.setOptions({
+                headerRight: this.getHeaderButton,
+            });
+        }
+
+    };
+
     getHeaderButton = () => {
-        const screen = this.state.isLoggedIn
+        const screen = this.isLoggedIn
             ? "ProfileScreen"
             : "LoginScreen";
-        const icon = this.state.isLoggedIn
+        const icon = this.isLoggedIn
             ? "account"
             : "login";
         const onPress = () => this.props.navigation.navigate(screen);
-        return <HeaderButton icon={icon} onPress={onPress}/>;
+        return <HeaderButton
+            icon={icon}
+            onPress={onPress}
+            color={this.isLoggedIn ? undefined : this.colors.primary}
+        />;
     };
 
     onProxiwashClick() {
@@ -448,18 +451,6 @@ class HomeScreen extends React.Component<Props, State> {
         openBrowser(link, this.colors.primary);
     }
 
-    showImageModal(imageList) {
-        this.setState({
-            imageModalVisible: true,
-            imageList: imageList,
-        });
-    };
-
-    hideImageModal = () => {
-        this.setState({imageModalVisible: false});
-    };
-
-
     /**
      * Gets a render item for the given feed object
      *
@@ -494,16 +485,13 @@ class HomeScreen extends React.Component<Props, State> {
     render() {
         const nav = this.props.navigation;
         return (
-            <View>
+            <WebSectionList
-                <WebSectionList
+                createDataset={this.createDataset}
-                    createDataset={this.createDataset}
+                navigation={nav}
-                    navigation={nav}
+                autoRefreshTime={REFRESH_TIME}
-                    autoRefreshTime={REFRESH_TIME}
+                refreshOnFocus={true}
-                    refreshOnFocus={true}
+                fetchUrl={DATA_URL}
-                    fetchUrl={DATA_URL}
+                renderItem={this.getRenderItem}/>
-                    renderItem={this.getRenderItem}/>
-            </View>
-
         );
     }
 }