cheton
commented
5 years ago Check below if you have the similar issue: https://stackoverflow.com/a/42895076/2264306
Closed ivanvorona closed 5 years ago
cheton
commented
5 years ago Check below if you have the similar issue: https://stackoverflow.com/a/42895076/2264306
ivanvorona
commented
5 years ago Hello, I tried this solution yesterday, it helped me get rid of error but it doesn't render any sidebar, just empty screen with no error: http://165.227.44.17:3000 Do you have any other advice?
cheton
commented
5 years ago Hi @ivanvorona
Do you have a complete sample code? I don't think it can be correctly rendered as your code from line #184-226 does not return a React component, and the line #231 was doing nothing as well.
ivanvorona
commented
5 years ago Hi @cheton ,i was just doing it based on project setup instructions, EagleClients should render the table view.(it does now but i am trying to get it under the sidebar controls - expecting more tables like this later and need different sections) the source code can be cloned from here: https://eagleinvsys.visualstudio.com/DIS_UI/_git/DIS_UI
Thank you for your time.
cheton
commented
5 years ago Declare a functional component and render it inside your App:
import React from "react";
import { render } from "react-dom";
import './styles/index.css';
// eslint-disable-next-line
//import App from './App';
//import registerServiceWorker from './registerServiceWorker';
import ApolloClient from "apollo-boost";
import { ApolloProvider,Query } from "react-apollo";
import gql from "graphql-tag";
//import Client from './components/Client'
import ReactTable from "react-table";
import 'react-table/react-table.css'
import SideNav, { Toggle, Nav, NavItem, NavIcon, NavText } from '@trendmicro/react-sidenav';
//import { Router, Route, Switch } from 'react-router'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
// Be sure to include styles at some point, probably during your bootstraping
import '@trendmicro/react-sidenav/dist/react-sidenav.css';
const client = new ApolloClient({
uri: "http://165.227.44.17:5000/graphql"
// uri: "https://graphql-demo.commonsware.com/0.2/graphql"
// uri: "https://w5xlvm3vzz.lp.gql.zone/graphql"
});
/*
client.query({
query: gql`
{
allClients {
edges {
node {
NAME
CODE
TIMEZONE
}
}
}
}
`
}).then(response => console.log(response.data.allClients))
.catch(error => console.error(error));
*/
const EagleClients = () => (
<Query
query={gql`
{
allClients {
edges {
node {
CODE
NAME
TIMEZONE
STARTDate
}
}
}
}
`}
>
{({ loading, error, data }) => {
if (loading) return <p>Loading...</p>;
if (error) return `Error!: ${error}`;;
const clientsToRender = data.allClients.edges;
console.log(clientsToRender);
//console.log(typeof clientsToRender);
var i = 0;
return (
<div>
<ReactTable
data={clientsToRender}
// noDataText="Oh Noes!"
columns={[
{
Header: "Client",
columns: [
{
Header: "N",
id: "N",
accessor: d => i+1,
maxWidth: 50
},
{
Header: "Code",
id: "lastName",
accessor: d => clientsToRender[i]['node']['CODE'],
Footer: (
<span>
<strong>Footer: Some analytic info TBD </strong>{" "}
</span>
)
},
{
Header: "Name",
id: "clientName",
accessor: d => clientsToRender[i]['node']['NAME']
},
{
Header: "TimeZone",
id: "timeZone",
accessor: d => clientsToRender[i]['node']['TIMEZONE'],
maxWidth: 200
},
{
Header: "STARTDate",
id: "startDate",
accessor: d => clientsToRender[i++]['node']['STARTDate']
}
]
}]}
defaultPageSize={50}
filterable
style={{
height: "600px" // This will force the table body to overflow and scroll, since there is not enough room
}}
className="-striped -highlight"
SubComponent={row => {
return (
<div style={{ padding: "20px" }}>
<em>
List of client Interfaces from in another React
Table!
</em>
<br />
<br />
<ReactTable
data={[
{
InterfaceName: "SomeName",
InterfaceDesc: "SomeDesc"},
{
InterfaceName: "SomeName1",
InterfaceDesc: "SomeDesc2"
}
]}
columns={[
{
Header: "Interfaces",
columns: [
{
Header: "N",
id: "N",
accessor: d => i+1,
maxWidth: 50 },
{
Header: "Code",
id: "intCode",
accessor: d => data.InterfaceName
},
{
Header: "Name",
id: "intName",
// accessor: d => clientsToRender[i]['node']['NAME']
}
]}]}
defaultPageSize={3}
showPagination={false}
SubComponent={() => <div style={{padding: '10px'}}>Vendor Info</div>}
/* SubComponent={row => {
return (
<div style={{ padding: "20px" }}>
Another Sub Component!
</div>
);
}}*/
/>
</div>
);}}
/>
<br />
</div>
);
}}
</Query>
);
const Container = () => (
<Router>
<Route render={({ location, history }) => (
<React.Fragment>
<SideNav
onSelect={(selected) => {
const to = '/' + selected;
if (location.pathname !== to) {
history.push(to);
console.log(location.pathname);
console.log(to);
}
}}
>
<SideNav.Toggle />
<SideNav.Nav defaultSelected="home">
<NavItem eventKey="home">
<NavIcon>
<i className="fa fa-fw fa-home" style={{ fontSize: '1.75em' }} />
</NavIcon>
<NavText>
Home
</NavText>
</NavItem>
<NavItem eventKey="devices">
<NavIcon>
<i className="fa fa-fw fa-device" style={{ fontSize: '1.75em' }} />
</NavIcon>
<NavText>
Devices
</NavText>
</NavItem>
</SideNav.Nav>
</SideNav>
<main>
<Route path="/" exact component={props => <EagleClients />} />
<Route path="/home" component={props => <EagleClients />} />
<Route path="/devices" component={props => <EagleClients />} />
</main>
</React.Fragment>
)}
/>
</Router>
);
const App = () => (
<ApolloProvider client={client}>
<div>
<Container />
<EagleClients />
</div>
</ApolloProvider>
);
render(<App />, document.getElementById("root"));got it, thank you for your help!
PritamBhanji08
commented
4 years ago @cheton I am also getting same error: TypeError: Cannot read property 'location' of undefined Error on : node_modules/react-router/esm/react-router.js:46 ` import React from 'react' import SideNav, { Toggle, Nav, NavItem, NavIcon, NavText } from '@trendmicro/react-sidenav' import ClickOutside from '../components/ClickOutside' import WireFraudComponent from '../components/WireFraudComponent' import { Router, Route } from "react-router";
export default class MenuContainer extends React.Component {
constructor(props) {
super(props)
this.state = {
expanded: false
}
}
menuItemClicked = (selected) => {
console.log(Menu ${selected} clicked)
}
render() { return ( <>
<ClickOutside
onClickOutside={() => {
this.setState({ expanded: false });
}}
>
<Router>
<Route render={({ location, history }) => (
<React.Fragment>
<SideNav
expanded={this.state.expanded}
onToggle={(expanded) => {
this.setState({ expanded });
}}
onSelect={(selected) => {
// Add your code here
// this.menuItemClicked(selected)
const to = '/' + selected;
console.log(location)
if (location.pathname !== to) {
history.push(to);
}
}}
>
<SideNav.Toggle />
<SideNav.Nav defaultSelected="orders">
<NavItem eventKey="orders">
<NavIcon>
<i className="material-icons" style={{ fontSize: '1.75em' }}>insert_drive_file</i>
</NavIcon>
<NavText>
Orders
</NavText>
</NavItem>
<NavItem eventKey="wire-fraud">
<NavIcon>
<i className="material-icons" style={{ fontSize: '1.75em' }}>contacts</i>
</NavIcon>
<NavText>
Wire Fraud Support
</NavText>
</NavItem>
<NavItem eventKey="help">
<NavIcon>
<i className="material-icons" style={{ fontSize: '1.75em' }}>live_help</i>
</NavIcon>
<NavText>
Help & FAQ
</NavText>
</NavItem>
<NavItem eventKey="admin">
<NavIcon>
<i className="material-icons" style={{ fontSize: '1.75em' }}>account_box</i>
</NavIcon>
<NavText>
Administration <i className="material-icons">keyboard_arrow_down</i>
</NavText>
<NavItem eventKey="admin/team">
<NavText>
<i className="material-icons">supervisor_account</i> Team directory
</NavText>
</NavItem>
<NavItem eventKey="admin/escrow">
<NavText>
<i className="material-icons">library_books</i> Escrow accounts
</NavText>
</NavItem>
<NavItem eventKey="admin/integrations">
<NavText>
<i className="material-icons">sync</i> Integrations
</NavText>
</NavItem>
</NavItem>
</SideNav.Nav>
</SideNav>
<main>
<Route path="/wire-fraud" component={props => <WireFraudComponent />} />
</main>
</React.Fragment>
)} />
</Router>
</ClickOutside>
</>
)}
}`
PritamBhanji08
commented
4 years ago This is another file which is root file App.js where i have defined router as well import React from 'react' import LoginContainer from '../containers/LoginContainer' import { Router, Route } from "react-router"; import VerifyContainer from '../containers/VerifyContainer'; import OrdersContainer from '../containers/OrdersContainer'; import NoMatch from './NoMatch'; import { createBrowserHistory } from "history";
class App extends React.Component { render() { const history = createBrowserHistory() return ( < Router history={history}> < Route exact path="/" component={LoginContainer}/> < Route exact path="/login" component={LoginContainer}/> < Route path="/verify" component={VerifyContainer}/> < Route path="/orders" component={OrdersContainer}/> ) } }
export default App;
Hello, I got below error and here are my dependencies:
"dependencies": { "@trendmicro/react-sidenav": "^0.4.5", "apollo-boost": "^0.1.16", "graphql": "^14.0.2", "hamoni-sync": "^0.6.2", "react": "^16.5.2", "react-apollo": "^2.1.11", "react-dom": "^16.5.0", "react-router": "^4.3.1", "react-scripts": "1.1.5", "react-table": "^6.8.6" },
do i need to downgrade react-router?
Full error message:
TypeError: Cannot read property 'location' of undefined new Router node_modules/react-router/es/Router.js:31 28 | } 29 | 30 | return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {