NewTextSection.jsx

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

// reactstrap components
import {
    Collapse,
    DropdownToggle,
    DropdownMenu,
    DropdownItem,
    UncontrolledDropdown,
    NavbarBrand,
    Navbar,
    NavItem,
    NavLink,
    Nav,
    Container,
    Row,
    Col,
    Form,
    FormGroup,
    Label,
    Input,
    FormText,
    Button,
    InputGroup,
    InputGroupAddon
} from "reactstrap"

export default function NewTextSection (props) {

    const [header, setHeader] = useState(false)
    const [headerText, setHeaderText] = useState(props.header)
    const [text, setText] = useState()
    const [valid, setValid] = useState()
    const [index, setIndex] = useState(props.index)
    const [textOnly, setTextOnly] = useState(props.textOnly)
    const [section, setSection] = useState({})
    const [updated, setUpdated] = useState(false)

    useEffect(() => {
        setHeader(props.header)
    }, [props.header])

    const handleOnChange = (e) => {
        if (header === true) {
            setHeaderText(e.target.value)
        } else {
            setText(e.target.value)
        }
    }

    const handleOnClickSubmit = () => {
        const section = {
            header: header,
            text: header ? headerText : text,
            index: index,
            textOnly: textOnly,
        }
        setSection(section)
        props.collectChildData(section)
        setUpdated(!updated)
    }

    const handleUpdateOnClick = () => {
        setUpdated(!updated)
    }

    return (
        <div
            className='section'
        >
            <Container>
                <Row>
                    <Col
                        className='ml-auto mr-auto text-center'
                        md='8'
                    >
                        <Form>
                            <FormGroup>
                                <Label
                                    for={header ? 'header' : 'section'}
                                >
                                    {header ? 'Header' : 'Section'}
                                </Label>
                                <InputGroup>
                                    {
                                        updated ?
                                            <InputGroupAddon
                                                addonType='prepend'
                                            >
                                                <Button
                                                    color='secondary'
                                                    onClick={handleUpdateOnClick}
                                                >Update</Button>
                                            </InputGroupAddon>
                                            :
                                            null
                                    }
                                    <Input
                                        type='textarea'
                                        name='text'
                                        id={header ? 'header' : 'section'}
                                        placeholder={header ? 'Blog Title' : 'Blog Section'}
                                        onChange={e => handleOnChange(e)}
                                    ></Input>
                                    {
                                        updated ?
                                            null
                                            :
                                            <InputGroupAddon
                                                addonType='prepend'
                                            >
                                                <Button
                                                    color='info'
                                                    onClick={handleOnClickSubmit}
                                                >Submit</Button>
                                            </InputGroupAddon>
                                    }
                                </InputGroup>
                            </FormGroup>
                        </Form>
                    </Col>
                </Row>
            </Container>
        </div>
    )
}

TextSection.jsx

import React, { useState, useContext } from 'react'
import { upload, AuthContext } from '../../backendConstants'
import update from 'react-addons-update'
import axios from 'axios'

import {
    Collapse,
    DropdownToggle,
    DropdownMenu,
    DropdownItem,
    UncontrolledDropdown,
    NavbarBrand,
    Navbar,
    NavItem,
    NavLink,
    Nav,
    Container,
    Row,
    Col,
    NavbarToggler,
    Button,
    Input
} from 'reactstrap'
// views // components
import NewTextSection from './NewTextSection'

export default function TextSection (props) {

    const auth = useContext(AuthContext)

    const [error, setError] = useState(null)
    const errors = {
        submission: 'Requires at least two text sections...',
        file: 'Image file is required.',
        option: 'You must choose one of the options...'
    }

    const [textSections, setTextSections] = useState([])
    const [submissionData, setSubmissionData] = useState([])

    const updateTextSections = (section) => {
        setTextSections(
            [
                ...textSections,
                section
            ]
        )
    }

    const [isOpen, setIsOpen] = useState(true)
    const [index, setIndex] = useState(0)
    const [fileUpload, setFileUpload] = useState(null)
    const [option, setOption] = useState(null)

    const updateIndex = () => {
        setIndex((prevState) => prevState + 1)
    }

    const handleFileOnChange = (e) => {
        setFileUpload(e.target.files[0])
    }

    const handleOptionOnChange = (e) => {
        if (e.target.value === 'Choose One') {
            setOption(null)
        }
        else {
            setOption(e.target.value)
        }
    }

    const collectChildData = (data) => {
        setSubmissionData(
            update(submissionData, {
                [data.index]: {
                    $set: data
                }
            })
        )
    }

    const post = () => {
        if (submissionData.length > 1) {
            if (fileUpload) {
                if (option) {
                    if (error) {
                        setError(null)
                    }
                    let blog_post = ''
                    let joiner = ''
                    submissionData.forEach(element =>
                        blog_post = joiner.concat(element.text) //provides a seperator for each section ie 10 dashes
                    )
                    const formData = new FormData()
                    formData.append('image', fileUpload, 'blog_picture_context')
                    axios.post(
                        upload,
                        {
                            blogger: auth.user.username,
                            blog_name: submissionData[0].text,
                            blog_post: blog_post,
                            formData,
                            blog_category: option
                        },
                        {
                            'content-type': 'multipart/form/data'
                        }
                    )
                        .then((response) => {
                            console.log(response)
                        })
                        .catch((error) => {
                            console.log(error)
                        })
                }
                else {
                    setError(errors.option)
                }
            }
            else {
                setError(errors.file)
            }
        }
        else {
            setError(errors.submission)
        }
    }

    return (
        <React.Fragment>
            <div
                className='section'
            >
                <Container>
                    <Row>
                        <Col
                            className='ml-auto mr-auto text-center'
                            md='8'
                        >
                            <h3
                                id='head'
                                className='title'
                            >
                                Create a new blog post.
                            </h3>
                        </Col>
                        <Col
                            className='ml-auto mr-auto'
                            md='8'
                        >
                            <Navbar
                                className='bg-dark'
                                expand='lg'
                            >
                                <Nav
                                    navbar
                                >
                                    <NavItem>
                                        <NavLink
                                            href='#pablo'
                                            onClick={post}
                                        >
                                            <i className='fas fa-paper-plane'> Submit</i>
                                        </NavLink>
                                    </NavItem>
                                    <NavItem>
                                        <NavLink
                                            href={index ? '#section' : '#header'}
                                            onClick={
                                                e => {
                                                    e.preventDefault()
                                                    updateIndex()
                                                    updateTextSections(
                                                        {
                                                            index: index,
                                                            textOnly: true,
                                                            header: index ? false : true,
                                                        }
                                                    )
                                                }
                                            }
                                        >
                                            <i className='fas fa-paragraph'> Text</i>
                                        </NavLink>
                                    </NavItem>
                                    <NavItem>
                                        <input
                                            type='file'
                                            name='file'
                                            onChange={e => handleFileOnChange(e)}
                                        ></input>
                                    </NavItem>
                                    <NavItem>
                                        <NavLink
                                            href='#pablo'
                                            onClick={e => e.preventDefault()}
                                        >
                                            <i className='fas fa-question'></i>
                                        </NavLink>
                                    </NavItem>
                                </Nav>
                            </Navbar>
                            {
                                error && <p>{error}</p>
                            }
                            <Input
                                type='select'
                                id='select'
                                name='select'
                                onChange={handleOptionOnChange}
                                valid={option}
                            >
                                <option defaultValue>Choose One</option>
                                <option>Culture</option>
                                <option>Business</option>
                                <option>Technology</option>
                            </Input>
                        </Col>
                    </Row>
                </Container>
            </div>
            {textSections.map((section) =>
                <NewTextSection
                    index={section.index}
                    textOnly={section.textOnly}
                    header={section.header}
                    collectChildData={collectChildData}
                />
            )}
        </React.Fragment >
    )
}