Fixed #336

src/screens/AccountSelection.tsx

@@ -0,0 +1,163 @@
+import AccountButton from '@components/AccountButton'
+import CustomText from '@components/Text'
+import navigationRef from '@helpers/navigationRef'
+import { RootStackScreenProps } from '@utils/navigation/navigators'
+import { getInstances } from '@utils/slices/instancesSlice'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import * as VideoThumbnails from 'expo-video-thumbnails'
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { FlatList, Image, ScrollView, View } from 'react-native'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
+import { useSelector } from 'react-redux'
+
+const Share = ({
+  text,
+  media
+}: {
+  text?: string | undefined
+  media?:
+    | {
+        uri: string
+        mime: string
+      }[]
+    | undefined
+}) => {
+  const { colors } = useTheme()
+
+  const [images, setImages] = useState<string[]>([])
+  useEffect(() => {
+    const prepareThumbs = async (media: { uri: string; mime: string }[]) => {
+      const thumbs: string[] = []
+      for (const m of media) {
+        if (m.mime.startsWith('image/')) {
+          thumbs.push(m.uri)
+        } else if (m.mime.startsWith('video/')) {
+          const { uri } = await VideoThumbnails.getThumbnailAsync(m.uri)
+          thumbs.push(uri)
+        }
+      }
+      setImages(thumbs)
+    }
+    if (media) {
+      prepareThumbs(media)
+    }
+  }, [])
+
+  if (text) {
+    return (
+      <CustomText
+        fontSize='S'
+        style={{
+          color: colors.primaryDefault,
+          padding: StyleConstants.Spacing.M,
+          borderWidth: 1,
+          borderColor: colors.shimmerHighlight,
+          borderRadius: 8
+        }}
+        children={text}
+      />
+    )
+  }
+  if (media) {
+    return (
+      <View
+        style={{
+          padding: StyleConstants.Spacing.M,
+          borderWidth: 1,
+          borderColor: colors.shimmerHighlight,
+          borderRadius: 8
+        }}
+      >
+        <FlatList
+          horizontal
+          data={images}
+          renderItem={({ item }) => (
+            <Image source={{ uri: item }} style={{ width: 88, height: 88 }} />
+          )}
+          ItemSeparatorComponent={() => (
+            <View style={{ width: StyleConstants.Spacing.S }} />
+          )}
+        />
+      </View>
+    )
+  }
+
+  return null
+}
+
+// Only needed when data incoming into the app when there are multiple accounts
+const ScreenAccountSelection = ({
+  route: {
+    params: { share }
+  }
+}: RootStackScreenProps<'Screen-AccountSelection'>) => {
+  const { colors } = useTheme()
+  const { t } = useTranslation('screenAccountSelection')
+
+  const instances = useSelector(getInstances, () => true)
+
+  return (
+    <SafeAreaProvider>
+      <ScrollView
+        style={{ marginBottom: StyleConstants.Spacing.L * 2 }}
+        keyboardShouldPersistTaps='always'
+      >
+        <View
+          style={{
+            marginHorizontal: StyleConstants.Spacing.Global.PagePadding
+          }}
+        >
+          {share ? <Share {...share} /> : null}
+          <CustomText
+            fontStyle='M'
+            fontWeight='Bold'
+            style={{
+              textAlign: 'center',
+              marginTop: StyleConstants.Spacing.L,
+              marginBottom: StyleConstants.Spacing.S,
+              color: colors.primaryDefault
+            }}
+          >
+            {t('content.select_account')}
+          </CustomText>
+          <View
+            style={{
+              flex: 1,
+              flexDirection: 'row',
+              flexWrap: 'wrap',
+              marginTop: StyleConstants.Spacing.M
+            }}
+          >
+            {instances.length
+              ? instances
+                  .slice()
+                  .sort((a, b) =>
+                    `${a.uri}${a.account.acct}`.localeCompare(
+                      `${b.uri}${b.account.acct}`
+                    )
+                  )
+                  .map((instance, index) => {
+                    return (
+                      <AccountButton
+                        key={index}
+                        instance={instance}
+                        additionalActions={() => {
+                          navigationRef.navigate('Screen-Compose', {
+                            type: 'share',
+                            ...share
+                          })
+                        }}
+                      />
+                    )
+                  })
+              : null}
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaProvider>
+  )
+}
+
+export default ScreenAccountSelection

src/screens/Compose/Root/Footer/addAttachment.ts

@@ -42,7 +42,6 @@ export const uploadAttachment = async ({
     case 'video':
       VideoThumbnails.getThumbnailAsync(media.uri)
         .then(({ uri, width, height }) => {
-          console.log('new', uri, width, height)
           composeDispatch({
             type: 'attachment/upload/start',
             payload: {

src/screens/Tabs/Me/Switch.tsx

@@ -1,11 +1,6 @@
-import analytics from '@components/analytics'
-import Button from '@components/Button'
-import haptics from '@components/haptics'
+import AccountButton from '@components/AccountButton'
 import ComponentInstance from '@components/Instance'
 import CustomText from '@components/Text'
-import { useNavigation } from '@react-navigation/native'
-import initQuery from '@utils/initQuery'
-import { InstanceLatest } from '@utils/migrations/instances/migration'
 import { getInstanceActive, getInstances } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
@@ -15,35 +10,6 @@ import { KeyboardAvoidingView, Platform, StyleSheet, View } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
 import { useSelector } from 'react-redux'
 
-interface Props {
-  instance: InstanceLatest
-  selected?: boolean
-}
-
-const AccountButton: React.FC<Props> = ({ instance, selected = false }) => {
-  const navigation = useNavigation()
-
-  return (
-    <Button
-      type='text'
-      selected={selected}
-      style={{
-        marginBottom: StyleConstants.Spacing.M,
-        marginRight: StyleConstants.Spacing.M
-      }}
-      content={`@${instance.account.acct}@${instance.uri}${
-        selected ? ' ✓' : ''
-      }`}
-      onPress={() => {
-        haptics('Light')
-        analytics('switch_existing_press')
-        initQuery({ instance, prefetch: { enabled: true } })
-        navigation.goBack()
-      }}
-    />
-  )
-}
-
 const TabMeSwitch: React.FC = () => {
   const { t } = useTranslation('screenTabs')
   const { colors } = useTheme()