add：本周本月历史上的今天

src/pages/Home/HotTopic.tsx

@@ -0,0 +1,54 @@
+import React, { useState, useEffect } from 'react'
+import { navigate } from '@reach/router'
+import { css } from 'emotion'
+
+import { List, ListItem, ListItemText, ListItemIcon, Divider } from '@material-ui/core'
+import Whatshot from '@material-ui/icons/Whatshot'
+
+import LoadingCircle from '@/components/LoadingCircle'
+import HotTopicItem from '../HotTopic/HotTopicItem'
+
+import { getHotTopics } from '@/services/topic'
+import { IHotTopic } from '@cc98/api'
+
+const hotTopicList = css`
+  && {
+    padding-left: 15px;
+  }
+`
+
+export default () => {
+  const [topics, setTopics] = useState<IHotTopic[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+
+  useEffect(() => {
+    ; (async () => {
+      setIsLoading(true)
+      const res = await getHotTopics()
+
+      res.fail().succeed(hotTopics => {
+        setTopics(hotTopics)
+        setIsLoading(false)
+      })
+    })()
+  }, [])
+
+  if (isLoading) {
+    return <LoadingCircle />
+  }
+
+  return (
+    <List className={hotTopicList}>
+      <ListItem>
+        <ListItemIcon>
+          <Whatshot />
+        </ListItemIcon>
+        <ListItemText primary="热门话题" />
+      </ListItem>
+      <Divider />
+      {topics.map(info => (
+        <HotTopicItem key={info.id} info={info} click={() => navigate(`/topic/${info.id}`)} />
+      ))}
+    </List>
+  )
+}

src/pages/Home/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import HotTopics from '../HotTopic'
+import HotTopics from './HotTopic'
 import RecommendReadings from './Recommend'
 
 const Home: React.FunctionComponent = () => (

src/pages/HotTopic/index.tsx

@@ -2,14 +2,22 @@ import React, { useState, useEffect } from 'react'
 import { navigate } from '@reach/router'
 import { css } from 'emotion'
 
-import { List, ListItem, ListItemText, ListItemIcon, Divider } from '@material-ui/core'
+import { List, ListItem, ListItemText, ListItemIcon, Divider, Tab, Tabs } from '@material-ui/core'
 import Whatshot from '@material-ui/icons/Whatshot'
 
 import LoadingCircle from '@/components/LoadingCircle'
 import HotTopicItem from './HotTopicItem'
 
-import { getHotTopics } from '@/services/topic'
+import {
+  getHotTopics,
+  getMonthlyHotTopics,
+  getWeeklyHotTopics,
+  getHistoryHotTopics,
+} from '@/services/topic'
 import { IHotTopic } from '@cc98/api'
+import { FetchError } from '@/utils/fetch'
+import { Try } from '@/utils/fp/Try'
+import { getBoardNameById } from '@/services/board'
 
 const hotTopicList = css`
   && {
@@ -20,9 +28,9 @@ const hotTopicList = css`
 export default () => {
   const [topics, setTopics] = useState<IHotTopic[]>([])
   const [isLoading, setIsLoading] = useState(false)
-
+  const [current, setCurrent] = useState('day')
   useEffect(() => {
-    ; (async () => {
+    ;(async () => {
       setIsLoading(true)
       const res = await getHotTopics()
 
@@ -37,18 +45,65 @@ export default () => {
     return <LoadingCircle />
   }
 
+  // tslint:disable-next-line:no-any
+  const handleChange = async (e: any, value: string) => {
+    setCurrent(value)
+    let res: Try<IHotTopic[], FetchError> | null = null
+    switch (value) {
+      case 'day':
+        res = await getHotTopics()
+        break
+      case 'week':
+        res = await getWeeklyHotTopics()
+        break
+      case 'month':
+        res = await getMonthlyHotTopics()
+        break
+      case 'history':
+        res = await getHistoryHotTopics()
+        break
+    }
+    if (res) {
+      res.fail().succeed(async data => {
+        const res = await Promise.all(
+          data.map(async t => {
+            t.boardName = await getBoardNameById(t.boardId)
+
+            return t
+          })
+        )
+        setTopics(res)
+      })
+    }
+  }
+
   return (
-    <List className={hotTopicList}>
-      <ListItem>
-        <ListItemIcon>
-          <Whatshot />
-        </ListItemIcon>
-        <ListItemText primary="热门话题" />
-      </ListItem>
-      <Divider />
-      {topics.map(info => (
-        <HotTopicItem key={info.id} info={info} click={() => navigate(`/topic/${info.id}`)} />
-      ))}
-    </List>
+    <>
+      <Tabs
+        value={current}
+        onChange={handleChange}
+        indicatorColor="primary"
+        textColor="primary"
+        fullWidth
+      >
+        <Tab value="day" label="今日热门" />
+        <Tab value="week" label="本周热门" />
+        <Tab value="month" label="本月热门" />
+        <Tab value="history" label="历史上的今天" />
+      </Tabs>
+
+      <List className={hotTopicList}>
+        <ListItem>
+          <ListItemIcon>
+            <Whatshot />
+          </ListItemIcon>
+          <ListItemText primary="热门话题" />
+        </ListItem>
+        <Divider />
+        {topics.map(info => (
+          <HotTopicItem key={info.id} info={info} click={() => navigate(`/topic/${info.id}`)} />
+        ))}
+      </List>
+    </>
   )
 }

src/services/board.ts

@@ -15,7 +15,7 @@ export async function getBoardsInfo() {
   }
 
   const res = await GET<IBoardGroup[]>('/board/all')
-  res.succeed(data => {
+  res.fail().succeed(data => {
     setLocalStorage('boardsInfo', data, 3600 * 24 * 7)
     let childBoard: IBoard[] = []
     for (const baseBoard of data) {

src/services/topic.ts

@@ -86,12 +86,33 @@ export function searchTopics(keyword: string, from: number) {
 }
 
 /**
- * 获取十大
+ * 获取热门
  */
 export function getHotTopics() {
   return GET<IHotTopic[]>('topic/hot')
 }
 
+/**
+ * 获取本周热门
+ */
+export function getWeeklyHotTopics() {
+  return GET<IHotTopic[]>('topic/hot-weekly')
+}
+
+/**
+ * 获取本月热门
+ */
+export function getMonthlyHotTopics() {
+  return GET<IHotTopic[]>('topic/hot-monthly')
+}
+
+/**
+ * 获取历史热门
+ */
+export function getHistoryHotTopics() {
+  return GET<IHotTopic[]>('topic/hot-history')
+}
+
 /**
  * 获取一个用户近期发的帖子
  */

src/version.ts

@@ -2,4 +2,4 @@
  * 版本号
  */
 
-export default 'v0.12.4-alpha'
+export default 'v0.12.5-alpha'