Removed external instance

src/components/Button.tsx

@@ -3,6 +3,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useEffect, useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
   Pressable,
   StyleProp,
@@ -48,6 +49,7 @@ const Button: React.FC<Props> = ({
   overlay = false,
   onPress
 }) => {
+  const { i18n } = useTranslation()
   const { theme } = useTheme()
 
   const mounted = useRef(false)
@@ -145,7 +147,7 @@ const Button: React.FC<Props> = ({
           </>
         )
     }
-  }, [theme, content, loading, disabled, active])
+  }, [i18n.language, theme, content, loading, disabled, active])
 
   enum spacingMapping {
     XS = 'S',

src/components/Instance.tsx

@@ -8,7 +8,7 @@ import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { getLocalInstances, remoteUpdate } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import * as Linking from 'expo-linking'
+import * as WebBrowser from 'expo-web-browser'
 import { debounce } from 'lodash'
 import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -18,6 +18,7 @@ import { useDispatch, 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'
 import { toast } from './toast'
 
@@ -159,6 +160,8 @@ const ComponentInstance: React.FC<Props> = ({
     }
   }, [instanceDomain, instanceQuery.data, appsQuery.data])
 
+  const [agreed, setAgreed] = useState(false)
+
   return (
     <>
       {!disableHeaderImage ? (
@@ -201,18 +204,15 @@ const ComponentInstance: React.FC<Props> = ({
             onPress={processUpdate}
             disabled={
               !instanceQuery.data?.uri ||
-              (type === 'remote' && !instanceQuery.data.publicAllow)
+              (type === 'remote' && !instanceQuery.data.publicAllow) ||
+              !agreed
             }
             loading={instanceQuery.isFetching || appsQuery.isFetching}
           />
         </View>
-        {type === 'remote' &&
-        instanceQuery.data &&
-        !instanceQuery.data.publicAllow ? (
-          <Text style={[styles.privateInstance, { color: theme.red }]}>
-            {t('server.privateInstance')}
-          </Text>
-        ) : null}
+
+        <EULA agreed={agreed} setAgreed={setAgreed} />
+
         <View>
           <Placeholder
             {...(instanceQuery.isFetching && {
@@ -277,15 +277,17 @@ const ComponentInstance: React.FC<Props> = ({
                 style={styles.disclaimerIcon}
               />
               <Text style={[styles.disclaimerText, { color: theme.secondary }]}>
-                {t('server.disclaimer')}
+                {t('server.disclaimer.base')}
                 <Text
                   style={{ color: theme.blue }}
                   onPress={() => {
                     analytics('view_privacy')
-                    Linking.openURL('https://tooot.app/privacy')
+                    WebBrowser.openBrowserAsync(
+                      'https://tooot.app/privacy-policy'
+                    )
                   }}
                 >
-                  https://tooot.app/privacy
+                  {t('server.disclaimer.privacy')}
                 </Text>
               </Text>
             </View>

src/components/Instance/EULA.tsx

@@ -0,0 +1,62 @@
+import analytics from '@components/analytics'
+import Icon from '@components/Icon'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import * as WebBrowser from 'expo-web-browser'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Pressable, StyleSheet, Text } from 'react-native'
+
+export interface Props {
+  agreed: boolean
+  setAgreed: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+const EULA = React.memo(
+  ({ agreed, setAgreed }: Props) => {
+    const { t } = useTranslation('componentInstance')
+    const { theme } = useTheme()
+
+    return (
+      <Pressable style={styles.base} onPress={() => setAgreed(!agreed)}>
+        <Icon
+          style={styles.icon}
+          name={agreed ? 'CheckCircle' : 'Circle'}
+          size={StyleConstants.Font.Size.M}
+          color={theme.primary}
+        />
+        <Text style={[styles.text, { color: theme.primary }]}>
+          {t('server.EULA.base')}
+          <Text
+            style={{ color: theme.blue }}
+            children={t('server.EULA.EULA')}
+            onPress={() => {
+              analytics('view_EULA')
+              WebBrowser.openBrowserAsync(
+                'https://tooot.app/end-user-license-agreement'
+              )
+            }}
+          />
+        </Text>
+      </Pressable>
+    )
+  },
+  (prev, next) => prev.agreed === next.agreed
+)
+
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: 'row',
+    marginTop: StyleConstants.Spacing.M,
+    paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
+    alignItems: 'center'
+  },
+  icon: {
+    marginRight: StyleConstants.Spacing.XS
+  },
+  text: {
+    ...StyleConstants.FontStyle.S
+  }
+})
+
+export default EULA

src/components/Timelines.tsx

@@ -1,54 +1,37 @@
-import { HeaderCenter, HeaderRight } from '@components/Header'
+import { HeaderRight } from '@components/Header'
 import Timeline from '@components/Timelines/Timeline'
 import SegmentedControl from '@react-native-community/segmented-control'
 import { useNavigation } from '@react-navigation/native'
 import sharedScreens from '@screens/Shared/sharedScreens'
-import { getLocalActiveIndex, getRemoteUrl } from '@utils/slices/instancesSlice'
+import { getLocalActiveIndex } from '@utils/slices/instancesSlice'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Dimensions, Platform, StyleSheet } from 'react-native'
+import { Dimensions, StyleSheet } from 'react-native'
 import { createNativeStackNavigator } from 'react-native-screens/native-stack'
 import { TabView } from 'react-native-tab-view'
 import ViewPagerAdapter from 'react-native-tab-view-viewpager-adapter'
 import { useSelector } from 'react-redux'
 import analytics from './analytics'
 
-const Stack = createNativeStackNavigator<
-  Nav.LocalStackParamList | Nav.RemoteStackParamList
->()
+const Stack = createNativeStackNavigator<Nav.RemoteStackParamList>()
 
-export interface Props {
-  name: 'Local' | 'Public'
-}
-
-const Timelines: React.FC<Props> = ({ name }) => {
+const Timelines: React.FC = () => {
   const { t, i18n } = useTranslation()
-  const remoteUrl = useSelector(getRemoteUrl)
-  const mapNameToContent: {
-    [key: string]: { title: string; page: App.Pages }[]
-  } = {
-    Local: [
-      { title: t('local:heading.segments.left'), page: 'Following' },
-      { title: t('local:heading.segments.right'), page: 'Local' }
-    ],
-    Public: [
-      { title: t('public:heading.segments.left'), page: 'LocalPublic' },
-      { title: remoteUrl, page: 'RemotePublic' }
-    ]
-  }
+  const pages: { title: string; page: App.Pages }[] = [
+    { title: t('public:heading.segments.left'), page: 'LocalPublic' },
+    { title: t('public:heading.segments.right'), page: 'Local' }
+  ]
 
   const navigation = useNavigation()
   const localActiveIndex = useSelector(getLocalActiveIndex)
 
   const onPressSearch = useCallback(() => {
-    analytics('search_tap', { page: mapNameToContent[name][segment].page })
-    navigation.navigate(`Screen-${name}`, { screen: 'Screen-Shared-Search' })
+    analytics('search_tap', { page: pages[segment].page })
+    navigation.navigate('Screen-Public', { screen: 'Screen-Shared-Search' })
   }, [])
 
-  const routes = mapNameToContent[name]
-    .filter(p => (localActiveIndex !== null ? true : p.page === 'RemotePublic'))
-    .map(p => ({ key: p.page }))
+  const routes = pages.map(p => ({ key: p.page }))
 
   const renderScene = useCallback(
     ({
@@ -58,11 +41,7 @@ const Timelines: React.FC<Props> = ({ name }) => {
         key: App.Pages
       }
     }) => {
-      return (
-        (localActiveIndex !== null || route.key === 'RemotePublic') && (
-          <Timeline page={route.key} />
-        )
-      )
+      return localActiveIndex !== null && <Timeline page={route.key} />
     },
     [localActiveIndex]
   )
@@ -70,21 +49,12 @@ const Timelines: React.FC<Props> = ({ name }) => {
   const { mode } = useTheme()
   const [segment, setSegment] = useState(0)
   const screenOptions = useMemo(() => {
-    if (localActiveIndex === null) {
-      if (name === 'Public') {
-        return {
-          headerTitle: remoteUrl,
-          ...(Platform.OS === 'android' && {
-            headerCenter: () => <HeaderCenter content={remoteUrl} />
-          })
-        }
-      }
-    } else {
+    if (localActiveIndex !== null) {
       return {
         headerCenter: () => (
           <SegmentedControl
             appearance={mode}
-            values={mapNameToContent[name].map(p => p.title)}
+            values={pages.map(p => p.title)}
             selectedIndex={segment}
             onChange={({ nativeEvent }) =>
               setSegment(nativeEvent.selectedSegmentIndex)
@@ -105,11 +75,7 @@ const Timelines: React.FC<Props> = ({ name }) => {
     <Stack.Navigator
       screenOptions={{ headerHideShadow: true, headerTopInsetEnabled: false }}
     >
-      <Stack.Screen
-        // @ts-ignore
-        name={`Screen-${name}-Root`}
-        options={screenOptions}
-      >
+      <Stack.Screen name='Screen-Remote-Root' options={screenOptions}>
         {() => (
           <TabView
             lazy
@@ -124,7 +90,7 @@ const Timelines: React.FC<Props> = ({ name }) => {
         )}
       </Stack.Screen>
 
-      {sharedScreens(Stack)}
+      {sharedScreens(Stack as any)}
     </Stack.Navigator>
   )
 }

src/components/Timelines/Timeline/Shared/Poll.tsx

@@ -119,7 +119,7 @@ const TimelinePoll: React.FC<Props> = ({
         )
       }
     }
-  }, [poll.expired, poll.voted, allOptions, mutation.isLoading])
+  }, [mode, poll.expired, poll.voted, allOptions, mutation.isLoading])
 
   const pollExpiration = useMemo(() => {
     if (poll.expired) {