Skip to content

Instantly share code, notes, and snippets.

@chrisjakuta
Created April 6, 2020 05:22
Show Gist options
  • Save chrisjakuta/be0d209dd2bfc3fef55a9637a8dc57d0 to your computer and use it in GitHub Desktop.
Save chrisjakuta/be0d209dd2bfc3fef55a9637a8dc57d0 to your computer and use it in GitHub Desktop.
How to pass cached data to the Route component so it can render without a call to the backend.
import React, { useState, useEffect } from 'react'
import { ChasingDots } from 'better-react-spinkit'
// reactstrap components
import {
Container,
Card,
CardBody,
Row,
Col,
CardText,
CardTitle,
CardSubtitle,
CardFooter,
CardHeader,
CardImg,
Button
} from 'reactstrap'
// now-ui components
import IndexNavbar from '../Navbars/IndexNavbar'
import LandingPageHeader from '../Headers/LandingPageHeader'
import DarkFooter from '../Footers/DarkFooter'
// react-axios
import { Get } from 'react-axios'
// the back-end server url
import { localhost } from '../../backendConstants'
// react-router-dom
import { useLocation, Link } from 'react-router-dom'
// import { useRouteMatch } from 'react-router-dom'
// react-router
function BlogListGroup (props) {
const [data, setData] = useState([])
const location = useLocation()
useEffect(() => {
document.body.classList.add('blog-page')
document.body.classList.add('sidebar-collapse')
document.documentElement.classList.remove('nav-open')
window.scrollTo(0, 0)
document.body.scrollTop = 0
document.title = 'List Group'
return function cleanup () {
document.body.classList.remove('blog-page')
document.body.classList.remove('sidebar-collapse')
}
})
return (
<>
<IndexNavbar />
<LandingPageHeader data={data} />
<Container
fluid
className='section'
>
<Row>
<Get
url={`${localhost}${location.pathname}`}
>
{(error, response, isLoading, makeRequest, axios) => {
if (error) return <div>{error.message}</div>
if (isLoading) return <ChasingDots />
if (response !== null) {
return (
response.data.map((data) =>
<Col
xs='2'
>
<Card>
<CardImg
top
width='100%'
src={data.blog_picture_context}
></CardImg>
<CardBody>
<CardTitle>{data.blog_name}</CardTitle>
<CardSubtitle>{data.blogger}</CardSubtitle>
<CardText>{data.blog_post}</CardText>
<Button
color='info'
onClick={e => props.history.push(`${data.url}`)}
>Detail</Button>
</CardBody>
</Card>
</Col>
)
)
}
return <div>something is wrong here...</div>
}}
</Get>
</Row>
</Container>
<DarkFooter />
</>
)
}
export default BlogListGroup
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment