diff --git a/src/screens/Me/Root/Login.tsx b/src/screens/Me/Root/Login.tsx index bec7a7fd..d12794a9 100644 --- a/src/screens/Me/Root/Login.tsx +++ b/src/screens/Me/Root/Login.tsx @@ -31,20 +31,21 @@ import { ButtonRow } from '@components/Button' import ParseContent from '@root/components/ParseContent' import ShimmerPlaceholder from 'react-native-shimmer-placeholder' import { Feather } from '@expo/vector-icons' +import { applicationFetch } from '@root/utils/fetches/applicationFetch' const Login: React.FC = () => { const { t } = useTranslation('meRoot') const { theme } = useTheme() const navigation = useNavigation() const dispatch = useDispatch() - const [instance, setInstance] = useState('') + const [instanceDomain, setInstanceDomain] = useState() const [applicationData, setApplicationData] = useState<{ clientId: string clientSecret: string }>() - const { isSuccess, isFetching, refetch, data } = useQuery( - ['Instance', { instance }], + const instanceQuery = useQuery( + ['Instance', { instanceDomain }], instanceFetch, { enabled: false, @@ -52,49 +53,25 @@ const Login: React.FC = () => { } ) - const onChangeText = useCallback( - debounce( - text => { - setInstance(text) - setApplicationData(undefined) - if (text) { - refetch() - } - }, - 1000, - { - trailing: true - } - ), - [] + const applicationQuery = useQuery( + ['Application', { instanceDomain }], + applicationFetch, + { + enabled: false, + retry: false + } ) - - const createApplication = async () => { - if (applicationData) { - return Promise.resolve() - } - const formData = new FormData() - formData.append('client_name', 'test_dudu') - formData.append('redirect_uris', 'exp://127.0.0.1:19000') - formData.append('scopes', 'read write follow push') - - const res = await client({ - method: 'post', - instance: 'remote', - instanceDomain: instance, - url: `apps`, - body: formData - }) - if (res.body?.client_id.length > 0) { + useEffect(() => { + if ( + applicationQuery.data?.client_id.length && + applicationQuery.data?.client_secret.length + ) { setApplicationData({ - clientId: res.body.client_id, - clientSecret: res.body.client_secret + clientId: applicationQuery.data.client_id, + clientSecret: applicationQuery.data.client_secret }) - return Promise.resolve() - } else { - return Promise.reject() } - } + }, [applicationQuery.data?.client_id]) const [request, response, promptAsync] = AuthSession.useAuthRequest( { @@ -104,10 +81,9 @@ const Login: React.FC = () => { redirectUri: 'exp://127.0.0.1:19000' }, { - authorizationEndpoint: `https://${instance}/oauth/authorize` + authorizationEndpoint: `https://${instanceDomain}/oauth/authorize` } ) - useEffect(() => { ;(async () => { if (request?.clientId) { @@ -115,7 +91,6 @@ const Login: React.FC = () => { } })() }, [request]) - useEffect(() => { ;(async () => { if (response?.type === 'success') { @@ -131,16 +106,31 @@ const Login: React.FC = () => { } }, { - tokenEndpoint: `https://${instance}/oauth/token` + tokenEndpoint: `https://${instanceDomain}/oauth/token` } ) - dispatch(updateLocal({ url: instance, token: accessToken })) + dispatch(updateLocal({ url: instanceDomain, token: accessToken })) navigation.navigate('Screen-Local-Root') } })() }, [response]) - const infoRef = createRef() + const onChangeText = useCallback( + debounce( + text => { + setInstanceDomain(text) + setApplicationData(undefined) + if (text) { + instanceQuery.refetch() + } + }, + 1000, + { + trailing: true + } + ), + [] + ) const instanceInfo = useCallback( ({ @@ -152,17 +142,13 @@ const Login: React.FC = () => { content: string parse?: boolean }) => { - if (isFetching) { - Animated.loop(infoRef.current?.getAnimated()!).start() - } - return ( {header} { ) }, - [data?.uri, isFetching] + [instanceQuery.data?.uri] ) return ( @@ -208,29 +194,41 @@ const Login: React.FC = () => { autoCapitalize='none' autoCorrect={false} autoFocus - clearButtonMode='unless-editing' + clearButtonMode='never' keyboardType='url' textContentType='URL' - onSubmitEditing={async () => - isSuccess && data && data.uri && (await createApplication()) + onSubmitEditing={() => + instanceQuery.isSuccess && + instanceQuery.data && + instanceQuery.data.uri && + applicationQuery.refetch() } placeholder={t('content.login.server.placeholder')} placeholderTextColor={theme.secondary} returnKeyType='go' /> await createApplication()} - {...(isFetching + onPress={() => { + applicationQuery.refetch() + }} + {...(instanceQuery.isFetching || applicationQuery.isFetching ? { icon: 'loader' } : { text: t('content.login.button') as string })} - disabled={!data?.uri} + disabled={ + !instanceQuery.data?.uri || + instanceQuery.isFetching || + applicationQuery.isFetching + } /> - {instanceInfo({ header: '实例名称', content: data?.title })} + {instanceInfo({ + header: '实例名称', + content: instanceQuery.data?.title + })} {instanceInfo({ header: '实例介绍', - content: data?.short_description, + content: instanceQuery.data?.short_description, parse: true })} @@ -241,7 +239,7 @@ const Login: React.FC = () => { 用户总数 { - {data?.stats?.user_count} + {instanceQuery.data?.stats?.user_count} @@ -260,7 +258,7 @@ const Login: React.FC = () => { 嘟嘟总数 { - {data?.stats?.status_count} + {instanceQuery.data?.stats?.status_count} @@ -279,7 +277,7 @@ const Login: React.FC = () => { 连结总数 { - {data?.stats?.domain_count} + {instanceQuery.data?.stats?.domain_count} diff --git a/src/utils/fetches/applicationFetch.ts b/src/utils/fetches/applicationFetch.ts new file mode 100644 index 00000000..9804791d --- /dev/null +++ b/src/utils/fetches/applicationFetch.ts @@ -0,0 +1,20 @@ +import client from '@api/client' + +export const applicationFetch = async ( + key: string, + { instanceDomain, body }: { instanceDomain: string; body: FormData } +) => { + const formData = new FormData() + formData.append('client_name', 'test_dudu') + formData.append('redirect_uris', 'exp://127.0.0.1:19000') + formData.append('scopes', 'read write follow push') + + const res = await client({ + method: 'post', + instance: 'remote', + instanceDomain, + url: `apps`, + body: formData + }) + return Promise.resolve(res.body) +} diff --git a/src/utils/fetches/instanceFetch.ts b/src/utils/fetches/instanceFetch.ts index 50ef0b87..828705cc 100644 --- a/src/utils/fetches/instanceFetch.ts +++ b/src/utils/fetches/instanceFetch.ts @@ -2,12 +2,12 @@ import client from '@api/client' export const instanceFetch = async ( key: string, - { instance }: { instance: string } + { instanceDomain }: { instanceDomain: string } ) => { const res = await client({ method: 'get', instance: 'remote', - instanceDomain: instance, + instanceDomain, url: `instance` }) return Promise.resolve(res.body)