Skip to content

Instantly share code, notes, and snippets.

@mambodin mambodin/InstaFake.js

Last active May 31, 2020
Embed
What would you like to do?
InstaFake
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.