至于写这么一个项目是为了更加直观统计个人GitHub的仓库信息。项目经过了几次折腾和迭代,从最初一个表格,到支持sortable、支持前端模糊搜索,现在也支持根据创建时间或更新时间来查询项目。未来还会有什么功能就看脑洞了,如果喜欢的话可以拿去玩。
Url
Introduction
项目用了React + 来搭建,其实主要就是用一下这个UI库的Table组件和Form组件,此外因为Semantic UI不带datepicker组件,为保持样式统一,需要下载一个三方包 ,此外涉及到http请求用到了axios,还用到了lodash和dayjs. 因为项目简单,没必要麻烦mobx或者redux,遂直接用原生写。
Feature
- 支持查看GitHub所有项目列表
- 支持Table Header的sortable
- 支持按仓库名模糊查询
- 支持按照created date 和 updated date 筛选项目
Todo
- 支持前端分页(虽然没什么卵用)
Code
接口请求
因为我在GitHub上有一个group,所以要请求两个接口(一个是这个group,另一个是普通的用户仓库),这一块感觉写的不太好,希望能收获大佬们的意见。
Sortable
因为子组件需要修改数据源的顺序,所以在父组件写如下方法,然后通过props传递给子组件。
transformDataSource = dataSource => { this.setState({ dataSource, }); };this.transformDataSource(dataSource) } />复制代码
然后在子组件,当点击table header时,来触发排序方法。
handleSort = clickedColumn => () => { const { transformDataSource, dataSource } = this.props; const { column, direction } = this.state; if (column !== clickedColumn) { this.setState({ column: clickedColumn, direction: 'ascending', }); transformDataSource(_.sortBy(dataSource, [clickedColumn])); return; } this.setState({ direction: direction === 'ascending' ? 'descending' : 'ascending', }); transformDataSource(dataSource.reverse()); };复制代码
根据仓库名称模糊查询
这个比较简单,直接在渲染时加一个filter,这样不会影响数据源。
dataSource.filter(data =>!inputText || data.name.toLowerCase().includes(inputText.toLowerCase()))复制代码
支持按创建时间或修改时间筛选
首先通过一个select让用户选择以创建时间筛选还是以修改时间筛选,然后通过datepicker组件来选择时间区间。
在datepicker组件中,当正确选择了前后区间,会拿到形如 2019-03-01 - 2019-03-04
的字符串;当只选择了前区间,还没选后区间,会拿到一个形如2019-03-03 -
的字符串;当未选择时是一个空字符串。
因此,我们将字符串按照-
spilt掉,其中startDate为 value.split(' - ')[0]
,endDate为 value.split(' - ')[1]
,只有startDate和endDate同时存在时,我们才去触发filter函数。
因此抽离出一个fliter函数,这里把模糊搜索和时间段检索结合起来,注意dayjs未实现isBetween方法,因此在tools.js中手动写一个。
filterData = () => { const { dataSource } = this.props; const { inputValue, startDate, endDate, selectedType } = this.state; return dataSource.filter( data => (!inputValue || data.name.toLowerCase().includes(inputValue.toLowerCase())) && ((!startDate && !endDate) || isBetween(data[selectedType].split('T')[0], startDate, endDate)), ); };复制代码
最后
纯属一瞎折腾的项目,还请各位大佬多多指教。