From a364269547b6f85c70c7595e5bfa3df60599f2cc Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Tue, 17 Dec 2024 13:56:00 +0100
Subject: [PATCH] signup api added

---
 src/component/auth/Signup2.jsx | 120 ++++++++++++++++++++-------------
 src/services/services.js       |   8 +++
 2 files changed, 81 insertions(+), 47 deletions(-)

diff --git a/src/component/auth/Signup2.jsx b/src/component/auth/Signup2.jsx
index 72b747e..0f35034 100644
--- a/src/component/auth/Signup2.jsx
+++ b/src/component/auth/Signup2.jsx
@@ -6,6 +6,8 @@ import LoginImg from '../../assets/bg/login.svg'
 
 import { Link, useNavigate } from 'react-router-dom'
 import siteLinks from '../../links/siteLinks'
+import { useMutation } from '@tanstack/react-query';
+import { signUpUser } from '../../services/services';
 
 const validationSchema = Yup.object().shape({
     email: Yup.string()
@@ -35,9 +37,22 @@ export default function Signup2() {
 
   const navigate = useNavigate()
 
-  const signUp = (values, helpers) => {
+  const [successBox, setSuccessBox] = useState(false)
+
+  const mutation = useMutation({
+    mutationFn: (fields) => {
+        return signUpUser(fields)
+    },
+    onSuccess: (res) => {
+          console.log('res', res)
+          setSuccessBox(true)
+    }
+  })
+
+  const signUp = (values) => {
     // helpers.resetForm()
-    console.log('values', values, helpers)
+    // console.log('values', values, helpers)
+    mutation.mutate(values)
   }
 
   return (
@@ -61,57 +76,68 @@ export default function Signup2() {
                                         return (
                                             <Form className='mt-2 mt-sm-5'>
                                                 <div className="row">
-                                                    <>
-                                                        <div className="col-12 col-sm-6">
-                                                            <div className="form-group">
-                                                                <label className={`text-black control-label ${(props.errors.firstname && props.touched.firstname) && 'text-danger'}`}>First Name*</label>
-                                                                <input type="text" name='firstname' className="form-control" placeholder="First Name" value={props.values.firstname} onChange={props.handleChange} />
+                                                    {!mutation.isSuccess ?
+                                                        <>
+                                                            <div className="col-12 col-sm-6">
+                                                                <div className="form-group">
+                                                                    <label className={`text-black control-label ${(props.errors.firstname && props.touched.firstname) && 'text-danger'}`}>First Name*</label>
+                                                                    <input type="text" name='firstname' className="form-control" placeholder="First Name" value={props.values.firstname} onChange={props.handleChange} />
+                                                                </div>
                                                             </div>
-                                                        </div>
-                                                        <div className="col-12 col-sm-6">
-                                                            <div className="form-group">
-                                                                <label className={`text-black control-label ${(props.errors.lastname && props.touched.lastname) && 'text-danger'}`}>Last Name*</label>
-                                                                <input type="text" name='lastname' className="form-control" placeholder="Last Name" value={props.values.lastname} onChange={props.handleChange} />
+                                                            <div className="col-12 col-sm-6">
+                                                                <div className="form-group">
+                                                                    <label className={`text-black control-label ${(props.errors.lastname && props.touched.lastname) && 'text-danger'}`}>Last Name*</label>
+                                                                    <input type="text" name='lastname' className="form-control" placeholder="Last Name" value={props.values.lastname} onChange={props.handleChange} />
+                                                                </div>
                                                             </div>
-                                                        </div>
-                                                        <div className="col-12">
-                                                            <div className="form-group">
-                                                                <label className={`text-black control-label ${(props.errors.email && props.touched.email) && 'text-danger'}`}>Email*</label>
-                                                                <input type="email" name='email' className="form-control" placeholder="Email" value={props.values.email} onChange={props.handleChange} />
+                                                            <div className="col-12">
+                                                                <div className="form-group">
+                                                                    <label className={`text-black control-label ${(props.errors.email && props.touched.email) && 'text-danger'}`}>Email*</label>
+                                                                    <input type="email" name='email' className="form-control" placeholder="Email" value={props.values.email} onChange={props.handleChange} />
+                                                                </div>
                                                             </div>
-                                                        </div>
-                                                        {/* <div className="col-12">
-                                                            <div className="form-group">
-                                                                <label className={`text-black control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Username*</label>
-                                                                <input type="text" name='username' className="form-control" placeholder="Username" value={props.values.username} onChange={props.handleChange} />
+                                                            {/* <div className="col-12">
+                                                                <div className="form-group">
+                                                                    <label className={`text-black control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Username*</label>
+                                                                    <input type="text" name='username' className="form-control" placeholder="Username" value={props.values.username} onChange={props.handleChange} />
+                                                                </div>
                                                             </div>
-                                                        </div>
-                                                        <div className="col-12">
-                                                            <div className="form-group">
-                                                                <label className={`control-label ${(props.errors.password && props.touched.password) && 'text-danger'}`}>Password*</label>
-                                                                <input type="password" name='password' className="form-control" placeholder="Password" value={props.values.password} onChange={props.handleChange} />
+                                                            <div className="col-12">
+                                                                <div className="form-group">
+                                                                    <label className={`control-label ${(props.errors.password && props.touched.password) && 'text-danger'}`}>Password*</label>
+                                                                    <input type="password" name='password' className="form-control" placeholder="Password" value={props.values.password} onChange={props.handleChange} />
+                                                                </div>
+                                                            </div> */}
+                                                            <div className="col-12">
+                                                                <div className="form-check">
+                                                                    <input className="form-check-input" type="checkbox" id="gridCheck" />
+                                                                    <label className="form-check-label" htmlFor="gridCheck">
+                                                                        I accept terms & policy
+                                                                    </label>
+                                                                </div>
                                                             </div>
-                                                        </div> */}
-                                                        <div className="col-12">
-                                                            <div className="form-check">
-                                                                <input className="form-check-input" type="checkbox" id="gridCheck" />
-                                                                <label className="form-check-label" htmlFor="gridCheck">
-                                                                    I accept terms & policy
-                                                                </label>
-                                                            </div>
-                                                        </div>
-                                                        <div className="col-12 mt-3 text-end">
-                                                            <button type='submit' className="btn btn-primary text-uppercase">Sign up</button>
-                                                        </div>
-                                                    </>
-                                                    
-                                                    <div className='col-12'>
-                                                        <div className="card w-100 justify-content-between align-items-center" style={{height: '200px'}}>
-                                                            <p className='p-2 text-black'>Check your email to continue.</p>
-                                                            <p className='p-2 text-primary'>Home</p>
-                                                        </div>
-                                                    </div>
 
+                                                            {mutation.error &&
+                                                                <>
+                                                                <div className="col-12">
+                                                                    <p className='text-danger'>{mutation.error.message}</p>
+                                                                </div>
+                                                                </>
+                                                            }
+
+                                                            <div className="col-12 mt-3 text-end">
+                                                                <button type='submit' className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Sign up'}</button>
+                                                            </div>
+                                                        </>
+                                                        :
+                                                        <div className='col-12'>
+                                                            <div className="d-flex flex-column justify-content-between align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
+                                                                <h4 className='p-4 text-black'>Check your email to continue.</h4>
+                                                                <p className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</p>
+                                                            </div>
+                                                        </div>
+                                                    }
+                                                    
                                                     <div className="col-12 mt-3">
                                                         <p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
                                                     </div>
diff --git a/src/services/services.js b/src/services/services.js
index a18ef1e..e964dcf 100644
--- a/src/services/services.js
+++ b/src/services/services.js
@@ -50,6 +50,14 @@ export const loginUser = (reqData) => {
     return postAuxEnd('/panel/auth/login', postData, false)
 }
 
+// FUNCTION TO LOGIN USER IN
+export const signUpUser = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/panel/auth/register', postData, false)
+}
+
 
 // FUNCTION TO GET DASHBOARD DATA
 export const accountDashboard = () => {