some cleanup and fix set self hosted login navigator issue

tloncorp · Nov 20, 2024 · 9f8e29b · 9f8e29b
1 parent 7dee8aa
commit 9f8e29b
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 48 deletions.
diff --git a/apps/tlon-mobile/src/App.main.tsx b/apps/tlon-mobile/src/App.main.tsx
@@ -65,15 +65,20 @@ const App = () => {
     };
   }, []);
 
+  const showAuthenticatedApp = useMemo(() => {
+    return (
+      isAuthenticated && !(currentlyOnboarding || finishingSelfHostedLogin)
+    );
+  }, [isAuthenticated, currentlyOnboarding, finishingSelfHostedLogin]);
+
   return (
     <View height={'100%'} width={'100%'} backgroundColor="$background">
       {connected ? (
         isLoading ? (
           <View flex={1} alignItems="center" justifyContent="center">
             <LoadingSpinner />
           </View>
-        ) : isAuthenticated &&
-          !(currentlyOnboarding || finishingSelfHostedLogin) ? (
+        ) : showAuthenticatedApp ? (
           <AuthenticatedApp />
         ) : (
           <OnboardingStack />

diff --git a/apps/tlon-mobile/src/components/AuthenticatedApp.tsx b/apps/tlon-mobile/src/components/AuthenticatedApp.tsx
@@ -2,12 +2,12 @@ import { useShip } from '@tloncorp/app/contexts/ship';
 import { useAppStatusChange } from '@tloncorp/app/hooks/useAppStatusChange';
 import { useConfigureUrbitClient } from '@tloncorp/app/hooks/useConfigureUrbitClient';
 import { useCurrentUserId } from '@tloncorp/app/hooks/useCurrentUser';
+import { useNavigationLogging } from '@tloncorp/app/hooks/useNavigationLogger';
+import { useNetworkLogger } from '@tloncorp/app/hooks/useNetworkLogger';
 import {
   useInitializeUserTelemetry,
   useTrackAppActive,
-} from '@tloncorp/app/hooks/useInitializeTelemetry';
-import { useNavigationLogging } from '@tloncorp/app/hooks/useNavigationLogger';
-import { useNetworkLogger } from '@tloncorp/app/hooks/useNetworkLogger';
+} from '@tloncorp/app/hooks/useTelemetryHelpers';
 import { RootStack } from '@tloncorp/app/navigation/RootStack';
 import { AppDataProvider } from '@tloncorp/app/provider/AppDataProvider';
 import { sync } from '@tloncorp/shared';

diff --git a/apps/tlon-mobile/src/screens/Onboarding/ShipLoginScreen.tsx b/apps/tlon-mobile/src/screens/Onboarding/ShipLoginScreen.tsx
@@ -64,6 +64,7 @@ export const ShipLoginScreen = ({ navigation }: Props) => {
   const [codevisible, setCodeVisible] = useState(false);
 
   const isValidUrl = useCallback((url: string) => {
+    return true;
     const urlPattern =
       /^(https?:\/\/)?(localhost|(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})|[\w.-]+\.([a-z]{2,}))(:\d+)?$/i;
     const hostedPattern = /tlon\.network/i;
@@ -96,6 +97,13 @@ export const ShipLoginScreen = ({ navigation }: Props) => {
       if (authCookie) {
         await setFinishingSelfHostedLogin(true);
         const shipId = getShipFromCookie(authCookie);
+
+        navigation.navigate('SetTelemetry');
+
+        // Delay to allow the transition to telemetry screen via Onboarding navigator to complete
+        // before setting auth and potentially triggering a re-render of app.main (which might change nav prop to Root navigator)
+        await new Promise((resolve) => setTimeout(resolve, 100));
+
         setShip({
           ship: shipId,
           shipUrl,
@@ -107,8 +115,6 @@ export const ShipLoginScreen = ({ navigation }: Props) => {
         if (!hasSignedUp) {
           logger.trackEvent(AnalyticsEvent.LoggedInBeforeSignup);
         }
-
-        navigation.navigate('SetTelemetry');
       } else {
         setRemoteError(
           "Sorry, we couldn't log in to your ship. It may be busy or offline."

diff --git a/packages/app/features/settings/AppInfoScreen.tsx b/packages/app/features/settings/AppInfoScreen.tsx
@@ -23,7 +23,7 @@ import { getEmailClients, openComposer } from 'react-native-email-link';
 import { ScrollView } from 'react-native-gesture-handler';
 
 import { NOTIFY_PROVIDER, NOTIFY_SERVICE } from '../../constants';
-import { useTelemetryDisabler } from '../../hooks/useInitializeTelemetry';
+import { useTelemetryDisabler } from '../../hooks/useTelemetryHelpers';
 import { setDebug } from '../../lib/debug';
 import { getEasUpdateDisplay } from '../../lib/platformHelpers';
 import { RootStackParamList } from '../../navigation/types';
@@ -185,25 +185,23 @@ export function AppInfoScreen(props: Props) {
             </YStack>
           )}
 
-          {telemetry.canDisable && (
-            <YStack>
-              <XStack
-                justifyContent="space-between"
-                alignItems="center"
-                padding="$l"
-              >
-                <SizableText flexShrink={1}>Share Usage Statistics</SizableText>
-                <Switch
-                  style={{ flexShrink: 0 }}
-                  value={!telemetryDisabled}
-                  onValueChange={toggleSetTelemetry}
-                ></Switch>
-              </XStack>
-              <SizableText size="$s" marginLeft="$l">
-                By sharing, you help us improve the app for everyone.
-              </SizableText>
-            </YStack>
-          )}
+          <YStack>
+            <XStack
+              justifyContent="space-between"
+              alignItems="center"
+              padding="$l"
+            >
+              <SizableText flexShrink={1}>Share Usage Statistics</SizableText>
+              <Switch
+                style={{ flexShrink: 0 }}
+                value={!telemetryDisabled}
+                onValueChange={toggleSetTelemetry}
+              ></Switch>
+            </XStack>
+            <SizableText size="$s" marginLeft="$l">
+              By sharing, you help us improve the app for everyone.
+            </SizableText>
+          </YStack>
         </YStack>
       </ScrollView>
     </View>

diff --git a/packages/app/hooks/useBootSequence.ts b/packages/app/hooks/useBootSequence.ts
@@ -110,7 +110,7 @@ export function useBootSequence({
         authCookie: auth.authCookie,
         authType: 'hosted',
       });
-      telemetry?.identify(preSig(auth.nodeId));
+      telemetry?.identify(preSig(auth.nodeId), { isHostedUser: true });
 
       await wait(2000);
 

diff --git a/packages/app/hooks/useHandleLogout.native.ts b/packages/app/hooks/useHandleLogout.native.ts
@@ -1,21 +1,21 @@
 import { createDevLogger } from '@tloncorp/shared';
 import * as api from '@tloncorp/shared/api';
-import { didInitializeTelemetry } from '@tloncorp/shared/db';
+import { finishingSelfHostedLogin } from '@tloncorp/shared/db';
 import * as store from '@tloncorp/shared/store';
 import { useCallback } from 'react';
 
 import { useBranch } from '../contexts/branch';
 import { clearShipInfo, useShip } from '../contexts/ship';
 import { removeHostingToken, removeHostingUserId } from '../utils/hosting';
 import { clearSplashDismissed } from '../utils/splash';
-import { useTelemetry } from './useTelemetry';
+import { useClearTelemetryConfig } from './useTelemetryHelpers';
 
 const logger = createDevLogger('logout', true);
 
 export function useHandleLogout({ resetDb }: { resetDb: () => void }) {
   const { clearShip } = useShip();
   const { clearLure, clearDeepLink } = useBranch();
-  const telemetry = useTelemetry();
+  const resetTelemetry = useClearTelemetryConfig();
 
   const handleLogout = useCallback(async () => {
     api.queryClient.clear();
@@ -27,15 +27,15 @@ export function useHandleLogout({ resetDb }: { resetDb: () => void }) {
     clearLure();
     clearDeepLink();
     clearSplashDismissed();
-    telemetry?.reset();
-    didInitializeTelemetry.resetValue();
+    resetTelemetry();
+    finishingSelfHostedLogin.resetValue();
     if (!resetDb) {
       logger.trackError('could not reset db on logout');
       return;
     }
     // delay DB reset to next tick to avoid race conditions
     setTimeout(() => resetDb());
-  }, [clearDeepLink, clearLure, clearShip, resetDb, telemetry]);
+  }, [clearDeepLink, clearLure, clearShip, resetDb, resetTelemetry]);
 
   return handleLogout;
 }
diff --git a/packages/app/hooks/useTelemetry.native.ts b/packages/app/hooks/useTelemetry.native.ts
@@ -7,7 +7,6 @@ export function useTelemetry(): TelemetryClient {
   const posthog = useNativePosthog();
 
   const optedOut = useMemo(() => {
-    console.log(`posthog opted out recalc`, posthog?.optedOut);
     return posthog?.optedOut ?? false;
   }, [posthog]);
 
@@ -20,8 +19,8 @@ export function useTelemetry(): TelemetryClient {
   }, [posthog]);
 
   const identify = useCallback(
-    (userId: string) => {
-      return posthog?.identify(userId);
+    (userId: string, properties: Record<string, any>) => {
+      return posthog?.identify(userId, properties);
     },
     [posthog]
   );

diff --git a/packages/app/hooks/useTelemetry.ts b/packages/app/hooks/useTelemetry.ts
@@ -19,8 +19,8 @@ export function useTelemetry(): TelemetryClient {
   }, [posthog]);
 
   const identify = useCallback(
-    (userId: string) => {
-      return posthog?.identify(userId);
+    (userId: string, properties?: Record<string, any>) => {
+      return posthog?.identify(userId, properties);
     },
     [posthog]
   );

diff --git a/packages/app/hooks/useInitializeTelemetry.ts → packages/app/hooks/useTelemetryHelpers.ts b/packages/app/hooks/useInitializeTelemetry.ts → packages/app/hooks/useTelemetryHelpers.ts
@@ -9,6 +9,19 @@ import { useShip } from '../contexts/ship';
 import { useCurrentUserId } from './useCurrentUser.native';
 import { useTelemetry } from './useTelemetry';
 
+export function useClearTelemetryConfig() {
+  const telemetry = useTelemetry();
+
+  const clearTelemetryConfig = useCallback(async () => {
+    await telemetry.flush();
+    telemetry?.reset();
+    didInitializeTelemetry.resetValue();
+    lastAnonymousAppOpenAt.resetValue();
+  }, [telemetry]);
+
+  return clearTelemetryConfig;
+}
+
 export function useIsHosted() {
   const ship = useShip();
   // We use different heuristics for determining whether a user is hosted across the app.
@@ -42,7 +55,7 @@ export function useSetTelemetryDisabled(methodId?: string) {
     async (shouldDisable: boolean) => {
       if (shouldDisable) {
         telemetry?.optIn();
-        telemetry?.capture('Telemetry opt out', {
+        telemetry?.capture('Telemetry disabled', {
           isHostedUser,
           detectionMethod: methodId ?? 'useSetTelemetryDisabled',
         });
@@ -52,8 +65,9 @@ export function useSetTelemetryDisabled(methodId?: string) {
       } else {
         telemetry?.optIn();
         if (isHosted) {
-          telemetry?.identify(currentUserId);
+          telemetry?.identify(currentUserId, { ishostedUser: true });
         }
+        telemetry?.capture('Telemetry enabled', { isHostedUser });
       }
     },
     [currentUserId, isHosted, isHostedUser, methodId, telemetry]
@@ -72,7 +86,7 @@ export function useInitializeUserTelemetry() {
   useEffect(() => {
     async function initializeTelemetry() {
       if (isHosted) {
-        telemetry?.identify(currentUserId);
+        telemetry?.identify(currentUserId, { isHostedUser: true });
       }
 
       if (telemetry?.optedOut) {

diff --git a/packages/app/types/telemetry.ts b/packages/app/types/telemetry.ts
@@ -2,7 +2,7 @@ export interface TelemetryClient {
   optedOut: boolean;
   optIn: () => void;
   optOut: () => void;
-  identify: (userId: string) => void;
+  identify: (userId: string, properties?: Record<string, any>) => void;
   capture: (eventName: string, properties?: Record<string, any>) => void;
   flush: () => Promise<void>;
   reset: () => void;

diff --git a/packages/shared/src/db/keyValue.ts b/packages/shared/src/db/keyValue.ts
@@ -301,12 +301,12 @@ export const didInitializeTelemetry = createStorageItem<boolean>({
   defaultValue: false,
 });
 
-export const finishingSelfHostedLogin = createStorageItem<boolean>({
-  key: 'finishingSelfHostedLogin',
-  defaultValue: false,
-});
-
 export const lastAnonymousAppOpenAt = createStorageItem<number | null>({
   key: 'lastAnonymousAppOpenAt',
   defaultValue: null,
 });
+
+export const finishingSelfHostedLogin = createStorageItem<boolean>({
+  key: 'finishingSelfHostedLogin',
+  defaultValue: false,
+});