♻️ (Home) move downloaded filter in HomeModule

Author: tpucci

example/src/canals/home/Home.tsx

@@ -7,52 +7,46 @@ import {TabBar} from '../../atoms/TabBar';
 import {HomeScreen} from './screens/HomeScreen';
 import {DownloadScreen} from './screens/DownloadScreen';
 import {SearchModule} from '../../module/SearchModule';
+import {HomeModule} from '../../module/HomeModule';
+import {observer} from 'mobx-react';
 
-export const Home = () => {
-  const [navigationScreen, setNavigationState] = useState('Home');
-
-  return (
-    <View style={StyleSheet.absoluteFill}>
-      <Canal style={{flex: 1}}>
-        <Screen
-          name="Home"
-          Component={HomeScreen}
-          visible={navigationScreen === 'Home'}
-          Transitioner={transition.Fade}
-        />
-        <Screen
-          name="Downloads"
-          Component={DownloadScreen}
-          visible={navigationScreen === 'Downloads'}
-          Transitioner={transition.Fade}
-        />
-      </Canal>
-      <TabBar
-        items={[
-          {
-            iconName: 'home',
-            title: 'Accueil',
-            selected: navigationScreen === 'Home',
-            onPress: () => {
-              setNavigationState('Home');
-            },
-          },
-          {
-            iconName: 'magnifier',
-            title: 'Rechercher',
-            selected: false,
-            onPress: SearchModule.search,
-          },
-          {
-            iconName: 'arrow-down-circle',
-            title: 'Téléchargements',
-            selected: navigationScreen === 'Downloads',
-            onPress: () => {
-              setNavigationState('Downloads');
-            },
-          },
-        ]}
+export const Home = observer(() => (
+  <View style={StyleSheet.absoluteFill}>
+    <Canal style={{flex: 1}}>
+      <Screen
+        name="Home"
+        Component={HomeScreen}
+        visible={!HomeModule.isFilteringDownloaded}
+        Transitioner={transition.Fade}
+      />
+      <Screen
+        name="Downloads"
+        Component={DownloadScreen}
+        visible={HomeModule.isFilteringDownloaded}
+        Transitioner={transition.Fade}
       />
-    </View>
-  );
-};
+    </Canal>
+    <TabBar
+      items={[
+        {
+          iconName: 'home',
+          title: 'Accueil',
+          selected: !HomeModule.isFilteringDownloaded,
+          onPress: HomeModule.cancelFilter,
+        },
+        {
+          iconName: 'magnifier',
+          title: 'Rechercher',
+          selected: false,
+          onPress: SearchModule.search,
+        },
+        {
+          iconName: 'arrow-down-circle',
+          title: 'Téléchargements',
+          selected: HomeModule.isFilteringDownloaded,
+          onPress: HomeModule.filterDownloaded,
+        },
+      ]}
+    />
+  </View>
+));

example/src/module/HomeModule.ts

@@ -0,0 +1,16 @@
+import {observable} from 'mobx';
+
+class HomeModule_ {
+  @observable
+  isFilteringDownloaded = false;
+
+  filterDownloaded = () => {
+    this.isFilteringDownloaded = true;
+  };
+
+  cancelFilter = () => {
+    this.isFilteringDownloaded = false;
+  };
+}
+
+export const HomeModule = new HomeModule_();