Merge branch 'offer-interest-msg-sending' of WrenchBoard/Users-Wrench into master

src/components/OffersInterest/ManageInterestOffer.jsx

@@ -21,7 +21,9 @@ export default function ManageInterestOffer(props) {
 
     let [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: '', processType: ''})
 
-    const messageList = {data: [1,2,3,4,5,6,7,8,95,6,7,8,9]} // TO BE REMOVED AND REPLACE WITH REAL MESSAGE FROM API CALL
+    let [messageListReload, setMessageListReload] = useState(false) // STATE TO DETERMINE WHEN MESSAGE LIST WILL RELOAD
+
+    const [messageList, setMessageList] = useState({loading: true, data: [1,2,3,4,5,6,7,8,95,6,7,8,9]}) // TO BE REMOVED AND REPLACE WITH REAL MESSAGE FROM API CALL
     // const [currentPage, setCurrentPage] = useState(0);
     // const indexOfFirstItem = Number(currentPage);
     // const indexOfLastItem = Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
@@ -48,6 +50,12 @@ export default function ManageInterestOffer(props) {
 
     //FUNCTION TO SEND MESSAGE TO CLIENT
     const sendMessage = () => {
+        let reqData = { // API PAYLOADS
+            msg_type: 'MRKTINT',
+            yourmessage: messageToSend,
+            offer_uid: props.offerDetails.offer_uid,
+            interest_uid: props.offerDetails.interest_uid
+        }
         setRequestStatus(prev => ({...prev, loading: true, processType: 'sendmessage'}))
         if(!messageToSend){
             setRequestStatus({loading: false, status: false, message: 'Please enter message to send', processType: 'sendmessage'})
@@ -56,7 +64,21 @@ export default function ManageInterestOffer(props) {
         if(messageToSend.length > 149){
             return
         }
-        console.log('GOOD TO GO')
+        apiCall.offerInterestMsg(reqData).then(res=>{
+            if(res.status != 200 || res.data.internal_return < 0){
+                setRequestStatus({loading: false, status: false, message: 'message not sent, try again', processType: 'sendmessage'})
+                return
+            }
+            setRequestStatus({loading: false, status: true, message: 'message sent', processType: 'sendmessage'})
+            setMessageToSend('') // sets message to empty strings
+            setMessageListReload(prev => !prev) //A FUNCTION TO MAKE MESSAGE LIST RELOAD
+        }).catch(error => {
+            setRequestStatus({loading: false, status: false, message: 'Opps, an error occured', processType: 'sendmessage'})
+        }).finally(()=>{
+            setTimeout(() => {
+                setRequestStatus({loading: false, status: false, message: '', processType: ''})
+            }, 5000);
+        })
     }
 
     //FUNCTION TO ACCEPT/REJECT OFFER INTEREST
@@ -91,8 +113,16 @@ export default function ManageInterestOffer(props) {
     }
 
     useEffect(()=>{
-        // run API to get message to replace message array above, add reload variable as dependence array
+        // run API to get message to replace message array above, add reload variable as dependence array. CODE IS DUMMY FOR NOW
-    },[])
+        setMessageList({loading: true, data: []})
+        apiCall.offerInterestMsg().then(res=>{
+            console.log('Data', res.data)
+            setMessageList({loading: false, data:[1,2,3,6,7,8,9]})
+        }).catch(err => {
+            setMessageList({loading: false, data:[1,2,3,6,7,8,9]})
+            console.log('Failed', err)
+        })
+    },[messageListReload])
     return (
         <Layout>
             <CommonHead
@@ -216,14 +246,19 @@ export default function ManageInterestOffer(props) {
                                                 />
                                             </div>
                                             <div className="flex justify-end items-center">
-                                                <button
+                                                {requestStatus.loading && requestStatus.processType == 'sendmessage' ?
-                                                    type="button"
+                                                    <LoadingSpinner color='sky-blue' size='10' />
-                                                    onClick={sendMessage}
+                                                :
-                                                    // className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                                    <button
-                                                    className="w-[100px] h-[50px] bg-sky-blue text-center text-lg font-semibold text-white rounded-md shadow-md flex justify-center items-center"
+                                                        type="button"
-                                                >
+                                                        onClick={sendMessage}
-                                                Send
+                                                        disabled={requestStatus.loading}
-                                                </button>
+                                                        // className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                                        className="w-[100px] h-[50px] bg-sky-blue text-center text-lg font-semibold text-white rounded-md shadow-md flex justify-center items-center"
+                                                    >
+                                                    Send
+                                                    </button>
+                                                }
                                             </div>
                                         </div>
 
@@ -242,7 +277,7 @@ export default function ManageInterestOffer(props) {
                                                 <div
                                                 className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
                                                 >
-                                                {`${requestStatus.message} redirecting.... ${redirectTime}sec`}
+                                                {requestStatus.message}
                                                 </div>
                                             )
                                             ))}
@@ -251,12 +286,21 @@ export default function ManageInterestOffer(props) {
 
                                         {/* message list */}
                                         <div className="my-1 min-h-[100px] max-h-[200px] border-t overflow-y-scroll">
-                                        {messageList.data.map((item, index)=>(
+                                        { messageList.loading ?
+                                        <LoadingSpinner color='sky-blue' size='16' />
+                                        : messageList.data.map((item, index)=>(
                                             <div key={index} className="my-2 w-full flex items-center gap-1">
                                                 <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">2023-04-06-from { }<span className="font-normal">Dummy name</span></p>
                                                 <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">I am testing message</p>
                                             </div>
-                                        ))}
+                                            ))
+                                        }
+                                        {/* {messageList.data.map((item, index)=>(
+                                            <div key={index} className="my-2 w-full flex items-center gap-1">
+                                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">2023-04-06-from { }<span className="font-normal">Dummy name</span></p>
+                                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">I am testing message</p>
+                                            </div>
+                                        ))} */}
                                         </div>
 
                                         {/* PAGINATION BUTTON */}

src/services/UsersService.js

@@ -729,6 +729,18 @@ class usersService {
     };
     return this.postAuxEnd("/paylistcard", postData);
   }
+
+    // END POINT TO SEND AND GET OFFER INTEREST MESSAGE
+    offerInterestMsg(reqData) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        action: 13037,
+        ...reqData
+      };
+      return this.postAuxEnd("/offerinterestmsg", postData);
+    }
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)