2019年03月04日阅读 125

React写个GitHub项目管理面板

至于写这么一个项目是为了更加直观统计个人GitHub的仓库信息。项目经过了几次折腾和迭代，从最初一个表格，到支持sortable、支持前端模糊搜索，现在也支持根据创建时间或更新时间来查询项目。未来还会有什么功能就看脑洞了，如果喜欢的话可以拿去玩。

Url

线上地址

GitHub

Introduction

项目用了React + Semantic UI React来搭建，其实主要就是用一下这个UI库的Table组件和Form组件，此外因为Semantic UI不带datepicker组件，为保持样式统一，需要下载一个三方包 semantic-ui-calendar-react，此外涉及到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,
    });
  };

 <Content
      dataSource={dataSource}
      transformDataSource={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)),
    );
  };

复制代码

最后

纯属一瞎折腾的项目，还请各位大佬多多指教。