feat: 新增搜索结果页

client/src/common/api.js

@@ -56,7 +56,7 @@ exports.addDiscuss = (data) => {
 }
 // 帖子
 exports.searchTopic = (data) => {
-    return instance.post('/topic/discuss/add', data);
+    return instance.get('/topic/search', data);
 }
 
 

client/src/components/nav/index.js

@@ -5,9 +5,27 @@ import { Menu, Dropdown, notification } from 'antd';
 import API from '@common/api'
 import { withRouter } from 'react-router'
 import PropTypes from "prop-types";
+import { connect } from "react-redux";
 
 
 
+@connect(
+    store => {
+        return {
+            userInfo: store.userInfo
+        }
+    },
+    dispatch => {
+        return {
+            addSearchInfo: info => {
+                dispatch({
+                    type: 'ADD_SEARCH_INFO',
+                    info: info
+                })
+            }
+        };
+    }
+)
 class Nav extends React.Component{
     constructor(props){
         super(props)
@@ -89,11 +107,18 @@ class Nav extends React.Component{
         })
     }
 
-    searchContent = (event) => {
+    searchContent = async (event) => {
         if (event.key === 'Enter') {
+            let search = this.state.search
+            // 获取用户帖子列表
+            let response = await API.searchTopic({ 
+                params: {search}
+            })
+            this.props.addSearchInfo(response.data)
 
+
             let path = {
-                pathname: `/search/${this.state.search}`,
+                pathname: `/search/${search}`,
                 // params: data
             }
             this.context.router.history.push(path)

client/src/pages/about/index.js

@@ -40,7 +40,7 @@ class Detail extends React.Component {
     async componentDidMount () {
         let params = this.props.match.params || {}
         let userId = params.userId
-
+        console.log(this.props)
         let response = await API.getUserInfo({params: {userId}})
         let userInfo = response.data
 

client/src/pages/index.js

@@ -55,8 +55,8 @@ class Intagram extends React.Component {
                     <Route path="/about/:userId" component={About} />
                     <Route path="/about" component={About} />
                     <Route path="/accounts" component={Accounts}/>
+                    <Route path="/search/:content" component={Search}/>
                     <Route path="/search" component={Search}/>
-                    <Route path="/search/:search" component={Search}/>
                     <Route component={NotFoundPage} />
                 </Switch>
             </Router>

client/src/pages/search/components/topicList/index.js

@@ -16,13 +16,13 @@ import { connect } from 'react-redux'
         return {
             addComments: info => {
                 dispatch({
-                    type: 'ADD_PERSONAL_COMMENT',
+                    type: 'ADD_SEARCH_COMMENT',
                     info
                 })
             },
             topicLikeFn: info => {
                 dispatch({
-                    type: 'TOPIC_PERSONAL_LIKE',
+                    type: 'TOPIC_SEARCH_LIKE',
                     info
                 })
             }

client/src/pages/search/index.js

@@ -3,83 +3,63 @@ import Style from './index.scss'
 import Nav from '../../components/nav/index.js'
 import TopicList from './components/topicList/index.js'
 import Footer from '@components/footer'
-import API from '@common/api'
 import { connect } from "react-redux";
 import { withRouter } from 'react-router'
 
 @connect(
     store => {
         return {
-            personalInfo: store.personalInfo,
+            searchInfo: store.searchInfo,
             userInfo: store.userInfo
         }
-    },
-    dispatch => {
-        return {
-            addPersonalInfo: info => {
-                dispatch({
-                    type: 'ADD_PERSONAL_INFO',
-                    info: info
-                })
-            }
-        };
     }
 )
 class Detail extends React.Component {
     state = {
         userInfo: {},
-        hasFollow: false,
-        isSelf: true
+        search: '',
+        baseImgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543650526308&di=1029a2eec54305da24c39a978050f385&imgtype=0&src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F45%2F73%2Fde%2F4573de61472198a6d2b03a8ac122ccec.jpg'
     }
 
     constructor(props) {
         super(props);
     }
-
-    async componentDidMount () {
+    
+    componentDidMount () {
         let params = this.props.match.params || {}
-        let userId = params.userId
-
-        let response = await API.getUserInfo({params: {userId}})
-        let userInfo = response.data
-
+        let search = params.content
         this.setState({
-            userInfo
+            search
         })
-
-        // 获取帖子列表
-        this.initBaseData(userId)
     }
-
-    async initBaseData(userId) {
-        let params = {
-            userId
+
+    setBaseImg = () => {
+        try {
+            let baseImgUrl = this.props.searchInfo[0].topic.topicImgList[0]
+            return baseImgUrl
+        } catch(err) {
+            return this.state.baseImgUrl
         }
-
-        // 获取用户帖子列表
-        let response = await API.getPersonalInfo({ params })
-        let {isSelf, hasFollow} = response.data
-        this.props.addPersonalInfo(response.data)
-        this.setState({
-            isSelf,
-            hasFollow
-        })
     }
 
     render() {
-        let {topic} = this.props.personalInfo
         return (
             <main>
                 <Nav />
                 <div className="page-container">
                     <div className={Style['search-container']}>
+                        {
+                            this.state.search?
                             <header>
-                                <img className="avatar" height="150px" width="150px"/>
-                                <span className="container">#内容</span>
+                                <img className="avatar" src={this.setBaseImg()} height="150px" width="150px"/>
+                                <span className="container">#{this.state.search}</span>
                             </header>
-                            <h2 className="title">热门帖子</h2>
-                            <TopicList topicList={topic.topicList}/>
-                            <Footer />
+                            : ''
+                        }
+
+                        <h2 className="title">热门帖子</h2>
+                        <TopicList topicList={this.props.searchInfo}/>
+                        <Footer />
                     </div>
                 </div>
             </main>

client/src/store/reducers/index.js

@@ -2,8 +2,10 @@ import { combineReducers } from 'redux'
 import userInfo from './userInfo'
 import topicList from './topicList'
 import personalInfo from './personalInfo'
+import searchInfo from './searchInfo'
 export default combineReducers({
     userInfo,
     topicList,
-    personalInfo
+    personalInfo,
+    searchInfo
 })

client/src/store/reducers/searchInfo.js

@@ -0,0 +1,49 @@
+const defaultValue = []
+
+const searchInfo = (state = defaultValue, action) => {
+    switch (action.type) {
+        case 'ADD_SEARCH_INFO':
+            return [...state, ...action.info]
+        case 'ADD_SEARCH_COMMENT':
+            return addComments(state,action.info)
+        case 'TOPIC_SEARCH_LIKE':
+            return topicLike(state,action.info)
+        default:
+            return state
+    }
+}
+
+
+// 点赞
+function topicLike (state, {
+    index, topicLikeCounts, topicLike
+}) {
+    let newArray = [...state]
+    let targetTopic = newArray[index].topic
+    Object.assign(
+        targetTopic,
+        {
+            topicLikeCounts,
+            topicLike
+        }
+    )
+    return newArray
+}
+
+
+//  添加评论
+function addComments (state, {
+    index, replyContent, replyName
+}) {
+    let newArray = [...state]
+    let sourceComment = {
+        replyName,
+        replyContent
+    }
+
+    newArray[index].discuss.push(sourceComment)
+    return newArray
+}
+
+
+export default searchInfo

service/app/controller/topic.ts

@@ -138,7 +138,7 @@ class TopicController extends Controller {
         const Op = this.app.Sequelize.Op
         let topics = await this.ctx.service.topic.queryTopicList({
             topicTitle: {
-                [Op.like]: search
+                [Op.regexp]: search
             }
         })
         let topicList: any = [];