{"version":3,"sources":["components/Posts/PostList.Module.css","helpers/randomUsernameGenerator.js","components/context/PostContext.js","components/Header/NewPostDialog.js","components/Header/Header.js","components/Posts/Post.js","components/Posts/PostList.js","App.js","index.js","components/Header/NewPost.Module.css","components/Posts/Post.Module.css","components/Header/Header.Module.css"],"names":["module","exports","generateRandomUsername","a","fetch","response","json","jsonResponse","firstName","results","name","first","username","Math","floor","random","console","log","message","PostContext","React","createContext","posts","setPosts","newPostDialogState","toggleNewPostDialog","PostContextProvider","props","useState","setNewPostDialogState","useEffect","fetchPosts","process","messsage","Provider","value","prevState","children","NewPostDialog","useContext","imageToPost","setImageToPost","title","setTitle","content","setContent","imageURL","setImageURL","progress","ProgressBar","size","color","onCreatePostHandler","e","preventDefault","start","id","post","likes","method","headers","body","JSON","stringify","finish","className","styles","cardContainer","onSubmit","dialogContainer","type","placeholder","titleInput","onChange","target","required","contentInput","imageInput","hidden","lastRowContainer","onClick","prev","cameraIcon","postBtnContainer","Header","headerContainer","appName","btnContainer","newPostBtn","Post","likesCount","setLikesCount","incrementLikes","postContainer","postHead","src","alt","profilePicture","usernameText","contentPictureContainer","contentPicture","postFooter","heart","PostList","postListContainer","map","App","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.3e2a077e.chunk.js","sourcesContent":["// extracted by mini-css-extract-plugin\nmodule.exports = {\"postListContainer\":\"_3i3yqxcgkERltVd8HuuD-E\"};","// Helper to generate a random username using randomuser.me API\nconst generateRandomUsername = async () => {\n    try {\n        let response = await fetch(\n            'https://randomuser.me/api/?inc=name&nat=US',\n        );\n\n        let username;\n\n        let jsonResponse = await response.json();\n\n        let firstName = jsonResponse.results[0].name.first;\n\n        username = firstName + Math.floor(Math.random() * 100);\n\n        return username;\n    } catch (error) {\n        console.log(error.message);\n    }\n};\n\nexport default generateRandomUsername;\n","import React, { useState, useEffect } from 'react';\n\n// Context to manage entire Post State and the Active State of the form to create a post;\nconst PostContext = React.createContext({\n    posts: [],\n    setPosts: () => {},\n    newPostDialogState: '',\n    toggleNewPostDialog: () => {},\n});\n\nexport function PostContextProvider(props) {\n    const [posts, setPosts] = useState([]);\n    const [newPostDialogState, setNewPostDialogState] = useState(false);\n\n    const toggleNewPostDialog = () => {\n        setNewPostDialogState((prevState) => !prevState);\n    };\n\n    useEffect(() => {\n        const fetchPosts = async () => {\n            try {\n                const response = await fetch(`${process.env.REACT_APP_SERVER}/posts`);\n\n                const jsonResponse = await response.json();\n\n                setPosts(jsonResponse);\n            } catch (error) {\n                console.log(error.messsage);\n            }\n        };\n        fetchPosts();\n    }, []);\n\n    return (\n        <PostContext.Provider\n            value={{\n                posts: posts,\n                setPosts: setPosts,\n                newPostDialogState: newPostDialogState,\n                toggleNewPostDialog: toggleNewPostDialog,\n            }}\n        >\n            {props.children}\n        </PostContext.Provider>\n    );\n}\n\nexport default PostContext;\n","import styles from './NewPost.Module.css';\nimport { useState, useContext } from 'react';\nimport { AiOutlineCamera } from 'react-icons/ai';\nimport generateRandomUsername from '../../helpers/randomUsernameGenerator';\nimport PostContext from '../context/PostContext';\nimport ProgressBar from '@badrap/bar-of-progress';\n\nexport default function NewPostDialog() {\n    const { toggleNewPostDialog, setPosts, posts } = useContext(PostContext);\n    const [imageToPost, setImageToPost] = useState(false);\n    const [title, setTitle] = useState('');\n    const [content, setContent] = useState('');\n    const [imageURL, setImageURL] = useState('');\n    const progress = new ProgressBar({\n        size: 3,\n        color: '#ffffff',\n    });\n\n    // Toggle Image input field\n    const toggleImageToPost = (e) => {\n        e.preventDefault();\n        setImageToPost((prev) => !prev);\n    };\n\n    // Create a POST\n    const onCreatePostHandler = async (e) => {\n        e.preventDefault();\n        toggleNewPostDialog();\n        progress.start();\n\n        try {\n            let username = await generateRandomUsername();\n            let id = Math.floor(Math.random() * 1000);\n            let post = {\n                id: id,\n                username,\n                title,\n                content,\n                imageURL,\n                likes: 0,\n            };\n\n            await fetch(`${process.env.REACT_APP_SERVER}/posts`, {\n                method: 'POST',\n                headers: {\n                    'Content-Type': 'application/json',\n                },\n                body: JSON.stringify(post),\n            });\n\n            setPosts([post, ...posts]);\n        } catch (error) {\n            console.log(error.message);\n        }\n        progress.finish();\n    };\n\n    return (\n        <div className={styles.cardContainer}>\n            <form onSubmit={onCreatePostHandler}>\n                <div className={styles.dialogContainer}>\n                    <input\n                        type=\"text\"\n                        placeholder=\"Title\"\n                        className={styles.titleInput}\n                        onChange={(e) => setTitle(e.target.value)}\n                        value={title}\n                        required\n                    />\n                    <textarea\n                        type=\"text\"\n                        placeholder=\"What is happening?\"\n                        className={styles.contentInput}\n                        onChange={(e) => setContent(e.target.value)}\n                        value={content}\n                        required\n                    />\n                    <input\n                        type=\"text\"\n                        placeholder=\"Paste Image URL here\"\n                        className={\n                            imageToPost ? styles.imageInput : styles.hidden\n                        }\n                        onChange={(e) => setImageURL(e.target.value)}\n                        value={imageURL}\n                    />\n                    <div className={styles.lastRowContainer}>\n                        <button onClick={toggleImageToPost}>\n                            <AiOutlineCamera className={styles.cameraIcon} />\n                        </button>\n                        <div className={styles.postBtnContainer}>\n                            <button type=\"submit\">Post</button>\n                        </div>\n                    </div>\n                </div>\n            </form>\n        </div>\n    );\n}\n","import styles from './Header.Module.css';\nimport { useContext } from 'react';\nimport NewPostDialog from './NewPostDialog';\nimport PostContext from '../context/PostContext';\n\nexport default function Header() {\n    const { newPostDialogState, toggleNewPostDialog } = useContext(PostContext);\n\n    return (\n        <>\n            <header>\n                <div className={styles.headerContainer}>\n                    <p className={styles.appName}>CloudflareGram</p>\n                    <div className={styles.btnContainer}>\n                        <button\n                            className={styles.newPostBtn}\n                            onClick={toggleNewPostDialog}\n                        >\n                            New Post\n                        </button>\n                    </div>\n                </div>\n            </header>\n            {newPostDialogState && <NewPostDialog />}\n        </>\n    );\n}\n","import styles from './Post.Module.css';\nimport { AiOutlineHeart } from 'react-icons/ai';\nimport { useState } from 'react';\n\nexport default function Post(props) {\n    let { username, title, content, imageURL, likes, id } = props;\n    const [likesCount, setLikesCount] = useState(likes);\n\n    // Increment Likes on each Post\n    const incrementLikes = async () => {\n        try {\n            setLikesCount((prevState) => prevState + 1);\n            await fetch(\n                `${process.env.REACT_APP_SERVER}/updatelikes?id=${id}`,\n                {\n                    method: 'PATCH',\n                },\n            );\n        } catch (error) {\n            setLikesCount((prevState) => prevState - 1);\n            console.log(error.message);\n        }\n    };\n\n    return (\n        <div className={styles.postContainer}>\n            <div className={styles.postHead}>\n                <img\n                    src={`https://avatars.dicebear.com/api/open-peeps/${username}.svg`}\n                    alt={`${username}'s profile`}\n                    className={styles.profilePicture}\n                />\n                <p className={styles.usernameText}>{username || 'Test123'}</p>\n            </div>\n            <div>\n                <p className={styles.title}>{title || 'Lorem, ipsum dolor.'}</p>\n                <p>\n                    {content ||\n                        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla nam ducimus excepturi quasi voluptas? Iure repellendus quae sit quibusdam dolore velit odio eum laudantium cumque!'}\n                </p>\n                {imageURL && (\n                    <div className={styles.contentPictureContainer}>\n                        <img\n                            src={imageURL}\n                            alt={`${username}'s content`}\n                            className={styles.contentPicture}\n                        />\n                    </div>\n                )}\n            </div>\n            <div className={styles.postFooter}>\n                <button onClick={incrementLikes}>\n                    <AiOutlineHeart className={styles.heart} />\n                </button>\n                <p>{`${likesCount || 0} likes`}</p>\n            </div>\n        </div>\n    );\n}\n","import Post from './Post';\nimport styles from './PostList.Module.css';\nimport { useContext } from 'react';\nimport PostContext from '../context/PostContext';\n\nexport default function PostList() {\n    const { posts, toggleNewPostDialog, newPostDialogState } =\n        useContext(PostContext);\n    // Handling the rendering of the List of all Posts\n    return (\n        <main\n            onClick={newPostDialogState ? toggleNewPostDialog : () => {}}\n            className={styles.postListContainer}\n        >\n            {posts.map(({ username, id, title, imageURL, content, likes }) => {\n                return (\n                    <Post\n                        username={username}\n                        id={id}\n                        key={id}\n                        imageURL={imageURL}\n                        content={content}\n                        likes={likes}\n                        title={title}\n                    />\n                );\n            })}\n        </main>\n    );\n}\n","import './App.css';\nimport Header from './components/Header/Header.js';\nimport PostList from './components/Posts/PostList';\nimport { PostContextProvider } from './components/context/PostContext';\nfunction App() {\n    return (\n        <PostContextProvider>\n            <Header />\n            <PostList />\n        </PostContextProvider>\n    );\n}\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\n\nReactDOM.render(\n    <React.StrictMode>\n        <App />\n    </React.StrictMode>,\n    document.getElementById('root'),\n);\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"dialogContainer\":\"_1Zy2xwD48xANpmoDb-PB6Q\",\"contentInput\":\"_1dkKaviOBX08hpcoRGMP49\",\"imageInput\":\"_3BstcazssUzjKUEdWnFtuX\",\"titleInput\":\"_3QP-61n8N1hjp4bArocDoq\",\"hidden\":\"_3smbNcbIGUt1fakyjIN33B\",\"cameraIcon\":\"ACLUuB3hSCpFhbQ3L6kW6\",\"lastRowContainer\":\"_2pZTo-vi6R_zifl9POjhUO\",\"postBtnContainer\":\"_2Xkrgt2J9mYGtHyfdUze4T\",\"cardContainer\":\"_1dHLhg8QBsBW7ejs6FhtXo\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"profilePicture\":\"_1JKwSpvvKsmgCnf1n6EDFT\",\"postHead\":\"_15f_ognNQYMkhSbMWNsVMt\",\"usernameText\":\"_3Vblb3cOXhSUKeFP1CBQlF\",\"postContainer\":\"_12Mfp8UvbMlHbu4A3MqBE9\",\"contentPicture\":\"_1X9XkcwwbaQmSdEJ6JX-yE\",\"heart\":\"_1pFhHqBujiFkgcBEAzlOw-\",\"postFooter\":\"_3MUwiicrd3KAXxSw6Wm9pO\",\"title\":\"_21hNVRcZTBrTI1miKkHrRc\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"headerContainer\":\"_3qSHy7Z4yGMySlOdfLjcM-\",\"appName\":\"_24m0NfLvv2dCMjssz73ER9\",\"newPostBtn\":\"_1J1e7HolvuEeXGu4JeixSK\",\"btnContainer\":\"_1AorTZAODg2KaavqSg8bho\"};"],"sourceRoot":""}