Blog Detail Page

BlogPage.jsx

import React, { useEffect, useState } from 'react'
import { Wave } from 'better-react-spinkit'

// now-ui views
import ProfilePageHeader from '../components/Headers/ProfilePageHeader'
import IndexNavbar from '../components/Navbars/IndexNavbar'
import DarkFooter from '../components/Footers/DarkFooter'


// Reactstrap components
import {
    Container,
    Button,
    UncontrolledTooltip,
    Jumbotron,
    Row,
    Col,

} from 'reactstrap'


// react-axios
import { Get } from 'react-axios'

// localhost
import { localhost } from '../backendConstants'
import { useLocation } from 'react-router-dom'



function BlogPage (props) {
    useEffect(() => {
        document.body.classList.add("profile-page");
        document.body.classList.add("sidebar-collapse");
        document.documentElement.classList.remove("nav-open");
        document.title = 'Blog Page'
        return function cleanup () {
            document.body.classList.remove("profile-page");
            document.body.classList.remove("sidebar-collapse");
        };
    });

    const [data, setData] = useState({})

    const location = useLocation()

    return (
        <>
            <IndexNavbar />
            <div
                className='wrapper'
            >
                <ProfilePageHeader data={data} />
                <div
                    className='section'
                >
                    <Container>
                        <div
                            className='button-container'
                        >
                            <Button
                                className='btn-round'
                                color='info'
                                size='lg'
                            >
                                Follow
                            </Button>
                            <Button
                                className='btn-round btn-icon'
                                color='default'
                                id='tooltip1'
                                size='lg'
                            >
                                <i
                                    className='fab fa-twitter'
                                />
                            </Button>
                            <UncontrolledTooltip
                                delay={0}
                                target='tooltip1'
                                placement='bottom'
                            >
                                Share this article on Twitter !!!
                            </UncontrolledTooltip>
                            <Button
                                className='btn-round btn-icon'
                                color='default'
                                id='tooltip2'
                                size='lg'
                            >
                                <i
                                    className='fab fa-instagram'
                                />
                            </Button>
                            <UncontrolledTooltip
                                delay={0}
                                target='tooltip2'
                                placement='bottom'
                            >
                                Share this article on Instagram !!!
                            </UncontrolledTooltip>
                        </div>
                    </Container>
                    <Get
                        url={`${localhost}${location.pathname}`}
                    >
                        {(error, response, isLoading, makeRequest, axios) => {
                            if (error) {
                                return (
                                    <div>
                                        {error.message}
                                    </div>
                                )
                            }
                            else if (isLoading) {
                                return (
                                    <div><Wave size={100} style={{ zIndex: '100' }} /></div>
                                )
                            }
                            else if (response !== null) {
                                console.log(response.data)
                                setData(response.data)
                                const data = response.data
                                console.log(data)
                                return (
                                    <div
                                        className='section'
                                        style={{
                                            backgroundColor: 'black'
                                        }}
                                    >
                                        <h4
                                            className='text-white'
                                            color='white'
                                            style={{
                                                textAlign: 'center'
                                            }}
                                        >{data.blog_name.toUpperCase().replace(/-/g, ' ')}</h4>
                                        <br />
                                        <Container>
                                            <Row>
                                                <Col
                                                    md={3}
                                                >
                                                    <p
                                                        className='text-white'
                                                        color='white'
                                                    >{data.blogger}</p>
                                                </Col>
                                                <Col
                                                    md={3}
                                                >
                                                    <p
                                                        className='text-white'
                                                        color='white'
                                                    >{data.date_added}</p>
                                                </Col>
                                                <Col
                                                    md={3}
                                                >
                                                    <p
                                                        className='text-white'
                                                        color='white'
                                                    >{data.blog_name}</p>
                                                </Col>
                                                <Col
                                                    md={3}
                                                >
                                                    <img
                                                        src={data.blog_picture_context}
                                                        alt={data.blog_name}
                                                        style={{
                                                            height: '200px',
                                                            width: '200px'
                                                        }}
                                                    ></img>
                                                </Col>
                                            </Row>
                                        </Container>
                                        <br />
                                        <Container>
                                            <Row>
                                                <p
                                                    className='text-white'
                                                    color='white'
                                                >{data.blog_post}</p>
                                            </Row>
                                        </Container>
                                    </div>
                                )
                            }
                            return (<div>Default</div>)
                        }}
                    </Get>
                </div>
                <DarkFooter />
            </div>
        </>
    )
}

export default BlogPage