Restructure removing remote

src/components/Instance.tsx

@@ -2,7 +2,7 @@ import Button from '@components/Button'
 import Icon from '@components/Icon'
 import { useAppsQuery } from '@utils/queryHooks/apps'
 import { useInstanceQuery } from '@utils/queryHooks/instance'
-import { getLocalInstances } from '@utils/slices/instancesSlice'
+import { getInstances } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import * as WebBrowser from 'expo-web-browser'
@@ -14,7 +14,6 @@ import { useSelector } from 'react-redux'
 import { Placeholder, Fade } from 'rn-placeholder'
 import analytics from './analytics'
 import InstanceAuth from './Instance/Auth'
-import EULA from './Instance/EULA'
 import InstanceInfo from './Instance/Info'
 
 export interface Props {
@@ -29,26 +28,23 @@ const ComponentInstance: React.FC<Props> = ({
   const { t } = useTranslation('componentInstance')
   const { theme } = useTheme()
 
-  const localInstances = useSelector(getLocalInstances, () => true)
-  const [instanceDomain, setInstanceDomain] = useState<string>()
+  const instances = useSelector(getInstances, () => true)
+  const [domain, setDomain] = useState<string>()
 
   const instanceQuery = useInstanceQuery({
-    instanceDomain,
-    options: { enabled: false, retry: false }
+    domain,
+    options: { enabled: !!domain, retry: false }
   })
   const appsQuery = useAppsQuery({
-    instanceDomain,
+    domain,
     options: { enabled: false, retry: false }
   })
 
   const onChangeText = useCallback(
     debounce(
       text => {
-        setInstanceDomain(text.replace(/^http(s)?\:\/\//i, ''))
+        setDomain(text.replace(/^http(s)?\:\/\//i, ''))
         appsQuery.remove()
-        if (text) {
-          instanceQuery.refetch()
-        }
       },
       1000,
       { trailing: true }
@@ -57,40 +53,35 @@ const ComponentInstance: React.FC<Props> = ({
   )
 
   const processUpdate = useCallback(() => {
-    if (instanceDomain) {
-      analytics('instance_local_login')
+    if (domain) {
+      analytics('instance_login')
       if (
-        localInstances &&
-        localInstances.filter(instance => instance.url === instanceDomain)
-          .length
+        instances &&
+        instances.filter(instance => instance.url === domain).length
       ) {
-        Alert.alert(
-          t('update.local.alert.title'),
-          t('update.local.alert.message'),
-          [
-            {
-              text: t('update.local.alert.buttons.cancel'),
-              style: 'cancel'
-            },
-            {
-              text: t('update.local.alert.buttons.continue'),
-              onPress: () => {
-                appsQuery.refetch()
-              }
+        Alert.alert(t('update.alert.title'), t('update.alert.message'), [
+          {
+            text: t('update.alert.buttons.cancel'),
+            style: 'cancel'
+          },
+          {
+            text: t('update.alert.buttons.continue'),
+            onPress: () => {
+              appsQuery.refetch()
             }
-          ]
-        )
+          }
+        ])
       } else {
         appsQuery.refetch()
       }
     }
-  }, [instanceDomain])
+  }, [domain])
 
   const onSubmitEditing = useCallback(
     ({ nativeEvent: { text } }) => {
-      analytics('instance_textinput_submit', { match: text === instanceDomain })
+      analytics('instance_textinput_submit', { match: text === domain })
       if (
-        text === instanceDomain &&
+        text === domain &&
         instanceQuery.isSuccess &&
         instanceQuery.data &&
         instanceQuery.data.uri
@@ -98,12 +89,12 @@ const ComponentInstance: React.FC<Props> = ({
         processUpdate()
       }
     },
-    [instanceDomain, instanceQuery.isSuccess, instanceQuery.data]
+    [domain, instanceQuery.isSuccess, instanceQuery.data]
   )
 
   const requestAuth = useMemo(() => {
     if (
-      instanceDomain &&
+      domain &&
       instanceQuery.data?.uri &&
       appsQuery.data?.client_id &&
       appsQuery.data.client_secret
@@ -111,7 +102,7 @@ const ComponentInstance: React.FC<Props> = ({
       return (
         <InstanceAuth
           key={Math.random()}
-          instanceDomain={instanceDomain}
+          instanceDomain={domain}
           instance={instanceQuery.data}
           appData={{
             clientId: appsQuery.data.client_id,
@@ -121,9 +112,7 @@ const ComponentInstance: React.FC<Props> = ({
         />
       )
     }
-  }, [instanceDomain, instanceQuery.data, appsQuery.data])
-
-  const [agreed, setAgreed] = useState(false)
+  }, [domain, instanceQuery.data, appsQuery.data])
 
   return (
     <>
@@ -160,15 +149,13 @@ const ComponentInstance: React.FC<Props> = ({
           />
           <Button
             type='text'
-            content={t('server.button.local')}
+            content={t('server.button')}
             onPress={processUpdate}
             disabled={!instanceQuery.data?.uri}
             loading={instanceQuery.isFetching || appsQuery.isFetching}
           />
         </View>
 
-        {/* <EULA agreed={agreed} setAgreed={setAgreed} /> */}
-
         <View>
           <Placeholder
             {...(instanceQuery.isFetching && {

src/components/Instance/Auth.tsx

@@ -1,5 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
-import { InstanceLocal, localAddInstance } from '@utils/slices/instancesSlice'
+import addInstance from '@utils/slices/instances/add'
+import { Instance } from '@utils/slices/instancesSlice'
 import * as AuthSession from 'expo-auth-session'
 import React, { useEffect } from 'react'
 import { useQueryClient } from 'react-query'
@@ -9,7 +10,7 @@ export interface Props {
   instanceDomain: string
   // Domain can be different than uri
   instance: Mastodon.Instance
-  appData: InstanceLocal['appData']
+  appData: Instance['appData']
   goBack?: boolean
 }
 
@@ -62,8 +63,8 @@ const InstanceAuth = React.memo(
           )
           queryClient.clear()
           dispatch(
-            localAddInstance({
-              url: instanceDomain,
+            addInstance({
+              domain: instanceDomain,
               token: accessToken,
               instance,
               max_toot_chars: instance.max_toot_chars,

src/components/Timeline.tsx

@@ -1,7 +1,7 @@
 import ComponentSeparator from '@components/Separator'
 import { useNavigation, useScrollToTop } from '@react-navigation/native'
 import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
-import { getLocalActiveIndex } from '@utils/slices/instancesSlice'
+import { getInstanceActive } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { findIndex } from 'lodash'
@@ -54,7 +54,7 @@ const Timeline: React.FC<Props> = ({
   const { theme } = useTheme()
 
   // Update timeline when account switched
-  useSelector(getLocalActiveIndex)
+  useSelector(getInstanceActive)
 
   const queryKeyParams = {
     page,

src/components/Timeline/Conversation.tsx

@@ -1,10 +1,10 @@
-import client from '@api/client'
+import apiInstance from '@api/instance'
 import analytics from '@components/analytics'
 import GracefullyImage from '@components/GracefullyImage'
 import { useNavigation } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
-import { getLocalAccount } from '@utils/slices/instancesSlice'
+import { getInstanceAccount } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback } from 'react'
@@ -58,17 +58,16 @@ const TimelineConversation: React.FC<Props> = ({
   queryKey,
   highlighted = false
 }) => {
-  const localAccount = useSelector(
-    getLocalAccount,
+  const instanceAccount = useSelector(
+    getInstanceAccount,
     (prev, next) => prev?.id === next?.id
   )
   const { theme } = useTheme()
 
   const queryClient = useQueryClient()
   const fireMutation = useCallback(() => {
-    return client<Mastodon.Conversation>({
+    return apiInstance<Mastodon.Conversation>({
       method: 'post',
-      instance: 'local',
       url: `conversations/${conversation.id}/read`
     })
   }, [])
@@ -135,7 +134,9 @@ const TimelineConversation: React.FC<Props> = ({
                 statusId={conversation.last_status.id}
                 poll={conversation.last_status.poll}
                 reblog={false}
-                sameAccount={conversation.last_status.id === localAccount?.id}
+                sameAccount={
+                  conversation.last_status.id === instanceAccount?.id
+                }
               />
             )}
           </View>

src/components/Timeline/Default.tsx

@@ -10,7 +10,7 @@ import TimelinePoll from '@components/Timeline/Shared/Poll'
 import { useNavigation } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
-import { getLocalAccount } from '@utils/slices/instancesSlice'
+import { getInstanceAccount } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { uniqBy } from 'lodash'
@@ -41,8 +41,8 @@ const TimelineDefault: React.FC<Props> = ({
   pinned
 }) => {
   const { theme } = useTheme()
-  const localAccount = useSelector(
-    getLocalAccount,
+  const instanceAccount = useSelector(
+    getInstanceAccount,
     (prev, next) => prev?.id === next?.id
   )
   const navigation = useNavigation<
@@ -118,7 +118,7 @@ const TimelineDefault: React.FC<Props> = ({
             statusId={actualStatus.id}
             poll={actualStatus.poll}
             reblog={item.reblog ? true : false}
-            sameAccount={actualStatus.account.id === localAccount?.id}
+            sameAccount={actualStatus.account.id === instanceAccount?.id}
           />
         ) : null}
         {!disableDetails &&
@@ -147,7 +147,7 @@ const TimelineDefault: React.FC<Props> = ({
               ([actualStatus.account] as Mastodon.Account[] &
                 Mastodon.Mention[])
                 .concat(actualStatus.mentions)
-                .filter(d => d.id !== localAccount?.id),
+                .filter(d => d.id !== instanceAccount?.id),
               d => d.id
             ).map(d => d.acct)}
             reblog={item.reblog ? true : false}

src/components/Timeline/Notifications.tsx

@@ -10,7 +10,7 @@ import TimelinePoll from '@components/Timeline/Shared/Poll'
 import { useNavigation } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
-import { getLocalAccount } from '@utils/slices/instancesSlice'
+import { getInstanceAccount } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { uniqBy } from 'lodash'
@@ -30,8 +30,8 @@ const TimelineNotifications: React.FC<Props> = ({
   highlighted = false
 }) => {
   const { theme } = useTheme()
-  const localAccount = useSelector(
-    getLocalAccount,
+  const instanceAccount = useSelector(
+    getInstanceAccount,
     (prev, next) => prev?.id === next?.id
   )
   const navigation = useNavigation<
@@ -103,7 +103,7 @@ const TimelineNotifications: React.FC<Props> = ({
                 statusId={notification.status.id}
                 poll={notification.status.poll}
                 reblog={false}
-                sameAccount={notification.account.id === localAccount?.id}
+                sameAccount={notification.account.id === instanceAccount?.id}
               />
             )}
             {notification.status.media_attachments.length > 0 && (
@@ -131,7 +131,7 @@ const TimelineNotifications: React.FC<Props> = ({
               ([notification.status.account] as Mastodon.Account[] &
                 Mastodon.Mention[])
                 .concat(notification.status.mentions)
-                .filter(d => d.id !== localAccount?.id),
+                .filter(d => d.id !== instanceAccount?.id),
               d => d.id
             ).map(d => d.acct)}
             reblog={false}