100 lines
2.5 KiB
TypeScript
100 lines
2.5 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import { search as SearchRepository } from '../api/repository'
|
|
import RepopositoryItem from './RepositoryItem'
|
|
import { RepositorySearchResultItem } from '../api/api'
|
|
import classes from './style/RepositoryList.module.css'
|
|
|
|
interface RepositoryListProps {
|
|
|
|
/** 搜索关键词 */
|
|
keyword:string
|
|
|
|
/** 最多允许缓存多少页 */
|
|
max_cache_page:number
|
|
}
|
|
|
|
/**
|
|
* 默认每一页多少条记录
|
|
* https://docs.github.com/en/rest/reference/repos
|
|
*/
|
|
const DEFAULT_PER_PAGE = 30
|
|
|
|
export default function RepositoryList (props:RepositoryListProps) {
|
|
/** 当前页 */
|
|
const [current_page, setCurrentPage] = useState(1)
|
|
|
|
/** 总页码 */
|
|
const [total_page, setTotalPage] = useState(0)
|
|
|
|
/** 上一页按钮是否可点击 */
|
|
const [prev_button_enable, setPrevButtonEnable] = useState(false)
|
|
|
|
/** 下一页按钮是否可点击 */
|
|
const [next_button_enable, setNextButtonEnable] = useState(false)
|
|
|
|
/** 接口加载中 */
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
const [list, setList] = useState<RepositorySearchResultItem[]>([])
|
|
|
|
async function search (page:number) {
|
|
setLoading(true)
|
|
try {
|
|
/* eslint-disable */
|
|
var result = await SearchRepository(props.keyword, page)
|
|
} catch (err) {
|
|
setLoading(false)
|
|
return
|
|
}
|
|
|
|
const _total_page = Math.ceil(result.total_count / DEFAULT_PER_PAGE)
|
|
setTotalPage(_total_page)
|
|
|
|
setCurrentPage(page)
|
|
|
|
setList(result.items)
|
|
|
|
setPrevButtonEnable(page>1)
|
|
setNextButtonEnable(page<_total_page)
|
|
|
|
setLoading(false)
|
|
}
|
|
|
|
useEffect(() => {
|
|
search(1)
|
|
}, [])
|
|
|
|
function onClickPrev(){
|
|
search(current_page-1)
|
|
}
|
|
|
|
function onClickNext(){
|
|
search(current_page+1)
|
|
}
|
|
|
|
return (
|
|
<div className={classes.wrapper}>
|
|
<div className={classes['list-wrapper']}>
|
|
<ul className={classes.list}>
|
|
{
|
|
list.map(item => <RepopositoryItem key={item.id} name={item.name} star_count={item.stargazers_count} fork_count={item.forks_count} />)
|
|
}
|
|
</ul>
|
|
{
|
|
list.length===0 && <span>暂无数据</span>
|
|
}
|
|
{
|
|
loading && <div className={classes.loading}></div>
|
|
}
|
|
</div>
|
|
|
|
<div className="action-bar">
|
|
<button disabled={loading || !prev_button_enable} onClick={onClickPrev}>上一页</button>
|
|
<button disabled={loading || !next_button_enable} onClick={onClickNext}>下一页</button>
|
|
<span> {current_page} / {total_page}</span>
|
|
</div>
|
|
|
|
</div>
|
|
)
|
|
}
|