From 7f6f28cbdb5fa70902a965e0e4e77eb36633cf4e Mon Sep 17 00:00:00 2001 From: tipusinghaw Date: Wed, 16 Aug 2023 15:53:19 +0530 Subject: [PATCH] fix:verification popup loader Signed-off-by: tipusinghaw --- src/commonComponents/ProofRequestPopup.tsx | 22 ++++-- .../VerificationCredentialList.tsx | 78 ++++++++++++------- 2 files changed, 62 insertions(+), 38 deletions(-) diff --git a/src/commonComponents/ProofRequestPopup.tsx b/src/commonComponents/ProofRequestPopup.tsx index 33e3ec49b..67c64cece 100644 --- a/src/commonComponents/ProofRequestPopup.tsx +++ b/src/commonComponents/ProofRequestPopup.tsx @@ -1,13 +1,15 @@ -import { Modal } from 'flowbite-react'; -import React from 'react'; +import { Button, Modal } from 'flowbite-react'; +import React, { useState } from 'react'; const ProofRequest = (props: { openModal: boolean; closeModal: (flag: boolean, id: string) => void; onSucess: (verifyPresentationId: string) => void; requestId: string }) => { + const [buttonLoader, setButtonLoader] = useState(false) return (
- + Confirm +
); }; -export default ProofRequest; +export default ProofRequest; \ No newline at end of file diff --git a/src/components/Verification/VerificationCredentialList.tsx b/src/components/Verification/VerificationCredentialList.tsx index 56a0e6cb6..805675cee 100644 --- a/src/components/Verification/VerificationCredentialList.tsx +++ b/src/components/Verification/VerificationCredentialList.tsx @@ -1,6 +1,6 @@ 'use client'; -import { Button } from 'flowbite-react'; +import { Alert, Button } from 'flowbite-react'; import { ChangeEvent, useEffect, useState } from 'react'; import { apiStatusCodes, storageKeys } from '../../config/CommonConstant'; import type { AxiosResponse } from 'axios'; @@ -19,12 +19,13 @@ import ProofRequest from '../../commonComponents/ProofRequestPopup'; const VerificationCredentialList = () => { const [loading, setLoading] = useState(true) - const [error, setError] = useState(null) const [searchText, setSearchText] = useState(""); - const [issuedCredList, setIssuedCredList] = useState([]) + const [verificationList, setVerificationList] = useState([]) const [openModal, setOpenModal] = useState(false); const [requestId, setRequestId] = useState('') - const [message, setMessage] = useState(null) + const [errMsg, setErrMsg] = useState(null) + const [proofReqSuccess, setProofReqSuccess] = useState('') + const [verifyLoader, setVerifyloader] = useState(false) //Fetch all issued credential list const getproofRequestList = async () => { @@ -42,15 +43,15 @@ const VerificationCredentialList = () => { const credentialList = data?.data?.map((requestProof: RequestProof) => { return { data: [ - { data: requestProof.connectionId ? requestProof.connectionId : 'Not available' }, - { data: requestProof.id ? requestProof.id : 'Not available' }, - { data: dateConversion(requestProof.updatedAt) }, + { data: requestProof?.connectionId ? requestProof?.connectionId : 'Not available' }, + { data: requestProof?.id ? requestProof?.id : 'Not available' }, + { data: dateConversion(requestProof?.updatedAt) }, { data: - {requestProof.state.replace(/_/g, ' ').replace(/\w\S*/g, (word: string) => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase())} - {requestProof.state === ProofRequestState.done && requestProof?.isVerified !== undefined && ` - ${requestProof.isVerified ? 'Verified' : 'Not Verified'}`} + {requestProof?.state?.replace(/_/g, ' ').replace(/\w\S*/g, (word: string) => word?.charAt(0)?.toUpperCase() + word?.substring(1)?.toLowerCase())} + {requestProof?.state === ProofRequestState.done && requestProof?.isVerified !== undefined && ` - ${requestProof?.isVerified ? 'Verified' : 'Not Verified'}`} }, @@ -69,12 +70,12 @@ const VerificationCredentialList = () => { }; }); - setIssuedCredList(credentialList); + setVerificationList(credentialList); } else { - setError(response as string); + setErrMsg(response as string); } } catch (error) { - setError(error.message); + setErrMsg('An error occurred while fetching the proof request list'); } setLoading(false); @@ -84,15 +85,26 @@ const VerificationCredentialList = () => { try { const response = await verifyPresentation(id); const { data } = response as AxiosResponse; - - if (data?.statusCode === apiStatusCodes?.API_STATUS_SUCCESS) { - + if (data?.statusCode === apiStatusCodes?.API_STATUS_CREATED) { + setOpenModal(false) + console.log("98798789", data) + setProofReqSuccess(data.message) + setVerifyloader(false) + setTimeout(() => { + setProofReqSuccess('') + setErrMsg('') + getproofRequestList() + }, 4000) } else { - setError(response as string); + setOpenModal(false) + setErrMsg(response as string); + setVerifyloader(false) } } catch (error) { + setOpenModal(false) + setVerifyloader(false) console.error("An error occurred:", error); - setError("An error occurred while processing the presentation."); + setErrMsg("An error occurred while processing the presentation."); } }; @@ -103,11 +115,10 @@ const VerificationCredentialList = () => { setOpenModal(flag) } - const requestProof = (proofVericationId: string) => { + const requestProof = async (proofVericationId: string) => { if (proofVericationId) { setOpenModal(false) presentProofById(proofVericationId) - getproofRequestList() } } @@ -117,7 +128,7 @@ const VerificationCredentialList = () => { if (searchText.length >= 1) { getData = setTimeout(() => { - + }, 1000) } else { @@ -165,15 +176,22 @@ const VerificationCredentialList = () => { Request - { - setMessage(null) - setError(null) - }} - /> - + { + (proofReqSuccess || errMsg) && +
+ setErrMsg(null)} + > + +

+ {proofReqSuccess || errMsg} +

+ + +
+ } +