Changeset View
Changeset View
Standalone View
Standalone View
admin-panel/index.jsx
import 'babel-polyfill'; | import 'babel-polyfill'; | ||||
import React from 'react'; | import React from 'react'; | ||||
import ReactDOM from 'react-dom'; | import ReactDOM from 'react-dom'; | ||||
import { BrowserRouter as HashRouter, Route, Link } from 'react-router-dom'; | import { BrowserRouter as HashRouter, Route, Link } from 'react-router-dom'; | ||||
import Collections from './collections/collections.jsx'; | import Collections from './collections/collections.jsx'; | ||||
import useCollections from './collections/use-collections.js'; | import useCollections from './collections/use-collections.js'; | ||||
class ErrorBoundary extends React.Component { | |||||
constructor(props) { | |||||
super(props); | |||||
this.state = { hasError: false, error: null }; | |||||
} | |||||
static getDerivedStateFromError(error) { | |||||
return { hasError: true, error: error }; | |||||
} | |||||
componentDidCatch(error, info) { | |||||
console.error(error, info); | |||||
} | |||||
render() { | |||||
if (this.state.hasError) { | |||||
// You can render any custom fallback UI | |||||
return ( | |||||
<div> | |||||
<h1>Something went wrong.</h1> | |||||
<code> | |||||
<pre> | |||||
<strong>{this.state.error.message}</strong> | |||||
{'\n'} | |||||
{this.state.error.stack} | |||||
</pre> | |||||
</code> | |||||
</div> | |||||
); | |||||
} | |||||
return this.props.children; | |||||
} | |||||
} | |||||
function AppRouter() { | function AppRouter() { | ||||
const collections = useCollections(); | const collections = useCollections(); | ||||
return ( | return ( | ||||
<ErrorBoundary> | |||||
<HashRouter basename="/#"> | <HashRouter basename="/#"> | ||||
<div> | <div> | ||||
<Link to="/"> | <Link to="/"> | ||||
<h1>Sealpage</h1> | <h1>Sealpage</h1> | ||||
</Link> | </Link> | ||||
<nav> | <nav> | ||||
<ul> | <ul> | ||||
{collections.map(collection => ( | {collections.map(collection => ( | ||||
<li key={collection.name}> | <li key={collection.name}> | ||||
<Link to={`/collections/${collection.name}`}> | <Link | ||||
to={`/collections/${collection.name}`} | |||||
> | |||||
{collection.name} | {collection.name} | ||||
</Link> | </Link> | ||||
</li> | </li> | ||||
))} | ))} | ||||
</ul> | </ul> | ||||
<Link to={'/body-page-editor'}>BodyPageEditor</Link> | <Link to={'/body-page-editor'}>BodyPageEditor</Link> | ||||
</nav> | </nav> | ||||
<hr /> | <hr /> | ||||
<Route path="/" exact component={() => <h2>Admin panel</h2>} /> | <Route | ||||
path="/" | |||||
exact | |||||
component={() => <h2>Admin panel</h2>} | |||||
/> | |||||
<Route path="/collections" component={Collections} /> | <Route path="/collections" component={Collections} /> | ||||
{/* it's only for mockup testing */} | {/* it's only for mockup testing */} | ||||
{/* <Route path="/body-page-editor" component={BodyPageEditor} /> */} | {/* <Route path="/body-page-editor" component={BodyPageEditor} /> */} | ||||
</div> | </div> | ||||
</HashRouter> | </HashRouter> | ||||
</ErrorBoundary> | |||||
); | ); | ||||
} | } | ||||
ReactDOM.render(React.createElement(AppRouter), document.getElementById('app')); | ReactDOM.render(React.createElement(AppRouter), document.getElementById('app')); |