Rewrite login logic

app.config.ts

@@ -19,6 +19,7 @@ export default (): ExpoConfig => ({
   scheme: 'tooot',
   ios: {
     buildNumber: '1.0',
+    config: { usesNonExemptEncryption: false },
     bundleIdentifier: 'com.xmflsct.app.tooot',
     googleServicesFile: './configs/GoogleService-Info.plist',
     infoPlist: {

src/components/Instance.tsx

@@ -5,16 +5,12 @@ import { useNavigation } from '@react-navigation/native'
 import { useAppsQuery } from '@utils/queryHooks/apps'
 import { useInstanceQuery } from '@utils/queryHooks/instance'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
-import {
+import { getLocalInstances, remoteUpdate } from '@utils/slices/instancesSlice'
-  getLocalInstances,
-  InstanceLocal,
-  remoteUpdate
-} from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import * as Linking from 'expo-linking'
 import { debounce } from 'lodash'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Alert, Image, StyleSheet, Text, TextInput, View } from 'react-native'
 import { useQueryClient } from 'react-query'
@@ -34,54 +30,39 @@ const ComponentInstance: React.FC<Props> = ({
   disableHeaderImage,
   goBack = false
 }) => {
-  const navigation = useNavigation()
-  const dispatch = useDispatch()
-  const queryClient = useQueryClient()
   const { t } = useTranslation('componentInstance')
   const { theme } = useTheme()
-  const [instanceDomain, setInstanceDomain] = useState<string | undefined>()
+  const navigation = useNavigation()
-  const [appData, setApplicationData] = useState<InstanceLocal['appData']>()
+
   const localInstances = useSelector(getLocalInstances)
+  const dispatch = useDispatch()
+
+  const queryClient = useQueryClient()
+  const [instanceDomain, setInstanceDomain] = useState<string>()
 
   const instanceQuery = useInstanceQuery({
     instanceDomain,
     options: { enabled: false, retry: false }
   })
-  const applicationQuery = useAppsQuery({
+  const appsQuery = useAppsQuery({
     instanceDomain,
     options: { enabled: false, retry: false }
   })
 
-  useEffect(() => {
-    if (
-      applicationQuery.data?.client_id.length &&
-      applicationQuery.data?.client_secret.length
-    ) {
-      setApplicationData({
-        clientId: applicationQuery.data.client_id,
-        clientSecret: applicationQuery.data.client_secret
-      })
-    }
-  }, [applicationQuery.data?.client_id])
-
   const onChangeText = useCallback(
     debounce(
       text => {
         setInstanceDomain(text.replace(/^http(s)?\:\/\//i, ''))
-        setApplicationData(undefined)
+        appsQuery.remove()
+        if (text) {
+          instanceQuery.refetch()
+        }
       },
       1000,
-      {
+      { trailing: true }
-        trailing: true
-      }
     ),
     []
   )
-  useEffect(() => {
-    if (instanceDomain) {
-      instanceQuery.refetch()
-    }
-  }, [instanceDomain])
 
   const processUpdate = useCallback(() => {
     if (instanceDomain) {
@@ -103,14 +84,13 @@ const ComponentInstance: React.FC<Props> = ({
                 {
                   text: t('update.local.alert.buttons.continue'),
                   onPress: () => {
-                    setApplicationData(undefined)
+                    appsQuery.refetch()
-                    applicationQuery.refetch()
                   }
                 }
               ]
             )
           } else {
-            applicationQuery.refetch()
+            appsQuery.refetch()
           }
           break
         case 'remote':
@@ -137,9 +117,6 @@ const ComponentInstance: React.FC<Props> = ({
         instanceQuery.data.uri
       ) {
         processUpdate()
-      } else {
-        setInstanceDomain(text)
-        setApplicationData(undefined)
       }
     },
     [instanceDomain, instanceQuery.isSuccess, instanceQuery.data]
@@ -154,6 +131,28 @@ const ComponentInstance: React.FC<Props> = ({
     }
   }, [])
 
+  const requestAuth = useMemo(() => {
+    if (
+      instanceDomain &&
+      instanceQuery.data?.uri &&
+      appsQuery.data?.client_id &&
+      appsQuery.data.client_secret
+    ) {
+      return (
+        <InstanceAuth
+          key={Math.random()}
+          instanceDomain={instanceDomain}
+          instanceUri={instanceQuery.data.uri}
+          appData={{
+            clientId: appsQuery.data.client_id,
+            clientSecret: appsQuery.data.client_secret
+          }}
+          goBack={goBack}
+        />
+      )
+    }
+  }, [instanceDomain, instanceQuery.data, appsQuery.data])
+
   return (
     <>
       {!disableHeaderImage ? (
@@ -190,7 +189,7 @@ const ComponentInstance: React.FC<Props> = ({
             content={buttonContent}
             onPress={processUpdate}
             disabled={!instanceQuery.data?.uri}
-            loading={instanceQuery.isFetching || applicationQuery.isFetching}
+            loading={instanceQuery.isFetching || appsQuery.isFetching}
           />
         </View>
         <View>
@@ -208,8 +207,8 @@ const ComponentInstance: React.FC<Props> = ({
           />
           <View style={styles.instanceStats}>
             <InstanceInfo
-              style={{ alignItems: 'flex-start' }}
+              style={styles.stat1}
-              visible={instanceQuery.data?.stats?.user_count === null}
+              visible={instanceQuery.data?.stats?.user_count !== undefined}
               header={t('server.information.accounts')}
               content={
                 instanceQuery.data?.stats?.user_count?.toString() || undefined
@@ -217,8 +216,8 @@ const ComponentInstance: React.FC<Props> = ({
               potentialWidth={4}
             />
             <InstanceInfo
-              style={{ alignItems: 'center' }}
+              style={styles.stat2}
-              visible={instanceQuery.data?.stats?.status_count === null}
+              visible={instanceQuery.data?.stats?.status_count !== undefined}
               header={t('server.information.statuses')}
               content={
                 instanceQuery.data?.stats?.status_count?.toString() || undefined
@@ -226,8 +225,8 @@ const ComponentInstance: React.FC<Props> = ({
               potentialWidth={4}
             />
             <InstanceInfo
-              style={{ alignItems: 'flex-end' }}
+              style={styles.stat3}
-              visible={instanceQuery.data?.stats?.domain_count === null}
+              visible={instanceQuery.data?.stats?.domain_count !== undefined}
               header={t('server.information.domains')}
               content={
                 instanceQuery.data?.stats?.domain_count?.toString() || undefined
@@ -257,14 +256,7 @@ const ComponentInstance: React.FC<Props> = ({
         </View>
       </View>
 
-      {type === 'local' && appData ? (
+      {type === 'local' ? requestAuth : null}
-        <InstanceAuth
-          instanceDomain={instanceDomain!}
-          instanceUri={instanceQuery.data!.uri}
-          appData={appData}
-          goBack={goBack}
-        />
-      ) : null}
     </>
   )
 }
@@ -290,6 +282,15 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row'
   },
+  stat1: {
+    alignItems: 'flex-start'
+  },
+  stat2: {
+    alignItems: 'center'
+  },
+  stat3: {
+    alignItems: 'flex-end'
+  },
   disclaimer: {
     flexDirection: 'row',
     marginHorizontal: StyleConstants.Spacing.Global.PagePadding,

src/screens/Shared/Account/Information/Avatar.tsx

@@ -1,6 +1,7 @@
 import GracefullyImage from '@components/GracefullyImage'
 import { StyleConstants } from '@utils/styles/constants'
 import React from 'react'
+import { StyleSheet } from 'react-native'
 
 export interface Props {
   account: Mastodon.Account | undefined
@@ -10,16 +11,20 @@ const AccountInformationAvatar = React.memo(
   ({ account }: Props) => {
     return (
       <GracefullyImage
+        style={styles.base}
         uri={{ original: account?.avatar }}
         dimension={{
           width: StyleConstants.Avatar.L,
           height: StyleConstants.Avatar.L
         }}
-        style={{ borderRadius: 8, overflow: 'hidden' }}
       />
     )
   },
   (_, next) => next.account === undefined
 )
 
+const styles = StyleSheet.create({
+  base: { borderRadius: 8, overflow: 'hidden' }
+})
+
 export default AccountInformationAvatar

src/startup/sentry.ts

@@ -5,8 +5,9 @@ import log from './log'
 const sentry = () => {
   log('log', 'Sentry', 'initializing')
   Sentry.init({
+    environment: Constants.manifest.releaseChannel || 'expo',
     dsn: Constants.manifest.extra.sentryDSN,
-    enableInExpoDevelopment: true,
+    enableInExpoDevelopment: false,
     debug: __DEV__
   })
 }