{"version":3,"sources":["displayPosts.js","App.js","reportWebVitals.js","index.js"],"names":["DisplayPosts","useState","posts","setPosts","newComments","setNewComments","newUsers","setNewUsers","getPosts","axios","get","then","response","data","catch","error","console","log","useEffect","handleAddComment","e","preventDefault","postTimestamp","target","parentElement","getAttribute","username","comment","cleaned_username","cleanInput","cleaned_comment","undefined","alert","requestAddComment","handleChangeUsername","timestamp","category","handleChangeComment","ToggleAddComment","children","eventKey","toggleAccordion","useAccordionButton","type","style","backgroundColor","border","borderRadius","onClick","toSend","commentTimestamp","Date","toLocaleString","post","headers","title","content","state","setState","handleInputChange","name","value","prevState","str","split","join","ToggleAddPost","id","Accordion","defaultActiveKey","flush","Card","Header","Collapse","Body","onSubmit","cleaned_title","cleaned_content","comments","requestAddPost","className","onChange","map","line","App","path","reportWebVitals","onPerfEntry","Function","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.f5a5881c.chunk.js","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport axios from 'axios';\n\nimport { Accordion, Card } from 'react-bootstrap';\nimport { useAccordionButton } from 'react-bootstrap/AccordionButton';\n\nimport './displayPosts.css';\n\nconst DisplayPosts = () => {\n  // stores the posts to be displayed\n  const [posts, setPosts] = useState([]);\n\n  // stores the contents of any new comments being composed\n  const [newComments, setNewComments] = useState({});\n  // stores the users of any new comments being composed\n  const [newUsers, setNewUsers] = useState({});\n\n  // update the posts being displayed\n  const getPosts = () => {\n    axios\n      .get('https://serverless-api.sidwan02.workers.dev/posts')\n      .then((response) => {\n        setPosts(response.data);\n      })\n      .catch(function (error) {\n        console.log(error);\n      });\n  };\n\n  // on startup, get the posts for the initial display\n  useEffect(() => {\n    getPosts();\n  }, []);\n\n  // error check fields before posting new comment\n  const handleAddComment = (e) => {\n    e.preventDefault();\n\n    const postTimestamp = e.target.parentElement.getAttribute('class');\n\n    const username = newUsers[postTimestamp];\n    const comment = newComments[postTimestamp];\n\n    const cleaned_username = cleanInput(username);\n    const cleaned_comment = cleanInput(comment);\n\n    if (cleaned_username === '' || cleaned_username === undefined) {\n      alert('Error: Username cannot be empty');\n    } else if (cleaned_comment === '' || cleaned_comment === undefined) {\n      alert('Error: Comment cannot be empty');\n    } else {\n      requestAddComment(postTimestamp, username, comment);\n    }\n  };\n\n  // update a new comment's username to reflect changed input\n  const handleChangeUsername = (username, timestamp) => {\n    setNewUsers((category) => ({\n      ...category,\n      [timestamp]: username,\n    }));\n  };\n\n  // update a new comment's content to reflect changed input\n  const handleChangeComment = (comment, timestamp) => {\n    setNewComments((category) => ({\n      ...category,\n      [timestamp]: comment,\n    }));\n  };\n\n  // toggles the accordion containing the form to add a new comment\n  function ToggleAddComment({ children, eventKey }) {\n    const toggleAccordion = useAccordionButton(eventKey);\n\n    return (\n      <button\n        type=\"button\"\n        style={{\n          backgroundColor: 'rgba(145, 233, 164, 0.301)',\n          border: '1px solid black',\n          borderRadius: '5px',\n        }}\n        onClick={toggleAccordion}\n      >\n        {children}\n      </button>\n    );\n  }\n\n  // update the new comment in KV\n  const requestAddComment = (postTimestamp, username, comment) => {\n    const toSend = {\n      postTimestamp: postTimestamp,\n      comment: comment,\n      username: username,\n      commentTimestamp: Date().toLocaleString(),\n    };\n\n    let config = {\n      headers: {\n        'Content-Type': 'application/json',\n        'Access-Control-Allow-Origin': '*',\n      },\n    };\n\n    axios\n      .post(\n        'https://serverless-api.sidwan02.workers.dev/comment',\n        toSend,\n        config\n      )\n      .then(() => {\n        handleChangeUsername('', postTimestamp);\n        handleChangeComment('', postTimestamp);\n        getPosts();\n      })\n      .catch(function (error) {\n        console.log(error);\n      });\n  };\n\n  // stores the fields of a new post\n  const [state, setState] = useState({ title: '', username: '', content: '' });\n\n  // update a new post's content to reflect changed input\n  const handleInputChange = (name, value) => {\n    setState((prevState) => ({\n      ...prevState,\n      [name]: value,\n    }));\n  };\n\n  // update the new post in KV\n  const requestAddPost = (title, username, content) => {\n    const toSend = {\n      timestamp: Date().toLocaleString(),\n      title: title,\n      username: username,\n      content: content,\n      comments: [],\n    };\n\n    let config = {\n      headers: {\n        'Content-Type': 'application/json',\n        'Access-Control-Allow-Origin': '*',\n      },\n    };\n\n    axios\n      .post('https://serverless-api.sidwan02.workers.dev/posts', toSend, config)\n      .then(() => {\n        handleInputChange('title', '');\n        handleInputChange('username', '');\n        handleInputChange('content', '');\n        getPosts();\n      })\n      .catch(function (error) {\n        console.log(error);\n      });\n  };\n\n  // removes all whitespace from any string input\n  const cleanInput = (str) => {\n    return typeof str === 'string' ? str.split(/\\s+/).join('') : str;\n  };\n\n  // error check fields before posting new post\n  const handleAddPost = (e) => {\n    e.preventDefault();\n\n    const cleaned_title = cleanInput(state.title);\n    const cleaned_username = cleanInput(state.username);\n    const cleaned_content = cleanInput(state.content);\n\n    if (cleaned_title === '') {\n      alert('Error: Title cannot be empty');\n    } else if (cleaned_username === '') {\n      alert('Error: Username cannot be empty');\n    } else if (cleaned_content === '') {\n      alert('Error: Content cannot be empty');\n    } else {\n      requestAddPost(state.title, state.username, state.content);\n    }\n  };\n\n  // toggles the accordion containing the form to add a new post\n  function ToggleAddPost({ children, eventKey }) {\n    const toggleAccordion = useAccordionButton(eventKey);\n\n    return (\n      <button\n        type=\"button\"\n        style={{\n          backgroundColor: 'rgba(233, 188, 145, 0.301)',\n          border: '1px solid black',\n          borderRadius: '5px',\n        }}\n        onClick={toggleAccordion}\n      >\n        {children}\n      </button>\n    );\n  }\n\n  return (\n    <div>\n      <div id=\"header\">\n        <h1>Posts</h1>\n      </div>\n\n      <Accordion defaultActiveKey=\"0\" flush>\n        <Card id=\"addPostAccordion\">\n          <Card.Header id=\"accordian-header\">\n            <ToggleAddPost eventKey=\"1\">Add Post</ToggleAddPost>\n          </Card.Header>\n          <Accordion.Collapse eventKey=\"1\">\n            <Card.Body>\n              <form onSubmit={handleAddPost} id={'newPostForm'}>\n                <label>\n                  Title:\n                  <br />\n                  <input\n                    className=\"input\"\n                    id=\"titleinput\"\n                    name=\"title\"\n                    type=\"text\"\n                    value={state.title}\n                    onChange={(e) =>\n                      handleInputChange(e.target.name, e.target.value)\n                    }\n                  />\n                </label>\n\n                <br />\n                <br />\n\n                <label>\n                  Username:\n                  <br />\n                  <input\n                    className=\"input\"\n                    id=\"usernameInput\"\n                    name=\"username\"\n                    type=\"text\"\n                    value={state.username}\n                    onChange={(e) =>\n                      handleInputChange(e.target.name, e.target.value)\n                    }\n                  />\n                </label>\n\n                <br />\n                <br />\n\n                <label>\n                  Content:\n                  <br />\n                  <textarea\n                    id=\"postContent\"\n                    name=\"content\"\n                    value={state.content}\n                    onChange={(e) =>\n                      handleInputChange(e.target.name, e.target.value)\n                    }\n                  />\n                </label>\n\n                <br />\n\n                <input type=\"submit\" value=\"Submit\" />\n              </form>\n            </Card.Body>\n          </Accordion.Collapse>\n        </Card>\n      </Accordion>\n\n      <div id=\"postsContainer\">\n        {posts.map((post) => (\n          <div key={post.timestamp} id=\"singlePost\">\n            <div id=\"titleContainer\">{post.title}</div>\n\n            <div id=\"usernameTimestampContainer\">\n              <div id=\"usernameContainer\">{post.username}</div>\n              <div id=\"timestampContainer\">{post.timestamp}</div>\n            </div>\n\n            <div id=\"contentContainer\" className=\"postContainer\">\n              {post.content.split('\\n').map((line) => (\n                <p>{line}</p>\n              ))}\n            </div>\n\n            <br />\n\n            <Accordion defaultActiveKey=\"0\" flush>\n              <Card id=\"addCommentAccordion\">\n                <Card.Header>\n                  <ToggleAddComment eventKey=\"1\">Add Comment</ToggleAddComment>\n                </Card.Header>\n                <Accordion.Collapse eventKey=\"1\">\n                  <Card.Body>\n                    <div id=\"commentForm\" className={post.timestamp}>\n                      <form onSubmit={handleAddComment}>\n                        <label>\n                          Username:\n                          <br />\n                          <input\n                            name=\"username\"\n                            className=\"input\"\n                            type=\"text\"\n                            value={\n                              newUsers[post.timestamp] === undefined\n                                ? ''\n                                : newUsers[post.timestamp]\n                            }\n                            onChange={(e) =>\n                              handleChangeUsername(\n                                e.target.value,\n                                post.timestamp\n                              )\n                            }\n                          />\n                        </label>\n\n                        <br />\n                        <br />\n\n                        <label>\n                          Comment:\n                          <br />\n                          <textarea\n                            name=\"comment\"\n                            id=\"commentContent\"\n                            className=\"input\"\n                            value={newComments[post.timestamp]}\n                            onChange={(e) =>\n                              handleChangeComment(\n                                e.target.value,\n                                post.timestamp\n                              )\n                            }\n                          />\n                        </label>\n\n                        <br />\n\n                        <input type=\"submit\" value=\"Submit\" />\n                      </form>\n                    </div>\n                  </Card.Body>\n                </Accordion.Collapse>\n              </Card>\n            </Accordion>\n\n            <div id=\"lineSeparated\">Comments</div>\n\n            <div id={'commentsContainer'}>\n              {post.comments.map((comment) => (\n                <div\n                  key={comment.timestamp}\n                  id=\"singleComment\"\n                  className={comment.timestamp}\n                >\n                  <div id=\"usernameTimestampContainer\">\n                    <div id=\"usernameContainer\" className={'green-bg'}>\n                      {comment.username}\n                    </div>\n\n                    <div id=\"timestampContainer\" className={'green-bg'}>\n                      {comment.timestamp}\n                    </div>\n                  </div>\n\n                  <div id=\"contentContainer\" className=\"commentContainer\">\n                    {comment.content.split('\\n').map((line) => (\n                      <p>{line}</p>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default DisplayPosts;\n","import './App.css';\nimport { Router } from '@reach/router';\n\nimport DisplayPosts from './displayPosts.js';\nimport 'bootstrap/dist/css/bootstrap.min.css';\n\nfunction App() {\n  return (\n    <Router>\n      <DisplayPosts path=\"/\" />\n    </Router>\n  );\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}