index.js

import React, { PureComponent } from 'react';
import SearchHead from './searchHead'
import Tag from '@common/Tag/index.js'
import { http } from '@/utils'
import './index.scss';
import { Link } from 'react-router-dom'
import Loading from '@/common/Loading'


class Search extends PureComponent {

    state = {
        searchHistory: JSON.parse(localStorage.getItem('searchHistory')) || [],
        hot_words: [],
        defaultWord: '',
        searchList: [],
        value: '',
        isLoading: true
    }

    async componentDidMount() {
        const res = await http.get(`${API['search-api']}/search_hot_word`);
        const { errno, data } = res.data; 
        if (errno === 0) {
            this.setState({
                hot_words: data.info.hot_words,
                value: data.info.recommend_word,
                isLoading: false
            })
        }
    }

    clearHistory = () => {
        localStorage.setItem('searchHistory', null)
        this.setState({
            searchHistory: []
        })
    }

    handleChange = value => {
        this.setState({value})
    }

    handleSearch = () => {
        const { defaultWord, value } = this.state;
        const val = value || defaultWord;
        val && this.props.history.push(`/search-result?word=${encodeURIComponent(val)}`)
    }

    storeHistory = keyword => {
        const { searchHistory } = this.state;
        const data = searchHistory.some(item => item === keyword)? searchHistory : searchHistory.concat([keyword]);
        localStorage.setItem('searchHistory', JSON.stringify(data));
    }


    render() {
        const {searchHistory} = this.state
        return (
            <div className="search-page">
                <SearchHead
                    searchHistory={this.state.searchHistory}
                    value={this.state.value}
                    handleChange={this.handleChange}
                    handleSearch={this.handleSearch}
                />
                <Loading isLoading={this.state.isLoading}>
                    <div className="search-main">
                        {
                            searchHistory.length > 0 &&
                            <div className="search-land">
                                <div className='search-history'>
                                    <span>最近搜索</span>
                                    <i className="iconfont iconiconfront-56" onClick={this.clearHistory}/>
                                </div>
                                <div className="search-tag">
                                    {

                                        searchHistory.map((v, i) => {
                                            return (
                                                <Link
                                                    key={i}
                                                    to={`/search-result?word=${encodeURIComponent(v)}`}
                                                >
                                                    <Tag name={"tagLately"}>{v}</Tag>
                                                </Link>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                        }
                        <div className="search-land search-hot">
                            <label className={'search-history'}>
                                <span>热门搜索</span>
                            </label>
                            <div className="search-tag">
                                {
                                    this.state['hot_words'].length > 0 ?
                                        this.state['hot_words'].map((v, i) => {
                                            return (
                                                <Link key={i}
                                                      to={`/search-result?word=${encodeURIComponent(v)}`}
                                                      onClick={this.storeHistory.bind(this, v)}
                                                >
                                                    <Tag name={"tagHot"}>{v}</Tag>
                                                </Link>
                                            )
                                        })
                                        : <div style={{textAlign: 'center', padding: '20px'}}>暂无热门</div>
                                }
                                
                            </div>
                        </div>
                    </div>
                </Loading>

            </div>
        )
    }

}

export default Search;