forum

miniprogram/src/pages/forum/index.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react'
-import Taro, { usePullDownRefresh, useReachBottom } from '@tarojs/taro'
+import React, { useState, useEffect, useRef } from 'react'
+import Taro, { usePullDownRefresh, useReachBottom, useDidShow } from '@tarojs/taro'
 import { View, Text, Image, Swiper, SwiperItem, ScrollView } from '@tarojs/components'
 import { AtSearchBar, AtTabs, AtIcon, AtActivityIndicator } from 'taro-ui'
 import { getTopics, getAnnouncements, getStarUsers } from '../../api'
@@ -14,6 +14,7 @@ const ForumList = () => {
   const [page, setPage] = useState(1)
   const [searchText, setSearchText] = useState('')
   const [currentTab, setCurrentTab] = useState(0)
+  const isMounted = useRef(false)
   
   const categories = [
     { title: '全部话题', key: 'all' },
@@ -45,8 +46,11 @@ const ForumList = () => {
       const currentPage = reset ? 1 : page
       const params: any = {
         page: currentPage,
-        search: searchText,
-        category: categories[currentTab].key !== 'all' ? categories[currentTab].key : undefined
+        search: searchText
+      }
+      
+      if (categories[currentTab].key !== 'all') {
+        params.category = categories[currentTab].key
       }
 
       const res = await getTopics(params)
@@ -74,9 +78,18 @@ const ForumList = () => {
     }
   }
 
-  useEffect(() => {
+  useDidShow(() => {
     fetchList(true)
     fetchExtraData()
+  })
+
+  useEffect(() => {
+    if (!isMounted.current) {
+      isMounted.current = true
+      return
+    }
+    fetchList(true)
+    // fetchExtraData is covered by useDidShow usually, but if tab change needs it? likely not.
   }, [currentTab])
 
   usePullDownRefresh(() => {
@@ -119,6 +132,12 @@ const ForumList = () => {
     })
   }
 
+  const navigateToActivity = () => {
+    Taro.navigateTo({
+      url: '/subpackages/forum/activity/index'
+    })
+  }
+
   const getCategoryLabel = (cat) => {
       const map = {
           'help': '求助',
@@ -159,6 +178,10 @@ const ForumList = () => {
                 <AtIcon value='add' size='16' color='#fff' />
                 <Text style={{marginLeft: '4px'}}>发布新帖</Text>
             </View>
+            <View className='create-btn' onClick={navigateToActivity} style={{marginLeft: '10px', background: 'rgba(255,255,255,0.2)'}}>
+                <AtIcon value='calendar' size='16' color='#fff' />
+                <Text style={{marginLeft: '4px'}}>社区活动</Text>
+            </View>
         </View>
       </View>