component---src-pages-message-js-595b8920159c60c7cb40.js.map

{"version":3,"sources":["webpack:///./src/pages/Message.js"],"names":["Box","styled","posed","div","start","scale","opacity","end","transition","duration","ease","withConfig","displayName","componentId","Grid","form","Message","_React$Component","props","_this","call","toggleDarkMode","mode","localStorage","setItem","setState","darkMode","change","e","target","name","value","state","email","message","subject","file","fileNum","stage","loading","_inheritsLoose","_proto","prototype","getDarkMode","getItem","this","componentDidCatch","error","errorInfo","console","submit","displayModal","messageObj","api","then","res","success","catch","finally","componentDidMount","render","React","createElement","Layout","ModalConsumer","_ref","Fragment","SEO","title","keywords","className","Sidebar","active","Header","pose","Loader","onSubmit","preventDefault","htmlFor","type","id","onChange","onClick","DarkMode","Component"],"mappings":"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","file":"component---src-pages-message-js-595b8920159c60c7cb40.js","sourcesContent":["import React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport Layout from \"../components/layout\";\r\nimport posed from \"react-pose\";\r\nimport { Loader, Sidebar, DarkMode, SEO, Header } from \"../components/\";\r\nimport api from \"../api\";\r\nimport { ModalConsumer } from \"../context/modal-context\";\r\n\r\nconst Box = styled(\r\n  posed.div({\r\n    start: { scale: 0, opacity: 0.6 },\r\n    end: { scale: 1, opacity: 1 },\r\n    transition: {\r\n      duration: 210,\r\n      ease: \"linear\",\r\n    },\r\n  })\r\n)``;\r\n\r\nconst Grid = styled.form`\r\n  display: grid;\r\n  grid-template-columns: 60px auto;\r\n  color: white;\r\n  font-weight: bold;\r\n  width: 60%;\r\n  max-width: 1000px;\r\n  margin: auto;\r\n  @media (max-width: 1600px) {\r\n    grid-template-columns: 85px auto;\r\n  }\r\n  @media (max-width: 720px) {\r\n    width: 95%;\r\n    grid-template-columns: 100px auto;\r\n  }\r\n`;\r\n\r\nclass Message extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      name: \"\",\r\n      email: \"\",\r\n      message: \"\",\r\n      subject: \"\",\r\n      file: null,\r\n      fileNum: 0,\r\n      stage: \"start\",\r\n      darkMode: false,\r\n      loading: false,\r\n    };\r\n  }\r\n\r\n  getDarkMode() {\r\n    let mode =\r\n      (localStorage.getItem(\"dark-mode\")\r\n        ? localStorage.getItem(\"dark-mode\")\r\n        : false) === \"true\"\r\n        ? true\r\n        : false;\r\n    this.setState({ darkMode: mode });\r\n  }\r\n\r\n  componentDidCatch(error, errorInfo) {\r\n    console(error);\r\n    console(errorInfo);\r\n  }\r\n\r\n  toggleDarkMode = (mode) => {\r\n    localStorage.setItem(\"dark-mode\", mode === \"dark\" ? true : false);\r\n    this.setState({ darkMode: mode === \"dark\" ? true : false });\r\n  };\r\n\r\n  submit(displayModal) {\r\n    const { name, email, message, subject } = this.state;\r\n    const messageObj = { name, email, subject, message };\r\n    if (!name || !email || !message)\r\n      return displayModal(\"Enter all the fields\");\r\n    this.setState({ loading: true });\r\n    api\r\n      .message(messageObj)\r\n      .then((res) => {\r\n        if (res.success) displayModal(\"Sucessfully Submitted your Message\");\r\n        else displayModal(\"Could not Submit your Message. Please Try again\");\r\n        this.setState({ name: \"\", email: \"\", message: \"\", subject: \"\" });\r\n      })\r\n      .catch((e) => displayModal(\"Error. Please Try Again Later\"))\r\n      .finally(() => this.setState({ loading: false }));\r\n  }\r\n\r\n\r\n  componentDidMount() {\r\n    this.getDarkMode();\r\n    //  this.load();\r\n    this.setState({ stage: \"end\" });\r\n  }\r\n\r\n  change = (e) => {\r\n    this.setState({ [e.target.name]: e.target.value });\r\n  };\r\n  render() {\r\n    const { darkMode } = this.state;\r\n    const { name, email, message, subject } = this.state;\r\n    return (\r\n      <Layout darkMode={darkMode}>\r\n        <ModalConsumer>\r\n          {({ displayModal }) => (\r\n            <>\r\n              <SEO\r\n                title=\"Message\"\r\n                keywords={[`gatsby`, `application`, `react`]}\r\n              />\r\n              <div className=\"container\">\r\n                <Sidebar active={\"message\"} darkMode={darkMode} />\r\n                <Header active={\"message\"} darkMode={darkMode} />\r\n                <Box pose={this.state.stage}>\r\n                  <div>\r\n                    {this.state.loading && <Loader />}\r\n                    <Grid\r\n                      onSubmit={(e) => {\r\n                        e.preventDefault();\r\n                        this.submit(displayModal);\r\n                      }}\r\n                    >\r\n                      <label htmlFor=\"name\">Name:</label>\r\n                      <input\r\n                        type=\"text\"\r\n                        className=\"input\"\r\n                        id=\"name\"\r\n                        name=\"name\"\r\n                        onChange={this.change}\r\n                        value={name}\r\n                      />\r\n                      <label htmlFor=\"email\">Email: </label>\r\n                      <input\r\n                        type=\"email\"\r\n                        className=\"input\"\r\n                        id=\"email\"\r\n                        name=\"email\"\r\n                        onChange={this.change}\r\n                        value={email}\r\n                      />\r\n                      <label htmlFor=\"subject\">Subject: </label>\r\n                      <input\r\n                        type=\"text\"\r\n                        className=\"input\"\r\n                        id=\"text\"\r\n                        name=\"subject\"\r\n                        onChange={this.change}\r\n                        value={subject}\r\n                      />\r\n                      <label htmlFor=\"messagel\">Message: </label>\r\n                      <input\r\n                        type=\"text\"\r\n                        className=\"input\"\r\n                        id=\"text\"\r\n                        name=\"message\"\r\n                        onChange={this.change}\r\n                        value={message}\r\n                      />\r\n                      <button\r\n                        className={`input bt bt-custom row btt ${\r\n                          darkMode && \"dark-btn\"\r\n                        }`}\r\n                        onClick={() => this.submit(displayModal)}\r\n                      >\r\n                        Submit\r\n                      </button>\r\n                    </Grid>\r\n                  </div>\r\n                </Box>\r\n                <DarkMode\r\n                  toggleDarkMode={this.toggleDarkMode}\r\n                  darkMode={darkMode}\r\n                />\r\n              </div>\r\n            </>\r\n          )}\r\n        </ModalConsumer>\r\n      </Layout>\r\n    );\r\n  }\r\n}\r\nexport default Message;\r\n"],"sourceRoot":""}