Profile update implementation

src/components/Settings/Tabs/PersonalInfoTab.jsx

@@ -1,6 +1,11 @@
-import React from "react";
+import React, { useState } from "react";
 import Icons from "../../Helpers/Icons";
 import InputCom from "../../Helpers/Inputs/InputCom";
+import {Link, useNavigate} from 'react-router-dom'
+import usersService from "../../../services/UsersService";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+
+import {toast} from 'react-toastify'
 
 export default function PersonalInfoTab({
   datas,
@@ -16,150 +21,181 @@ export default function PersonalInfoTab({
   browseCoverImg,
   coverImgChangHandler,
 }) {
+
+  const apiCall = new usersService()
+  let navigate = useNavigate()
+
+  let [togglePromotion, setTogglePromotion] = useState(false)
+
+  let [requestStatus, setRequestState] = useState({
+    message: '',
+    loading: false,
+    status: false
+  })
+
+  let [inputs, setInputs] = useState({ // State for input fields
+    firstname: '',
+    lastname: '',
+    state: '',
+    city: '',
+    email: ''
+  })
+
+  const handleChange = ({target:{name, value}}) => {
+    setInputs(prev => ({...prev, [name]:value}))
+  }
+
+  const handleUpdateUser = ()=> {
+    setRequestState({message: '', loading: true, status: false})
+
+    let {firstname, lastname, state, city, email} = inputs
+
+    if(!firstname || !lastname || !state || !city || !email){
+      setRequestState({message: 'Please Fill all fields', loading: false, status: false})
+      return
+    }
+
+    //checks if email is a valid email address
+    let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+    if (regEx.test(email) == false) {
+      setRequestState({message: 'Your Email is Invalid', loading: false, status: false})
+      return
+    }
+    
+    
+    apiCall.updateProfile(inputs).then((res)=>{
+      if(res.data.internal_return < 0){
+        setRequestState({message: 'Profile Was unable to update', loading: false, status: false})
+        return
+      }
+      setInputs({
+        firstname: '',
+        lastname: '',
+        state: '',
+        city: '',
+        email: ''
+      })
+      // setRequestState({message: 'Profile update successfully', loading: false, status: true})
+      toast.success("Update Successful");
+      setTimeout(()=>{navigate('/',{replace:true})},1000)
+    }).catch(error => {
+      setRequestState({message: 'Opps! an error occurred. Try Agian', loading: false, status: false})
+    })
+  }
+
   return (
     <div className="personal-info-tab w-full flex flex-col justify-between">
       <div className="flex flex-col-reverse sm:flex-row">
         <div className="flex-1 sm:mr-10">
           <div className="fields w-full">
-            {/* first name and last name */}
-            <div className="xl:flex xl:space-x-7 mb-6">
-              <div className="field w-full mb-6 xl:mb-0">
-                <InputCom
-                  label="First Name"
-                  type="text"
-                  name="firstName"
-                  placeholder="First Name Here"
-                  value={datas}
-                  inputHandler={frstNmeHndlr}
-                />
-              </div>
-              <div className="field w-full">
-                <InputCom
-                  label="Last Name"
-                  type="text"
-                  name="lastName"
-                  placeholder="Last Name Here"
-                  value={datas}
-                  inputHandler={lstNmeHndlr}
-                />
-              </div>
+            {/* inputs starts here */}
+            {/* username */}
+            <div className='profile-input my-3'>
+                <label className='w-full text-slate-600 text-lg'>Username <span className='text-red-500'>*</span></label>
+                <input className='w-full p-3 text-lg text-slate-500 bg-slate-200 opacity-90 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                    value={'username@gamil.com'} 
+                    name='username' 
+                    type="text" 
+                    placeholder='username@gamil.com' 
+                    disabled
+                    />
             </div>
-            {/* User Name */}
-            <div className="field w-full mb-6">
-              <InputCom
-                label="User Name"
-                type="text"
-                name="userName"
-                placeholder="@example"
-                value={datas}
-                inputHandler={lstNmeHndlr}
-              />
+
+            {/* Email */}
+            <div className='profile-input my-3'>
+                <label className='w-full text-slate-600 text-lg'>Email <span className='text-red-500'>*</span></label>
+                <input className='w-full p-3 text-lg text-slate-500 bg-slate-200 opacity-90 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                    value={inputs.email} 
+                    name='email' 
+                    type="text" 
+                    placeholder='Firstname' 
+                    onChange={handleChange}
+                    />
             </div>
-            {/* External Links */}
-            <div className="field w-full mb-6">
-              <InputCom
-                label="External Links"
-                type="text"
-                name="link"
-                placeholder="https:yoursite.lo/imte/item_name123"
-                value={datas}
-                inputHandler={lstNmeHndlr}
-              />
+
+            {/* Fullname */}
+            <div className='profile-input my-3'>
+                <label className='w-full text-slate-600 text-lg'>Fullname <span className='text-red-500'>*</span></label>
+                <div className="w-full flex items-center justify-center space-x-1 space-y-1">
+                  <input className='p-3 text-lg text-slate-500 bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                    value={inputs.firstname} 
+                    name='firstname' 
+                    type="text" 
+                    placeholder='Firstname' 
+                    onChange={handleChange}
+                    />
+                    <input className='p-3 text-lg text-slate-500 bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                    value={inputs.lastname} 
+                    name='lastname' 
+                    type="text" 
+                    placeholder='Lastname' 
+                    onChange={handleChange}
+                    />
+                </div>
             </div>
-            {/* bio */}
-            <div className="field w-full mb-6">
-              <h1 className="field-title">Bio </h1>
-              <div className="input-field mt-2">
-                <div className="input-wrapper w-full ">
-                  <textarea
-                    value={datas}
-                    onChange={(e) => dscrphn(e)}
-                    placeholder="provide a detailed description of your item."
-                    rows="7"
-                    className="w-full h-full px-7 py-4  border border-light-purple dark:border-[#5356fb29]  rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
+
+             {/* Country */}
+             <div className='profile-input my-3'>
+                <label className='w-full text-slate-600 text-lg'>Country <span className='text-red-500'>*</span></label>
+                <input className='w-full p-3 text-lg text-slate-500 bg-slate-200 opacity-90 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                    value='Nigeria'
+                    name='country' 
+                    type="text" 
+                    disabled
                   />
-                </div>
-              </div>
             </div>
-            {/* email */}
-            <div className="field w-full mb-6">
-              <InputCom
-                label="Email"
-                type="email"
-                name="email"
-                placeholder="https:yoursite.lo/imte/item_name123"
-                value={datas}
-                inputHandler={lstNmeHndlr}
-              />
-              <p className="text-thin-light-gray text-sm tracking-wide mt-3">
-                Your email for marketplace notifications
-              </p>
+
+             {/* State/Province */}
+             <div className='profile-input my-3'>
+                <label className='w-full text-slate-600 text-lg'>State/Province <span className='text-red-500'>*</span></label>
+                <input className='w-full p-3 text-lg text-slate-500 bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                    value={inputs.state} 
+                    name='state' 
+                    type="text" 
+                    placeholder='State' 
+                    onChange={handleChange}
+                    />
             </div>
-          </div>
-          {/* border line */}
-          <div className="w-full h-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533]  mb-6"></div>
-          <div className="social-connetion w-full">
-            <div className="mb-6">
-              {/* headings */}
-              <div className="mb-4">
-                <h1 className="text-xl text-dark-gray dark:text-white tracking-wide font-bold mb-1.5">
-                  Social Connections
-                </h1>
-                <p className="text-sm tracking-wide text-thin-light-gray">
-                  Help collectors verify your account by connecting Twitter
-                </p>
-              </div>
-              <div className="flex justify-between items-center ">
-                <div className="flex space-x-2.5 items-center">
-                  <div className="w-[44px] h-[44px] rounded-full bg-[#E0F2FD] flex justify-center items-center">
-                    <span>
-                      <svg
-                        width="23"
-                        height="19"
-                        viewBox="0 0 23 19"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M0 17.0066C2.46188 17.0803 4.69827 16.4768 6.78777 14.9218C4.65896 14.6476 3.19321 13.6316 2.38327 11.5697C3.08253 11.5697 3.68869 11.5697 4.29588 11.5697C2.09881 10.6971 0.869935 9.1764 0.703396 6.7914C1.37576 6.9763 1.99951 7.14666 2.62222 7.31805C0.666157 5.02758 0.227569 2.9085 1.41507 0.9307C4.01246 3.90364 7.22015 5.64253 11.155 5.89391C11.155 5.44101 11.1405 5.04628 11.1571 4.65259C11.2409 2.67998 12.208 1.25376 13.9686 0.46118C15.6847 -0.31166 17.3821 -0.119489 18.8665 1.08548C19.3403 1.47086 19.7509 1.5311 20.2702 1.3192C20.9519 1.04081 21.6367 0.77177 22.3866 0.471567C22.0546 1.52383 21.3605 2.23746 20.6519 3.0103C21.3998 2.80774 22.1476 2.60622 22.8955 2.40367C22.9307 2.43483 22.9659 2.46599 23.001 2.49715C22.4218 3.10587 21.8818 3.76029 21.2498 4.30564C20.8691 4.63389 20.7191 4.95798 20.7067 5.44101C20.6074 9.13796 19.3444 12.3727 16.7698 15.0361C14.2769 17.6143 11.2109 18.8836 7.62874 18.9917C4.97239 19.0716 2.5105 18.4775 0.217225 17.1458C0.141714 17.1032 0.071374 17.0533 0 17.0066Z"
-                          fill="#33AAF2"
-                        />
-                      </svg>
-                    </span>
+
+            {/* City */}
+            <div className='profile-input my-3'>
+                <label className='w-full text-slate-600 text-lg'>City <span className='text-red-500'>*</span></label>
+                <input className='w-full p-3 text-lg text-slate-500 bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                    value={inputs.city} 
+                    name='city' 
+                    type="text" 
+                    placeholder='City' 
+                    onChange={handleChange}
+                    />
+            </div>
+
+            {/* Preferred Communication*/}
+            <div className='profile-input my-3'>
+                <label className='text-slate-600 text-lg'>Pref. Communication <span className='text-red-500'>*</span></label>
+                <div className="check-box">
+                  <div className="flex items-center justify-start">
+                    <div className="check-input flex items-center">
+                      <input className="mx-2 w-4 h-4 cursor-pointer" type="checkbox" name="prefcomm1" id="" />
+                      <span className="text-slate-600 text-lg">Email</span>
+                    </div>
+                    <div className="check-input flex items-center">
+                      <input className="mx-2 w-4 h-4 cursor-pointer" type="checkbox" name="prefcomm2" id="" />
+                      <span className="text-slate-600 text-lg">Phone</span>
+                    </div>
                   </div>
-                  <p className="text-18 dark:text-white tracking-wide">
-                    Twitter
-                  </p>
                 </div>
-                <div>
-                  <p className="text-18 tracking-wide text-[#33AAF2] border-b dark:border-[#5356fb29]  border-[#33AAF2]">
-                    Cannect
-                  </p>
-                </div>
-              </div>
             </div>
-            <div className="mb-10">
-              {/* headings */}
-              <div className="sm:flex justify-between items-center mb-4">
-                <div className="mr-16 mb-5 sm:mb-0">
-                  <h1 className="text-xl text-dark-gray dark:text-white tracking-wide font-bold mb-1.5">
-                    Verification
-                  </h1>
-                  <p className="text-sm tracking-wide text-thin-light-gray leading-7">
-                    Proceed with verification process to get more visibility and
-                    gain trust on NFTMAX Marketplace.
-                  </p>
+
+            {/* Allow Promotions */}
+            <div className='profile-input my-3 flex items-center space-x-4'>
+                <label className='text-slate-600 text-lg'>Allow Promotions</label>
+                <div className="cursor-pointer flex items-center" onClick={()=>setTogglePromotion(prev => !prev)}>
+                  <div className={`h-6 w-8 mr-1 p-1 ${togglePromotion ? 'bg-sky-blue flex justify-end items-center': 'bg-slate-200'} rounded-full transition`}>
+                    <div className="w-4 h-full bg-white rounded-full"></div>  
+                  </div>
                 </div>
-                <div>
-                  <a
-                    href="#"
-                    className="w-[136px] h-[46px] flex justify-center items-center text-18 tracking-wide rounded-full text-white bg-light-green hover:bg-green-600 transition duration-300 ease-in-out"
-                  >
-                    Get Verified
-                  </a>
-                </div>
-              </div>
             </div>
+            {/* inputs ends here */}
           </div>
         </div>
         <div className="w-[232px] mb-10">
@@ -272,24 +308,30 @@ export default function PersonalInfoTab({
         </div>
       </div>
       <div className="content-footer w-full">
+        {requestStatus.message != '' && <p className={`text-center text-base ${requestStatus.status ? 'text-green-800' : 'text-red-600'}`}>{requestStatus.message}</p>}
         <div className="w-full h-[120px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
-          <div className="flex space-x-4 mr-9">
-            <button
-              type="button"
+          <div className="flex items-center space-x-4 mr-9">
+            <Link
+              to='/'
               className="text-18 text-light-red tracking-wide "
             >
               <span className="border-b dark:border-[#5356fb29]  border-light-red">
                 {" "}
                 Cancel
               </span>
-            </button>
+            </Link>
 
+            {requestStatus.loading ? 
+            <LoadingSpinner size='8' color='sky-blue' />
+            :
             <button
-              type="button"
-              className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+            type="button"
+            className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+            onClick={handleUpdateUser}
             >
               Upadate Profile
             </button>
+            }
           </div>
         </div>
       </div>

src/services/UsersService.js

@@ -216,6 +216,18 @@ class usersService {
         return this.postAuxEnd("/refferhx", postData);
     }
 
+    //END POINT CALL FOR UPDATE PROFILE
+    updateProfile(post){
+        var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        action: 5031,
+        ...post
+        };
+        return this.postAuxEnd("/updateprofile", postData);
+    }
+
     //END POINT CALL FOR SENDING REFERRAL MESSAGE
     sendReferralMsg(postData){
         return this.postAuxEnd("/sendreferral", postData);