feat: add ability to filter on http method

ClearC2 · Mar 29, 2019 · bdc8ea7 · bdc8ea7
1 parent 0410d4e
commit bdc8ea7
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 2 deletions.
diff --git a/api-explorer/src/Explorer.js b/api-explorer/src/Explorer.js
@@ -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

diff --git a/api-explorer/src/app.css b/api-explorer/src/app.css
@@ -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;
 }