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.

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

feat: Integrate pagination and searching functionality #488

Merged
merged 5 commits into from
Dec 15, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
18 changes: 16 additions & 2 deletions src/api/connection.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,24 @@ import { storageKeys } from '../config/CommonConstant';
import { getHeaderConfigs } from '../config/GetHeaderConfigs';
import { axiosGet } from '../services/apiRequests';
import { getFromLocalStorage } from './Auth';
export interface IConnectionListAPIParameter {
itemPerPage: number,
page: number,
search: string,
sortBy: string,
sortingOrder: string,
}

export const getConnectionsByOrg = async () => {
export const getConnectionsByOrg = async ({
page,
itemPerPage,
search,
sortBy,
sortingOrder
}: IConnectionListAPIParameter) => {
const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.Issuance.getAllConnections}`;
const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.Issuance.getAllConnections}?pageSize=${itemPerPage}&pageNumber=${page}&searchByText=${search}&sortByValue=${sortingOrder}&sorting=${sortBy}`;

const axiosPayload = {
url,
config: await getHeaderConfigs(),
Expand Down
12 changes: 8 additions & 4 deletions src/api/issuance.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,19 @@ import axios from 'axios';
import { apiRoutes } from '../config/apiRoutes';
import { storageKeys } from '../config/CommonConstant';
import {
getHeaderConfigs,
getHeaderConfigsForFormData,
getHeaderConfigs
} from '../config/GetHeaderConfigs';
import { axiosGet, axiosPost } from '../services/apiRequests';
import { getFromLocalStorage } from './Auth';
import type { IConnectionListAPIParameter } from './connection';

export const getIssuedCredentials = async () => {
export const getIssuedCredentials = async ({page,
itemPerPage,
search,
sortBy,
sortingOrder}: IConnectionListAPIParameter) => {
const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.Issuance.getIssuedCredentials}`;
const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.Issuance.getIssuedCredentials}?pageSize=${itemPerPage}&pageNumber=${page}&searchByText=${search}&sortByValue=${sortingOrder}&sorting=${sortBy}`;

const axiosPayload = {
url,
Expand Down
19 changes: 13 additions & 6 deletions src/api/verification.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@ import { storageKeys } from '../config/CommonConstant';
import { getHeaderConfigs } from '../config/GetHeaderConfigs';
import { axiosGet, axiosPost } from '../services/apiRequests';
import { getFromLocalStorage } from './Auth';
import type { IConnectionListAPIParameter } from './connection';

export const verifyCredential = async (payload: any) => {
const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.Verification.verifyCredential}`; const axiosPayload = {
const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.Verification.verifyCredential}`;
const axiosPayload = {
url,
payload,
config: await getHeaderConfigs(),
Expand Down Expand Up @@ -37,10 +39,16 @@ export const getVerificationCredential = async (state: IssueCredential) => {
}
};

export const getVerificationList = async () => {
export const getVerificationList = async ({
page,
itemPerPage,
search,
sortBy,
sortingOrder,
}: IConnectionListAPIParameter) => {
const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.Verification.verifyCredential}`
const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.Verification.verifyCredential}?pageSize=${itemPerPage}&pageNumber=${page}&searchByText=${search}&sortByValue=${sortingOrder}&sorting=${sortBy}`;

const axiosPayload = {
url,
config: await getHeaderConfigs(),
Expand Down Expand Up @@ -71,8 +79,7 @@ export const verifyPresentation = async (proofId:string) => {
};


export const getProofAttributes=async (proofId:string)=>{
const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
export const getProofAttributes=async (proofId:string, orgId: string)=>{
const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.Verification.proofRequestAttributesVerification}/${proofId}/form`;
const axiosPayload = {
url,
Expand Down
94 changes: 71 additions & 23 deletions src/components/ConnectionsList/index.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
'use client';

import type { AxiosResponse } from 'axios';
import { useEffect, useState } from 'react';
import { getConnectionsByOrg } from '../../api/connection';
import { ChangeEvent, useEffect, useState } from 'react';
import { IConnectionListAPIParameter, getConnectionsByOrg } from '../../api/connection';
import DataTable from '../../commonComponents/datatable';
import type { TableData } from '../../commonComponents/datatable/interface';
import { apiStatusCodes, storageKeys } from '../../config/CommonConstant';
Expand All @@ -14,35 +14,44 @@ import CustomSpinner from '../CustomSpinner';
import { EmptyListMessage } from '../EmptyListComponent';
import { getFromLocalStorage } from '../../api/Auth';
import { getOrgDetails } from '../../config/ecosystem';
import { Pagination } from 'flowbite-react';
import SearchInput from '../SearchInput';

const initialPageState = {
itemPerPage: 9,
page: 1,
search: "",
sortBy: "createDateTime",
sortingOrder: "DESC",
allSearch: ""
};
const ConnectionList = () => {
const [listAPIParameter, setListAPIParameter] = useState(initialPageState)
const [connectionList, setConnectionList] = useState<TableData[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
const [totalItem, setTotalItem] = useState(0)

useEffect(() => {
getConnections();
}, []);

const getConnections = async () => {
const getConnections = async (apiParameter: IConnectionListAPIParameter) => {
const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
const orgData = await getOrgDetails();
const checkWalletCreated = Boolean(orgData.orgDid);

if (orgId && checkWalletCreated) {
setLoading(true);
try {
const response = await getConnectionsByOrg();
const response = await getConnectionsByOrg(apiParameter);
const { data } = response as AxiosResponse;
if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
const connections = data?.data?.map(
(ele: { theirLabel: string; id: string; createdAt: string }) => {
setTotalItem(data?.data.totalItems)
const connections = data?.data?.data?.map(
(ele: { theirLabel: string; connectionId: string; createDateTime: string }) => {
const userName = ele?.theirLabel
? ele.theirLabel
: 'Not available';
const connectionId = ele.id ? ele.id : 'Not available';
const createdOn = ele?.createdAt
? ele?.createdAt
const connectionId = ele.connectionId ? ele.connectionId : 'Not available';
const createdOn = ele?.createDateTime
? ele?.createDateTime
: 'Not available';
return {
data: [
Expand All @@ -64,25 +73,43 @@ const ConnectionList = () => {
},
);
setConnectionList(connections);
setError(null)
} else {
setConnectionList([])
setError(response as unknown as string);
}
} catch (error) {
setConnectionList([])
setError(error as string);
} finally {
setLoading(false);
}
} else {
setConnectionList([])
setLoading(false);
}
};


const header = [
{ columnName: 'User' },
{ columnName: 'Connection ID' },
{ columnName: 'Created on' },
];

//onChange of Search input text
const searchInputChange = (e: ChangeEvent<HTMLInputElement>) => {
setListAPIParameter({
...listAPIParameter,
search: e.target.value,
page: 1
})
};

useEffect(() => {
getConnections(listAPIParameter)
}, [listAPIParameter])

return (
<div className="p-4" id="connection_list">
<BreadCrumbs />
Expand All @@ -93,6 +120,9 @@ const ConnectionList = () => {
<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
Connections
</h1>
<div>
<SearchInput onInputChange={searchInputChange} />
</div>
</div>
{error && (
<AlertComponent
Expand All @@ -108,16 +138,34 @@ const ConnectionList = () => {
<CustomSpinner />
</div>
) : connectionList && connectionList?.length > 0 ? (
<div
id="issuance_datatable"
className="p-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
>
<DataTable
header={header}
data={connectionList}
loading={loading}
></DataTable>
</div>
<>
<div
id="issuance_datatable"
className="p-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
>
<DataTable
header={header}
data={connectionList}
loading={loading}
></DataTable>
</div>

{
Math.ceil(totalItem / listAPIParameter?.itemPerPage) > 1 &&
<div className="flex items-center justify-end my-4">
<Pagination
currentPage={listAPIParameter?.page}
onPageChange={(page) => {
setListAPIParameter(prevState => ({
...prevState,
page: page
}));
}}
totalPages={Math.ceil(totalItem / listAPIParameter?.itemPerPage)}
/>
</div>
}
</>
) : (
<div className="bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
<EmptyListMessage
Expand Down
Loading