From 74589ce5ad8286391876a29f2ae3ef2caebf70b8 Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Sat, 17 Sep 2022 00:22:12 -0700
Subject: [PATCH] preparing for large layouts

---
 app/mobile/src/access/useAccess.hook.js   |  3 +-
 app/mobile/src/constants/Config.js        |  5 +++
 app/mobile/src/session/Session.jsx        | 50 ++++++++++++-----------
 app/mobile/src/session/useSession.hook.js | 17 +++++---
 4 files changed, 45 insertions(+), 30 deletions(-)
 create mode 100644 app/mobile/src/constants/Config.js

diff --git a/app/mobile/src/access/useAccess.hook.js b/app/mobile/src/access/useAccess.hook.js
index 35c93e65..da0a750f 100644
--- a/app/mobile/src/access/useAccess.hook.js
+++ b/app/mobile/src/access/useAccess.hook.js
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useWindowDimensions } from 'react-native';
+import config from 'constants/Config';
 
 export function useAccess() {
 
@@ -13,7 +14,7 @@ export function useAccess() {
   }
 
   useEffect(() => {
-    if (dimensions.width > 650) {
+    if (dimensions.width > config.tabbedWidth) {
       updateState({ split: true });
     }
     else {
diff --git a/app/mobile/src/constants/Config.js b/app/mobile/src/constants/Config.js
new file mode 100644
index 00000000..032efb69
--- /dev/null
+++ b/app/mobile/src/constants/Config.js
@@ -0,0 +1,5 @@
+export const Config = {
+  tabbedWidth: 650,
+};
+
+export default Config;
diff --git a/app/mobile/src/session/Session.jsx b/app/mobile/src/session/Session.jsx
index 8e4426f3..50db8f15 100644
--- a/app/mobile/src/session/Session.jsx
+++ b/app/mobile/src/session/Session.jsx
@@ -47,30 +47,32 @@ export function Session() {
   return (
     <SafeAreaProvider>
       <NavigationContainer>
-        <Tab.Navigator
-          screenOptions={({ route }) => ({
-            tabBarStyle: styles.tabBar,
-            headerShown: false,
-            tabBarIcon: ({ focused, color, size }) => {
-              if (route.name === 'Profile') {
-                return <Ionicons name={'user'} size={size} color={color} />;
-              }
-              if (route.name === 'Conversation') {
-                return <Ionicons name={'message1'} size={size} color={color} />;
-              }
-              if (route.name === 'Contacts') {
-                return <Ionicons name={'contacts'} size={size} color={color} />;
-              }
-            },
-            tabBarShowLabel: false,
-            tabBarActiveTintColor: Colors.white,
-            tabBarInactiveTintColor: Colors.disabled,
-          })}
-            >
-          <Tab.Screen name="Conversation" component={ConversationStackScreen} />
-          <Tab.Screen name="Profile" component={ProfileStackScreen} />
-          <Tab.Screen name="Contacts" component={ContactStackScreen} />
-        </Tab.Navigator>
+        { state.tabbed && (
+          <Tab.Navigator
+            screenOptions={({ route }) => ({
+              tabBarStyle: styles.tabBar,
+              headerShown: false,
+              tabBarIcon: ({ focused, color, size }) => {
+                if (route.name === 'Profile') {
+                  return <Ionicons name={'user'} size={size} color={color} />;
+                }
+                if (route.name === 'Conversation') {
+                  return <Ionicons name={'message1'} size={size} color={color} />;
+                }
+                if (route.name === 'Contacts') {
+                  return <Ionicons name={'contacts'} size={size} color={color} />;
+                }
+              },
+              tabBarShowLabel: false,
+              tabBarActiveTintColor: Colors.white,
+              tabBarInactiveTintColor: Colors.disabled,
+            })}
+              >
+            <Tab.Screen name="Conversation" component={ConversationStackScreen} />
+            <Tab.Screen name="Profile" component={ProfileStackScreen} />
+            <Tab.Screen name="Contacts" component={ContactStackScreen} />
+          </Tab.Navigator>
+        )}
       </NavigationContainer>
     </SafeAreaProvider>
   );
diff --git a/app/mobile/src/session/useSession.hook.js b/app/mobile/src/session/useSession.hook.js
index 73c57013..60daeedc 100644
--- a/app/mobile/src/session/useSession.hook.js
+++ b/app/mobile/src/session/useSession.hook.js
@@ -2,12 +2,14 @@ import { useState, useEffect, useContext } from 'react';
 import { useWindowDimensions } from 'react-native';
 import { useNavigate } from 'react-router-dom';
 import { AppContext } from 'context/AppContext';
+import config from 'constants/Config';
 
 export function useSession() {
 
   const [state, setState] = useState({
+    tabbled: null,
   });
-
+  const dimensions = useWindowDimensions();
   const app = useContext(AppContext);
   const navigate = useNavigate();
 
@@ -15,11 +17,16 @@ export function useSession() {
     setState((s) => ({ ...s, ...value }));
   }
 
+  useEffect(() => {
+    if (dimensions.width > config.tabbedWidth) {
+      updateState({ tabbed: false });
+    }
+    else {
+      updateState({ tabbed: true });
+    }
+  }, [dimensions]);
+
   const actions = {
-    logout: async () => {
-      await app.actions.logout();
-      navigate('/');
-    },
   };
 
   return { state, actions };