react-router#withRouter JavaScript Examples

The following examples show how to use react-router#withRouter. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: nodes-grid.js    From ThreatMapper with Apache License 2.0 6 votes vote down vote up 
NodesGrid = withRouter(({ onNodeClicked, match }) => (
  <div className="">
    {menu.map(menuItem => (
      <Route
        key={menuItem.id}
        exact
        path={`${match.path}/${menuItem.id}`}
        render={() => (
          <menuItem.component
            onNodeClicked={onNodeClicked}
            //  showPanelForNode={showPanelForNode}
          />
        )}
      />
    ))}
    <Route
      exact
      path={match.path}
      render={() => <Redirect to={`${match.url}/${menu[0].id}`} />}
    />
  </div>
))
Example #2
Source File: login.component.js    From Zulu with MIT License 5 votes vote down vote up 
LoginWithRouter = withRouter(Login)
Example #3
Source File: sidebar.js    From community-forum-frontend with GNU General Public License v3.0 5 votes vote down vote up 
Sidebar = withRouter(Side)
Example #4
Source File: withSSRData.jsx    From divar-starter-kit with MIT License 5 votes vote down vote up 
function withSSRData(WrappedComponent) {
  class WithSSRDataComponent extends Component {
    componentWillUnmount() {
      const {
        match: { path },
      } = this.props;
      this.resetData(path);
    }

    render() {
      const {
        match: { path },
      } = this.props;
      const { Consumer } = getContext();

      return (
        <Consumer>
          {({ data: { [path]: initialSSRData = {} }, clearDataByKey }) => {
            this.resetData = clearDataByKey;

            return (
              <WrappedComponent
                // eslint-disable-next-line react/jsx-props-no-spreading
                {...this.props}
                initialSSRData={initialSSRData}
              />
            );
          }}
        </Consumer>
      );
    }
  }

  WithSSRDataComponent[getEnv('HAS_PRELOADED_DATA_KEY')] = true;
  WithSSRDataComponent.WrappedComponent = WrappedComponent;
  WithSSRDataComponent.displayName = getDisplayName({
    component: WrappedComponent,
    hocName: 'WithSSRData',
  });
  WithSSRDataComponent.propTypes = {
    match: PropTypes.shape({
      path: PropTypes.string,
    }).isRequired,
  };

  return withRouter(WithSSRDataComponent);
}
Example #5
Source File: App.js    From javascript-mini-projects with The Unlicense 5 votes vote down vote up 
App = withRouter(
  connect(
    mapStateToProps,
    mapDispachToProps
  )(Main)
)
Example #6
Source File: App.js    From javascript-mini-projects with The Unlicense 5 votes vote down vote up 
App = withRouter(connect(mapStateToProps,mapDispatchToProps)(Main))
Example #7
Source File: Header.jsx    From breviews with MIT License 5 votes vote down vote up 
FlexibleHeader = withRouter(Header)
Example #8
Source File: multi-cloud-table.js    From ThreatMapper with Apache License 2.0 4 votes vote down vote up 
MultiCloudTreeTable = withRouter(({
  match,
  history,
  location,
  apiKey,
  apiURL,
  refreshInterval,
  onNodeClicked,
  setAction,
  viewType,
}) => {
  const client = useRef(null);
  const table = useRef(null);
  const [metadata, setMetadata] = useState({});
  const [count, setCount] = useState('');
  const [vulnerabilityfilter, setVulerabilityfilter] = useState("");
  const [, setReRender] = useState(0);
  const triggerSocketDisconnectHandler = useSocketDisconnectHandler();

  const options = [
    { label: 'Complete', value: 'complete' },
    { label: 'Show all', value: '' },
    { label: 'Never Scanned', value: 'never_scanned' }
  ]
  

  const addVulnerabilityFilter = e => {
      setVulerabilityfilter(e.value);
  }

  useEffect(() => {
    table.current = new MultiCloudTable(
      [],
      () => setReRender(count => count + 1),
      {}
    );
    client.current = new TopologyClient(
      apiURL,
      apiKey,
      refreshInterval,
      viewType || 'hosts',
      vulnerabilityfilter,
      (data) => {
        setMetadata(data.metadata);
        const nodes_delta = topologyDataToTableDelta(data.nodes);
        setCount(data.metadata?.children_count?.[""]?.[viewType]);
        if (nodes_delta !== null) {
          for (const parent_id of Object.keys(nodes_delta)) {
            table.current.updateData(parent_id, nodes_delta[parent_id]);
          }
        }
      },
      () => {
        triggerSocketDisconnectHandler();
      }
    );

    client.current.open();

    return () => {
      client.current.close();
    };
  }, [table, vulnerabilityfilter]);

  const onNodeExpanded = useCallback(
    (node) => {
      if (table.current === null) {
        return;
      }

      const topo_node_type = modelNodeTypeToTopologyType(node.node_type);
      if (!topo_node_type) {
        return;
      }
      const topo_children_types = modelNodeTypeToTopologyChildrenTypes(
        node.node_type
      ) || [];

      if (topo_children_types.length === 0) {
        return;
      }

      client.current.expandNode(
        node.id,
        topo_node_type,
        {},
        topo_children_types
      );
    },
    [table]
  );
  const onNodeCollapsed = useCallback(
    (node) => {
      if (table.current === null) {
        return;
      }
      table.current.removeChildren(node.children);

      const topo_node_type = modelNodeTypeToTopologyType(node.node_type);
      client.current.collapseNode(
        node.id,
        topo_node_type,
        {},
      );
    },
    [table]
  );

  const data = table.current?.getTableTreeData() || [];
  return (
    <div>
   {history.location.pathname.includes('hosts') && <div style={{margin: '25px'}}>
    <Select
    components={{
      IndicatorSeparator: null,
    }}
    styles={styles}
    theme={themeCb}
    placeholder={vulnerabilityfilter || "Vulnerability Status"}
    options={options}
    value={options.value}
    classNamePrefix="select"
    className="select-filter"
    onChange={addVulnerabilityFilter}
  /> 
    </div>}  
    {count === 0 ? <div className="absolute-center" style={{fontSize: '25px'}}>
      No Rows Available
    </div> : (table.current === null)  ?  <ShimmerLoaderRow numberOfRows={3} />:
     <NestedTable
      metadata={metadata}
      data={data}
      onRowExpand={onNodeExpanded}
      onRowCollapse={onNodeCollapsed}
      onNodeClicked={onNodeClicked}
      setAction={setAction}
    />}
    </div>
  );
})