made profile page to be pre filled

src/components/Settings/Tabs/PersonalInfoTab.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Icons from "../../Helpers/Icons";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import {Link, useNavigate} from 'react-router-dom'
@@ -27,7 +27,13 @@ export default function PersonalInfoTab({
 
   let [togglePromotion, setTogglePromotion] = useState(false)
 
-  let [requestStatus, setRequestState] = useState({
+  let [profile, setProfile] = useState({ // state for requesting from load profile API
+    data: [],
+    loading: true,
+    status: false
+  })
+
+  let [requestStatus, setRequestState] = useState({ // state for requesting from update api
     message: '',
     loading: false,
     status: false
@@ -83,9 +89,40 @@ export default function PersonalInfoTab({
     })
   }
 
+  const loadProfile = ()=>{
+    apiCall.loadProfile().then((res)=>{
+      if(res.data.internal_return < 0){
+        setProfile(prev => ({...prev, loading: false, status: true}))
+        return
+      }
+      setProfile(prev => ({...prev, data: [res.data], loading: false, status: true}))
+      setInputs({
+        firstname: res.data.firstname,
+        lastname: res.data.lastname,
+        state: res.data.state,
+        city: res.data.city,
+        email: res.data.email
+      })
+    }).catch(error =>{
+      setProfile(prev => ({...prev, loading: false, status: false}))
+    })
+  }
+
+  useEffect(()=>{
+    loadProfile() // loads user profile unto the page
+  },[])
+
   return (
     <div className="personal-info-tab w-full flex flex-col justify-between">
-      <div className="flex flex-col-reverse sm:flex-row">
+      
+      {profile.loading ? 
+      <div className="p-3">
+        <LoadingSpinner size='32' color='sky-blue' />
+      </div>
+      :
+      profile.data.length ? 
+      profile.data.map((item, index) => (
+        <div key={index} className="flex flex-col-reverse sm:flex-row">
           <div className="flex-1 sm:mr-10">
             <div className="fields w-full">
               {/* inputs starts here */}
@@ -93,7 +130,7 @@ export default function PersonalInfoTab({
               <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'} 
+                      value={item.username} 
                       name='username' 
                       type="text" 
                       placeholder='username@gamil.com' 
@@ -108,7 +145,7 @@ export default function PersonalInfoTab({
                       value={inputs.email} 
                       name='email' 
                       type="text" 
-                    placeholder='Firstname' 
+                      placeholder='Email' 
                       onChange={handleChange}
                       />
               </div>
@@ -138,7 +175,7 @@ export default function PersonalInfoTab({
               <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'
+                      value={item.country} 
                       name='country' 
                       type="text" 
                       disabled
@@ -307,6 +344,14 @@ export default function PersonalInfoTab({
             </div>
           </div>
       </div>
+      ))
+      :
+      profile.status ?
+      <div className="py-3 text-slate-500">No User Information Found!</div>
+      :
+      <div className="py-3 text-slate-500">Opps! something went wrong. Try Again Later!</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">

src/services/UsersService.js

@@ -228,6 +228,16 @@ class usersService {
         return this.postAuxEnd("/updateprofile", postData);
     }
 
+    //END POINT CALL FOR GETTING USER PROFILE
+    loadProfile(post){
+        var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        };
+        return this.postAuxEnd("/loadprofile", postData);
+    }
+
     //END POINT CALL FOR SENDING REFERRAL MESSAGE
     sendReferralMsg(postData){
         return this.postAuxEnd("/sendreferral", postData);