diff --git a/backend/public/js/app.js b/backend/public/js/app.js index e13b625b..8183287d 100644 --- a/backend/public/js/app.js +++ b/backend/public/js/app.js @@ -37288,11 +37288,13 @@ __webpack_require__.r(__webpack_exports__); /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js"); -/* harmony import */ var _material_ui_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @material-ui/core */ "./node_modules/@material-ui/core/Button/Button.js"); /* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! axios */ "./node_modules/axios/index.js"); /* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_1__); -/* harmony import */ var _material_ui_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @material-ui/core */ "./node_modules/@material-ui/core/CircularProgress/CircularProgress.js"); -/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js"); +/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react-router-dom */ "./node_modules/react-router/esm/react-router.js"); +/* harmony import */ var _material_ui_lab__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @material-ui/lab */ "./node_modules/@material-ui/lab/LoadingButton/LoadingButton.js"); +/* harmony import */ var _material_ui_core__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @material-ui/core */ "./node_modules/@material-ui/core/CircularProgress/CircularProgress.js"); +/* harmony import */ var _component_alert__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../component/alert */ "./resources/js/component/alert.jsx"); +/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js"); function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } @@ -37312,7 +37314,11 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } + + var Contact = function Contact() { + var history = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_4__.useHistory)(); + var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(''), _useState2 = _slicedToArray(_useState, 2), email = _useState2[0], @@ -37325,8 +37331,8 @@ var Contact = function Contact() { var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false), _useState6 = _slicedToArray(_useState5, 2), - loading = _useState6[0], - setLoading = _useState6[1]; + submit = _useState6[0], + setSubmit = _useState6[1]; var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({ email: '', @@ -37343,62 +37349,74 @@ var Contact = function Contact() { var handleSubmit = function handleSubmit(e) { e.preventDefault(); - setLoading(true); //show progressbar + setSubmit(true); //show progressbar + set422Errors({ + email: '', + message: '' + }); var formdata = new FormData(); formdata.append('email', email); formdata.append('message', message); - axios__WEBPACK_IMPORTED_MODULE_1___default().post('/api/contacts/register/', formdata).then(function (response) { - if (response.data.status_code == 200) { - window.location.href = '/contact-us/complete'; - } else if (response.data.status_code == 422) { - set422Errors(response.data.error_messages); - } else if (response.data.status_code == 400) { - set400Error(response.data.error_messages); + axios__WEBPACK_IMPORTED_MODULE_1___default().post('/api/contacts/register', formdata).then(function (response) { + setSubmit(false); + + switch (response.data.status_code) { + case 200: + history.push({ + pathname: '/contact-us/complete', + state: {} + }); + break; + + case 422: + set422Errors(response.data.error_messages); + break; + + case 400: + set400Error(response.data.error_messages); + break; } - setLoading(false); + ; })["catch"](function (err) { return console.log(err); }); }; - return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("form", { + return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("form", { onSubmit: handleSubmit, noValidate: true, - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("p", { - className: "text-center font-weight-bold ft-20", + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("p", { + className: "text-center font-weight-bold ft-25", children: "\u304A\u554F\u3044\u5408\u308F\u305B" - }), _400error.length != 0 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("span", { - className: "l-alert__text--error ft-16 ft-md-14", - children: _400error - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", { className: "edit-set", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("label", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("label", { htmlFor: "email", className: "control-label ft-md-12", children: "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9" - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("input", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("input", { type: "email", name: "email", id: "email", - className: "input-default ".concat(_422errors.email && "is-invalid c-input__target", " "), + className: "input-default input-h60 ".concat(_422errors.email && "is-invalid c-input__target", " "), value: email, onChange: function onChange(e) { return setEmail(e.target.value); }, autoFocus: true - }), _422errors.email && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("span", { + }), _422errors.email && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span", { className: "l-alert__text--error ft-16 ft-md-14", children: _422errors.email })] - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", { className: "edit-set", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("label", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("label", { htmlFor: "message", className: "control-label ft-md-12", children: " \u304A\u554F\u5408\u305B\u5185\u5BB9 " - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("textarea", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("textarea", { name: "message", id: "message", rows: "7", @@ -37407,25 +37425,31 @@ var Contact = function Contact() { onChange: function onChange(e) { return setMessage(e.target.value); } - }), _422errors.message && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("span", { + }), _422errors.message && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span", { className: "l-alert__text--error ft-16 ft-md-14", children: _422errors.message })] - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", { - className: "mt-5", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_material_ui_core__WEBPACK_IMPORTED_MODULE_3__.default, { - type: "submit", - fullWidth: true, - className: "p-4 rounded-20 ft-15 font-weight-bold text-black bg-yellow", - children: " \u9001\u4FE1 " + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_material_ui_lab__WEBPACK_IMPORTED_MODULE_5__.default, { + type: "submit", + fullWidth: true, + className: "rounded-15 py-3 mt-5 bg-yellow", + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span", { + className: "font-weight-bold ft-18 text-black", + children: "\u9001\u4FE1" }) - }), loading && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div", { + }), submit && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_material_ui_core__WEBPACK_IMPORTED_MODULE_6__.default, { style: { position: 'fixed', left: 'calc( 50% - 20px)', - top: '45%' + top: '45%', + color: 'green' + } + }), _400error && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_component_alert__WEBPACK_IMPORTED_MODULE_2__.default, { + type: "fail", + hide: function hide() { + return set400Error(''); }, - children: [" ", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_material_ui_core__WEBPACK_IMPORTED_MODULE_4__.default, {})] + children: _400error })] }); }; @@ -37446,11 +37470,13 @@ __webpack_require__.r(__webpack_exports__); /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js"); -/* harmony import */ var _material_ui_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @material-ui/core */ "./node_modules/@material-ui/core/Button/Button.js"); +/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react-router-dom */ "./node_modules/react-router/esm/react-router.js"); +/* harmony import */ var _material_ui_core__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @material-ui/core */ "./node_modules/@material-ui/core/Button/Button.js"); /* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! axios */ "./node_modules/axios/index.js"); /* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_1__); -/* harmony import */ var _material_ui_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @material-ui/core */ "./node_modules/@material-ui/core/CircularProgress/CircularProgress.js"); -/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js"); +/* harmony import */ var _material_ui_core__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @material-ui/core */ "./node_modules/@material-ui/core/CircularProgress/CircularProgress.js"); +/* harmony import */ var _component_alert__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../component/alert */ "./resources/js/component/alert.jsx"); +/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js"); function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } @@ -37470,7 +37496,11 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } + + var UnknownError = function UnknownError() { + var history = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_4__.useHistory)(); + var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(''), _useState2 = _slicedToArray(_useState, 2), email = _useState2[0], @@ -37483,8 +37513,8 @@ var UnknownError = function UnknownError() { var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false), _useState6 = _slicedToArray(_useState5, 2), - loading = _useState6[0], - setLoading = _useState6[1]; + submit = _useState6[0], + setSubmit = _useState6[1]; var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({ email: '', @@ -37501,45 +37531,57 @@ var UnknownError = function UnknownError() { var handleSubmit = function handleSubmit(e) { e.preventDefault(); - setLoading(true); //show progressbar + setSubmit(true); //show progressbar + set422Errors({ + email: '', + message: '' + }); var formdata = new FormData(); formdata.append('email', email); formdata.append('message', message); axios__WEBPACK_IMPORTED_MODULE_1___default().post('/api/contacts/register/', formdata).then(function (response) { - if (response.data.status_code == 200) { - window.location.href = '/contact-us/complete'; - } else if (response.data.status_code == 422) { - set422Errors(response.data.error_messages); - } else if (response.data.status_code == 400) { - set400Error(response.data.error_messages); + setSubmit(false); + + switch (response.data.status_code) { + case 200: + history.push({ + pathname: '/contact-us/complete', + state: {} + }); + break; + + case 422: + set422Errors(response.data.error_messages); + break; + + case 400: + set400Error(response.data.error_messages); + break; } - setLoading(false); + ; })["catch"](function (err) { return console.log(err); }); }; - return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("form", { + return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("form", { onSubmit: handleSubmit, noValidate: true, - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("p", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("p", { className: "text-center font-weight-bold ft-20", children: "\u4E0D\u660E\u306A\u30A8\u30E9\u30FC" - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("span", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("span", { className: "mb-4 mt-50-px l-alert__text--error ft-16 ft-md-14 ", - children: ["\u4E0D\u660E\u306A\u30A8\u30E9\u30FC\u304C\u767A\u751F\u3057\u307E\u3057\u305F\u3002", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("br", {}), "\u304A\u624B\u6570\u3067\u3059\u304C\u4EE5\u4E0B\u304B\u3089\u8A73\u7D30\u3092\u304A\u554F\u3044\u5408\u308F\u305B\u304F\u3060\u3055 \u3044\u307E\u305B\u3002"] - }), _400error.length != 0 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("span", { - className: "l-alert__text--error ft-16 ft-md-14", - children: _400error - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div", { + children: ["\u4E0D\u660E\u306A\u30A8\u30E9\u30FC\u304C\u767A\u751F\u3057\u307E\u3057\u305F\u3002", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("br", {}), "\u304A\u624B\u6570\u3067\u3059\u304C\u4EE5\u4E0B\u304B\u3089\u8A73\u7D30\u3092\u304A\u554F\u3044\u5408\u308F\u305B\u304F\u3060\u3055 \u3044\u307E\u305B\u3002"] + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", { className: "edit-set", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("label", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("label", { htmlFor: "email", className: "control-label ft-md-12", children: "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9" - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("input", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("input", { type: "email", name: "email", id: "email", @@ -37549,17 +37591,17 @@ var UnknownError = function UnknownError() { return setEmail(e.target.value); }, autoFocus: true - }), _422errors.email && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("span", { + }), _422errors.email && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span", { className: "l-alert__text--error ft-16 ft-md-14", children: _422errors.email })] - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", { className: "edit-set", - children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("label", { + children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("label", { htmlFor: "message", className: "control-label ft-md-12", children: " \u304A\u554F\u5408\u305B\u5185\u5BB9 " - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("textarea", { + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("textarea", { name: "message", id: "message", rows: "7", @@ -37568,25 +37610,31 @@ var UnknownError = function UnknownError() { onChange: function onChange(e) { return setMessage(e.target.value); } - }), _422errors.message && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("span", { + }), _422errors.message && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span", { className: "l-alert__text--error ft-16 ft-md-14", children: _422errors.message })] - }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", { - className: "mt-5", - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_material_ui_core__WEBPACK_IMPORTED_MODULE_3__.default, { - type: "submit", - fullWidth: true, - className: "p-4 rounded-20 ft-15 font-weight-bold text-black bg-yellow", - children: " \u9001\u4FE1 " + }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_material_ui_core__WEBPACK_IMPORTED_MODULE_5__.default, { + type: "submit", + fullWidth: true, + className: "rounded-15 py-3 mt-5 bg-yellow", + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span", { + className: "font-weight-bold ft-18 text-black", + children: "\u9001\u4FE1" }) - }), loading && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div", { + }), submit && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_material_ui_core__WEBPACK_IMPORTED_MODULE_6__.default, { style: { position: 'fixed', left: 'calc( 50% - 20px)', - top: '45%' + top: '45%', + color: 'green' + } + }), _400error && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_component_alert__WEBPACK_IMPORTED_MODULE_2__.default, { + type: "fail", + hide: function hide() { + return set400Error(''); }, - children: [" ", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_material_ui_core__WEBPACK_IMPORTED_MODULE_4__.default, {})] + children: _400error })] }); }; diff --git a/backend/resources/js/pages/contact/index.jsx b/backend/resources/js/pages/contact/index.jsx index 2b7a9b5e..1e2d230e 100644 --- a/backend/resources/js/pages/contact/index.jsx +++ b/backend/resources/js/pages/contact/index.jsx @@ -1,38 +1,38 @@ import React, { useState } from 'react'; -import { Button } from '@material-ui/core'; import axios from 'axios'; +import { useHistory } from 'react-router-dom'; +import { LoadingButton, submitButton } from '@material-ui/lab'; +import { CircularProgress } from '@material-ui/core'; -import { CircularProgress } from '@material-ui/core'; - +import Alert from '../../component/alert'; const Contact = () => { + const history = useHistory(); + const [email, setEmail] = useState(''); const [message, setMessage] = useState(''); - const [loading, setLoading] = useState(false); + const [submit, setSubmit] = useState(false); const [_422errors, set422Errors] = useState({ email:'', message:'' }) const [_400error, set400Error] = useState(''); const handleSubmit = (e) => { e.preventDefault(); - setLoading(true); //show progressbar + setSubmit(true); //show progressbar + set422Errors({ email:'', message:'' }); const formdata = new FormData(); formdata.append('email', email); formdata.append('message', message); - axios.post('/api/contacts/register/', formdata) + axios.post('/api/contacts/register', formdata) .then(response => { - if(response.data.status_code == 200){ - window.location.href = '/contact-us/complete'; - } - else if(response.data.status_code == 422){ - set422Errors(response.data.error_messages); - } - else if(response.data.status_code == 400){ - set400Error(response.data.error_messages); - } - setLoading(false) + setSubmit(false); + switch(response.data.status_code){ + case 200: history.push({pathname: '/contact-us/complete', state: {}}); break; + case 422: set422Errors(response.data.error_messages); break; + case 400: set400Error(response.data.error_messages); break; + }; }) .catch(err=>console.log(err)) } @@ -40,14 +40,10 @@ const Contact = () => { return (
-

お問い合わせ

- { - _400error.length != 0 && - {_400error} - } +

お問い合わせ

- setEmail(e.target.value)} autoFocus/> + setEmail(e.target.value)} autoFocus/> { _422errors.email && {_422errors.email} @@ -63,13 +59,16 @@ const Contact = () => { }
-
- -
- + + 送信 + { - loading &&
+ submit && } + { + _400error && set400Error('')}>{_400error} + } ) } diff --git a/backend/resources/js/pages/contact/unknown.jsx b/backend/resources/js/pages/contact/unknown.jsx index 03b59151..c3805f7c 100644 --- a/backend/resources/js/pages/contact/unknown.jsx +++ b/backend/resources/js/pages/contact/unknown.jsx @@ -1,37 +1,35 @@ import React, { useState } from 'react'; +import { useHistory } from 'react-router-dom'; import { Button } from '@material-ui/core'; import axios from 'axios'; - import { CircularProgress } from '@material-ui/core'; - +import Alert from '../../component/alert'; const UnknownError = () => { - + + const history = useHistory(); const [email, setEmail] = useState(''); const [message, setMessage] = useState(''); - const [loading, setLoading] = useState(false); + const [submit, setSubmit] = useState(false); const [_422errors, set422Errors] = useState({ email:'', message:'' }) const [_400error, set400Error] = useState(''); const handleSubmit = (e) => { e.preventDefault(); - setLoading(true); //show progressbar + setSubmit(true); //show progressbar + set422Errors({ email:'', message:'' }); const formdata = new FormData(); formdata.append('email', email); formdata.append('message', message); axios.post('/api/contacts/register/', formdata) .then(response => { - if(response.data.status_code == 200){ - window.location.href = '/contact-us/complete'; - } - else if(response.data.status_code == 422){ - set422Errors(response.data.error_messages); - } - else if(response.data.status_code == 400){ - set400Error(response.data.error_messages); - } - setLoading(false) + setSubmit(false); + switch(response.data.status_code){ + case 200: history.push({pathname: '/contact-us/complete', state: {}}); break; + case 422: set422Errors(response.data.error_messages); break; + case 400: set400Error(response.data.error_messages); break; + }; }) .catch(err=>console.log(err)) } @@ -46,11 +44,6 @@ const UnknownError = () => { 不明なエラーが発生しました。
お手数ですが以下から詳細をお問い合わせくださ いませ。 - - { - _400error.length != 0 && - {_400error} - }
setEmail(e.target.value)} autoFocus/> @@ -69,13 +62,17 @@ const UnknownError = () => { }
-
- -
+ { - loading &&
+ submit && } + { + _400error && set400Error('')}>{_400error} + } ) }