{"version":3,"sources":["states/usePosts.jsx","components/Header.jsx","states/useHeader.jsx","components/PostCard.jsx","components/ButtonDropDown.tsx","components/Option.tsx","pages/posts.js","pages/post.js","states/usePost.jsx","app-routes.tsx","App.tsx","reportWebVitals.ts","index.tsx"],"names":["usePosts","useState","posts","setPosts","choice","setChoice","getPosts","a","fetch","resp","json","postsResp","filterByOption","option","console","log","useEffect","handleSelect","value","useStyles","makeStyles","header","position","zIndex","logo","fontSize","color","display","justifyContent","authorInput","margin","width","style","top","left","transform","bgcolor","border","borderRadius","boxShadow","p","Header","classes","headerHooks","open","setOpen","username","title","upvote","description","comments","content","inputValue","setInputValue","handleClose","handleSubmit","newPost","id","length","method","body","JSON","stringify","then","catch","e","window","location","reload","handleOpen","handleChange","event","target","name","useHeader","className","AppBar","Toolbar","IconButton","onClick","fill","Modal","onClose","aria-labelledby","aria-describedby","Box","sx","Typography","variant","component","TextField","label","type","root","required","onChange","TextareaAutosize","minRows","placeholder","Button","cardWrapper","flexDirection","cursor","cardContent","padding","link","PostCard","props","post","Card","CardContent","to","textDecoration","dropdownStyles","right","ButtonDropDown","React","ClickAwayListener","onClickAway","prev","children","list","map","item","index","createStyles","opacity","active","Option","topicsContainer","alignItems","topicsText","marginRight","topic","headerContainer","cardContainer","staticTopics","Posts","postsHooks","filterOptions","op","postContainer","maxWidth","columnGap","author","upvoteWrapper","upvoteContainer","upvoteNumber","commentHeader","comment","backgroundColor","commentContainer","marginBottom","Post","postHook","postId","setPost","setUpvote","setComment","setComments","getPost","postResp","increment","res","err","decrement","handleComment","newComment","createdAt","Date","now","push","handleCancel","usePost","monthNames","Object","keys","multiline","rows","com","date","disabled","getMonth","getDate","getHours","getMinutes","container","AppRoutes","path","App","reportWebVitals","onPerfEntry","Function","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.1e263596.chunk.js","sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nexport function usePosts() {\n  const [posts, setPosts] = useState([]);\n  const [choice, setChoice] = useState(-1);\n\n\n  const getPosts = async () => {\n    const resp = await fetch(\n      \"https://worker-api.minh160302.workers.dev/posts\"\n    );\n    const postsResp = await resp.json();\n    setPosts(postsResp);\n  };\n\n  const handleSelect = (value) => {\n    if (value === choice) {\n      setChoice(-1);\n      value = -1;\n    }\n    else {\n      setChoice(value);\n    }\n\n    filterByOption(value);\n  }\n\n  // [\"Sort by ascending upvote\", \"Sort by descending upvote\"];\n  // fetch api after select filter options\n  const filterByOption = async (option) => {\n    // asc\n    if (option == 0) {\n      const resp = await fetch(\n        \"https://worker-api.minh160302.workers.dev/posts_asc\"\n      );\n      const postsResp = await resp.json();\n      setPosts(postsResp);\n    }\n\n    // desc\n    else if (option == 1) {\n      const resp = await fetch(\n        \"https://worker-api.minh160302.workers.dev/posts_desc\"\n      );\n      const postsResp = await resp.json();\n      setPosts(postsResp);\n    }\n\n    // no filter\n    else if (option == -1) {\n      getPosts();\n    }\n\n    // unknown cases(?)\n    else {\n      console.log(\"Unknown filter options!\")\n    }\n  }\n\n\n  useEffect(() => {\n    getPosts();\n  }, [])\n\n  return { posts, choice, handleSelect, setPosts }\n}","import React from \"react\";\n//  @mui\nimport AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';\nimport {\n  AppBar, IconButton, Modal, Toolbar, Box,\n  Typography, TextareaAutosize, TextField, Button\n} from \"@mui/material\"\nimport { makeStyles } from \"@mui/styles\"\n// @components\nimport { useHeader } from \"../states/useHeader\";\n\n\nconst useStyles = makeStyles({\n  header: {\n    position: \"fixed\",\n    zIndex: 10\n  },\n  logo: {\n    fontSize: 20,\n    color: \"#ffffff\",\n    display: \"flex\",\n    justifyContent: \"space-between\"\n  },\n  authorInput: {\n    margin: \"15px 0px !important\",\n    width: \"100%\"\n  }\n})\n\nconst style = {\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  bgcolor: 'background.paper',\n  border: '2px solid #000',\n  borderRadius: 6,\n  boxShadow: 24,\n  p: 4,\n};\n\nexport default function Header() {\n  const classes = useStyles();\n  const headerHooks = useHeader();\n\n  const displayDesktop = () => {\n    return <Toolbar className={classes.logo}>\n      <h3>Minh Nguyen' Medium</h3>\n      {/* open modal */}\n      <IconButton onClick={headerHooks.handleOpen}>\n        <AddCircleOutlineIcon style={{ fill: \"#fff\" }} />\n      </IconButton>\n    </Toolbar>;\n  };\n\n  return (\n    <header className={classes.header}>\n      <AppBar>{displayDesktop()}</AppBar>\n      <Modal\n        open={headerHooks.open}\n        onClose={headerHooks.handleClose}\n        aria-labelledby=\"modal-modal-title\"\n        aria-describedby=\"modal-modal-description\"\n      >\n        <Box sx={style}>\n          <Typography id=\"modal-modal-title\" variant=\"h6\" component=\"h2\">\n            Create post\n          </Typography>\n          <TextField\n            label=\"Author\"\n            type=\"text\"\n            classes={{\n              root: classes.authorInput\n            }}\n            required\n            value={headerHooks.inputValue.username}\n            name=\"username\"\n            onChange={headerHooks.handleChange}\n          />\n          <TextField\n            label=\"Title\"\n            type=\"text\"\n            classes={{\n              root: classes.authorInput\n            }}\n            required\n            value={headerHooks.inputValue.title}\n            name=\"title\"\n            onChange={headerHooks.handleChange}\n          />\n          <TextField\n            label=\"Description\"\n            type=\"text\"\n            classes={{\n              root: classes.authorInput\n            }}\n            required\n            value={headerHooks.inputValue.description}\n            name=\"description\"\n            onChange={headerHooks.handleChange}\n          />\n          <TextareaAutosize\n            minRows={5}\n            placeholder=\"Content goes here...\"\n            style={{ width: \"100%\" }}\n            value={headerHooks.inputValue.content}\n            name=\"content\"\n            onChange={headerHooks.handleChange}\n          />\n          <div>\n            <Button onClick={headerHooks.handleSubmit}>Submit</Button>\n            <Button onClick={headerHooks.handleClose} color=\"error\">Cancel</Button>\n          </div>\n        </Box>\n      </Modal>\n    </header>\n  );\n}","import React, { useEffect, useState } from \"react\";\nimport { usePosts } from \"./usePosts\";\n\nexport function useHeader() {\n  const postsHooks = usePosts()\n  const [open, setOpen] = useState(false);\n  const [inputValue, setInputValue] = useState({\n    username: \"\",\n    title: \"\",\n    upvote: 0,\n    description: \"\",\n    comments: [],\n    content: \"\"\n  })\n\n  const handleOpen = () => {\n    setOpen(true)\n  }\n\n  const handleClose = () => {\n    setOpen(false)\n    setInputValue({\n      username: \"\",\n      title: \"\",\n      upvote: 0,\n      description: \"\",\n      comments: [],\n      content: \"\"\n    })\n  }\n\n  const handleChange = (event) => {\n    setInputValue({\n      ...inputValue,\n      [event.target.name]: event.target.value\n    })\n  }\n\n  const handleSubmit = async () => {\n    const resp = await fetch(\n      \"https://worker-api.minh160302.workers.dev/posts\"\n    );\n    const postsResp = await resp.json();\n\n    const newPost = {\n      id: `${postsResp.length + 1}`,\n      ...inputValue\n    }\n\n    await fetch(`https://worker-api.minh160302.workers.dev/posts`, {\n      method: \"POST\",\n      body: JSON.stringify(newPost),\n    })\n      .then(() => {\n        handleClose()\n      })\n      .catch(e => {\n        console.log(e)\n      })\n\n    window.location.reload()\n  }\n\n  return { open, handleOpen, handleClose, inputValue, handleChange, handleSubmit };\n}\n","import React from \"react\";\nimport { RouteComponentProps, Link } from \"@reach/router\";\n// @mui/material\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport CardMedia from '@mui/material/CardMedia';\nimport IconButton from '@mui/material/IconButton';\nimport Typography from '@mui/material/Typography';\nimport SkipPreviousIcon from '@mui/icons-material/SkipPrevious';\nimport PlayArrowIcon from '@mui/icons-material/PlayArrow';\nimport SkipNextIcon from '@mui/icons-material/SkipNext';\nimport { makeStyles } from \"@mui/styles\"\n\n\nconst useStyles = makeStyles({\n  cardWrapper: {\n    display: 'flex',\n    width: \"fit-content\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    width: \"60%\",\n    boxShadow: \"none !important\",\n    // border: \"1px solid black\"\n    \"&:hover\": {\n      cursor: \"pointer\"\n    }\n  },\n  cardContent: {\n    width: \"100%\"\n  },\n  username: {\n    padding: 8\n  },\n  link: { \n    color: \"#1976d2\",\n    \"&:visited\": {\n      color: \"#1976d2\"\n    }\n  }\n})\n\n\nconst PostCard = (props) => {\n  const { post } = props;\n  const classes = useStyles();\n\n  return (\n    <Card className={classes.cardWrapper}>\n      <CardContent className={classes.cardContent}>\n        <Link to={`/posts/${post.id}`} style={{textDecoration: \"none\"}} className={classes.link}>\n          <Typography component=\"div\" variant=\"h5\" className={classes.title}>\n            {post.title}\n          </Typography>\n        </Link>\n        <Typography className={classes.username} component=\"div\" variant=\"h7\">\n          by <span><strong>{post.username}</strong></span>\n        </Typography>\n        <Typography variant=\"subtitle1\">\n          Upvote: {post.upvote}\n        </Typography>\n        <Typography variant=\"subtitle1\" color=\"text.secondary\" component=\"div\">\n          {post.description}\n        </Typography>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport default PostCard;","import React from \"react\";\n// @mui/*\nimport ClickAwayListener from '@mui/material/ClickAwayListener';\nimport Box from '@mui/material/Box';\nimport { createStyles, makeStyles } from \"@mui/styles\"\nimport { Button } from \"@mui/material\";\nimport { SxProps } from \"@mui/system\";\n\n// @types\nconst dropdownStyles: SxProps = {\n  position: 'absolute',\n  top: 40,\n  right: 0,\n  left: 0,\n  border: '1px solid #1976d2',\n  borderRadius: 6,\n  padding: \"12px\",\n  bgcolor: 'background.paper',\n  width: \"fit-content\"\n};\n\n\ninterface IButtonProps {\n  // children should be an icon\n  children: React.ReactNode;\n  list: React.ReactNode[];\n}\n\n// @component\nconst ButtonDropDown: React.FC<IButtonProps> = (props) => {\n  const [open, setOpen] = React.useState(false);\n\n  const handleClick = () => {\n    setOpen((prev) => !prev);\n  };\n\n  const handleClickAway = () => {\n    setOpen(false);\n  };\n\n  return (\n    <ClickAwayListener onClickAway={handleClickAway}>\n      <Box sx={{ position: 'relative' }}>\n        <Button type=\"button\" onClick={handleClick}>\n          {props.children}\n        </Button>\n        {open ? (\n          <Box sx={dropdownStyles}>\n            {props.list.map((item, index) => <div key={index}>{item}</div>)}\n          </Box>\n        ) : null}\n      </Box>\n    </ClickAwayListener>\n  )\n}\n\nexport default ButtonDropDown;","import React, { ReactNode } from \"react\"\nimport { createStyles, makeStyles } from \"@mui/styles\"\n\nconst useStyles = makeStyles(() =>\n  createStyles({\n    option: {\n      width: 200,\n      padding: \"12px 5px\",\n      \"&:hover\": {\n        cursor: \"pointer\",\n        opacity: 0.6\n      }\n    },\n    active: {\n      color: \"#1976d2\"\n    }\n  })\n)\n\ninterface IOptionProps {\n  option: ReactNode;\n  active: boolean;\n  handleSelect: (value: number) => void;\n}\n\nconst Option: React.FC<IOptionProps> = (props) => {\n  const { option, active, handleSelect } = props;\n  const classes = useStyles();\n\n  return <div className={classes.option} onClick={handleSelect}>\n    <div className={active === true ? classes.active : \"\"}>{option}</div>\n  </div>;\n};\n\nexport default Option;","import React from \"react\";\n// @router\nimport { RouteComponentProps, Link } from \"@reach/router\";\n// @mui\nimport { makeStyles } from \"@mui/styles\";\nimport FilterListIcon from \"@mui/icons-material/FilterList\";\n// components\nimport PostCard from \"../components/PostCard\";\nimport { usePosts } from \"../states/usePosts\";\nimport ButtonDropDown from \"../components/ButtonDropDown\";\nimport Option from \"../components/Option\";\n\nconst useStyles = makeStyles({\n  topicsContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  topicsText: {\n    marginRight: 15,\n  },\n  topic: {\n    margin: 10,\n  },\n  headerContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    // columnGap: 30,\n    width: \"60%\",\n    margin: \"auto\",\n    justifyContent: \"space-between\",\n  },\n  cardContainer: {\n    width: \"60%\",\n    margin: \"20px auto\",\n    boxShadow: \"none\",\n  },\n});\n\nconst staticTopics = [\"Sports\", \"Software\", \"Cars\"];\n\nconst Posts = (props: RouteComponentProps) => {\n  const classes = useStyles();\n  const postsHooks = usePosts();\n\n  // options for filter (string)\n  const options = [\"Sort by ascending upvote\", \"Sort by descending upvote\"];\n\n  // list options components\n  const filterOptions = options.map((op, index) => {\n    return (\n      <Option\n        key={index}\n        option={op}\n        handleSelect={() => postsHooks.handleSelect(index)}\n        active={postsHooks.choice === index}\n      />\n    );\n  });\n\n  return (\n    <div>\n      <div className={classes.topicsContainer}>\n        <h1 className={classes.topicsText}>YOUR TOPICS</h1>\n        {staticTopics.map((topic, index) => (\n          <div key={index} className={classes.topic}>\n            {topic}\n          </div>\n        ))}\n      </div>\n      <section className={classes.headerContainer}>\n        <h1>Posts</h1>\n        <ButtonDropDown list={filterOptions}>\n          <FilterListIcon />\n        </ButtonDropDown>\n      </section>\n      {postsHooks.posts.map((post) => (\n        <div key={post.id} className={classes.cardContainer}>\n          <PostCard post={post} />\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default Posts;\n","import React from \"react\";\n// @reach/router\nimport { Link } from \"@reach/router\";\n// @mui\nimport { makeStyles } from \"@mui/styles\";\nimport ThumbUpAltOutlinedIcon from \"@mui/icons-material/ThumbUpAltOutlined\";\nimport ThumbDownAltOutlinedIcon from \"@mui/icons-material/ThumbDownAltOutlined\";\nimport InsertCommentOutlinedIcon from \"@mui/icons-material/InsertCommentOutlined\";\nimport TextField from \"@mui/material/TextField\";\nimport { Button, IconButton } from \"@mui/material\";\n// components\nimport { usePost } from \"../states/usePost\";\nimport PostCard from \"../components/PostCard\";\n\n\nconst useStyles = makeStyles({\n  postContainer: {\n    maxWidth: 1200,\n    margin: \"auto\",\n    display: \"flex\",\n    columnGap: 30,\n  },\n  author: {\n    display: \"flex\",\n    alignItems: \"center\",\n    columnGap: 15,\n  },\n  upvoteWrapper: {\n    display: \"flex\",\n  },\n  upvoteContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"flex-start\",\n  },\n  upvoteNumber: {\n    padding: 8,\n  },\n  commentHeader: {\n    margin: \"50px 0px 15px 0px\",\n  },\n  comment: {\n    width: \"100%\",\n    backgroundColor: \"#ffffff\",\n  },\n  commentContainer: {\n    marginBottom: 20,\n  },\n});\n\nconst Post = ({ id }) => {\n  const classes = useStyles();\n  const postHook = usePost(id);\n\n  const monthNames = [\n    \"January\",\n    \"February\",\n    \"March\",\n    \"April\",\n    \"May\",\n    \"June\",\n    \"July\",\n    \"August\",\n    \"September\",\n    \"October\",\n    \"November\",\n    \"December\",\n  ];\n\n  if (!Object.keys(postHook.post).length) return <div />;\n\n  return (\n    <div className={classes.postContainer}>\n      {/* left part */}\n      <section>\n        <div className={classes.author}>\n          <h1>Author</h1>\n          <span>\n            <em>{postHook.post.username}</em>\n          </span>\n        </div>\n\n        <div className={classes.upvoteWrapper}>\n          <div>\n            <div className={classes.upvoteContainer}>\n              <IconButton onClick={postHook.increment}>\n                <ThumbUpAltOutlinedIcon />\n              </IconButton>\n            </div>\n            <div className={classes.upvoteContainer}>\n              <IconButton onClick={postHook.decrement}>\n                <ThumbDownAltOutlinedIcon />\n              </IconButton>\n            </div>\n            <span className={classes.upvoteNumber}>{postHook.upvote}</span>\n          </div>\n\n          <div className={classes.upvoteContainer}>\n            <IconButton>\n              <InsertCommentOutlinedIcon />\n            </IconButton>\n          </div>\n        </div>\n      </section>\n\n      {/* right part */}\n      <section>\n        <h1>{postHook.post.title}</h1>\n        <span>\n          <em>{postHook.post.description}</em>\n        </span>\n        <p>{postHook.post.content}</p>\n        <p>\n          {/* <em>Published {new Date(post.published_at).toLocaleString()}</em> */}\n        </p>\n        <p>\n          <Link to=\"/\">Go back</Link>\n        </p>\n\n        {/* comment section */}\n        <h3 className={classes.commentHeader}>Comments</h3>\n        <div>\n          <TextField\n            id=\"filled-multiline-static\"\n            label={\n              <span>\n                contributed as{\" \"}\n                <strong>\n                  <em>Guest &nbsp;</em>\n                </strong>\n              </span>\n            }\n            multiline\n            rows={4}\n            placeholder=\"Write your thoughts here!\"\n            variant=\"filled\"\n            value={postHook.comment}\n            onChange={postHook.handleChange}\n            className={classes.comment}\n          />\n          <Button onClick={postHook.handleComment}>Save</Button>\n          <Button color=\"error\" onClick={postHook.handleCancel}>Cancel</Button>\n        </div>\n\n        {/* existed comment */}\n        <div>\n          {postHook.post.comments.map((com, index) => {\n            const date = new Date(com.createdAt);\n            return (\n              <div className={classes.commentContainer} key={index}>\n                <TextField\n                  id=\"outlined-multiline-static\"\n                  label={\n                    <span>\n                      contributed as{\" \"}\n                      <strong>\n                        <em>Guest &nbsp;</em>\n                      </strong>\n                    </span>\n                  }\n                  multiline\n                  value={com.content}\n                  variant=\"filled\"\n                  classes={{\n                    root: classes.comment,\n                  }}\n                  disabled={true}\n                />\n                <div>\n                  <em>\n                    Comment at: {monthNames[date.getMonth()]} {date.getDate()},{\" \"}\n                    {date.getHours()}:{date.getMinutes()}\n                  </em>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </section>\n    </div>\n  );\n};\n\nexport default Post;\n","import React, { useEffect, useState } from \"react\";\n\nexport function usePost(postId) {\n  const [post, setPost] = useState({});\n  const [upvote, setUpvote] = useState(0);\n  const [comment, setComment] = useState(\"\")\n  const [comments, setComments] = useState([])\n\n  const getPost = async () => {\n    const resp = await fetch(\n      `https://worker-api.minh160302.workers.dev/posts/${postId}`\n    );\n    const postResp = await resp.json();\n    setPost(postResp);\n    setUpvote(postResp.upvote);\n  };\n\n  // change upvote value\n  const increment = async () => {\n    setUpvote(upvote + 1);\n\n    post.upvote = upvote + 1;\n    await fetch(`https://worker-api.minh160302.workers.dev/posts`, {\n      method: \"POST\",\n      body: JSON.stringify(post),\n    })\n      .then((res) => {\n        console.log(\"response: \", res);\n      })\n      .catch((err) => {\n        console.log(\"error:\", err);\n      });\n  };\n\n  const decrement = async () => {\n    setUpvote(upvote - 1);\n    post.upvote = upvote - 1;\n    await fetch(`https://worker-api.minh160302.workers.dev/posts`, {\n      method: \"POST\",\n      body: JSON.stringify(post),\n    })\n      .then((res) => {\n        console.log(\"response: \", res);\n      })\n      .catch((err) => {\n        console.log(\"error:\", err);\n      });\n  };\n\n\n  // comment\n  const handleChange = (event) => {\n    setComment(event.target.value);\n  }\n\n  const handleComment = async () => {\n    const newComment = {\n      content: comment,\n      createdAt: Date.now()\n    }\n\n    post.comments.push(newComment);\n    await fetch(`https://worker-api.minh160302.workers.dev/posts`, {\n      method: \"POST\",\n      body: JSON.stringify(post),\n    })\n      .then((res) => {\n        setComments(post);\n        setComment(\"\")\n      })\n      .then(() => {\n        getPost();\n      })\n      .catch((err) => {\n        console.log(\"error:\", err);\n      });\n  }\n\n  const handleCancel = () => {\n    setComment(\"\")\n  }\n\n  useEffect(() => {\n    getPost();\n  }, [postId]);\n\n  return { post, increment, decrement, upvote, \n    handleComment, comment, handleChange, handleCancel\n  };\n}\n","import React from \"react\"\nimport { Router, RouteComponentProps, Link } from \"@reach/router\"\nimport Posts from './pages/posts'\nimport Post from './pages/post'\nimport { makeStyles } from \"@mui/styles\"\n\n\nconst useStyles = makeStyles({\n  container: {\n    margin: \"85px 15px 0px 15px\",\n  }\n})\n\n\nfunction AppRoutes() {\n  const classes = useStyles();\n\n  return (\n    <div className={classes.container}>\n      <Router>\n        <Posts path=\"/\" />\n        <Post path=\"/posts/:id\" />\n      </Router>\n    </div>\n  );\n}\n\nexport default AppRoutes;","import React from \"react\"\nimport { Router, RouteComponentProps, Link } from \"@reach/router\"\nimport Posts from './pages/posts'\nimport Post from './pages/post'\nimport Header from \"./components/Header\";\nimport AppRoutes from \"./app-routes\";\n\nfunction App() {\n  return (\n    <div>\n      <Header />\n      <AppRoutes />\n    </div>\n  );\n}\n\nexport default App;","import { ReportHandler } from 'web-vitals';\n\nconst reportWebVitals = (onPerfEntry?: ReportHandler) => {\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":""}