profile form

package-lock.json

@@ -9951,6 +9951,16 @@
       "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
       "integrity": "sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM="
     },
+    "lodash.reduce": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
+      "integrity": "sha1-8atrg5KZrUj3hKu/R2WW8DuRTTs="
+    },
+    "lodash.startswith": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/lodash.startswith/-/lodash.startswith-4.2.1.tgz",
+      "integrity": "sha1-xZjErc4YiiflMUVzHNxsDnF3YAw="
+    },
     "lodash.template": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
@@ -12768,6 +12778,19 @@
         "warning": "^4.0.3"
       }
     },
+    "react-phone-input-2": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/react-phone-input-2/-/react-phone-input-2-2.14.0.tgz",
+      "integrity": "sha512-gOY3jUpwO7ulryXPEdqzH7L6DPqI9RQxKfBxZbgqAwXyALGsmwLWFyi2RQwXlBLWN/EPPT4Nv6I9TESVY2YBcg==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "lodash.debounce": "^4.0.8",
+        "lodash.memoize": "^4.1.2",
+        "lodash.reduce": "^4.6.0",
+        "lodash.startswith": "^4.2.1",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-redux": {
       "version": "7.2.4",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz",

package.json

@@ -17,6 +17,7 @@
     "react-bootstrap": "^1.6.0",
     "react-dom": "^17.0.2",
     "react-loader-spinner": "^4.0.0",
+    "react-phone-input-2": "^2.14.0",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

src/App.js

@@ -24,9 +24,9 @@ const App = () => {
             <AuthPageForPartners />
           </Route>
           <ProtectedRoute path='/' exact component={HomePage} />
-          <ProtectedRoute path='/candidate/:id' component={CandidatePage} />
+          <ProtectedRoute exact path='/candidate/:id' component={CandidatePage} />
           <ProtectedRoute path='/calendar' component={CalendarPage} />
-          <ProtectedRoute path='/form' component={FormPage} />
+          <ProtectedRoute exact path='/candidate/:id/form' component={FormPage} />
           <ProtectedRoute path='/report' component={ReportPage} />
           <ProtectedRoute component={()=><div>Page not found</div>} />
         </Switch>

src/components/Candidate/Candidate.js

@@ -115,7 +115,7 @@ const Candidate = () => {
                     {currentCandidateObj.vc_text ? currentCandidateObj.vc_text : 'Описание отсутствует...' }
                   </p>
                 )}
-                <Link to={'/form'}>
+                <Link to={`/candidate/${currentCandidateObj.id}/form`}>
                   <button type="submit" className={style.candidate__btn}>
                     Выбрать к собеседованию
                   </button>

src/components/Form/Form.js

@@ -2,9 +2,19 @@ import React, { useState } from 'react';
 import style from './Form.module.css';
 import { fetchForm } from '../../server/server';
 import arrow from '../../images/right-arrow.png';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useParams, Redirect } from 'react-router-dom';
+import PhoneInput from 'react-phone-input-2'
+import 'react-phone-input-2/lib/style.css'
+import './form.css';
+
+import { withSwalInstance } from 'sweetalert2-react';
+import swal from 'sweetalert2';
+ 
+const SweetAlert = withSwalInstance(swal);
 
 const Form = () => {
+  const urlParams = useParams();
+  const [status, setStatus] = useState(null);
   const [data, setData] = useState({
     email: '',
     phone: '',
@@ -26,19 +36,32 @@ const Form = () => {
     e.preventDefault();
 
     const formData = new FormData();
+    formData.append('profile_id', urlParams.id);
     formData.append('email', data.email);
     formData.append('phone', data.phone);
     formData.append('comment', data.comment);
 
-    fetchForm(`${process.env.REACT_APP_API_URL}/api/profile/add-to-interview`, formData);
+    fetchForm(`${process.env.REACT_APP_API_URL}/api/profile/add-to-interview`, {
+      profile_id: urlParams.id,
+      ...data,
+    }).then( (res)=>  res.json()
+      .then( resJSON => setStatus(resJSON))
+    )
   };
 
   const goBack = () => {
     history.goBack();
   };
 
+  console.log('s',status)
+
   return (
     <div className="container">
+      {status && <SweetAlert
+        show={!!status}
+        text={status.errors ? status.errors[Object.keys(status.errors)[0]] : 'Форма отправлена'}
+        onConfirm={status.errors ? () => {setStatus(null);} : () => {setStatus(null); history.push(`/candidate/${urlParams.id}`)}}
+      />}
       <div className="row">
         <div className="col-sm-12">
           <div className={style.form__arrow} onClick={() => goBack()}>
@@ -61,14 +84,21 @@ const Form = () => {
             />
 
             <label htmlFor="phone">Номер телефона:</label>
-            <input
+            <PhoneInput
+              id="phone"
+              name="Phone"
+              country={'ru'}
+              value={data.phone}
+              onChange={e=>handleChange({target: {value:e, id: 'phone' }})}
+            />
+            {/* <input
               onChange={handleChange}
               id="phone"
               type="text"
               name="Phone"
               placeholder="Телефон"
               value={data.phone}
-            />
+            /> */}
 
             <textarea
               onChange={handleChange}

src/components/Form/Form.module.css

@@ -120,3 +120,4 @@ textarea {
     margin-right: 0px;
   }
 }
+

src/components/Form/form.css

@@ -0,0 +1,15 @@
+.react-tel-input {
+    width: min-content !important;
+    margin-bottom: 60px;
+}
+
+.react-tel-input .form-control {
+    padding: 30px 30px 30px 48px;
+    border-radius: 37px;
+    width: 332px;
+}
+
+.react-tel-input .flag-dropdown {
+    border-top-left-radius: 37px;
+    border-bottom-left-radius: 37px;
+}

src/components/Sidebar/Sidebar.js

@@ -24,7 +24,7 @@ const Sidebar = ({ candidate }) => {
           <p className={style.candidateSidebar__info__e}>Опыт работы</p>
           <p className={style.candidateSidebar__info__y}>{getYearsString(candidate.years_of_exp)}</p>
         </> }
-        <Link to={`/form`}>
+                <Link to={`/candidate/${candidate.id}/form`}>
           <button className={style.candidateSidebar__info__btn}>Выбрать к собеседованию</button>
         </Link>
       </div>

src/server/server.js

@@ -55,9 +55,9 @@ export const fetchForm = async (link, info) => {
         // 'Access-Control-Request-Headers': 'authorization',
         'Authorization': `Bearer ${localStorage.getItem('auth_token')}`,
         // 'Origin': `${process.env.REACT_APP_BASE_URL}`,
-        'Content-Type': 'multipart/form-data'
+          'Content-Type': 'application/json',
       },
-      body: info
+      body: JSON.stringify(info)
     })
 
     return response