InstaFake

InstaFake.js

import React, {useState, useEffect} from 'react'
import firebase from './database'


const DataPull = () =>{

    let [data, setData] = useState([])

    useEffect(()=>{
        firebase.database().ref('/Entries').on('value', (snapshot) => {
            let data = snapshot.val()
            let dataArray = Object.entries(data)
            setData(dataArray)

        })

        return () => firebase.database().off() 

    },[])

    return data
}

const DataWrite = ({title, image, caption,alt}) =>{
    firebase.database().ref('Entries/' + image+title).set({
        title,
        image,
        caption,
        alt
    })
}



const Posts = ({title, image, caption, alt}) =>{
    
    return (

        <div>
            <h1>{title}</h1>
            <img src={image} alt={alt} width="200"/>
            <p>{caption}</p>
        </div>
    )
}

const InputForm = ({submitPost,title,image,alt,caption, titleChange,imageChange,altChange,captionChange}) =>{


    return (
        <div>
            <form onSubmit={submitPost}>
                <label>Title: </label>
                <input type="text" value={title} onChange={titleChange}></input>
                <label>Image: </label>
                <input type="text" value={image} onChange={imageChange}></input>
                <label>Alt: </label>
                <input type="text" value={alt} onChange={altChange}></input>
                <label>Caption: </label>
                <input type="text" value={caption} onChange={captionChange}></input>
                <button></button>
            </form>
        </div>

    )
}




const InstaFake = () =>{
    let data = DataPull()


    let [title, setTitle] = useState("");
    let [image, setImage] = useState("");
    let [alt, setAlt] = useState("");
    let [caption, setCaption] = useState("");
    
    const submitPost = () => {
        DataPush({ title, image, alt, caption });
    }
    const titleChange = (e) => {
        setTitle(e.target.value);
    };
    const imageChange = (e) => {
        setImage(e.target.value);
    };
    const altChange = (e) => {
        setAlt(e.target.value);
    };
    const captionChange = (e) => {
        setCaption(e.target.value);
    }



    return (
        <div>
        <InputForm 
            submitPost={submitPost}
            title={title}
            image={image}
            alt={alt}
            caption{caption}
            titleChange={titleChange}
            imageChange={imageChange}
            altChange={altChange}
            captionChange={captionChange}
        />


            {
                data.map((post)=>{
                    return (
                        <Posts 
                        key = {post[0]}
                        title={post[1].title}
                        image={post[1].image}
                        caption={post[1].caption}
                        alt={post[1].alt}/>
                    )
                })
            }
        </div>
    )
}

export default InstaFake