diff --git a/src/screens/Shared/Search.tsx b/src/screens/Shared/Search.tsx index d6aea3b3..5896e96c 100644 --- a/src/screens/Shared/Search.tsx +++ b/src/screens/Shared/Search.tsx @@ -1,7 +1,214 @@ -import React from 'react' +import { Feather } from '@expo/vector-icons' +import { useNavigation } from '@react-navigation/native' +import { HeaderRight } from '@root/components/Header' +import { MenuHeader, MenuRow } from '@root/components/Menu' +import { searchFetch } from '@root/utils/fetches/searchFetch' +import { StyleConstants } from '@root/utils/styles/constants' +import { useTheme } from '@root/utils/styles/ThemeManager' +import { debounce } from 'lodash' +import React, { useCallback, useMemo, useState } from 'react' +import { SectionList, StyleSheet, Text, TextInput, View } from 'react-native' +import { useQuery } from 'react-query' const ScreenSharedSearch: React.FC = () => { - return <> + const navigation = useNavigation() + const { theme } = useTheme() + const [searchTerm, setSearchTerm] = useState() + const { isFetching, data, refetch } = useQuery( + ['Search', { term: searchTerm }], + searchFetch, + { enabled: false } + ) + const transformData = () => { + return data + ? Object.keys(data as Mastodon.Results) + .map(key => ({ + title: key, + // @ts-ignore + data: data[key] + })) + .sort((a, b) => { + if (!a.data.length) { + return 1 + } else if (!b.data.length) { + return -1 + } else { + return 0 + } + }) + : [] + } + + const onChangeText = useCallback( + debounce( + text => { + setSearchTerm(text) + if (text) { + refetch() + } + }, + 1000, + { + trailing: true + } + ), + [] + ) + + const listEmpty = useMemo( + () => ( + + + 输入关键词搜索用户、 + 话题标签或者 + 嘟文 + + + 高级搜索格式 + + + @username@domain + {' '} + 搜索用户 + + + #example + {' '}搜索话题标签 + + + URL + {' '}搜索指定嘟文 + + + URL + {' '}搜索指定用户 + + + ), + [] + ) + + return ( + <> + + + + + // instanceQuery.isSuccess && + // instanceQuery.data && + // instanceQuery.data.uri && + // applicationQuery.refetch() + // } + placeholder={'搜索些什么'} + placeholderTextColor={theme.secondary} + returnKeyType='go' + /> + + + navigation.goBack()} /> + + + item + index} + renderSectionHeader={({ section: { title } }) => ( + + )} + renderItem={({ item, section }) => { + switch (section.title) { + case 'accounts': + return {item.display_name || item.username} + case 'statuses': + return {item.id || 'empty'} + case 'hashtags': + return + default: + return null + } + }} + stickySectionHeadersEnabled + /> + + ) } +const styles = StyleSheet.create({ + base: { + flex: 1, + padding: StyleConstants.Spacing.Global.PagePadding + }, + searchBar: { + padding: StyleConstants.Spacing.Global.PagePadding, + paddingBottom: 0, + flexDirection: 'row', + alignItems: 'center' + }, + searchField: { + flex: 1, + flexDirection: 'row', + alignItems: 'center', + borderBottomWidth: 1.25 + }, + searchIcon: { + marginLeft: StyleConstants.Spacing.S + }, + searchCancel: { + paddingHorizontal: StyleConstants.Spacing.S, + marginLeft: StyleConstants.Spacing.S + }, + textInput: { + flex: 1, + padding: StyleConstants.Spacing.S, + fontSize: StyleConstants.Font.Size.M, + marginRight: StyleConstants.Spacing.S + }, + + emptyBase: { + marginTop: StyleConstants.Spacing.S, + marginLeft: + StyleConstants.Spacing.S + + StyleConstants.Spacing.M + + StyleConstants.Spacing.S + }, + emptyFontSize: { fontSize: StyleConstants.Font.Size.S }, + emptyFontBold: { + fontWeight: StyleConstants.Font.Weight.Bold + }, + emptyDefault: { + marginBottom: StyleConstants.Spacing.L + }, + emptyAdvanced: { + marginBottom: StyleConstants.Spacing.S + } +}) + export default ScreenSharedSearch