Lots of updates

src/components/Instance/Auth.tsx

@@ -0,0 +1,74 @@
+import { useNavigation } from '@react-navigation/native'
+import { InstanceLocal, localAddInstance } from '@utils/slices/instancesSlice'
+import * as AuthSession from 'expo-auth-session'
+import React, { useEffect } from 'react'
+import { useQueryClient } from 'react-query'
+import { useDispatch } from 'react-redux'
+
+export interface Props {
+  instanceDomain: string
+  appData: InstanceLocal['appData']
+  goBack?: boolean
+}
+
+const InstanceAuth = React.memo(
+  ({ instanceDomain, appData, goBack }: Props) => {
+    const navigation = useNavigation()
+    const queryClient = useQueryClient()
+    const dispatch = useDispatch()
+
+    const [request, response, promptAsync] = AuthSession.useAuthRequest(
+      {
+        clientId: appData.clientId,
+        clientSecret: appData.clientSecret,
+        scopes: ['read', 'write', 'follow', 'push'],
+        redirectUri: 'exp://127.0.0.1:19000'
+      },
+      {
+        authorizationEndpoint: `https://${instanceDomain}/oauth/authorize`
+      }
+    )
+    useEffect(() => {
+      ;(async () => {
+        if (request?.clientId) {
+          await promptAsync()
+        }
+      })()
+    }, [request])
+    useEffect(() => {
+      ;(async () => {
+        if (response?.type === 'success') {
+          const { accessToken } = await AuthSession.exchangeCodeAsync(
+            {
+              clientId: appData.clientId,
+              clientSecret: appData.clientSecret,
+              scopes: ['read', 'write', 'follow', 'push'],
+              redirectUri: 'exp://127.0.0.1:19000',
+              code: response.params.code,
+              extraParams: {
+                grant_type: 'authorization_code'
+              }
+            },
+            {
+              tokenEndpoint: `https://${instanceDomain}/oauth/token`
+            }
+          )
+          queryClient.clear()
+          dispatch(
+            localAddInstance({
+              url: instanceDomain,
+              token: accessToken,
+              appData
+            })
+          )
+          goBack && navigation.goBack()
+        }
+      })()
+    }, [response])
+
+    return <></>
+  },
+  () => true
+)
+
+export default InstanceAuth

src/components/Instance/Info.tsx

@@ -0,0 +1,73 @@
+import { ParseHTML } from '@components/Parse'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import { LinearGradient } from 'expo-linear-gradient'
+import React from 'react'
+import { Dimensions, StyleSheet, Text, View, ViewStyle } from 'react-native'
+import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder'
+
+export interface Props {
+  style?: ViewStyle
+  visible: boolean
+  header: string
+  content?: string
+  potentialWidth?: number
+  potentialLines?: number
+}
+
+const InstanceInfo = React.memo(
+  ({
+    style,
+    visible,
+    header,
+    content,
+    potentialWidth,
+    potentialLines = 1
+  }: Props) => {
+    const { theme } = useTheme()
+    const ShimmerPlaceholder = createShimmerPlaceholder(LinearGradient)
+
+    return (
+      <View style={[styles.base, style]}>
+        <Text style={[styles.header, { color: theme.primary }]}>{header}</Text>
+        <ShimmerPlaceholder
+          visible={visible}
+          stopAutoRun
+          width={
+            potentialWidth
+              ? potentialWidth * StyleConstants.Font.Size.M
+              : Dimensions.get('screen').width -
+                StyleConstants.Spacing.Global.PagePadding * 4
+          }
+          height={StyleConstants.Font.LineHeight.M * potentialLines}
+          shimmerColors={[theme.shimmerDefault, theme.shimmerHighlight, theme.shimmerDefault]}
+        >
+          {content ? (
+            <ParseHTML
+              content={content}
+              size={'M'}
+              numberOfLines={5}
+              expandHint='介绍'
+            />
+          ) : null}
+        </ShimmerPlaceholder>
+      </View>
+    )
+  }
+)
+
+const styles = StyleSheet.create({
+  base: {
+    flex: 1,
+    marginTop: StyleConstants.Spacing.M,
+    paddingLeft: StyleConstants.Spacing.Global.PagePadding,
+    paddingRight: StyleConstants.Spacing.Global.PagePadding
+  },
+  header: {
+    ...StyleConstants.FontStyle.S,
+    fontWeight: StyleConstants.Font.Weight.Bold,
+    marginBottom: StyleConstants.Spacing.XS
+  }
+})
+
+export default InstanceInfo