Use state instead of component hand-down for managing filter

src/core/components/layouts/base.jsx

@@ -10,12 +10,11 @@ export default class BaseLayout extends React.Component {
     specSelectors: PropTypes.object.isRequired,
     layoutSelectors: PropTypes.object.isRequired,
     layoutActions: PropTypes.object.isRequired,
-    getComponent: PropTypes.func.isRequired,
-    filter: PropTypes.string.isRequired
+    getComponent: PropTypes.func.isRequired
   }
 
   render() {
-    let { specSelectors, specActions, getComponent, filter } = this.props
+    let { specSelectors, specActions, getComponent } = this.props
 
     let info = specSelectors.info()
     let url = specSelectors.url()
@@ -67,7 +66,7 @@ export default class BaseLayout extends React.Component {
 
             <Row>
               <Col mobile={12} desktop={12} >
-                <Operations filter={ filter }/>
+                <Operations/>
               </Col>
             </Row>
             <Row>

src/core/components/operations.jsx

@@ -25,7 +25,6 @@ export default class Operations extends React.Component {
       authActions,
       authSelectors,
       getConfigs,
-      filter,
       fn
     } = this.props
 
@@ -37,6 +36,8 @@ export default class Operations extends React.Component {
     let showSummary = layoutSelectors.showSummary()
     let { docExpansion, displayOperationId, displayRequestDuration, maxDisplayedTags } = getConfigs()
 
+    let filter = layoutSelectors.currentFilter()
+
     if (filter) {
       if (filter !== true) {
         taggedOps = taggedOps.filter((tagObj, tag) => {

src/core/index.js

@@ -52,7 +52,9 @@ module.exports = function SwaggerUI(opts) {
     store: { },
   }
 
-  const constructorConfig = deepExtend({}, defaults, opts)
+  let queryConfig = parseSeach()
+
+  const constructorConfig = deepExtend({}, defaults, opts, queryConfig)
 
   const storeConfigs = deepExtend({}, constructorConfig.store, {
     system: {
@@ -83,7 +85,6 @@ module.exports = function SwaggerUI(opts) {
   store.register([constructorConfig.plugins, inlinePlugin])
 
   var system = store.getSystem()
-  let queryConfig = parseSeach()
 
   system.initOAuth = system.authActions.configureAuth
 

src/plugins/topbar/topbar.jsx

@@ -7,8 +7,8 @@ import Logo from "./logo_small.png"
 export default class Topbar extends React.Component {
 
   static propTypes = {
-    onFilterChange: PropTypes.func.isRequired,
-    filter: PropTypes.string.isRequired
+    layoutSelectors: PropTypes.object.isRequired,
+    layoutActions: PropTypes.object.isRequired
   }
 
   constructor(props, context) {
@@ -87,17 +87,17 @@ export default class Topbar extends React.Component {
 
   onFilterChange =(e) => {
     let {target: {value}} = e
-    this.props.onFilterChange(value)
+    this.props.layoutActions.updateFilter(value)
   }
 
   render() {
-    let { getComponent, specSelectors, getConfigs } = this.props
+    let { getComponent, specSelectors, getConfigs, layoutSelectors } = this.props
     const Button = getComponent("Button")
     const Link = getComponent("Link")
 
     let isLoading = specSelectors.loadingStatus() === "loading"
     let isFailed = specSelectors.loadingStatus() === "failed"
-    let filter = this.props.filter
+    let filter = layoutSelectors.currentFilter()
 
     let inputStyle = {}
     if(isFailed) inputStyle.color = "red"

src/standalone/layout.jsx

@@ -10,23 +10,7 @@ export default class StandaloneLayout extends React.Component {
     specSelectors: PropTypes.object.isRequired,
     layoutSelectors: PropTypes.object.isRequired,
     layoutActions: PropTypes.object.isRequired,
-    getComponent: PropTypes.func.isRequired,
-    getConfigs: PropTypes.func.isRequired
-  }
-
-  constructor(props) {
-    super(props)
-
-    this.handleFilterChange = this.handleFilterChange.bind(this)
-
-    let { getConfigs } = this.props
-    let { filter } = getConfigs()
-
-    this.state = { filter: filter }
-  }
-
-  handleFilterChange(filter) {
-    this.setState({ filter: filter })
+    getComponent: PropTypes.func.isRequired
   }
 
   render() {
@@ -40,14 +24,12 @@ export default class StandaloneLayout extends React.Component {
     const BaseLayout = getComponent("BaseLayout", true)
     const OnlineValidatorBadge = getComponent("onlineValidatorBadge", true)
 
-    const filter = this.state.filter
-
     const loadingStatus = specSelectors.loadingStatus()
 
     return (
 
       <Container className='swagger-ui'>
-        { Topbar ? <Topbar onFilterChange={this.handleFilterChange} filter={ filter } /> : null }
+        { Topbar ? <Topbar /> : null }
         { loadingStatus === "loading" &&
           <div className="info">
             <h4 className="title">Loading...</h4>
@@ -63,7 +45,7 @@ export default class StandaloneLayout extends React.Component {
             <h4 className="title">Failed to load config.</h4>
           </div>
         }
-        { !loadingStatus || loadingStatus === "success" && <BaseLayout filter={filter} /> }
+        { !loadingStatus || loadingStatus === "success" && <BaseLayout /> }
         <Row>
           <Col>
             <OnlineValidatorBadge />