Commit 35ecedad authored by David Haynes's avatar David Haynes 🙆

Lazy load route components + another hooks example

- good to have examples
parent 45d8e5c7
Pipeline #3860 passed with stage
in 1 minute and 23 seconds
import React from "react"; import React, { useState, useEffect } from "react";
import { GetAllGoLinks } from "../../Utils";
import { Button, Card, CardBody, CardTitle, Table } from "reactstrap"; import { Button, Card, CardBody, CardTitle, Table } from "reactstrap";
class DebugRead extends React.Component { const DebugRead = () => {
constructor(props) { const [goLinks, updateGoLinks] = useState([]);
super(props);
this.state = {
GoLinks: [],
error: null
};
// This binding is necessary to make `this` work in the callback
this.refreshGoLinks = this.refreshGoLinks.bind(this);
}
async refreshGoLinks() { const getAllGoLinks = async () => {
GetAllGoLinks() let response = await fetch("/api/golinks/", {
.then(data => headers: {
this.setState({ "Content-Type": "application/json"
GoLinks: data }
}) });
) let data = await response.json();
.catch(reason => this.setState({ error: reason })); updateGoLinks(data);
} };
async componentDidMount() { useEffect(() => {
this.refreshGoLinks(); getAllGoLinks();
} }, []);
render() { return (
return ( <div>
<div> <Card>
<Card> <CardBody>
<CardBody> <CardTitle className="d-flex">
<CardTitle className="d-flex"> Read
Read{" "} <Button
<Button className="ml-auto"
className="ml-auto" onClick={() => getAllGoLinks()}
onClick={this.refreshGoLinks} outline
outline color="primary"
color="primary" >
> Refresh
Refresh </Button>
</Button> </CardTitle>
</CardTitle>
<Table> <Table>
<thead> <thead>
<tr> <tr>
<th>short</th> <th>short</th>
<th>destination</th> <th>destination</th>
<th>expires</th> <th>expires</th>
</tr>
</thead>
<tbody>
{goLinks.map(goLink => (
<tr key={goLink.short}>
<td>
<a href={`/${goLink.short}`}> /{goLink.short}</a>
</td>
<td>{goLink.destination}</td>
<td>{goLink.date_expires}</td>
</tr> </tr>
</thead> ))}
<tbody> </tbody>
{this.state.GoLinks.map(golink => ( </Table>
<tr key={golink.short}> </CardBody>
<td> </Card>
<a href={`/${golink.short}`}> /{golink.short}</a> </div>
</td> );
<td>{golink.destination}</td> };
<td>{golink.date_expires}</td>
</tr>
))}
</tbody>
</Table>
</CardBody>
</Card>
</div>
);
}
}
export default DebugRead; export default DebugRead;
import React from "react"; import React, { Suspense, lazy } from "react";
import { Route, withRouter } from "react-router-dom"; import { Route, withRouter, Switch } from "react-router-dom";
import { import { NavBar } from "Components";
HomePage,
AboutPage, const Home = lazy(() => import("../Components/Pages/HomePage"));
DhaynesPage, const Dhaynes = lazy(() => import("../Components/Pages/DhaynesPage"));
DebugCRUD, const About = lazy(() => import("../Components/Pages/AboutPage"));
NavBar const DebugCRUD = lazy(() => import("../Components/Pages/DebugCRUD"));
} from "Components";
const NavBarWithRouter = withRouter(props => <NavBar {...props} />); const NavBarWithRouter = withRouter(props => <NavBar {...props} />);
const Routes = () => ( const Routes = () => (
<div> <div>
<NavBarWithRouter /> <NavBarWithRouter />
<Route path="/" exact component={HomePage} /> <Suspense fallback={<div>Loading...</div>}>
<Route path="/dhaynes" component={DhaynesPage} /> <Switch>
<Route path="/about" component={AboutPage} /> <Route path="/" exact component={Home} />
<Route path="/debug" component={DebugCRUD} /> <Route path="/dhaynes" component={Dhaynes} />
<Route path="/about" component={About} />
<Route path="/debug" component={DebugCRUD} />
<Route render={() => <div>404</div>} />
</Switch>
</Suspense>
</div> </div>
); );
......
...@@ -25,12 +25,14 @@ ...@@ -25,12 +25,14 @@
"@babel/preset-react" "@babel/preset-react"
], ],
"plugins": [ "plugins": [
"@babel/plugin-proposal-class-properties" "@babel/plugin-proposal-class-properties",
"@babel/plugin-syntax-dynamic-import"
] ]
}, },
"dependencies": { "dependencies": {
"@babel/core": "^7.1.2", "@babel/core": "^7.1.2",
"@babel/plugin-proposal-class-properties": "^7.3.0", "@babel/plugin-proposal-class-properties": "^7.3.0",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.3.1", "@babel/preset-env": "^7.3.1",
"@babel/preset-react": "^7.0.0", "@babel/preset-react": "^7.0.0",
"babel-core": "^6.26.3", "babel-core": "^6.26.3",
......
...@@ -294,6 +294,13 @@ ...@@ -294,6 +294,13 @@
dependencies: dependencies:
"@babel/helper-plugin-utils" "^7.0.0" "@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-syntax-dynamic-import@^7.2.0":
version "7.2.0"
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.2.0.tgz#69c159ffaf4998122161ad8ebc5e6d1f55df8612"
integrity sha512-mVxuJ0YroI/h/tbFTPGZR8cv6ai+STMKNBq0f8hFxsxWjl94qqhsb+wXbpNMDPU3cfR1TIsVFzU3nXyZMqyK4w==
dependencies:
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-syntax-json-strings@^7.2.0": "@babel/plugin-syntax-json-strings@^7.2.0":
version "7.2.0" version "7.2.0"
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.2.0.tgz#72bd13f6ffe1d25938129d2a186b11fd62951470" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.2.0.tgz#72bd13f6ffe1d25938129d2a186b11fd62951470"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment