xref: /MusicFree/src/pages/searchPage/components/historyPanel.tsx (revision b882a19d884fffa32f7c8cef31652b909dceaa0f) 
1import React, {useEffect, useState} from 'react';
2import {ScrollView, StyleSheet, View} from 'react-native';
3import rpx from '@/utils/rpx';
4import Loading from '@/components/base/loading';
5import {Chip} from 'react-native-paper';
6import useSearch from '../hooks/useSearch';
7import {addHistory, getHistory, removeHistory} from '../common/historySearch';
8import {useSetAtom} from 'jotai';
9import {
10    initSearchResults,
11    PageStatus,
12    pageStatusAtom,
13    queryAtom,
14    searchResultsAtom,
15} from '../store/atoms';
16import ThemeText from '@/components/base/themeText';
17
18export default function () {
19    const [history, setHistory] = useState<string[] | null>(null);
20    const search = useSearch();
21
22    const setQuery = useSetAtom(queryAtom);
23    const setPageStatus = useSetAtom(pageStatusAtom);
24    const setSearchResultsState = useSetAtom(searchResultsAtom);
25
26    useEffect(() => {
27        getHistory().then(setHistory);
28    }, []);
29
30    return (
31        <View style={style.wrapper}>
32            {history === null ? (
33                <Loading />
34            ) : (
35                <>
36                    <ThemeText
37                        fontSize="title"
38                        fontWeight="semibold"
39                        style={style.title}>
40                        历史记录
41                    </ThemeText>
42                    <ScrollView
43                        style={style.historyContent}
44                        contentContainerStyle={style.historyContentConainer}>
45                        {history.map(_ => (
46                            <Chip
47                                key={`search-history-${_}`}
48                                style={style.chip}
49                                onClose={async () => {
50                                    await removeHistory(_);
51                                    getHistory().then(setHistory);
52                                }}
53                                onPress={() => {
54                                    setSearchResultsState(initSearchResults);
55                                    search(_, 1);
56                                    addHistory(_);
57                                    setPageStatus(PageStatus.SEARCHING);
58                                    setQuery(_);
59                                }}>
60                                {_}
61                            </Chip>
62                        ))}
63                    </ScrollView>
64                </>
65            )}
66        </View>
67    );
68}
69
70const style = StyleSheet.create({
71    wrapper: {
72        width: rpx(750),
73        maxWidth: rpx(750),
74        flexDirection: 'column',
75        padding: rpx(24),
76        flex: 1,
77    },
78    title: {
79        width: '100%',
80        marginVertical: rpx(28),
81    },
82    historyContent: {
83        width: rpx(750),
84        flex: 1,
85    },
86    historyContentConainer: {
87        flexDirection: 'row',
88        flexWrap: 'wrap',
89    },
90    chip: {
91        flexGrow: 0,
92        marginRight: rpx(24),
93        marginBottom: rpx(24),
94    },
95});
96