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 { GetAllGoLinks } from "../../Utils";
import React, { useState, useEffect } from "react";
import { Button, Card, CardBody, CardTitle, Table } from "reactstrap";
class DebugRead extends React.Component {
constructor(props) {
super(props);
this.state = {
GoLinks: [],
error: null
};
// This binding is necessary to make `this` work in the callback
this.refreshGoLinks = this.refreshGoLinks.bind(this);
}
const DebugRead = () => {
const [goLinks, updateGoLinks] = useState([]);
async refreshGoLinks() {
GetAllGoLinks()
.then(data =>
this.setState({
GoLinks: data
})
)
.catch(reason => this.setState({ error: reason }));
const getAllGoLinks = async () => {
let response = await fetch("/api/golinks/", {
headers: {
"Content-Type": "application/json"
}
});
let data = await response.json();
updateGoLinks(data);
};
async componentDidMount() {
this.refreshGoLinks();
}
useEffect(() => {
getAllGoLinks();
}, []);
render() {
return (
<div>
<Card>
<CardBody>
<CardTitle className="d-flex">
Read{" "}
Read
<Button
className="ml-auto"
onClick={this.refreshGoLinks}
onClick={() => getAllGoLinks()}
outline
color="primary"
>
......@@ -53,13 +43,13 @@ class DebugRead extends React.Component {
</tr>
</thead>
<tbody>
{this.state.GoLinks.map(golink => (
<tr key={golink.short}>
{goLinks.map(goLink => (
<tr key={goLink.short}>
<td>
<a href={`/${golink.short}`}> /{golink.short}</a>
<a href={`/${goLink.short}`}> /{goLink.short}</a>
</td>
<td>{golink.destination}</td>
<td>{golink.date_expires}</td>
<td>{goLink.destination}</td>
<td>{goLink.date_expires}</td>
</tr>
))}
</tbody>
......@@ -68,7 +58,6 @@ class DebugRead extends React.Component {
</Card>
</div>
);
}
}
};
export default DebugRead;
import React from "react";
import { Route, withRouter } from "react-router-dom";
import {
HomePage,
AboutPage,
DhaynesPage,
DebugCRUD,
NavBar
} from "Components";
import React, { Suspense, lazy } from "react";
import { Route, withRouter, Switch } from "react-router-dom";
import { NavBar } from "Components";
const Home = lazy(() => import("../Components/Pages/HomePage"));
const Dhaynes = lazy(() => import("../Components/Pages/DhaynesPage"));
const About = lazy(() => import("../Components/Pages/AboutPage"));
const DebugCRUD = lazy(() => import("../Components/Pages/DebugCRUD"));
const NavBarWithRouter = withRouter(props => <NavBar {...props} />);
const Routes = () => (
<div>
<NavBarWithRouter />
<Route path="/" exact component={HomePage} />
<Route path="/dhaynes" component={DhaynesPage} />
<Route path="/about" component={AboutPage} />
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/dhaynes" component={Dhaynes} />
<Route path="/about" component={About} />
<Route path="/debug" component={DebugCRUD} />
<Route render={() => <div>404</div>} />
</Switch>
</Suspense>
</div>
);
......
......@@ -25,12 +25,14 @@
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
"@babel/plugin-proposal-class-properties",
"@babel/plugin-syntax-dynamic-import"
]
},
"dependencies": {
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-class-properties": "^7.3.0",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.3.1",
"@babel/preset-react": "^7.0.0",
"babel-core": "^6.26.3",
......
......@@ -294,6 +294,13 @@
dependencies:
"@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":
version "7.2.0"
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