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