force page to reload after successful transaction

package.json

@@ -14,16 +14,16 @@
     "cors": "^2.8.5",
     "faker": "^6.6.6",
     "formik": "^2.2.9",
-    "react": "^18.0.0",
     "react-chartjs-2": "^4.1.0",
     "react-countup": "^6.2.0",
-    "react-dom": "^18.0.0",
-    "react-lottie": "^1.2.3",
-    "react-redux": "^8.0.2",
     "react-router-dom": "^6.0.2",
-    "react-scripts": "5.0.0",
     "react-slick": "^0.29.0",
     "react-toastify": "^9.0.1",
+    "flutterwave-react-v3": "^1.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.5",
+    "react-scripts": "5.0.1",
     "redux": "^4.2.0",
     "slick-carousel": "^1.8.1",
     "web-vitals": "^1.0.1",
@@ -53,4 +53,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/components/FourZeroFour/index.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Lottie from "react-lottie";
+// import Lottie from "react-lottie";
 import { useNavigate } from "react-router-dom";
 import * as animationData from "../../assets/images/Lotties/77618-website-404-error-animation.json";
 
@@ -16,7 +16,7 @@ export default function FourZeroFour() {
   return (
     <div className="flex justify-center items-center w-full h-screen bg-[#232247]">
       <div>
-        <Lottie options={defaultOptions} width={600} height={600} />
+        {/* <Lottie options={defaultOptions} width={600} height={600} /> */}
         <div className="flex justify-center">
           <button
             onClick={() => navigate(-1)}

src/components/MyWallet/AddRecipient.jsx

@@ -108,7 +108,7 @@ function AddRecipient() {
             }
             // setRequestStatus({message: 'Recipient Added Successfully!', loading: false, status: true})
             toast.success("Recipient Added Successfully!");
-            setTimeout(()=>{navigate('../transfer-fund',{replace:true})},1000)
+            setTimeout(()=>{navigate('/my-wallet/transfer-fund',{replace:true})},1000)
         }).catch((error)=>{
             setRequestStatus({message: 'Opps! an error occured! Try again later', loading: false, status: false})
         })    

src/components/MyWallet/ConfirmAddFund.jsx

@@ -39,6 +39,7 @@ function ConfirmAddFund({payment}) {
              toast.success('Account Topup was sucessful')
             setTimeout(()=>{
                 navigate('/my-wallet', {replace: true})
+                window.location.reload(true)
             }, 1000)
         }).catch(err => {
             // do something
@@ -78,7 +79,7 @@ function ConfirmAddFund({payment}) {
     useEffect(()=>{
         // what happens if not state redirect user
         if(!state){
-            navigate('../add-fund',{replace: true})
+            navigate('/my-wallet/add-fund',{replace: true})
         }else{
             setPageLoading(false)
         }

src/components/MyWallet/ConfirmTransfer.jsx

@@ -34,7 +34,8 @@ function ConfirmTransfer({payment, wallet}) {
             setRequestStatus({message: 'transfer successful', loading: false, status: true})
             toast.success('Transfer sucessful')
             setTimeout(()=>{
-                navigate('/', {replace: true})
+                navigate('/my-wallet', {replace: true})
+                window.location.reload(true)
             }, 1000)
         }).catch(error=>{
             setRequestStatus({message: 'Opps! something went wrong! Try Again', loading: false, status: false})
@@ -44,7 +45,7 @@ function ConfirmTransfer({payment, wallet}) {
     useEffect(()=>{
         // what happens if not state redirect user
         if(!state){
-            navigate('../transfer-fund',{replace: true})
+            navigate('/my-wallet/transfer-fund',{replace: true})
         }else{
             setPageLoading(false)
         }

src/components/Settings/Tabs/PersonalInfoTab.jsx

@@ -4,6 +4,7 @@ import InputCom from "../../Helpers/Inputs/InputCom";
 import {Link, useNavigate} from 'react-router-dom'
 import usersService from "../../../services/UsersService";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import { useSelector } from "react-redux";
 
 import {toast} from 'react-toastify'
 
@@ -34,14 +35,6 @@ const validationSchema = Yup.object().shape({
     .required('State is required'),
 })
 
-const initialValues = {
-  firstname: '',
-  lastname: '',
-  state: '',
-  city: '',
-  email: ''
-}
-
 export default function PersonalInfoTab({
   datas,
   frstNmeHndlr,
@@ -57,13 +50,23 @@ export default function PersonalInfoTab({
   coverImgChangHandler,
 }) {
 
+  let {userDetails} = useSelector((state) => state.userDetails)
+  
   const apiCall = new usersService()
+
   let navigate = useNavigate()
 
   let [togglePromotion, setTogglePromotion] = useState(false)
 
+  const initialValues = {
+    firstname: userDetails?.firstname,
+    lastname: userDetails?.lastname,
+    state: userDetails?.state,
+    city: userDetails?.city,
+    email: userDetails?.email
+  }
+
   let [profile, setProfile] = useState({ // state for requesting from load profile API
-    data: [],
     loading: true,
     status: false
   })
@@ -74,55 +77,27 @@ export default function PersonalInfoTab({
     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 = (values, helpers)=> {
     setRequestState({message: '', loading: true, status: false})
     
-    apiCall.updateProfile(values).then((res)=>{
+    apiCall.updateProfile(values).then((res)=>{ // API CALL TO UPDATE USER DETAILS
       if(res.data.internal_return < 0){
         setRequestState({message: 'Profile Was unable to update', loading: false, status: false})
         return
       }
       // setRequestState({message: 'Profile update successfully', loading: false, status: true})
       toast.success("Update Successful");
-      setTimeout(()=>{navigate('/',{replace:true})},1000)
+      setTimeout(()=>{
+        navigate('/',{replace:true})
+        window.location.reload(true)
+      },1000)
     }).catch(error => {
       setRequestState({message: 'Opps! an error occurred. Try Agian', loading: false, status: false})
     })
   }
 
-  const loadProfile = ()=>{ // function to load user profile
-    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
+    setProfile({loading: false, status: true})
   },[])
 
   return (
@@ -135,14 +110,12 @@ export default function PersonalInfoTab({
       </div>
     :
       <div className="personal-info-tab w-full flex flex-col justify-between">
-        <Formik initialValues={inputs} validationSchema={validationSchema} onSubmit={handleUpdateUser}>
+        <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleUpdateUser}>
           {(props => {
             return (
             <Form>
-            {
+
-            profile.data.length ? 
+              <div className="flex flex-col-reverse sm:flex-row">
-            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 */}
@@ -153,7 +126,7 @@ export default function PersonalInfoTab({
                         type="text"
                         name="username"
                         placeholder=""
-                        value={item.username}
+                        value={userDetails.username}
                         disable={true}
                       />
                     </div>
@@ -205,7 +178,7 @@ export default function PersonalInfoTab({
                         label="Country"
                         type="text"
                         name="country"
-                        value={item.country}
+                        value={userDetails.country}
                         disable={true}
                       />
                     </div>
@@ -324,41 +297,35 @@ export default function PersonalInfoTab({
                     </div>
                   </div>
                 </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">
-                <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>
-                  </Link>
 
-                  {requestStatus.loading ? 
+              <div className="content-footer w-full">
-                  <LoadingSpinner size='8' color='sky-blue' />
+                {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">
-                  <button
+                  <div className="flex items-center space-x-4 mr-9">
-                  type="submit"
+                    <Link
-                  className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                      to='/'
-                  >
+                      className="text-18 text-light-red tracking-wide "
-                    Update Profile
+                    >
-                  </button>
+                      <span className="border-b dark:border-[#5356fb29]  border-light-red">
-                  }
+                        {" "}
+                        Cancel
+                      </span>
+                    </Link>
+
+                    {requestStatus.loading ? 
+                    <LoadingSpinner size='8' color='sky-blue' />
+                    :
+                    <button
+                    type="submit"
+                    className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                    >
+                      Update Profile
+                    </button>
+                    }
+                  </div>
                 </div>
               </div>
-            </div>
             </Form>
           )
         })}

src/middleware/AuthRoute.jsx

@@ -46,13 +46,10 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       setIsLogin({loading: false, status: false})
     })
   }
-  const getProfile = useCallback(()=>{
-    loadProfile() // API CALL TO GET USER PROFILE
-  }, [])
   
   useEffect(() => {
     if(!isLogin.status){
-      getProfile()
+      loadProfile() // LOADS USER PROFILE DETAILS AND CALLS DISPATCH UPDATEUSERDETAILS TO UPDATE USERDETAILS SLICE IN STORE
     }
 
     const checkInactivity = setInterval(() => {