Membuat Blog menggunakan django dan ReactJS (Lanjutan)

class Config {
    static API_URL =  'http://localhost:8000'
    
}

export default Config;

// App.jsx

import React from 'react';
import { BrowserRouter as Router, Switch } from 'react-router-dom';
import Layout from './hocs/Layout';


class App extends React.Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Layout></Layout>
                </Switch>
            </Router>
        );
    }
}

export default App;

// hocs/layout.jsx

import React, { useEffect, useState } from 'react';
import Menu from "../components/menu/Menu";
import PersonalWebComponent from '../components/PersonalWebComponent';
import BlogWebComponent from '../components/BlogWebComponent';
import { Link } from 'react-router-dom';
import "../app.scss";
import "../components/topbar/topbar.scss";


const Layout = (props) => {
    const [menuOpen, setMenuOpen] = useState(false);
    const [LinkClicked, setLinkClicked] = useState(false);
    const [HideSection, setHideSection] = useState(false);
    const [HideBlog, setHideBlog] = useState(true);

    // persist state on refresh, Using LocalStorage — Functional Components

    useEffect(() => {
        setHideSection(JSON.parse(window.localStorage.getItem('HideSection')));
        setLinkClicked(JSON.parse(window.localStorage.getItem('LinkClicked')));
        setHideBlog(JSON.parse(window.localStorage.getItem('HideBlog')));
    }, []);

    useEffect(() => {
        window.localStorage.setItem('HideSection', HideSection);
        window.localStorage.setItem('LinkClicked', LinkClicked);
        window.localStorage.setItem('HideBlog', HideBlog);
    }, [HideSection, LinkClicked, HideBlog]);

    return (
        
        <div className="app">
            <div className={"topbar " + (menuOpen && "active") } id="topbar">
                <div className="wrapper">
                    <div className="left">
                        <Link to="/" className="logo" onClick={() => { setMenuOpen(false); setLinkClicked(false); setHideSection(false); setHideBlog(true) }}>DNotes</Link>
                    </div>
                    
                    <div className="right">
                        <div className={"linkmenu " + (LinkClicked && "clicked")}>
                            <Link to="/blog" className="linkto" onClick={() => { setLinkClicked(true); setHideSection(true); setHideBlog(false) } }>Blog</Link>
                        </div>
                        
                        <div className="hamburger" onClick={() => { setMenuOpen(!menuOpen);setLinkClicked(false); setHideSection(false); setHideBlog(true) }}>
                            <span className="line1"></span>
                            <span className="line2"></span>
                            <span className="line3"></span>
                        </div>
                    </div>
                </div>
            </div>

            <Menu menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
            <PersonalWebComponent HideSection={HideSection}/>
            {props.children}
            <BlogWebComponent HideBlog={HideBlog}/>
        </div>
    );
}

export default Layout;

// src/components/menu/menu.jsx 

import "./menu.scss";


export default function Menu({ menuOpen, setMenuOpen }) {
    const listmenu = [
        {
            id: 1,
            hastag: "home",
            title: "Home",
            
        },
        {
            id: 2,
            hastag: "portfolio",
            title: "Portfolio",
            
        },
            id: 3,
            hastag: "works",
            title: "Works",
            
        },
        {
            id: 4,
            hastag: "testimonials",
            title: "Testimonials",
            
        },
        {
            id: 6,
            hastag: "contact",
            title: "Contact",
            
        },
    ]
    return (
        <div className={"menu " + (menuOpen && "active")} id="menu">
            <ul>
                {listmenu.map((item) => (
                    <li key={item.id} onClick={()=>setMenuOpen(false)}>  
                        <a href={"/#" + item.hastag}>{item.title}</a>
                    </li>
                ))}
            </ul>
        </div>
    );
}

// src/components/PersonalWebComponent.jsx

import React from 'react';
import { Route } from 'react-router-dom';
import Home from "./intro/Intro";
import Portfolio from "./portfolio/Portfolio";
import Works from "./works/Works";
import Testimonials from "./testimonials/Testimonials"
import Contacts from "./contact/Contact";
import PropTypes from 'prop-types';


class PersonalWebComponent extends React.Component {
    render() {
        if(this.props.HideSection) {
            return null;
        } else {
            return (
                <div className={"sections"}>
                    <Route exact path="/" component={Home}/>
                    <Route exact path="/" component={Portfolio}/>
                    <Route exact path="/"><Works/></Route>
                    <Route exact path="/"><Testimonials/></Route>
                    <Route exact path="/"><Contacts/></Route>
                </div> 
            );
        }
    }
}

PersonalWebComponent.propTypes = {
    HideSection: PropTypes.bool
}

PersonalWebComponent.defaultProps = {
    HideSection: false
}

export default PersonalWebComponent;

// src/components/portfolio/Portfolio.jsx

import PortfolioList from "../portfoliolist/PortfolioList"
import "./portfolio.scss"
import React, { useEffect, useState } from "react";
import axios from "axios";


export default function Portofolio() {
    const [selected, setSelected] = useState(1);
    const [data, setData] = useState([]);
    const [pfcates, setPfcates] = useState([]);
    
    useEffect(() => {
     
        // load data list portfolio dari DRF
        const fetchListCates = async () => {
            const { default: Config } = require("../../utils/config")
            try {
                const res = await axios.get(Config.API_URL +"/api/blog/portofolio_category/");
                setPfcates(res.data);
            }
            catch (err) {

            }
        }

        fetchListCates();
    }, []);


    useEffect(() => {
        const porto_cat_id = selected;

        const config = {
            headers: {
                'Content-Type': 'application/json'
            }
        };

        // load data portfolio berdasarkan list kategori yang dipilih
        const fetchData = async () => {
            const { default: Config } = require("../../utils/config")
            try {
                const res = await axios.post(Config.API_URL + `/api/blog/portofolios/`, { porto_cat_id }, config );
                setData(res.data);
            }
            catch (err) {

            }
        };

        fetchData();
    }, [selected]);

    return (
        <div className="portofolio" id="portfolio">
            <h1>Portfolio</h1>
            <ul>
                {pfcates.map((item) => (
                    <PortfolioList
                        key={item.id}
                        title={item.port_cat_name}
                        active={selected === item.id}
                        setSelected={setSelected}
                        id={item.id}
                    />
                ))}
            </ul>
            <div className="container">
                {data.map((d) => ( 
                    <div key={d.id} className="item">
                        <h3>{d.porto_title}</h3>
                        <img
                            src={d.porto_thumbnail}
                            alt=""
                        />
                    </div>
                ))}
            </div>
        </div>
    );
}

// src/components/portfoliolist/Portfoliolist.jsx

import "./portfoliolist.scss"


export default function portfoliolist({ id, title, active, setSelected }) {
    return (
        <li key={id}
            className={active ? "portfoliolist active" : "portfoliolist"} 
            onClick={()=>setSelected(id)}
        >
            {title}
        </li>
    )
}

// src/components/works/Works.jsx

import { useState, useEffect } from 'react';
import "./works.scss";
import axios from "axios";


export default function Works() {
    const [currentSlide, setCurrentSlide] = useState(0)
    const [data, setData] = useState([])

    const regex = /(<([^>]+)>)/ig;
    
    // function untuk menghilangkan html tag dari data text
    const RemoveHtmlTag = (word) => {
        if (word)
            return word.replace(regex, '');
        return '';
    };


    useEffect(() => {
        const fetchData = async () => {
            const { default: Config } = require("../../utils/config")
            try {
                const fullrest = await axios.get(Config.API_URL + "/api/blog/jobs/");
                setData(fullrest.data);
            }
            catch (err) {

            }
        }
        fetchData();

    }, [])

    const handleClick = (way)=>{
        way === "left" 
        ? setCurrentSlide(currentSlide > 0 ? currentSlide - 1 : 2)
        : setCurrentSlide(currentSlide < data.length - 1 ? currentSlide + 1 : 0);
    }

    return (
        <div className="works" id="works">
          
            <div 
                className="slider" 
                style={ transform: `translateX(-${currentSlide * 100}vw)`}
            >
                {data.map((d) => (
                    <div className="container" key={d.id}>
                        <div className="item">
                            <div className="left">
                                <div className="leftContainer">
                                    <div className="imgContainer">
                                        <img src={d.job_icon} alt="" />
                                    </div>
                                    <h2>{d.job_name}</h2>
                                    
                                    <p>{RemoveHtmlTag(d.job_desc)}</p>
                                   
                                    <span>project</span>
                                </div>
                            </div>
                            <div className="right">
                                <img src={d.jobs_thumbnail} alt="" />
                            </div>
                            
                        </div>

                    </div>
                ))}
            </div>
            <img 
                src="assets/arrow.png" 
                className="arrow left" 
                alt="" 
                onClick={()=>handleClick("left")}
            />
            <img 
                src="assets/arrow.png" 
                className="arrow right" 
                alt=""
                onClick={()=>handleClick("right")}
            />
        </div>
    );
}

// src/components/testimonials/testimonials.jsx

import './testimonial.scss'
import axios from 'axios';
import React, { useState, useEffect } from 'react';


export default function Testimonials() {
    const regex = /(<([^>]+)>)/ig;
    const RemoveHtmlTag = (word) => {
        if (word)
            return word.replace(regex, '');
        return '';
    };
    const [testimony, setTestimony] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const { default: Config } = require("../../utils/config")
            try {
                const resp = await axios.get(Config.API_URL+"/api/blog/testimonial/");
                setTestimony(resp.data);
            }
            catch (err) {

            }
        }
        fetchData();
    }, []);


    return (
        <div className="testimonials" id="testimonials">
            <h1>Testimonials</h1>
            <div className="container">
                {testimony.map((d) => ( 
                    <div key={d.id} className={d.testimonial_featured ? "card featured" : "card"}>
                        <div className="top">
                            <img src="assets/right-arrow.png" className="left" alt=""/>
                            <img className="user"
                                src={d.testimonial_img}
                                alt="" 
                            />
                            <img className="right" src={d.testimonial_icon} alt="" />
                        </div>
                        <div className="center">
                            {RemoveHtmlTag(d.testimonial_desc)}
                        </div>
                        <div className="bottom">
                            <h3>{d.testimonial_name}</h3>
                            <h3>{d.testimonial_title}</h3>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}

// src/components/contact/Contact.jsx

import "./contact.scss";
import React, { useState, useEffect } from "react";
import axios from 'axios';
import { Oval } from 'react-loader-spinner';
import { FormGroup } from '@mui/material';
import { Input } from '@mui/material';
import TextField from '@mui/material/TextField'
import toast, { Toaster } from 'react-hot-toast';
import mailcontact_img from '../assets/mailcontact.png'


export default function Contact () {
    useEffect(() => {
        window.scrollTo(0, 0);
    }, []);
   
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        message: ''
    });

    const { name, email, message } = formData;
    const [loading, setLoading] = useState(false);
    const onChange = e => setFormData(
        { ...formData, [e.target.name]: e.target.value }
    );
    const onSubmit = async (e) => {
        const { default: Config } = require("../../utils/config")        
        e.preventDefault();

        try {
            const config = {
                headers: {
                    'Content-Type': 'application/json'
                }
            };
                
            setLoading(true);
            axios.post(Config.API_URL + `/api/blog/contact/`, {name, email, message }, config)
            .then(res => {

                if (res.status === 200) {
                    setFormData({
                        name: '',
                        email: '',
                        message: ''
                    });

                    toast.success('Thank You, your message was sent', {
                    
                        // Styling
                        className: 'Toast-Message',
                        icon: '',
                    })
                }
                setLoading(false);
                window.scrollTo(0, 0);
            })
            .catch(err => {
                toast.success('Error sending message', {
                    // Styling
                    className: 'Toast-Message',
                        icon: '',
                })
              
                setLoading(false);
                window.scrollTo(0, 0);
            })

        } 
        catch (err) {
            console.log(err);
        }
    };

    return (
        <div className="contact" id="contact">
            <div className="left">
                <div className="Container">
                    <img src={mailcontact_img} alt="" />
                </div>
            </div>
            <div className="right">
                <h2>Contact</h2><br/>
                <form className="contact__form" id="contact-form" onSubmit={e => onSubmit(e)}>
                    <FormGroup sx=> 
                        <Input 
                            className='contact__form__input' 
                            name='name' 
                            type='text' 
                            placeholder='Full Name' 
                            onChange={e => onChange(e)} 
                            value={name} 
                            required 
                        />
                        <br/>
                        <Input 
                            className='contact__form__input' 
                            name='email' 
                            type='email' 
                            placeholder='example@mail.com' 
                            onChange={e => onChange(e)} 
                            value={email} 
                            required 
                        />
                        <br/>
                        <TextField
                            className='contact__form__textarea'
                            name='message'
                            multiline
                            rows={10}
                            placeholder='Message'
                            onChange={e => onChange(e)} 
                            value={message} 
                        />
                    </FormGroup>
                    <br/>
                 
                    <button 
                        className='contact__form__button' 
                        htmltype='submit'
                        disabled={loading}
                        
                    >
                        {loading ? 
                            <div className="loader-message">
                                <Oval 
                                    color={'#424242'}
                                    height={20} 
                                    width={20}
                                /> Sending...
                            </div> 
                            : 'Send'
                        }
                    </button>
                </form>
            </div>

            <Toaster
                position="top-right" 
                reverseOrder={false} 
            />
        </div>
    );
};

// src/components/blog/blog.jsx

import React, { useState, useEffect } from 'react';
import { Route } from 'react-router-dom';
import axios from 'axios';
import PropTypes from 'prop-types';

import { createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import Container from '@mui/material/Container';

import Blog from './blog/Blog'
import Category from './blog/Category';
import BlogDetail from './blog/BlogDetail';
import Header from './blog/Header';
import Footer from './blog/Footer';


const BlogWebComponent = (props) => {
    const [sectionBlog, setSectionBlog] = useState([]);

    useEffect(() => {
        const fetchSection = async () => {
            const { default: Config } = require("../utils/config")
            try {
                const res = await axios.get(Config.API_URL + "/api/blog/list_category/");
                setSectionBlog(res.data)
            }
            catch (err) {

            }
        }
        fetchSection();
    }, []);
    
    const theme = createTheme();

    if(props.HideBlog) {
        return null;
    }
    else {
        return (
            <div className="blog">
                <ThemeProvider theme={theme}>
                    <CssBaseline />
                    <Container maxWidth="lg" sx=>
                        <Header title="Blog" sections={sectionBlog}/>
                            
                        <Route exact path='/blog' component={Blog}/>
                        <Route exact path='/blog/category/:cat_title_id' component={Category}/>
                        <Route exact path='/blog/blogdetail/:id' component={BlogDetail}/>
                    </Container>
                    <Footer
                        title="Footer"
                        description="Something here to give the footer a purpose!"
                    />
                </ThemeProvider>          
            </div>
        );
    }
 
}

BlogWebComponent.propTypes = {
    HideBlog: PropTypes.bool
}

BlogWebComponent.defaultProps = {
    HideBlog: true
}

export default BlogWebComponent;

// src/components/blog/Header.jsx

import React from 'react';
import PropTypes from 'prop-types';
import Toolbar from '@mui/material/Toolbar';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link';

import { useHistory } from "react-router-dom";
import IconButton from '@mui/material/IconButton';
import SvgIcon from '@mui/material/SvgIcon';
import "./header.scss";


function HomeIcon(props) {
  return (
    <SvgIcon {...props}>
      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
    </SvgIcon>
  );
}


const Header = (props) => {
    const { sections } = props;
    
    const history = useHistory();
    const handleClickBlogHome = () => {
        history.push('/blog')
    };

    const CapitalizeFirstLetter = (word) => {
        if (word) 
            return word.charAt(0).toUpperCase() + word.slice(1);
        return '';
    }; 
  
    return (
        <React.Fragment>
            <Box sx=>
                <Toolbar
                    component="nav"
                    variant="dense"
                    sx = 
                >
                    <IconButton
                        size="small"
                        color="inherit"
                        aria-label="menu"
                        onClick={handleClickBlogHome}
                    >
                        <HomeIcon />
                    </IconButton>
                    
                        {sections.map((section) => (
                            <Link
                                underline="none" 
                                color="inherit"
                                noWrap
                                key={section.id}
                                variant="body2"
                                href={`/blog/category/${section.id}`}
                                sx=
                                
                            >
                                {CapitalizeFirstLetter(section.cat_title)}
                            </Link>

                            
                        ))}
                    
                </Toolbar>
            </Box>
        </React.Fragment>
    );
}
  
Header.propTypes = {
    sections: PropTypes.arrayOf(
      PropTypes.shape({
        cat_title: PropTypes.string.isRequired,
        id: PropTypes.number.isRequired,
      }),
    ).isRequired,
    title: PropTypes.string.isRequired,
};
  
export default Header;

// src/components/blog/Blog.jsx

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Main from './Main';


export default function Blog() {
    const [blogs, setBlogs] = useState([]);

    useEffect(() => {
        const fetchBlogs = async () => {
            const { default: Config } = require("../../utils/config")
            try {
                const res = await axios.get(Config.API_URL + "/api/blog/");
                setBlogs(res.data);
            }
            catch (err) {

            }
        }
        fetchBlogs();
    }, []);

    return (
        <Main posts={blogs}/>
    );
}

// src/components/blog/Main.jsx

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Grid from '@mui/material/Grid';
import FeaturedPost from './FeaturedPost';
import MainFeaturedPost from './MainFeaturedPost';

export default function Main(props) {
    const { posts } = props;
    const [featuredBlog, setFeaturedBlog] = useState([]);

    const capitalizeFirstLetter = (word) => {
        if (word)
            return word.charAt(0).toUpperCase() + word.slice(1);
        return '';
    };

    useEffect(() => {
        const fetchData = async () => {
            const { default: Config } = require("../../utils/config")
            try {
                const res = await axios.get(Config.API_URL + `/api/blog/featured`);
                setFeaturedBlog(res.data[0]);
            }
            catch (err) {

            }
        }
        fetchData();
    }, []);

    return (
        <main>
            <MainFeaturedPost post={featuredBlog}/>
            <Grid container spacing={3}>
                {posts.map(post => (
                    <FeaturedPost key={capitalizeFirstLetter(post.title)} post={post} />
                ))}
            </Grid>

        </main>
        
      
    );
}

// src/components/blog/MainFeaturedPost.jsx

import * as React from 'react';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Grid';
import Link from '@mui/material/Link';
import Box from '@mui/material/Box';


function MainFeaturedPost(props) {
    const { post } = props;

    return (
        <Paper
            sx={
            position: 'relative',
            backgroundColor: 'grey.800',
            color: '#fff',
            mb: 4,
            backgroundSize: 'cover',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center',
            backgroundImage: `url($)`,
            }
        >   
            {/* Increase the priority of the hero background image */}
            {<img style= src={post.thumbnail} alt={post.imageText} />}
            
            <Box
                sx={
                    position: 'absolute',
                    top: 0,
                    bottom: 0,
                    right: 0,
                    left: 0,
                    backgroundColor: 'rgba(0,0,0,.3)',
                }
            />
            <Grid container>
                <Grid item md={6}>
                    <Box
                        sx={
                            position: 'relative',
                            p: { xs: 3, md: 6},
                            pr: { md: 0},
                        }
                    >
                        <Typography component="h1" variant="h3" color="inherit" overflow="hidden" gutterBottom>
                            {post.title}
                        </Typography>
                        <Typography variant="h5" color="inherit" paragraph>
                            {post.excerpt}
                        </Typography>
                        <Link variant="subtitle1" href={`/blog/blogdetail/${post.slug}`}>
                            Continue reading...
                        </Link>
                    </Box>
                </Grid>
            </Grid>
        </Paper>
    );
}

export default MainFeaturedPost;

// src/components/blog/BlogDetail.jsx

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import dateFormat from 'dateformat';
import axios from 'axios';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';


const BlogDetail = (props) => {
    const [PostDetail, setPostDetail] = useState({});

    useEffect(() => {
        const slug = props.match.params.id;
        
        const fetchData = async () => {
            const { default: Config } = require("../../utils/config")
            try {
                const res = await axios.get(Config.API_URL + `/api/blog/${slug}`);
                setPostDetail(res.data);
            }
            catch (err) {
                
            }
            
        };
        fetchData();
    }, [props.match.params.id]);

    const createBlog = () => {
        return {__html: PostDetail.content}
    };

    const CapitalizeFirstLetter = (word) => {
        if (word)
            return word.charAt(0).toUpperCase() + word.slice(1);
        return '';
    };

    return (
        <Box mt={4}>
            <Typography variant="h4">
                {CapitalizeFirstLetter(PostDetail.title)}
            </Typography>
            <Typography variant="subtitle1">
                {dateFormat(PostDetail.date_created, "mmm dS, yyyy")}
            </Typography>
            <Typography mt={3} paragraph gutterBottom>
                <span align='justify' dangerouslySetInnerHTML={createBlog()}/>
            </Typography>

            <Link to='/blog' color="primary" underline="none">Back to Blog</Link>
        </Box>
    );

};

export default BlogDetail;

// src/components/blog/Category.jsx

import React, { useState, useEffect} from 'react'

import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import { CardActionArea, CardActions } from '@mui/material';
import Typography from '@mui/material/Typography';
import Link from '@mui/material/Link';
import Grid from '@mui/material/Grid';

import axios from 'axios';


const Category = (props) => {
    const [blogs, setBlogs] = useState([]);
    
    useEffect(() => {
        const cat_title_id = props.match.params.cat_title_id;
    
        const cfg = {
            headers: {
                'Content-Type': 'application/json'
            }
        };

        const fetchData = async () => {
            const { default: Config } = require("../../utils/config")
            try {
                const res = await axios.post(Config.API_URL + "/api/blog/category", { cat_title_id }, cfg);
                setBlogs(res.data);

            }
            catch (err) {

            }
        };
        fetchData();
    }, [props.match.params.cat_title_id]);

    const CapitalizeFirstLetter = (word) => {
        if (word)
            return word.charAt(0).toUpperCase() + word.slice(1);
        return '';
    };

    return (
        <Grid container spacing={3}>
            {blogs.map(post => (
                <Grid item xs={12} md={6} key={post.id}>
                    <CardActionArea>
                        <Card sx=>
                            <CardContent sx= >
                                <Typography variant="subtitle1" color="text.secondary">
                                    <Link href={`/blog/category/${post.cat_title_id}`} color="primary" underline="hover">{post.cat_title}</Link>
                                </Typography>
                                <Typography component="h2" variant="h5">
                                    {CapitalizeFirstLetter(post.title)}
                                </Typography>
                                <Typography variant="subtitle1" color="text.secondary">
                                    {post.month} {post.day}
                                </Typography>
                                <Typography variant="subtitle1" paragraph>
                                    {post.excerpt}
                                </Typography>
                                        
                                <CardActions>
                                    <Link href={`/blog/blogdetail/${post.slug}`} color="primary" underline="none">Continue reading...</Link>
                                </CardActions>
                            </CardContent>   
                            <CardMedia
                                component="img"
                                sx={ width: 200, heigth: 250, display: { xs: 'none', sm: 'block' } }
                                image= {post.thumbnail} 
                                alt={post.slug}
                            />
                        </Card>
                    </CardActionArea>
                </Grid>
            ))}
        </Grid>
    )
};

export default Category;