Py学习  »  Git

React写个GitHub项目管理面板

YanceyOfficial • 5 年前 • 364 次点击  
阅读 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)),
    );
  };

复制代码

最后

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

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/29467
 
364 次点击