Skip to content
Permalink
Browse files

feat: add ability to filter on http method (#8)

  • Loading branch information...
dadamssg committed Mar 29, 2019
1 parent 0410d4e commit 75b6f33c24e16508da6d6336360fb3b76630e34e
Showing with 48 additions and 2 deletions.
  1. +39 −2 api-explorer/src/Explorer.js
  2. +9 −0 api-explorer/src/app.css
@@ -2,9 +2,28 @@ import React, {PureComponent} from 'react'
import PropTypes from 'prop-types'
import ReactPaginate from 'react-paginate'
import {withRouter} from 'react-router-dom'
import intersection from 'lodash/intersection'
import Route from './Route'
import Search from './Search'

function Method ({method, onClick, active}) { // eslint-disable-line
const map = {
get: 'btn-success',
post: 'btn-primary',
put: 'btn-warning',
delete: 'btn-danger'
}
return (
<button
type='button'
className={`btn ${map[method]} flex-fill ${!active ? 'inactive-method' : ''}`}
onClick={() => onClick(method)}
>
{method.toUpperCase()}
</button>
)
}

class Explorer extends PureComponent {
static propTypes = {
location: PropTypes.object,
@@ -13,6 +32,12 @@ class Explorer extends PureComponent {
hidePath: PropTypes.string,
src: PropTypes.any
}
state = {
get: true,
post: true,
put: true,
delete: true
}
redirect = (values = {}) => {
const queryParams = new URLSearchParams(this.props.location.search)
Object.keys(values).forEach(key => {
@@ -25,6 +50,9 @@ class Explorer extends PureComponent {
search: search ? `?${search}` : ''
})
}
toggleMethod = (method) => {
this.setState({[method]: !this.state[method]})
}
render () {
const queryParams = new URLSearchParams(this.props.location.search)
const search = (queryParams.get('q') || '').toLowerCase()
@@ -33,7 +61,10 @@ class Explorer extends PureComponent {
const zeroIndexPage = page - 1

let routes = this.props.routes.filter(route => {
return route.search.includes(search)
const routeMethods = Object.keys(route.methods).filter(k => route.methods[k])
const validMethods = Object.keys(this.state).filter(k => this.state[k])
const hasValidMethods = intersection(routeMethods, validMethods).length > 0
return hasValidMethods && route.search.includes(search)
})
const numberPerPage = 20
const pageCount = Math.ceil(routes.length / numberPerPage)
@@ -47,7 +78,7 @@ class Explorer extends PureComponent {
routes = routes.slice(begin, end)
return (
<div>
<div className='mb-3'>
<div className='mb-2'>
<Search
value={search}
onChange={(e) => {
@@ -58,6 +89,12 @@ class Explorer extends PureComponent {
}}
/>
</div>
<div className='http-methods btn-group d-flex mb-2' role='group' aria-label='Basic example'>
<Method method='get' onClick={this.toggleMethod} active={this.state.get} />
<Method method='post' onClick={this.toggleMethod} active={this.state.post} />
<Method method='put' onClick={this.toggleMethod} active={this.state.put} />
<Method method='delete' onClick={this.toggleMethod} active={this.state.delete} />
</div>
{routes.map((route, i) => (
<div key={i} className={'mb-2'}>
<Route
@@ -36,4 +36,13 @@ small {
display: none;
width: 0;
background: transparent;
}

.http-methods button:focus {
box-shadow: 0 0;
}

.http-methods .inactive-method {
opacity: .5;
font-weight: 100;
}

0 comments on commit 75b6f33

Please sign in to comment.
You can’t perform that action at this time.