{"version":3,"sources":["components/posts.js","components/post.js","components/form.js","App.js","reportWebVitals.js","index.js"],"names":["Posts","useState","posts","setPosts","useEffect","getPosts","a","fetch","resp","json","postsResp","align","map","post","to","id","title","username","Post","setPost","getPost","postResp","Object","keys","length","content","FormSubmission","props","handleSubmit","bind","state","event","preventDefault","formData","FormData","target","body","JSON","stringify","fromEntries","requestOptions","method","mode","credentials","headers","then","response","console","debug","setState","Response","catch","error","Error","onSubmit","this","htmlFor","className","border","type","name","placeholder","required","rows","cols","defaultValue","class","Message","positive","header","negative","React","Component","App","path","reportWebVitals","onPerfEntry","Function","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.a7f3fb7c.chunk.js","sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { Link } from \"@reach/router\";\n\nconst Posts = () => {\n  const [posts, setPosts] = useState([]);\n\n  useEffect(() => {\n    const getPosts = async () => {\n      const resp = await fetch(\n        \"https://serverless-api.30yyds.workers.dev/api/posts\"\n      );\n      const postsResp = await resp.json();\n      setPosts(postsResp);\n    };\n\n    getPosts();\n  }, []);\n\n  return (\n    <div align=\"center\">\n      <div>\n        <h1>Posts</h1>\n        {posts.map((post) => (\n          <div key={post.id}>\n            <h2>\n              <Link to={`/posts/${post.id}`}>{post.title}</Link> by {post.username}\n            </h2>\n          </div>\n        ))}\n      </div>\n      <div>\n        <h2>\n  \t      <Link to={`/create-post`}>Add New Post Here</Link>\n        </h2>\n      </div>\n    </div>  \n  );\n};\n\nexport default Posts;\n","import React, { useEffect, useState } from \"react\";\nimport { Link } from \"@reach/router\";\n\nconst Post = ({ id }) => {\n  const [post, setPost] = useState({});\n\n  useEffect(() => {\n    const getPost = async () => {\n      const resp = await fetch(\n        `https://serverless-api.30yyds.workers.dev/api/posts/${id}`\n      );\n      const postResp = await resp.json();\n      setPost(postResp);\n    };\n\n    getPost();\n  }, [id]);\n\n  if (!Object.keys(post).length) return <div />;\n\n  return (\n    <div align=\"center\">\n      <h1>{post.title}</h1>\n      <h2>Author: {post.username}</h2>\n      <p>{post.content}</p>\n      <h2>\n        <Link to={`/`}>Go back</Link>\n      </h2>\n    </div>\n  );\n};\n\nexport default Post;\n","import React, { useState, useContext } from \"react\";\nimport { Link } from \"@reach/router\";\nimport { Message, Form } from \"semantic-ui-react\";\n\nexport default class FormSubmission extends React.Component {\n  constructor(props) {\n    super(props);\n    this.handleSubmit = this.handleSubmit.bind(this);\n    this.state = {\n      resp: ''\n    };\n  }\n\n  async handleSubmit(event) {\n    event.preventDefault();\n    \n    const url = 'https://serverless-api.30yyds.workers.dev/api/create-posts';\n    const formData = new FormData(event.target);\n    const body = JSON.stringify(Object.fromEntries(formData));\n\n    const requestOptions = {\n        method: 'POST',\n        mode: 'no-cors',\n        credentials: 'include',\n        headers: {\n          'Content-Type': 'application/json',\n          'Access-Control-Request-Headers': 'Content-Type',\n          'Access-Control-Allow-Origin': '*',\n          'Access-Control-Allow-Methods': 'POST',\n        },\n        body: body\n    };\n    \n    fetch(url, requestOptions)\n        .then(response => {\n          console.debug(response);\n          this.setState({\n            resp: 'success'\n          });\n          return new Response(response, {requestOptions});\n        })\n        .catch(error => {\n          console.error(error);\n          this.setState({\n            resp: 'error'\n          });\n          return new Error(error, {requestOptions});\n        });\n  }\n\n  render() {\n    return (\n      <div>\n        <form onSubmit={this.handleSubmit.bind(this)} align=\"center\">\n          <label htmlFor=\"title\" className=\"block text-sm font-medium text-warm-gray-900\">\n            <h2><center>Title</center></h2>\n          </label>\n          <input border=\"solid 1px black\" type=\"text\" name=\"title\" id=\"title\" placeholder=\"Enter title\" required/>\n          <label htmlFor=\"username\" className=\"block text-sm font-medium text-warm-gray-900\">\n            <h2><center>Username</center></h2>\n          </label>\n          <input border=\"solid 1px black\" type=\"text\" name=\"username\" id=\"username\" placeholder=\"Enter author name\" required/>\n          <label htmlFor=\"content\" className=\"block text-sm font-medium text-warm-gray-900\">\n            <h2><center>Content</center></h2>\n          </label>\n          <textarea\n            id=\"content\"\n            name=\"content\"\n            rows=\"20\" cols=\"100\"\n            border=\"solid 1px black\"\n            text-align=\"justify\"\n            text-align-last=\"center\"\n            placeholder=\"Please write something here.\"\n            required\n            defaultValue={''}\n          />\n          <div>\n            <button class=\"btn btn-primary btn-lg\" type=\"submit\">Create Your Post!</button>\n          </div>\n          {this.state.resp === 'success' && (\n            <Message\n              positive\n              header=\"Your post is created successfully!\"\n              content=\"You may now create a new post or go back to main page.\"\n            />\n          )}\n          {this.state.resp === 'error' && (\n            <Message\n              negative\n              header=\"Something is wrong...\"\n              content=\"Please check the inputs. Otherwise please contact server admin.\"\n            />\n          )}\n          <div>\n            <h2><center><Link to={`/`}>Go Back</Link></center></h2> \n          </div>\n        </form>\n      </div>\n    );\n  }\n}\n","import { Router } from \"@reach/router\";\n\nimport Posts from './components/posts'\nimport Post from './components/post'\nimport CreatePost from './components/form'\n\nfunction App() {\n  return (\n    <Router>\n      <Posts path=\"/\" />\n      <Post path=\"/posts/:id\" />\n      <CreatePost path=\"/create-post\" />\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":""}