Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix:verification popup loader #112

Merged
merged 1 commit into from
Aug 17, 2023
Merged

fix:verification popup loader #112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 14 additions & 8 deletions src/commonComponents/ProofRequestPopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<boolean>(false)
return (

<Modal show={props.openModal} size="lg">
<div className="relative p-4 text-center bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5">
<button
onClick={() => {
setButtonLoader(false)
props.closeModal(false, '')
}}
className="text-gray-400 absolute top-2.5 right-2.5 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
Expand Down Expand Up @@ -41,24 +43,28 @@ const ProofRequest = (props: { openModal: boolean; closeModal: (flag: boolean, i
<div className="flex justify-center items-center space-x-4">
<button
onClick={() => {
setButtonLoader(false)
props.closeModal(false, '')
}}
className="py-2 px-3 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-primary-300 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
>
No, cancel
</button>
<button
<Button
isProcessing={buttonLoader}
onClick={() => {
props.onSucess(props.requestId)
setButtonLoader(true);
props.onSucess(props.requestId);
}}
className="py-2 px-3 text-sm font-medium text-center text-white bg-red-600 rounded-lg hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900"
className="py-1 px-2 text-xs font-medium text-white bg-red-600 rounded-md hover:bg-red-700 focus:ring-2 focus:outline-none focus:ring-red-300 dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900"
style={{ height: '2.5rem', minWidth: '3rem' }}
>
Yes, I'm sure
</button>
Confirm
</Button>
</div>
</div>
</Modal>
);
};

export default ProofRequest;
export default ProofRequest;
78 changes: 48 additions & 30 deletions src/components/Verification/VerificationCredentialList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -19,12 +19,13 @@ import ProofRequest from '../../commonComponents/ProofRequestPopup';

const VerificationCredentialList = () => {
const [loading, setLoading] = useState<boolean>(true)
const [error, setError] = useState<string | null>(null)
const [searchText, setSearchText] = useState("");
const [issuedCredList, setIssuedCredList] = useState<TableData[]>([])
const [verificationList, setVerificationList] = useState<TableData[]>([])
const [openModal, setOpenModal] = useState<boolean>(false);
const [requestId, setRequestId] = useState<string>('')
const [message, setMessage] = useState<string | null>(null)
const [errMsg, setErrMsg] = useState<string | null>(null)
const [proofReqSuccess, setProofReqSuccess] = useState<string>('')
const [verifyLoader, setVerifyloader] = useState<boolean>(false)

//Fetch all issued credential list
const getproofRequestList = async () => {
Expand All @@ -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: <span
className={`bg-cyan-100 ${requestProof.state === ProofRequestState.requestSent && 'text-blue-900'} ${(requestProof.state === ProofRequestState.done) && 'text-green-900'} text-xs font-medium mr-2 px-2.5 py-0.5 rounded-md dark:bg-gray-700 dark:text-white border border-cyan-100 dark:border-cyan-500`}
className={`bg-cyan-100 ${requestProof?.state === ProofRequestState.requestSent && 'text-blue-900'} ${(requestProof?.state === ProofRequestState.done) && 'text-green-900'} text-xs font-medium mr-2 px-2.5 py-0.5 rounded-md dark:bg-gray-700 dark:text-white border border-cyan-100 dark:border-cyan-500`}
>
{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'}`}
</span>

},
Expand All @@ -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);
Expand All @@ -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.");
}
};

Expand All @@ -103,11 +115,10 @@ const VerificationCredentialList = () => {
setOpenModal(flag)
}

const requestProof = (proofVericationId: string) => {
const requestProof = async (proofVericationId: string) => {
if (proofVericationId) {
setOpenModal(false)
presentProofById(proofVericationId)
getproofRequestList()
}
}

Expand All @@ -117,7 +128,7 @@ const VerificationCredentialList = () => {

if (searchText.length >= 1) {
getData = setTimeout(() => {


}, 1000)
} else {
Expand Down Expand Up @@ -165,15 +176,22 @@ const VerificationCredentialList = () => {
Request
</Button>
</div>
<AlertComponent
message={message ? message : error}
type={message ? 'success' : 'failure'}
onAlertClose={() => {
setMessage(null)
setError(null)
}}
/>
<DataTable header={header} data={issuedCredList} loading={loading}></DataTable>
{
(proofReqSuccess || errMsg) &&
<div className="p-2">
<Alert
color={proofReqSuccess ? "success" : "failure"}
onDismiss={() => setErrMsg(null)}
>
<span>
<p>
{proofReqSuccess || errMsg}
</p>
</span>
</Alert>
</div>
}
<DataTable header={header} data={verificationList} loading={loading}></DataTable>
<ProofRequest openModal={openModal}
closeModal={
openProofRequestModel
Expand Down