Merge pull request #220 from luke-h1/@luke-h1/chore/cleanup-nav-structure

feat(app): cleanup nav structure

Author: luke-h1

src/navigators/AppNavigator.tsx

@@ -2,7 +2,6 @@ import { AuthContextProvider } from '@app/context';
 import {
   AuthLoadingScreen,
   CategoryScreen,
-  ChangelogScreen,
   LoginScreen,
   StorybookScreen,
 } from '@app/screens';
@@ -22,6 +21,10 @@ import {
   DevToolsParamList,
   DevToolsStackNavigator,
 } from './DevToolsStackNavigator';
+import {
+  OtherStackNavigator,
+  OtherStackParamList,
+} from './OtherStackNavigator';
 import {
   PreferenceStackNavigator,
   PreferenceStackParamList,
@@ -65,9 +68,6 @@ export type AppStackParamList = {
   // login screen
   Login: undefined;
 
-  // changelog
-  Changelog: undefined;
-
   // sb
   Storybook: undefined;
 
@@ -76,6 +76,9 @@ export type AppStackParamList = {
 
   // dev-tools
   DevTools: NavigatorScreenParams<DevToolsParamList>;
+
+  // other
+  Other: NavigatorScreenParams<OtherStackParamList>;
 };
 
 /**
@@ -117,7 +120,7 @@ const AppStack = () => {
       <Stack.Screen name="Login" component={LoginScreen} />
 
       {/* Changelog */}
-      <Stack.Screen name="Changelog" component={ChangelogScreen} />
+      <Stack.Screen name="Other" component={OtherStackNavigator} />
 
       {/* sb */}
       <Stack.Screen name="Storybook" component={StorybookScreen} />

src/navigators/OtherStackNavigator.tsx

@@ -0,0 +1,37 @@
+import { ChangelogScreen } from '@app/screens';
+import { AboutScreen, FaqScreen } from '@app/screens/Other';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { StackScreenProps } from '@react-navigation/stack';
+
+export type OtherStackParamList = {
+  About: undefined;
+  Changelog: undefined;
+  Faq: undefined;
+};
+
+const Stack = createNativeStackNavigator<OtherStackParamList>();
+
+export type OtherStackScreenProps<T extends keyof OtherStackParamList> =
+  StackScreenProps<OtherStackParamList, T>;
+
+export function OtherStackNavigator() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="About"
+        component={AboutScreen}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name="Changelog"
+        component={ChangelogScreen}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name="Faq"
+        component={FaqScreen}
+        options={{ headerShown: false }}
+      />
+    </Stack.Navigator>
+  );
+}

src/navigators/config.ts

@@ -20,5 +20,5 @@ export const BaseConfig: ConfigBaseProps = {
    * This is a list of all the route names that will exit the app if the back button
    * is pressed while in that screen. Only affects Android.
    */
-  exitRoutes: ['AuthLoadingScreen'],
+  exitRoutes: [''],
 };

src/navigators/index.ts

@@ -7,3 +7,4 @@ export * from './config';
 export * from './BackButton';
 export * from './PreferenceStackNavigator';
 export * from './DevToolsStackNavigator';
+export * from './OtherStackNavigator';

src/screens/AuthLoading.tsx

@@ -1,24 +1,19 @@
-import { Spinner, Typography } from '@app/components';
 import { useAuthContext } from '@app/context';
 import { useAppNavigation } from '@app/hooks';
 import { useEffect } from 'react';
-import { View } from 'react-native';
 
 export function AuthLoadingScreen() {
   const { populateAuthState, authState } = useAuthContext();
   const { navigate } = useAppNavigation();
   useEffect(() => {
-    // todo - expose if we're anon or logged in an redirect to the following screen if we have an account
     populateAuthState().then(() => {
       if (authState?.isLoggedIn) {
-        console.log('isAuth true');
         navigate('Tabs', {
           screen: 'Following',
         });
       }
 
       if (authState?.isAnonAuth) {
-        console.log('isAnonAuth true');
         navigate('Tabs', {
           screen: 'Top',
         });
@@ -27,10 +22,5 @@ export function AuthLoadingScreen() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  return (
-    <View style={{ flex: 1, padding: 16, justifyContent: 'center' }}>
-      <Typography>Auth loading...</Typography>
-      <Spinner />
-    </View>
-  );
+  return null;
 }

src/screens/Other/AboutScreen.tsx

@@ -0,0 +1,17 @@
+import { Screen, Typography } from '@app/components';
+import { useAppNavigation, useHeader } from '@app/hooks';
+
+export function AboutScreen() {
+  const { goBack } = useAppNavigation();
+
+  useHeader({
+    title: 'About',
+    leftIcon: 'arrow-left',
+    onLeftPress: () => goBack(),
+  });
+  return (
+    <Screen>
+      <Typography>About</Typography>
+    </Screen>
+  );
+}

src/screens/ChangelogScreen.tsx src/screens/Other/ChangelogScreen.tsxsrc/screens/ChangelogScreen.tsx renamed to src/screens/Other/ChangelogScreen.tsx

@@ -0,0 +1,17 @@
+import { Screen, Typography } from '@app/components';
+import { useAppNavigation, useHeader } from '@app/hooks';
+
+export function FaqScreen() {
+  const { goBack } = useAppNavigation();
+
+  useHeader({
+    title: 'Faq',
+    leftIcon: 'arrow-left',
+    onLeftPress: () => goBack(),
+  });
+  return (
+    <Screen>
+      <Typography>FAQ</Typography>
+    </Screen>
+  );
+}

src/screens/Other/FaqScreen.tsx

@@ -0,0 +1,3 @@
+export * from './AboutScreen';
+export * from './ChangelogScreen';
+export * from './FaqScreen';

src/screens/Other/index.ts

@@ -150,6 +150,29 @@ export function SettingsScreen() {
         },
       ],
     },
+    {
+      title: 'Other',
+      data: [
+        {
+          title: 'About the app',
+          iconName: '',
+          description: 'Learn more about the app',
+          onPress: () => navigate('Other', { screen: 'About' }),
+        },
+        {
+          title: 'Changelog',
+          description: 'release notes',
+          iconName: '',
+          onPress: () => navigate('Other', { screen: 'Changelog' }),
+        },
+        {
+          title: 'FAQ',
+          description: 'Questions and answers',
+          iconName: '',
+          onPress: () => navigate('Other', { screen: 'Faq' }),
+        },
+      ],
+    },
   ];
 
   const bottomSheetSections: NavigationSectionListData = [