feat: add Pagination component

src/apis/search.ts

@@ -1,5 +1,6 @@
 import axios from 'helpers/axios'
 import { ISearchHot, ISearchSuggestRequest, ISearchSuggestResponse, ISearchRequest, SEARCH_TYPE } from './types/search'
+import { PAGE_SIZE } from 'constants/pagination'
 
 type SearchHotFn = () => Promise<ISearchHot[]>
 type SearchSuggestFn = (params: ISearchSuggestRequest) => Promise<ISearchSuggestResponse>
@@ -26,7 +27,7 @@ const searchSuggest: SearchSuggestFn = async ({ keywords }) => {
   return response.result
 }
 
-const search: SearchFn = async ({ keywords, type = SEARCH_TYPE.MUSIC, limit = 30, offset = 0 }) => {
+const search: SearchFn = async ({ keywords, type = SEARCH_TYPE.MUSIC, limit = PAGE_SIZE, offset = 0 }) => {
   const response = await axios({
     method: 'get',
     url: '/search',

src/apis/songlist.ts

@@ -19,7 +19,8 @@ const getSonglistDetail: GetSonglistDetailFn = async (id) => {
       name: item.name,
       picUrl: item.al.picUrl,
       artists: item.ar,
-      duration: item.dt
+      duration: item.dt,
+      album: item.al
     })
   })
 

src/apis/types/business.ts

@@ -13,21 +13,21 @@ export interface IArtist {
 }
 
 export interface IAlbum {
-  artist: IArtist,
+  artist?: IArtist,
   artists?: IArtist[],
   blurPicUrl?: string,
   copyrightId?: number,
   description?: string,
   id: number,
-  mark: number,
+  mark?: number,
   name: string,
-  picId: number,
+  picId?: number,
   picUrl: string,
-  publishTime: number,
-  size: number,
-  status: number,
-  subType: string,
-  type: string
+  publishTime?: number,
+  size?: number,
+  status?: number,
+  subType?: string,
+  type?: string
 }
 
 export interface IMV {
@@ -66,6 +66,7 @@ export interface IMyMusic {
   artists: IArtist[],
   duration: number,
   picUrl?: string,
+  album?: IAlbum,
   [key: string]: any
 }
 

src/components/Layout/Header/Searcher/SearchResult/index.tsx

@@ -50,7 +50,7 @@ const SearchResult: React.FC<IProps> = ({ data }) => {
     albums: {
       title: '专辑',
       icon: 'headset',
-      renderLabel: (item: IAlbum) => `${item.name} - ${item.artist.name}`
+      renderLabel: (item: IAlbum) => `${item.name} - ${item?.artist?.name}`
     },
     artists: {
       title: '歌手',

src/components/Pagination/index.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { Icon } from '@blueprintjs/core'
+import cn from 'classnames'
+
+import { noop } from 'helpers/fn'
+import { PAGE, PAGE_SIZE, TOTAL } from 'constants/pagination'
+import styles from './style.module.css'
+
+interface IProps {
+  total: number,
+  page?: number,
+  pageSize?: number,
+  onPageChange: (page: number) => void
+}
+
+const { useState } = React
+
+const Pagination: React.FC<IProps> = ({ total = TOTAL, page = PAGE, pageSize = PAGE_SIZE, onPageChange = noop }) => {
+  const [currentPage, setCurrentPage] = useState(page)
+  const pageCount = Math.ceil(total / pageSize)
+
+  const isFirstPage = currentPage === 1
+  const isLastPage = currentPage === pageCount
+
+  const handleItemClick = (page: number) => {
+    setCurrentPage(page)
+    onPageChange(page)
+  }
+
+  const handlePrev = () => {
+    if (isFirstPage) {
+      return
+    }
+
+    handleItemClick(currentPage - 1)
+  }
+
+  const handleNext = () => {
+    if (isLastPage) {
+      return
+    }
+
+    handleItemClick(currentPage + 1)
+  }
+
+  const renderPages = () => {
+    const result = []
+    for (let i = 0; i < pageCount; i++) {
+      const page = i + 1
+
+      result.push(
+        <div
+          key={i}
+          className={cn(styles.item, currentPage === page && styles.active)}
+          onClick={() => handleItemClick(page)}
+        >
+          {i + 1}
+        </div>
+      )
+    }
+    return result
+  }
+
+  if (total < pageSize) {
+    return null
+  }
+
+  return (
+    <div className={styles.root}>
+      <div className={cn(styles.item, isFirstPage && styles.disabled)} onClick={handlePrev}>
+        <Icon icon='chevron-left' />
+      </div>
+      <div className={styles.pages}>{renderPages()}</div>
+      <div className={cn(styles.item, isLastPage && styles.disabled)} onClick={handleNext}>
+        <Icon icon='chevron-right' />
+      </div>
+    </div>
+  )
+}
+
+export default Pagination

src/components/Pagination/style.module.css

@@ -0,0 +1,43 @@
+@value colors: "~styles/colors.module.css";
+@value red, tipsColor, nameColor, bgColor from colors;
+
+.root {
+  display: flex;
+  font-size: 0.9em;
+}
+
+.pages {
+  display: flex;
+}
+
+.item {
+  padding: 5px 0;
+  width: 30px;
+  margin-right: 3px;
+  border-radius: 3px;
+  border: 1px solid tipsColor;
+  color: nameColor;
+  text-align: center;
+  cursor: pointer;
+
+  &:hover {
+    background-color: bgColor;
+  }
+}
+
+.active {
+  border: 1px solid red;
+  background-color: red;
+  color: #fff;
+  &:hover {
+    background-color: red;
+  }
+}
+
+.disabled {
+  color: tipsColor;
+  cursor: default;
+  &:hover {
+    background-color: #fff;
+  }
+}

src/constants/pagination.ts

@@ -0,0 +1,3 @@
+export const PAGE: number = 1
+export const PAGE_SIZE: number = 100
+export const TOTAL: number = 0

src/pages/Search/index.tsx

@@ -2,12 +2,14 @@ import React from 'react'
 import { Spinner } from '@blueprintjs/core'
 import cn from 'classnames'
 
-import MusicList from './MusicList'
+import MusicList from 'components/MusicList'
+import Pagination from 'components/Pagination'
 
 import useQuery from 'hooks/useQuery'
 import useAsyncFn from 'hooks/useAsyncFn'
 import searchApis from 'apis/search'
 import { SEARCH_TYPE } from 'apis/types/search'
+import { PAGE_SIZE, PAGE } from 'constants/pagination'
 import styles from './style.module.css'
 
 const { useEffect, useState } = React
@@ -60,6 +62,7 @@ const TABS: IDictionary<ITab> = {
 
 const Search = () => {
   const { keyword } = useQuery()
+  const [page, setPage] = useState(PAGE)
   const [activeTab, setActiveTab] = useState(TABS.MUSIC.tabKey)
   const { unit, key, tab, searchType } = TABS[activeTab]
 
@@ -77,12 +80,23 @@ const Search = () => {
     searchFn({ keywords: keyword, type: searchType })
   }
 
+  const handlePageChange = (page: number) => {
+    setPage(page)
+    searchFn({
+      keywords: keyword,
+      type: searchType,
+      offset: (page - 1) * PAGE_SIZE
+    })
+  }
+
+  const total = result?.[`${key}Count`] || 0
+
   return (
     <div className={styles.root}>
       <div className={styles.header}>
         <div className={styles.title}>
           <span className={styles.keyword}>{keyword}</span>
-          <span className={styles.count}>找到 {result?.[`${key}Count`] || 0} {unit}{tab}</span>
+          <span className={styles.count}>找到 {total} {unit}{tab}</span>
         </div>
         <div className={styles.tabs}>
           {Object.keys(TABS).map(key => {
@@ -101,12 +115,21 @@ const Search = () => {
 
       <div className={styles.content}>
         {loading ? <Spinner className={styles.spinner} /> : (
-          activeTab === TABS.MUSIC.tabKey && (
-            <MusicList
-              data={result?.songs}
-              total={result?.songCount}
-            />
-          )
+          <div>
+            {activeTab === TABS.MUSIC.tabKey && (
+              <MusicList
+                data={result?.songs}
+              />
+            )}
+
+            <div className='pagination'>
+              <Pagination
+                page={page}
+                total={total}
+                onPageChange={handlePageChange}
+              />
+            </div>
+          </div>
         )}
       </div>
     </div>

src/pages/Search/style.module.css

@@ -2,6 +2,8 @@
 @value borderColor, nameColor, nameHoverColor, tipsHoverColor from colors;
 
 .root {
+  height: 100%;
+  overflow: hidden;
 }
 
 .header {
@@ -43,6 +45,9 @@
 }
 
 .content {
+  height: calc(100% - 96px);
+  overflow: scroll;
+
   .spinner {
     margin-top: 100px
   }

src/styles/global.module.css

@@ -39,3 +39,9 @@ button {
 :global(.spinner) {
   margin-top: 100px
 }
+
+:global(.pagination) {
+  margin: 40px 0;
+  display: flex;
+  justify-content: center;
+}