Merge pull request #462 from lifeomic/raise-logged-out-ui

feat!: move LoginScreen outside of LoggedInProviders
lifeomic · Nov 16, 2023 · 36b7362 · 36b7362
2 parents 0c9e30a + 62380c0
commit 36b7362
Show file tree

Hide file tree

Showing 15 changed files with 74 additions and 104 deletions.
diff --git a/README.md b/README.md
@@ -21,12 +21,12 @@ See `example/AppDemo.tsx` for simple usage, which could be as simple as:
 ```typescript
 import React, { FC } from 'react';
 import { authConfig } from './authConfig';
-import { RootProviders, RootStack } from '@lifeomic/react-native-sdk';
+import { RootProviders, LoggedInStack } from '@lifeomic/react-native-sdk';
 
 export default function App() {
   return (
     <RootProviders authConfig={authConfig}>
-      <RootStack />
+      <LoggedInStack />
     </RootProviders>
   );
 }
@@ -42,7 +42,7 @@ export default function App() {
 import React, { FC } from 'react';
 import { authConfig } from './authConfig';
 import { MyCustomScreen } from './src/MyCustomScreen';
-import { RootProviders, RootStack } from '@lifeomic/react-native-sdk';
+import { RootProviders, LoggedInStack } from '@lifeomic/react-native-sdk';
 
 export default function App() {
   return (
@@ -54,7 +54,7 @@ export default function App() {
       }}
     >
       <RootProviders authConfig={authConfig}>
-        <RootStack />
+        <LoggedInStack />
       </RootProviders>
     </DeveloperConfigProvider>
   );
@@ -66,7 +66,7 @@ export default function App() {
 ```typescript
 import React, { FC } from 'react';
 import { authConfig } from './authConfig';
-import { RootProviders, RootStack } from '@lifeomic/react-native-sdk';
+import { RootProviders, LoggedInStack } from '@lifeomic/react-native-sdk';
 
 export default function App() {
   return (
@@ -78,7 +78,7 @@ export default function App() {
       }}
     >
       <RootProviders authConfig={authConfig}>
-        <RootStack />
+        <LoggedInStack />
       </RootProviders>
     </DeveloperConfigProvider>
   );
@@ -135,7 +135,7 @@ export const UsersScreen = () => {
 ```typescript
 import React, { FC } from 'react';
 import { authConfig } from './authConfig';
-import { RootProviders, RootStack } from '@lifeomic/react-native-sdk';
+import { RootProviders, LoggedInStack } from '@lifeomic/react-native-sdk';
 import { UserDetailsScreen, UsersScreen } from './screens';
 
 export default function App() {
@@ -157,7 +157,7 @@ export default function App() {
       }}
     >
       <RootProviders authConfig={authConfig}>
-        <RootStack />
+        <LoggedInStack />
       </RootProviders>
     </DeveloperConfigProvider>
   );
@@ -186,7 +186,7 @@ function App() {
       }}
     >
       <RootProviders authConfig={authConfig}>
-        <RootStack />
+        <LoggedInStack />
       </RootProviders>
     </DeveloperConfigProvider>
   );
@@ -231,7 +231,7 @@ const CustomLoginScreen = () => {
 ```typescript
 import React, { FC } from 'react';
 import { authConfig } from './authConfig';
-import { RootProviders, RootStack } from '@lifeomic/react-native-sdk';
+import { RootProviders, LoggedInStack } from '@lifeomic/react-native-sdk';
 
 export default function App() {
   return (
@@ -241,7 +241,7 @@ export default function App() {
       }}
     >
       <RootProviders authConfig={authConfig}>
-        <RootStack />
+        <LoggedInStack />
       </RootProviders>
     </DeveloperConfigProvider>
   );
@@ -263,7 +263,7 @@ import React, { FC } from 'react';
 import { authConfig } from './authConfig';
 import {
   RootProviders,
-  RootStack,
+  LoggedInStack,
   OnAppSessionStartParams,
 } from '@lifeomic/react-native-sdk';
 
@@ -285,7 +285,7 @@ export default function App() {
       }}
     >
       <RootProviders authConfig={authConfig}>
-        <RootStack />
+        <LoggedInStack />
       </RootProviders>
     </DeveloperConfigProvider>
   );

diff --git a/example/AppDemo.tsx b/example/AppDemo.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { authConfig, baseURL } from './storybook/helpers/oauthConfig';
-import { DeveloperConfigProvider, RootProviders, RootStack } from '../src';
+import { DeveloperConfigProvider, RootProviders, LoggedInStack } from '../src';
 import { FhirExampleScreen } from './src/screens/FhirExampleScreen';
 
 if (__DEV__) {
@@ -22,7 +22,7 @@ function App() {
       }}
     >
       <RootProviders authConfig={authConfig}>
-        <RootStack />
+        <LoggedInStack />
       </RootProviders>
     </DeveloperConfigProvider>
   );

diff --git a/example/storybook/stories/CustomScreenInjection/CustomScreenInjection.stories.tsx b/example/storybook/stories/CustomScreenInjection/CustomScreenInjection.stories.tsx
@@ -4,7 +4,7 @@ import { authConfig } from '../../helpers/oauthConfig';
 import {
   DeveloperConfigProvider,
   RootProviders,
-  RootStack,
+  LoggedInStack,
   getDefaultTabs,
 } from '../../../../src';
 import { withKnobs } from '@storybook/addon-knobs';
@@ -50,7 +50,7 @@ storiesOf('Custom Screen Injection', module)
         }}
       >
         <RootProviders authConfig={authConfig}>
-          <RootStack />
+          <LoggedInStack />
         </RootProviders>
       </DeveloperConfigProvider>
     );

diff --git a/example/storybook/stories/ExampleApp/ExampleApp.stories.tsx b/example/storybook/stories/ExampleApp/ExampleApp.stories.tsx
@@ -5,7 +5,7 @@ import { authConfig, baseURL } from '../../helpers/oauthConfig';
 import {
   DeveloperConfigProvider,
   RootProviders,
-  RootStack,
+  LoggedInStack,
   LogoHeader,
   BrandConfigProvider,
   getDefaultTabs,
@@ -37,7 +37,7 @@ storiesOf('Example App', module)
         }}
       >
         <RootProviders authConfig={authConfig}>
-          <RootStack />
+          <LoggedInStack />
         </RootProviders>
       </DeveloperConfigProvider>
     );
@@ -69,7 +69,7 @@ storiesOf('Example App', module)
         }}
       >
         <RootProviders authConfig={authConfig}>
-          <RootStack />
+          <LoggedInStack />
         </RootProviders>
       </DeveloperConfigProvider>
     );
@@ -147,7 +147,7 @@ storiesOf('Example App', module)
             }}
           >
             <RootProviders authConfig={authConfig}>
-              <RootStack />
+              <LoggedInStack />
             </RootProviders>
           </DeveloperConfigProvider>
         )}
@@ -248,7 +248,7 @@ storiesOf('Example App', module)
         <RootProviders authConfig={authConfig}>
           <BrandConfigProvider {...brand}>
             <LogoHeader visible={true} imageSource={logo} />
-            <RootStack />
+            <LoggedInStack />
           </BrandConfigProvider>
         </RootProviders>
       </DeveloperConfigProvider>
@@ -345,7 +345,7 @@ storiesOf('Example App', module)
             });
           }}
         >
-          <RootStack />
+          <LoggedInStack />
         </DataOverrideProvider>
       </RootProviders>
     </DeveloperConfigProvider>

diff --git a/src/common/DeveloperConfig.ts b/src/common/DeveloperConfig.ts
@@ -25,7 +25,7 @@ import { Project } from '../hooks/useSubjectProjects';
  * DeveloperConfig provides a single interface to configure the app at build-time.
  * Unlike useAppConfig, which is populated at runtime via API, properties in this
  * type are provided at dev/build time.  Another way to think about it is this is a
- * high-level development interface for devs using RootProviders and RootStack.
+ * high-level development interface for devs using RootProviders and LoggedInStack.
  *
  * NOTE: All props are optional, and DeveloperConfigProvider is not required in
  * your app.

diff --git a/src/common/LoggedInProviders.tsx b/src/common/LoggedInProviders.tsx
@@ -3,21 +3,52 @@ import React from 'react';
 import { ActiveAccountContextProvider } from '../hooks/useActiveAccount';
 import { NotificationsManagerProvider } from '../hooks/useNotificationManager';
 import { ActiveProjectContextProvider } from '../hooks/useActiveProject';
-import Toast from 'react-native-toast-message';
 import { TrackTileProvider } from '../components/TrackTile/TrackTileProvider';
 import { WearableLifecycleProvider } from '../components/Wearables/WearableLifecycleProvider';
 import { CreateEditPostModal } from '../components/Circles/CreateEditPostModal';
 import { PushNotificationsProvider } from '../hooks/usePushNotifications';
 import { CircleTileContextProvider } from '../hooks/Circles/useActiveCircleTile';
 import { OnboardingCourseContextProvider } from '../hooks/useOnboardingCourse';
 import { useDeveloperConfig } from '../hooks/useDeveloperConfig';
+import { useAuth } from '../hooks';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { NotLoggedInRootParamList } from '../navigators';
+import { LoginScreen } from '../screens';
+import { ActivityIndicatorView } from '../components';
+import { t } from 'i18next';
 
-export const LoggedInProviders = ({
-  children,
-}: {
+export type LoggedInProvidersProps = {
   children?: React.ReactNode;
-}) => {
+};
+
+const LoggedOutStack = createNativeStackNavigator<NotLoggedInRootParamList>();
+
+export const LoggedInProviders = ({ children }: LoggedInProvidersProps) => {
+  const auth = useAuth();
   const { pushNotificationsConfig } = useDeveloperConfig();
+
+  if (!auth.isLoggedIn && auth.loading) {
+    return (
+      <ActivityIndicatorView
+        message={t('root-stack-waiting-for-auth', 'Waiting for authorization')}
+      />
+    );
+  }
+
+  if (!auth.isLoggedIn) {
+    return (
+      <LoggedOutStack.Navigator>
+        <LoggedOutStack.Group>
+          <LoggedOutStack.Screen
+            name="screens/LoginScreen"
+            component={LoginScreen}
+            options={{ headerShown: false }}
+          />
+        </LoggedOutStack.Group>
+      </LoggedOutStack.Navigator>
+    );
+  }
+
   return (
     <ActiveAccountContextProvider>
       <ActiveProjectContextProvider>
@@ -31,7 +62,6 @@ export const LoggedInProviders = ({
                   </NotificationsManagerProvider>
                 </PushNotificationsProvider>
                 <CreateEditPostModal />
-                <Toast />
               </OnboardingCourseContextProvider>
             </CircleTileContextProvider>
           </WearableLifecycleProvider>

diff --git a/src/common/RootProviders.tsx b/src/common/RootProviders.tsx
@@ -13,16 +13,16 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { ThemedNavigationContainer } from './ThemedNavigationContainer';
 import { LoggedInProviders } from './LoggedInProviders';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import Toast from 'react-native-toast-message';
 
 const queryClient = new QueryClient();
 
-export function RootProviders({
-  authConfig,
-  children,
-}: {
+export type RootProvidersProps = {
   authConfig: AuthConfiguration;
   children?: React.ReactNode;
-}) {
+};
+
+export function RootProviders({ authConfig, children }: RootProvidersProps) {
   const { apiBaseURL, theme } = useDeveloperConfig();
 
   return (
@@ -37,6 +37,7 @@ export function RootProviders({
                     <ActionSheetProvider>
                       <SafeAreaProvider>
                         <ThemedNavigationContainer>
+                          <Toast />
                           <LoggedInProviders>{children}</LoggedInProviders>
                         </ThemedNavigationContainer>
                       </SafeAreaProvider>

diff --git a/src/hooks/useActiveAccount.tsx b/src/hooks/useActiveAccount.tsx
@@ -3,7 +3,6 @@ import { Account } from '../types/rest-types';
 import { inviteNotifier } from '../components/Invitations/InviteNotifier';
 import { ProjectInvite } from '../types';
 import { useRestCache, useRestQuery } from './rest-api';
-import { useAuth } from './useAuth';
 import { useStoredValue } from './useStoredValue';
 
 export type ActiveAccountProps = {
@@ -38,13 +37,11 @@ export const ActiveAccountContextProvider = ({
    */
   accountIdToSelect?: string;
 }) => {
-  const { isLoggedIn } = useAuth();
   const accountsResult = useRestQuery(
     'GET /v1/accounts',
     {},
     {
       select: (data) => data.accounts.filter((a) => a.products.includes('LR')),
-      enabled: isLoggedIn,
     },
   );
 

diff --git a/src/hooks/useNotifications.tsx b/src/hooks/useNotifications.tsx
@@ -4,7 +4,6 @@ import { gql } from 'graphql-request';
 import { useGraphQLClient } from './useGraphQLClient';
 import { useActiveAccount } from './useActiveAccount';
 import { useUser } from './useUser';
-import { useAuth } from './useAuth';
 
 export type NotificationBase = {
   id: string;
@@ -141,7 +140,6 @@ export function useNotifications() {
   const { graphQLClient } = useGraphQLClient();
   const { accountHeaders } = useActiveAccount();
   const { data } = useUser();
-  const { isLoggedIn } = useAuth();
 
   const queryForNotifications = useCallback(() => {
     return graphQLClient.request<NotificationQueryResponse>(
@@ -154,7 +152,7 @@ export function useNotifications() {
   }, [accountHeaders, data?.id, graphQLClient]);
 
   return useQuery(['notifications'], queryForNotifications, {
-    enabled: !!accountHeaders?.['LifeOmic-Account'] && !!data?.id && isLoggedIn,
+    enabled: !!accountHeaders?.['LifeOmic-Account'] && !!data?.id,
     select: selectNotifications,
   });
 }
diff --git a/src/hooks/useUser.ts b/src/hooks/useUser.ts
@@ -1,13 +1,7 @@
-import { useAuth } from './useAuth';
 import { useRestCache, useRestMutation, useRestQuery } from './rest-api';
 
 export function useUser() {
-  const { authResult } = useAuth();
-  return useRestQuery(
-    'GET /v1/user',
-    {},
-    { enabled: !!authResult?.accessToken },
-  );
+  return useRestQuery('GET /v1/user', {});
 }
 
 export const useUpdateUser = () => {