{"version":3,"sources":["components/Header.js","services/memes.js","components/AddMemeForm.js","components/AddMemeButton.js","components/Meme.js","components/Memes.js","components/Main.js","App.js","index.js"],"names":["Header","className","href","baseUrl","axios","get","then","response","data","newMeme","post","AddMemeForm","memes","setMemes","useState","username","setUserName","caption","setCaption","memeURL","setMemeURL","id","onSubmit","event","preventDefault","name","url","memesService","responseMeme","console","log","tempNewMeme","concat","htmlFor","type","value","placeholder","onChange","target","autoFocus","required","AddMemeButton","addMemeToggle","setAddMemeToggle","addMemeForm","Button","variant","onClick","Meme","meme","Card","style","width","Img","src","Body","Title","Text","Memes","map","Main","App","useEffect","allMemes","ReactDOM","render","document","getElementById"],"mappings":"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","file":"static/js/main.4392368a.chunk.js","sourcesContent":["import React from 'react'\n\nconst Header = () => {\n\n    return (\n        <div className = 'header-container'>\n            <div className = 'left-header'>\n                <span className = 'left-header-content'>xmeme by</span>\n                <a href='http://utkryuk.github.io/' className='header-link'> Utkarsh</a>\n            </div>\n            <div className = 'right-header'>\n                <a href='mailto:utkryuk@gmail.com' className='header-link'>contact me</a>\n            </div>\n        </div>\n    )\n}\n\nexport default Header;","import axios from 'axios'\n\nconst baseUrl = 'https://xmeme-utkarsh.herokuapp.com/memes'\n\nconst getAll = () => {\n    \n    const req = axios.get(baseUrl)\n\n    return req.then((response) => {\n        return response.data\n    })\n}\n\nconst getAMeme = (id) => {\n\n    const req = axios.get(`${baseUrl}/${id}`)\n\n    return req.then((response) => {\n        return response.data\n    })\n}\n\nconst addMeme = (newMeme) => {\n\n    const req = axios.post(baseUrl, newMeme)\n\n    return req.then((response) => {\n        return response.data\n    })\n}\n\nexport default {getAll, getAMeme, addMeme};","import React, {useState} from 'react'\nimport memesService from '../services/memes'\n\nconst AddMemeForm = ({memes, setMemes}) => {\n\n    const [username, setUserName] = useState('')\n    const [caption, setCaption] = useState('')\n    const [memeURL, setMemeURL] = useState('')\n \n    const handleNameChange = (event) => {\n        // console.log(event.target.value)\n        setUserName(event.target.value)\n    }\n\n    const handleCaptionChange = (event) => {\n        // console.log(event.target.value)\n        setCaption(event.target.value)\n    }\n\n    const handleMemeURLChange = (event) => {\n        setMemeURL(event.target.value)\n    }\n\n    const handleFormSubmit = (event) => {\n        event.preventDefault()\n        // console.log(event.target.value)\n        let newMeme = {name: username, url: memeURL, caption: caption}\n        \n        memesService.addMeme(newMeme)\n            .then((responseMeme) => {\n                console.log(responseMeme)\n                let tempNewMeme = {...newMeme, id: responseMeme.id}\n                // console.log(tempNewMeme)\n                setMemes([tempNewMeme].concat(memes))\n                console.log('It is added')\n                setUserName('')\n                setCaption('')\n                setMemeURL('')\n            })\n    }\n\n    return (\n        <div className = 'form-container'>\n            <div className = 'form-container-element' id='meme-form'>\n                <h3>Add your meme</h3>\n                <form onSubmit={handleFormSubmit}>\n                    <label htmlFor='meme-name'>Name</label>\n                    <input name='meme-name' type='text' value={username} placeholder='Enter your full name' onChange={handleNameChange} autoFocus required></input>\n                    <label htmlFor='meme-caption'>Caption</label>\n                    <input name='meme-caption' type='text' value={caption} placeholder='Enter your meme caption' onChange={handleCaptionChange} required></input>\n                    <label htmlFor='meme-name'>Meme URL</label>\n                    <input name='meme-url' type='url' value={memeURL} placeholder='Enter your meme url' onChange={handleMemeURLChange} required></input>\n                    <label htmlFor='submit-btn'></label>\n                    <input type='submit' value='Add' className='add-btn'></input>\n                </form>\n            </div>\n            {/* <div className = 'form-container-element' id='image-preview'>\n                <img src={memeURL} className='img-prev-class'/> */}\n            {/* </div> */}\n            \n        </div>\n    )\n}\n\nexport default AddMemeForm;","import React, {useState} from 'react'\nimport {Button} from 'react-bootstrap'\nimport AddMemeForm from './AddMemeForm'\n\nconst AddMemeButton = ({memes, setMemes}) => {\n    \n    const [addMemeToggle, setAddMemeToggle] = useState(false)\n\n    const addMemeForm = (event) => {\n        event.preventDefault()\n        console.log('hello from console')\n        setAddMemeToggle((addMemeToggle) ? false: true)\n    }\n\n    if (addMemeToggle) {\n        return (\n            <div>\n                <div className='close-form-btn'>\n                    <Button variant='danger' onClick={addMemeForm}>Close</Button>\n                </div>\n            <AddMemeForm memes={memes} setMemes={setMemes}/>\n            </div>\n        )\n    }\n\n    else {\n        return (\n            <div>\n                <div className='close-form-btn'>\n                    <Button variant='success' onClick={addMemeForm}>Add Meme</Button>\n                </div>\n            </div>\n        )\n    }\n}\n\nexport default AddMemeButton;","import React from 'react'\nimport {Card, Button} from 'react-bootstrap'\n\nconst Meme = ({meme}) => {\n    \n    // const memeByIdHandler = (event, meme) => {\n    //     console.log(meme)\n    // }\n\n    return (\n        <div className='meme-item'>\n            <Card style={{ width: '15rem'}}>\n            <Card.Img variant=\"top\" src={meme.url} className='meme-img'/>\n            <Card.Body>\n                <Card.Title>By {meme.name}</Card.Title>\n                <Card.Text>{meme.caption}</Card.Text>\n                {/* <Button variant=\"primary\" onClick={(event) => memeByIdHandler(event, meme)}>Get This meme</Button> */}\n            </Card.Body>\n            </Card>\n        </div>\n    )\n}\n\nexport default Meme;","import React from 'react'\nimport Meme from './Meme'\n\nconst Memes = ({memes}) => {\n\n    return (\n        <div className='memes-container'>\n            {memes.map((meme) => {\n                return <Meme key={meme.id} meme = {meme} />\n            })}\n        </div>\n    )\n} \n\nexport default Memes;","import Memes from './Memes'\n\nconst Main = ({memes}) => {\n\n    return (\n        <div className = 'main-class'>\n            <Memes memes = {memes} />\n        </div>\n    )\n}\n\nexport default Main;","import './App.css';\nimport React, {useState, useEffect} from 'react'\nimport Header from './components/Header'\nimport AddMemeButton from './components/AddMemeButton'\nimport Main from './components/Main'\nimport memesService from './services/memes'\n\nconst App = () => {\n\n  const [memes, setMemes] = useState([])\n\n  const memeHook = () => {\n      memesService.getAll()\n          .then(allMemes => {\n              setMemes(allMemes)\n          })\n  }\n\n  useEffect(memeHook, [])\n\n  return (\n    <div>\n      <Header/>\n      <AddMemeButton memes = {memes} setMemes = {setMemes}/>\n      <Main memes = {memes}/>\n      <Header />\n    </div>\n  );\n}\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport 'bootstrap/dist/css/bootstrap.css';\n\nReactDOM.render(\n    <App />, document.getElementById('root')\n);\n"],"sourceRoot":""}