added fix for transaction with remita

client/src/App.js

@@ -80,7 +80,7 @@ const App = (props) => {
   const [authenticated, setAuthenticated] = useRecoilState(state.authState);
   const [currentUser, setCurrentUser] = useRecoilState(state.currentUserState);
 
-  console.log("i was rendered");
+
   useEffect(() => {
     if (!currentUser) {
       //load the stuffs from the store if it exists

client/src/components/common/makeTransactionComponent.js

@@ -24,12 +24,11 @@ const TransactionStyles = styled.div`
     margin: 10px 0 20px 0;
     font-size: 22px;
   }
-  
 `;
 
 const MakeTransactionComponent = ({ transaction, history }) => {
   const [submitted, setSubmitted] = useState(false);
-  const [errors, setErrors] = useState([]);
+  const [errors, setErrors] = useState(null);
 
   const {
     amount,
@@ -49,7 +48,7 @@ const MakeTransactionComponent = ({ transaction, history }) => {
 
   useEffect(() => {
     if (makeRRRMutationResult.error) {
-      setErrors(ExtractError(makeRRRMutationResult.error));
+      setErrors(makeRRRMutationResult.error);
       setSubmitted(!submitted);
     }
     if (makeRRRMutationResult.data) {
@@ -88,7 +87,6 @@ const MakeTransactionComponent = ({ transaction, history }) => {
         },
       });
     } catch (error) {
-      setSubmitted(!submitted);
       console.log(error);
     }
   };
@@ -98,7 +96,10 @@ const MakeTransactionComponent = ({ transaction, history }) => {
       <div className="container">
         <div className="row">
           <div className="col-12">
-            <ErrorDisplay errors={errors} />
+            <div className="text-center">
+              {errors && <p className="lead text-danger">{errors.message}</p>}
+            </div>
+
             <div className="card">
               <div className="card-body p-0">
                 <div className="row p-5">

client/src/components/generateRRR.js

@@ -3,8 +3,11 @@ import RemitaTransactionComponent from "./common/makeTransactionComponent";
 
 const GenerateRRRPayment = (props) => {
   const { state } = props.location;
-  if (state && state.error && state.error.length) {
-    return <p>{state && state.error && state.error[0]}</p>;
+  if (state && state.error ) {
+    return <div className="text-center">
+       <p className="lead text-danger">{state && state.error }</p>;
+    </div>
+
   }
   return (
     <div className="row">

client/src/components/reuseableComponents/bedSpaceAllocationTableComponent.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import {
   InitiateHostelPayment,
@@ -34,41 +34,41 @@ const BedSpaceStyles = styled.div`
 
 const BedSpaceAllocationTableComponent = ({ history, bedSpace, regNumber }) => {
   const [initPayment, initPaymentResult] = useMutation(InitiateHostelPayment);
+  const [errors, setErrors] = useState(null);
   const [simulatedFunction, simulateResult] = useMutation(
     SimulateRemitaTransaction
   );
   useEffect(() => {
-    if (initPaymentResult.data || initPaymentResult.error) {
+    debugger
+    if (initPaymentResult.error) {
+      setErrors(initPaymentResult.error);
+    }
+    if (initPaymentResult.data) {
       //we have a successdul transaction
       const data = initPaymentResult.data.initiateHostelFeePayment;
-      let errorArray = [];
-      if (initPaymentResult.error) {
-        errorArray = ExtractError(initPaymentResult.error);
+      if (data !== null) {
+        history.push("/make_payment", {
+          error: initPaymentResult.error,
+          transaction: data,
+        });
       }
-
-      history.push("/make_payment", {
-        error: errorArray,
-        transaction: data,
-      });
     }
   }, [initPaymentResult.data, initPaymentResult.error]);
 
   useEffect(() => {
-    if (simulateResult.data || simulateResult.error) {
+    if (simulateResult.error) {
+      setErrors(simulateResult.error);
+    }
+    if (simulateResult.data) {
       //we have a successdul transaction
       //const data = simulateResult.data.simulateRemitaTransaction;
-      let errorArray = [];
-      if (simulateResult.error) {
-        errorArray = ExtractError(simulateResult.error);
-      }
-
       history.push("/student_transactions", {
         regNumber,
       });
     }
   }, [simulateResult.data, simulateResult.error]);
 
-  const handleFlutterPayment = async (e) => {
+  const handleRemitaPayment = async (e) => {
     try {
       e.preventDefault();
       await initPayment({
@@ -100,6 +100,9 @@ const BedSpaceAllocationTableComponent = ({ history, bedSpace, regNumber }) => {
   return (
     <BedSpaceStyles>
       <div className="resultBoard">
+        <div className="text-center">
+          {errors && <p className="lead text-danger">{errors.message}</p>}
+        </div>
         {bedSpace && (
           <div>
             <table className="table table-borderless">
@@ -173,14 +176,14 @@ const BedSpaceAllocationTableComponent = ({ history, bedSpace, regNumber }) => {
               <React.Fragment>
                 <div className="text-center">
                   <div
-                    class="btn-group"
+                    className="btn-group"
                     role="group"
                     aria-label="Basic example"
                   >
                     <button
                       type="button"
                       className="btn btn-secondary btn-lg"
-                      onClick={handleFlutterPayment}
+                      onClick={handleRemitaPayment}
                     >
                       Make Payment
                     </button>