From b65a2066b2fe577da2f905115969e44235a9b8c6 Mon Sep 17 00:00:00 2001
From: ~latter-bolden <brian@tlon.io>
Date: Fri, 31 May 2024 00:40:55 -0400
Subject: [PATCH 1/3] fix crashing errors in android add/create sheets, fix
 inverted placeholder in empty chat

---
 .../src/components/AddGroupSheet.tsx          | 86 +++++++++++--------
 .../ui/src/components/AddChats/AddDmSheet.tsx | 55 ++++++------
 packages/ui/src/components/Channel/index.tsx  | 13 ++-
 3 files changed, 93 insertions(+), 61 deletions(-)

diff --git a/apps/tlon-mobile/src/components/AddGroupSheet.tsx b/apps/tlon-mobile/src/components/AddGroupSheet.tsx
index 7aba32dbaf..a589e0788f 100644
--- a/apps/tlon-mobile/src/components/AddGroupSheet.tsx
+++ b/apps/tlon-mobile/src/components/AddGroupSheet.tsx
@@ -7,10 +7,12 @@ import {
   NativeStackScreenProps,
   createNativeStackNavigator,
 } from '@react-navigation/native-stack';
+import { QueryClientProvider, queryClient } from '@tloncorp/shared/dist/api';
 import * as db from '@tloncorp/shared/dist/db';
 import {
   Button,
   ContactBook,
+  ContactsProvider,
   CreateGroupWidget,
   GroupPreviewPane,
   Icon,
@@ -20,6 +22,7 @@ import {
   XStack,
   YStack,
   triggerHaptic,
+  useContacts,
   useTheme,
 } from '@tloncorp/ui/src';
 import {
@@ -44,6 +47,7 @@ interface AddGroupActions {
   }) => void;
   onScrollChange: (scrolling: boolean) => void;
   screenKey?: number;
+  contacts?: db.Contact[] | null;
 }
 const ActionContext = createContext<AddGroupActions>({} as AddGroupActions);
 
@@ -79,6 +83,7 @@ export default function AddGroupSheet({
   const theme = useTheme();
   const navigationRef = useRef<NavigationContainerRef<StackParamList>>(null);
   const [screenKey, setScreenKey] = useState<number>(0);
+  const contacts = useContacts();
 
   const dismiss = useCallback(() => {
     if (navigationRef.current && navigationRef.current.canGoBack()) {
@@ -107,41 +112,46 @@ export default function AddGroupSheet({
     >
       <Sheet.Overlay />
       <Sheet.LazyFrame>
-        <Sheet.Handle marginBottom="$l" />
-        <KeyboardAvoidingView style={{ flex: 1 }}>
-          <NavigationContainer independent={true} ref={navigationRef}>
-            <ActionContext.Provider
-              value={{
-                dismiss,
-                onCreatedGroup,
-                onScrollChange: setScreenScrolling,
-                screenKey,
-              }}
-            >
-              <Stack.Navigator
-                initialRouteName="Root"
-                screenOptions={{
-                  headerShown: false,
-                  contentStyle: { backgroundColor: theme.background.val },
-                }}
-              >
-                <Stack.Screen name="Root" component={RootScreen} />
-                <Stack.Screen
-                  name="CreateGroup"
-                  component={CreateGroupScreen}
-                />
-                <Stack.Screen
-                  name="ViewContactGroups"
-                  component={ViewContactGroupsScreen}
-                />
-                <Stack.Screen
-                  name="ViewGroupPreview"
-                  component={ViewGroupPreviewScreen}
-                />
-              </Stack.Navigator>
-            </ActionContext.Provider>
-          </NavigationContainer>
-        </KeyboardAvoidingView>
+        <QueryClientProvider client={queryClient}>
+          <ContactsProvider contacts={contacts ?? null}>
+            <Sheet.Handle marginBottom="$l" />
+            <KeyboardAvoidingView style={{ flex: 1 }}>
+              <NavigationContainer independent={true} ref={navigationRef}>
+                <ActionContext.Provider
+                  value={{
+                    dismiss,
+                    onCreatedGroup,
+                    onScrollChange: setScreenScrolling,
+                    screenKey,
+                    contacts,
+                  }}
+                >
+                  <Stack.Navigator
+                    initialRouteName="Root"
+                    screenOptions={{
+                      headerShown: false,
+                      contentStyle: { backgroundColor: theme.background.val },
+                    }}
+                  >
+                    <Stack.Screen name="Root" component={RootScreen} />
+                    <Stack.Screen
+                      name="CreateGroup"
+                      component={CreateGroupScreen}
+                    />
+                    <Stack.Screen
+                      name="ViewContactGroups"
+                      component={ViewContactGroupsScreen}
+                    />
+                    <Stack.Screen
+                      name="ViewGroupPreview"
+                      component={ViewGroupPreviewScreen}
+                    />
+                  </Stack.Navigator>
+                </ActionContext.Provider>
+              </NavigationContainer>
+            </KeyboardAvoidingView>
+          </ContactsProvider>
+        </QueryClientProvider>
       </Sheet.LazyFrame>
     </Sheet>
   );
@@ -167,7 +177,7 @@ function ScreenWrapper({
 }
 
 function RootScreen(props: NativeStackScreenProps<StackParamList, 'Root'>) {
-  const { onScrollChange, screenKey } = useContext(ActionContext);
+  const { onScrollChange, screenKey, contacts } = useContext(ActionContext);
   const insets = useSafeAreaInsets();
   const onSelect = useCallback(
     (contactId: string) => {
@@ -180,6 +190,9 @@ function RootScreen(props: NativeStackScreenProps<StackParamList, 'Root'>) {
 
   return (
     <ScreenWrapper withoutSafe>
+      {/* Unclear why we have to render another contacts provider here, but the screen context shows up empty */}
+      {/* on Android? */}
+      {/* <ContactsProvider contacts={contacts ?? null}> */}
       <YStack flex={1} gap="$xl">
         <ContactBook
           searchable
@@ -194,6 +207,7 @@ function RootScreen(props: NativeStackScreenProps<StackParamList, 'Root'>) {
           </Button>
         </View>
       </YStack>
+      {/* </ContactsProvider> */}
     </ScreenWrapper>
   );
 }
diff --git a/packages/ui/src/components/AddChats/AddDmSheet.tsx b/packages/ui/src/components/AddChats/AddDmSheet.tsx
index b20821959e..fc9f4800e3 100644
--- a/packages/ui/src/components/AddChats/AddDmSheet.tsx
+++ b/packages/ui/src/components/AddChats/AddDmSheet.tsx
@@ -1,7 +1,9 @@
+import { QueryClientProvider, queryClient } from '@tloncorp/shared/dist/api';
 import * as store from '@tloncorp/shared/dist/store';
 import { useCallback, useEffect, useState } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { ContactsProvider, useContacts } from '../../contexts';
 import { XStack, YStack, ZStack } from '../../core';
 import { triggerHaptic } from '../../utils';
 import { Button } from '../Button';
@@ -18,6 +20,7 @@ export function StartDmSheet({
   onOpenChange: (open: boolean) => void;
   goToDm: (participants: string[]) => void;
 }) {
+  const contacts = useContacts();
   const insets = useSafeAreaInsets();
   const [contentScrolling, setContentScrolling] = useState(false);
   const [dmParticipants, setDmParticipants] = useState<string[]>([]);
@@ -60,31 +63,35 @@ export function StartDmSheet({
     >
       <Sheet.Overlay />
       <Sheet.LazyFrame paddingTop="$s" paddingHorizontal="$2xl">
-        <Sheet.Handle marginBottom="$l" />
-        <ZStack flex={1}>
-          <YStack flex={1} gap="$2xl">
-            <ContactBook
-              key={contactBookKey}
-              multiSelect
-              onSelectedChange={setDmParticipants}
-              searchable
-              searchPlaceholder="Start a DM with..."
-              onScrollChange={setContentScrolling}
-            />
-            {dmParticipants.length > 0 && (
-              <XStack
-                position="absolute"
-                bottom={insets.bottom + 12}
-                justifyContent="center"
-              >
-                <StartDMButton
-                  participants={dmParticipants}
-                  onPress={handleGoToDm}
+        <QueryClientProvider client={queryClient}>
+          <ContactsProvider contacts={contacts ?? null}>
+            <Sheet.Handle marginBottom="$l" />
+            <ZStack flex={1}>
+              <YStack flex={1} gap="$2xl">
+                <ContactBook
+                  key={contactBookKey}
+                  multiSelect
+                  onSelectedChange={setDmParticipants}
+                  searchable
+                  searchPlaceholder="Start a DM with..."
+                  onScrollChange={setContentScrolling}
                 />
-              </XStack>
-            )}
-          </YStack>
-        </ZStack>
+                {dmParticipants.length > 0 && (
+                  <XStack
+                    position="absolute"
+                    bottom={insets.bottom + 12}
+                    justifyContent="center"
+                  >
+                    <StartDMButton
+                      participants={dmParticipants}
+                      onPress={handleGoToDm}
+                    />
+                  </XStack>
+                )}
+              </YStack>
+            </ZStack>
+          </ContactsProvider>
+        </QueryClientProvider>
       </Sheet.LazyFrame>
     </Sheet>
   );
diff --git a/packages/ui/src/components/Channel/index.tsx b/packages/ui/src/components/Channel/index.tsx
index b5d6852d69..f91f5ab7f9 100644
--- a/packages/ui/src/components/Channel/index.tsx
+++ b/packages/ui/src/components/Channel/index.tsx
@@ -125,7 +125,18 @@ export function Channel({
       ? NotebookPost
       : GalleryPost;
   const renderEmptyComponent = useCallback(() => {
-    return <EmptyChannelNotice channel={channel} userId={currentUserId} />;
+    return (
+      <View
+        // hack to fix inverted Flatlist empty component being erroneously rotated on Android
+        style={
+          Platform.OS === 'android'
+            ? { transform: [{ rotateY: '180deg' }] }
+            : {}
+        }
+      >
+        <EmptyChannelNotice channel={channel} userId={currentUserId} />
+      </View>
+    );
   }, [currentUserId, channel]);
 
   const onPressGroupRef = useCallback((group: db.Group) => {

From 340e1b7499eebccabad9b55ce7a0675f472235fd Mon Sep 17 00:00:00 2001
From: ~latter-bolden <brian@tlon.io>
Date: Fri, 31 May 2024 11:24:28 -0400
Subject: [PATCH 2/3] add logout

---
 apps/tlon-mobile/src/lib/nativeDb.ts          |  1 +
 .../tlon-mobile/src/screens/ProfileScreen.tsx | 16 ++++++++++++
 packages/ui/src/components/Channel/index.tsx  |  1 +
 .../ui/src/components/ProfileScreenView.tsx   | 26 +++++++++++++++++--
 4 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/apps/tlon-mobile/src/lib/nativeDb.ts b/apps/tlon-mobile/src/lib/nativeDb.ts
index 1791c1cd54..e98e536d6e 100644
--- a/apps/tlon-mobile/src/lib/nativeDb.ts
+++ b/apps/tlon-mobile/src/lib/nativeDb.ts
@@ -53,6 +53,7 @@ export async function purgeDb() {
   client = null;
   logger.log('purged sqlite database, recreating');
   setupDb();
+  runMigrations();
 }
 
 export function getDbPath() {
diff --git a/apps/tlon-mobile/src/screens/ProfileScreen.tsx b/apps/tlon-mobile/src/screens/ProfileScreen.tsx
index f0faa6171a..b834527fcf 100644
--- a/apps/tlon-mobile/src/screens/ProfileScreen.tsx
+++ b/apps/tlon-mobile/src/screens/ProfileScreen.tsx
@@ -1,23 +1,39 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import * as api from '@tloncorp/shared/dist/api';
 import * as store from '@tloncorp/shared/dist/store';
 import { ProfileScreenView, View } from '@tloncorp/ui';
+import { useCallback } from 'react';
 
+import { useShip } from '../contexts/ship';
 import { useCurrentUserId } from '../hooks/useCurrentUser';
+import { purgeDb } from '../lib/nativeDb';
 import NavBar from '../navigation/NavBarView';
 import { SettingsStackParamList } from '../types';
+import { removeHostingToken, removeHostingUserId } from '../utils/hosting';
 
 type Props = NativeStackScreenProps<SettingsStackParamList, 'Profile'>;
 
 export default function ProfileScreen(props: Props) {
+  const { clearShip } = useShip();
   const currentUserId = useCurrentUserId();
   const { data: contacts } = store.useContacts();
 
+  const handleLogout = useCallback(async () => {
+    await purgeDb();
+    api.queryClient.clear();
+    api.removeUrbitClient();
+    clearShip();
+    removeHostingToken();
+    removeHostingUserId();
+  }, [clearShip]);
+
   return (
     <View backgroundColor="$background" flex={1}>
       <ProfileScreenView
         contacts={contacts ?? []}
         currentUserId={currentUserId}
         onAppSettingsPressed={() => props.navigation.navigate('FeatureFlags')}
+        handleLogout={handleLogout}
       />
       <NavBar navigation={props.navigation} />
     </View>
diff --git a/packages/ui/src/components/Channel/index.tsx b/packages/ui/src/components/Channel/index.tsx
index f91f5ab7f9..4d829334c9 100644
--- a/packages/ui/src/components/Channel/index.tsx
+++ b/packages/ui/src/components/Channel/index.tsx
@@ -8,6 +8,7 @@ import { UploadInfo } from '@tloncorp/shared/dist/api';
 import * as db from '@tloncorp/shared/dist/db';
 import { JSONContent, Story } from '@tloncorp/shared/dist/urbit';
 import { useCallback, useMemo, useState } from 'react';
+import { Platform } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { AnimatePresence } from 'tamagui';
 
diff --git a/packages/ui/src/components/ProfileScreenView.tsx b/packages/ui/src/components/ProfileScreenView.tsx
index 508494569a..2d2e7a77cd 100644
--- a/packages/ui/src/components/ProfileScreenView.tsx
+++ b/packages/ui/src/components/ProfileScreenView.tsx
@@ -1,6 +1,6 @@
 import * as db from '@tloncorp/shared/dist/db';
 import { PropsWithChildren } from 'react';
-import { Dimensions, ImageBackground } from 'react-native';
+import { Alert, Dimensions, ImageBackground } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ScrollView, XStack, getTokens } from 'tamagui';
 
@@ -14,6 +14,7 @@ import { ListItem } from './ListItem';
 interface Props {
   currentUserId: string;
   onAppSettingsPressed?: () => void;
+  handleLogout: () => void;
 }
 
 export function ProfileScreenView({
@@ -31,6 +32,19 @@ export function Wrapped(props: Props) {
   const { top } = useSafeAreaInsets();
   const contact = useContact(props.currentUserId);
 
+  const onLogoutPress = () => {
+    Alert.alert('Log out', 'Are you sure you want to log out?', [
+      {
+        text: 'Cancel',
+        style: 'cancel',
+      },
+      {
+        text: 'Log out',
+        onPress: props.handleLogout,
+      },
+    ]);
+  };
+
   return (
     <ScrollView>
       <YStack flex={1} paddingHorizontal="$xl" paddingTop={top}>
@@ -52,6 +66,12 @@ export function Wrapped(props: Props) {
             icon="Settings"
             onPress={props.onAppSettingsPressed}
           />
+          <ProfileAction
+            title="Log Out"
+            icon="LogOut"
+            hideCaret
+            onPress={onLogoutPress}
+          />
         </View>
       </YStack>
     </ScrollView>
@@ -138,10 +158,12 @@ function ProfileRow({
 function ProfileAction({
   icon,
   title,
+  hideCaret,
   onPress,
 }: {
   icon: IconType;
   title: string;
+  hideCaret?: boolean;
   onPress?: () => void;
 }) {
   return (
@@ -154,7 +176,7 @@ function ProfileAction({
       <ListItem.MainContent>
         <ListItem.Title>{title}</ListItem.Title>
       </ListItem.MainContent>
-      <ListItem.Icon icon="ChevronRight" />
+      {!hideCaret && <ListItem.Icon icon="ChevronRight" />}
     </ListItem>
   );
 }

From 26f0a488944ccd33ad1f9f9f9e63052480a1fd25 Mon Sep 17 00:00:00 2001
From: ~latter-bolden <brian@tlon.io>
Date: Fri, 14 Jun 2024 09:48:00 -0400
Subject: [PATCH 3/3] fix persisting logout state

---
 apps/tlon-mobile/src/screens/ProfileScreen.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/tlon-mobile/src/screens/ProfileScreen.tsx b/apps/tlon-mobile/src/screens/ProfileScreen.tsx
index b834527fcf..8151339a65 100644
--- a/apps/tlon-mobile/src/screens/ProfileScreen.tsx
+++ b/apps/tlon-mobile/src/screens/ProfileScreen.tsx
@@ -4,7 +4,7 @@ import * as store from '@tloncorp/shared/dist/store';
 import { ProfileScreenView, View } from '@tloncorp/ui';
 import { useCallback } from 'react';
 
-import { useShip } from '../contexts/ship';
+import { clearShipInfo, useShip } from '../contexts/ship';
 import { useCurrentUserId } from '../hooks/useCurrentUser';
 import { purgeDb } from '../lib/nativeDb';
 import NavBar from '../navigation/NavBarView';
@@ -23,6 +23,7 @@ export default function ProfileScreen(props: Props) {
     api.queryClient.clear();
     api.removeUrbitClient();
     clearShip();
+    clearShipInfo();
     removeHostingToken();
     removeHostingUserId();
   }, [clearShip]);