Removed external instance

demo/statuses.json

@@ -4,7 +4,7 @@
     [
       {
         "id": "999",
-        "created_at": "2021-01-22T03:48:33.901Z",
+        "created_at": "2021-01-24T11:50:00.901Z",
         "sensitive": false,
         "visibility": "public",
         "replies_count": 9,
@@ -30,7 +30,7 @@
         "media_attachments": [],
         "poll": {
           "id": "1",
-          "expires_at": "2021-02-22T03:48:33.901Z",
+          "expires_at": "2021-01-31T11:50:00.901Z",
           "expired": false,
           "multiple": false,
           "votes_count": 10,
@@ -53,7 +53,7 @@
       },
       {
         "id": "1000",
-        "created_at": "2021-01-22T03:48:33.901Z",
+        "created_at": "2021-01-24T10:50:00.901Z",
         "sensitive": false,
         "spoiler_text": "",
         "visibility": "public",
@@ -89,7 +89,7 @@
       },
       {
         "id": "1001",
-        "created_at": "2021-01-22T03:48:33.901Z",
+        "created_at": "2021-01-24T09:50:00.901Z",
         "spoiler_text": "",
         "visibility": "public",
         "replies_count": 2,
@@ -117,7 +117,7 @@
       },
       {
         "id": "1002",
-        "created_at": "2021-01-22T03:48:33.901Z",
+        "created_at": "2021-01-24T08:50:00.901Z",
         "sensitive": false,
         "visibility": "public",
         "replies_count": 0,
@@ -145,7 +145,7 @@
       },
       {
         "id": "1003",
-        "created_at": "2021-01-22T03:48:33.901Z",
+        "created_at": "2021-01-24T07:50:00.901Z",
         "sensitive": false,
         "visibility": "public",
         "replies_count": 0,

src/Index.tsx

@@ -179,13 +179,7 @@ const Index: React.FC<Props> = ({ localCorrupt }) => {
           case 'Screen-Local':
             return <Icon name='Home' size={size} color={color} />
           case 'Screen-Public':
-            return (
-              <Icon
-                name='Globe'
-                size={size}
-                color={!focused ? theme.secondary : color}
-              />
-            )
+            return <Icon name='Globe' size={size} color={color} />
           case 'Screen-Post':
             return <Icon name='Plus' size={size} color={color} />
           case 'Screen-Notifications':
@@ -279,7 +273,7 @@ const Index: React.FC<Props> = ({ localCorrupt }) => {
       >
         <Tab.Navigator
           initialRouteName={
-            localActiveIndex !== null ? 'Screen-Local' : 'Screen-Public'
+            localActiveIndex !== null ? 'Screen-Local' : 'Screen-Me'
           }
           screenOptions={tabNavigatorScreenOptions}
           tabBarOptions={tabNavigatorTabBarOptions}

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) {

src/i18n/en/_all.ts

@@ -14,7 +14,6 @@ export default {
   meLists: require('./screens/meLists').default,
   meListsList: require('./screens/meListsList').default,
   meSettings: require('./screens/meSettings').default,
-  meSettingsUpdateRemote: require('./screens/meSettingsUpdateRemote').default,
   meSwitch: require('./screens/meSwitch').default,
 
   sharedAccount: require('./screens/sharedAccount').default,

src/i18n/en/components/instance.ts

@@ -2,6 +2,7 @@ export default {
   server: {
     textInput: { placeholder: "Instance' domain" },
     privateInstance: 'Private instance, peeping not allowed',
+    EULA: { base: 'I have read and agreed to ', EULA: 'EULA' },
     button: {
       local: 'Login',
       remote: 'Peep'
@@ -13,8 +14,11 @@ export default {
       statuses: 'Toots',
       domains: 'Universes'
     },
-    disclaimer:
-      "Logging in process uses system broswer that, your account informationo won't be visible to tooot app. Read more at: "
+    disclaimer: {
+      base:
+        "Logging in process uses system broswer that, your account informationo won't be visible to tooot app. Read more ",
+      privacy: 'privacy policy'
+    }
   },
   update: {
     local: {

src/i18n/en/screens/local.ts

@@ -1,8 +1,3 @@
 export default {
-  heading: {
-    segments: {
-      left: 'Following',
-      right: 'Local'
-    }
-  }
+  heading: 'Following'
 }

src/i18n/en/screens/meSettingsUpdateRemote.ts

@@ -1,3 +0,0 @@
-export default {
-  heading: 'Register external instance'
-}

src/i18n/en/screens/public.ts

@@ -2,7 +2,7 @@ export default {
   heading: {
     segments: {
       left: 'Federated',
-      right: 'External'
+      right: 'Local'
     }
   }
 }

src/i18n/zh-Hans/_all.ts

@@ -14,7 +14,6 @@ export default {
   meLists: require('./screens/meLists').default,
   meListsList: require('./screens/meListsList').default,
   meSettings: require('./screens/meSettings').default,
-  meSettingsUpdateRemote: require('./screens/meSettingsUpdateRemote').default,
   meSwitch: require('./screens/meSwitch').default,
 
   sharedAccount: require('./screens/sharedAccount').default,

src/i18n/zh-Hans/components/instance.ts

@@ -2,6 +2,7 @@ export default {
   server: {
     textInput: { placeholder: '输入社区服务器地址' },
     privateInstance: '非公开社区, 不能围观',
+    EULA: { base: '我阅读并同意 ', EULA: '最终用户条款' },
     button: {
       local: '登录',
       remote: '围观'
@@ -13,8 +14,11 @@ export default {
       statuses: '嘟文总数',
       domains: '连结总数'
     },
-    disclaimer:
-      '登录过程将使用系统浏览器，你的账号登录信息tooot应用无法读取。详见：'
+    disclaimer: {
+      base:
+        '登录过程将使用系统浏览器，你的账号登录信息tooot应用无法读取。详见 ',
+      privacy: '隐私条款'
+    }
   },
   update: {
     local: {

src/i18n/zh-Hans/screens/local.ts

@@ -1,8 +1,3 @@
 export default {
-  heading: {
-    segments: {
-      left: '我的关注',
-      right: '本站嘟嘟'
-    }
-  }
+  heading: '我的关注'
 }

src/i18n/zh-Hans/screens/meSettingsUpdateRemote.ts

@@ -1,3 +0,0 @@
-export default {
-  heading: '围观社区'
-}

src/i18n/zh-Hans/screens/public.ts

@@ -2,7 +2,7 @@ export default {
   heading: {
     segments: {
       left: '跨站嘟嘟',
-      right: '外站嘟嘟'
+      right: '本站嘟嘟'
     }
   }
 }

src/screens/Local.tsx

@@ -1,9 +1,52 @@
-import Timelines from '@components/Timelines'
-import React from 'react'
+import analytics from '@components/analytics'
+import { HeaderCenter, HeaderRight } from '@components/Header'
+import Timeline from '@components/Timelines/Timeline'
+import { useNavigation } from '@react-navigation/native'
+import { getLocalActiveIndex } from '@utils/slices/instancesSlice'
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Platform } from 'react-native'
+import { createNativeStackNavigator } from 'react-native-screens/native-stack'
+import { useSelector } from 'react-redux'
+import sharedScreens from './Shared/sharedScreens'
+
+const Stack = createNativeStackNavigator<Nav.LocalStackParamList>()
 
 const ScreenLocal = React.memo(
   () => {
-    return <Timelines name='Local' />
+    const { t } = useTranslation('local')
+    const navigation = useNavigation()
+    const localActiveIndex = useSelector(getLocalActiveIndex)
+
+    const onPressSearch = useCallback(() => {
+      analytics('search_tap', { page: 'Local' })
+      navigation.navigate('Screen-Local', { screen: 'Screen-Shared-Search' })
+    }, [])
+
+    return (
+      <Stack.Navigator
+        screenOptions={{
+          headerLeft: () => null,
+          headerRight: () => (
+            <HeaderRight content='Search' onPress={onPressSearch} />
+          ),
+          headerTitle: t('heading'),
+          ...(Platform.OS === 'android' && {
+            headerCenter: () => <HeaderCenter content={t('heading')} />
+          }),
+          headerHideShadow: true,
+          headerTopInsetEnabled: false
+        }}
+      >
+        <Stack.Screen name='Screen-Local-Root'>
+          {() =>
+            localActiveIndex !== null ? <Timeline page='Following' /> : null
+          }
+        </Stack.Screen>
+
+        {sharedScreens(Stack as any)}
+      </Stack.Navigator>
+    )
   },
   () => true
 )

src/screens/Me.tsx

@@ -7,7 +7,6 @@ import ScreenMeRoot from '@screens/Me/Root'
 import ScreenMeListsList from '@screens/Me/Root/Lists/List'
 import ScreenMeSettings from '@screens/Me/Settings'
 import ScreenMeSwitch from '@screens/Me/Switch'
-import ScreenMeUpdateRemote from '@screens/Me/UpdateRemote'
 import sharedScreens from '@screens/Shared/sharedScreens'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -110,19 +109,6 @@ const ScreenMe: React.FC = () => {
           headerLeft: () => <HeaderLeft onPress={() => navigation.pop(1)} />
         })}
       />
-      <Stack.Screen
-        name='Screen-Me-Settings-UpdateRemote'
-        component={ScreenMeUpdateRemote}
-        options={({ navigation }: any) => ({
-          headerTitle: t('meSettingsUpdateRemote:heading'),
-          ...(Platform.OS === 'android' && {
-            headerCenter: () => (
-              <HeaderCenter content={t('meSettingsUpdateRemote:heading')} />
-            )
-          }),
-          headerLeft: () => <HeaderLeft onPress={() => navigation.pop(1)} />
-        })}
-      />
       <Stack.Screen
         name='Screen-Me-Switch'
         component={ScreenMeSwitch}

src/screens/Me/Settings.tsx

@@ -4,12 +4,10 @@ import haptics from '@components/haptics'
 import Icon from '@components/Icon'
 import { MenuContainer, MenuRow } from '@components/Menu'
 import { useActionSheet } from '@expo/react-native-action-sheet'
-import { useNavigation } from '@react-navigation/native'
 import { persistor } from '@root/store'
 import {
   getLocalActiveIndex,
-  getLocalInstances,
-  getRemoteUrl
+  getLocalInstances
 } from '@utils/slices/instancesSlice'
 import {
   changeAnalytics,
@@ -92,13 +90,11 @@ const DevDebug: React.FC = () => {
 
 const ScreenMeSettings: React.FC = () => {
   const { showActionSheetWithOptions } = useActionSheet()
-  const navigation = useNavigation()
   const { t, i18n } = useTranslation('meSettings')
   const { setTheme, theme } = useTheme()
   const settingsLanguage = useSelector(getSettingsLanguage)
   const settingsTheme = useSelector(getSettingsTheme)
   const settingsBrowser = useSelector(getSettingsBrowser)
-  const settingsRemote = useSelector(getRemoteUrl)
   const settingsAnalytics = useSelector(getSettingsAnalytics)
   const dispatch = useDispatch()
 
@@ -232,13 +228,6 @@ const ScreenMeSettings: React.FC = () => {
         />
       </MenuContainer>
       <MenuContainer>
-        <MenuRow
-          title={t('content.remote.heading')}
-          description={t('content.remote.description')}
-          content={settingsRemote}
-          iconBack='ChevronRight'
-          onPress={() => navigation.navigate('Screen-Me-Settings-UpdateRemote')}
-        />
         <MenuRow
           title={t('content.cache.heading')}
           content={

src/screens/Me/UpdateRemote.tsx

@@ -1,19 +0,0 @@
-import ComponentInstance from '@components/Instance'
-import React from 'react'
-import { KeyboardAvoidingView, Platform } from 'react-native'
-import { ScrollView } from 'react-native-gesture-handler'
-
-const ScreenMeUpdateRemote: React.FC = () => {
-  return (
-    <KeyboardAvoidingView
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      style={{ flex: 1 }}
-    >
-      <ScrollView keyboardShouldPersistTaps='handled'>
-        <ComponentInstance type='remote' disableHeaderImage />
-      </ScrollView>
-    </KeyboardAvoidingView>
-  )
-}
-
-export default ScreenMeUpdateRemote

src/screens/Public.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 
 const ScreenPublic = React.memo(
   () => {
-    return <Timelines name='Public' />
+    return <Timelines />
   },
   () => true
 )