博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
React写个GitHub项目管理面板
阅读量:6763 次
发布时间:2019-06-26

本文共 2220 字,大约阅读时间需要 7 分钟。

至于写这么一个项目是为了更加直观统计个人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)),    );  };复制代码

最后

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

转载地址:http://aabeo.baihongyu.com/

你可能感兴趣的文章
编写excel操作类
查看>>
OpenGL/GLSL数据传递小记(3.x)(转)
查看>>
java程序性能优化
查看>>
内存与缓存
查看>>
Datagridview 实现二维表头和行合并
查看>>
关于python的若干奇技淫巧的学习
查看>>
定义结构体变量及初始化
查看>>
python 2.7和3.7都支持的情况 bit_length() pycharm 更改解释器
查看>>
JSON
查看>>
[实战]MVC5+EF6+MySql企业网盘实战(14)——逻辑重构
查看>>
使用ssh-keygen和ssh-copy-id三步实现SSH无密码登录
查看>>
HDU-1160_FatMouse's Speed
查看>>
上架被拒常见原因
查看>>
6. ZigZag Conversion
查看>>
Python 由__dict__和dir()引发的一些思考
查看>>
Mybatis使用时 resultMap与resultType、parameterMap与 parameterType的区别
查看>>
如何触发AspxGridview的PageIndexChanged 客户端事件?
查看>>
js判定IE
查看>>
201671030128周琳+《英文文本统计分析》结对项目报告
查看>>
Linux xargs命令
查看>>