From 7460ee37e2cdc378592f1e82d32540f77590a55f Mon Sep 17 00:00:00 2001 From: Shiva Date: Fri, 23 Feb 2024 13:58:26 +0530 Subject: [PATCH 1/3] Passing Display name to the Header in the IssuerPage Signed-off-by: Shiva --- inji-web/src/pages/Home/IssuerList.js | 2 +- inji-web/src/pages/IssuerPage/Header.js | 7 +++---- inji-web/src/pages/IssuerPage/index.js | 15 +++++++++++---- 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/inji-web/src/pages/Home/IssuerList.js b/inji-web/src/pages/Home/IssuerList.js index 5a7f124c..7960b55a 100644 --- a/inji-web/src/pages/Home/IssuerList.js +++ b/inji-web/src/pages/Home/IssuerList.js @@ -27,7 +27,7 @@ const getCardsData = (issuersList, navigate) => { title: issuer.display[0].name, icon: null, onClick: () => { - navigate(`/issuers/${issuer.credential_issuer}`) + navigate(`/issuers/${issuer.credential_issuer}`, {state: {issuerDisplayName: issuer.display[0].name, clientId: issuer.client_id}}) }, clickable: true } diff --git a/inji-web/src/pages/IssuerPage/Header.js b/inji-web/src/pages/IssuerPage/Header.js index 6c982fc8..eb047e89 100644 --- a/inji-web/src/pages/IssuerPage/Header.js +++ b/inji-web/src/pages/IssuerPage/Header.js @@ -1,5 +1,5 @@ import React, {useEffect, useState} from 'react'; -import {Grid, IconButton, Typography, Autocomplete, TextField} from "@mui/material"; +import {Grid, IconButton, Typography, Autocomplete, TextField, CircularProgress} from "@mui/material"; import styled from "@emotion/styled"; import Box from "@mui/material/Box"; import ArrowBackIcon from '@mui/icons-material/ArrowBack'; @@ -33,9 +33,8 @@ const IssuerTitle = styled(Typography)` font-family: Inter; `; -function Header({credentialsList, updateCredentialsList, defaultList}) { +function Header({issuerDisplayName, loading, credentialsList, updateCredentialsList, defaultList}) { const navigate = useNavigate(); - const { issuerId } = useParams(); const [defaultOptions, setDefaultOptions] = useState([]); useEffect(() => { @@ -51,7 +50,7 @@ function Header({credentialsList, updateCredentialsList, defaultList}) { - {issuerId} + {loading && !issuerDisplayName ? : issuerDisplayName} diff --git a/inji-web/src/pages/IssuerPage/index.js b/inji-web/src/pages/IssuerPage/index.js index 1e596484..b56567f7 100644 --- a/inji-web/src/pages/IssuerPage/index.js +++ b/inji-web/src/pages/IssuerPage/index.js @@ -4,13 +4,16 @@ import Header from "./Header"; import CertificateList from "./CertificateList"; import _axios from 'axios'; import {getCredentialsSupportedUrl, getSearchIssuersUrl} from "../../utils/config"; -import { useParams } from 'react-router-dom'; +import { useParams, useLocation } from 'react-router-dom'; function Issuer() { const { issuerId } = useParams(); const [credentialsList, setCredentialsList] = useState([]); const [defaultList, setDefaultList] = useState([]); - const [issuerClientId, setIssuerClientId] = useState(); + + const location = useLocation(); + const [issuerClientId, setIssuerClientId] = useState(location.state ? location.state['clientId'] : undefined); + const [issuerDisplayName, setIssuerDisplayName] = useState(location.state ? location.state['issuerDisplayName'] : undefined); const [loading, setLoading] = useState(true); const [errorMessage, setErrorMessage] = useState(); @@ -31,23 +34,27 @@ function Issuer() { }, []); useEffect(() => { + // make an api call only when the state is not available + if (issuerClientId && issuerDisplayName) return; _axios.get(getSearchIssuersUrl(issuerId)) .then((response) => { let issuers = response.data.response.issuers; if (issuers.length !== 0) { setIssuerClientId(issuers[0].client_id); + setIssuerDisplayName(issuers[0].display[0].name); } }) .catch((error) => { console.error('Failed to search for the issuer', issuerId, error); - setErrorMessage('Error loading issuer client id'); + setErrorMessage('Error loading issuer details!'); }) }, []); // TODO: show a loader while loading and error message in case of any errors return ( -
+
); From b36a30533930b3ab2c68c989ee443cd0b4dff0ef Mon Sep 17 00:00:00 2001 From: Sreejit-K Date: Wed, 28 Feb 2024 16:22:45 +0530 Subject: [PATCH 2/3] Removed the router changes and added conditinal checks on the credential type search Signed-off-by: Sreejit-K --- inji-web/src/Router.js | 2 +- inji-web/src/pages/IssuerPage/index.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/inji-web/src/Router.js b/inji-web/src/Router.js index da85e165..92dcf017 100644 --- a/inji-web/src/Router.js +++ b/inji-web/src/Router.js @@ -13,7 +13,7 @@ export const router = createBrowserRouter([ element: , }, { - path: "/issuers/:issuerId/:displayName", + path: "/issuers/:issuerId", element: , }, { diff --git a/inji-web/src/pages/IssuerPage/index.js b/inji-web/src/pages/IssuerPage/index.js index 2bc47a3a..67d3de38 100644 --- a/inji-web/src/pages/IssuerPage/index.js +++ b/inji-web/src/pages/IssuerPage/index.js @@ -37,7 +37,7 @@ function Issuer() { useEffect(() => { // make an api call only when the state is not available if (issuerClientId && issuerDisplayName) return; - _axios.get(getSearchIssuersUrl(issuerId)) + _axios.get(getSearchIssuersUrl(issuerDisplayName? issuerDisplayName : issuerId)) .then((response) => { let issuers = response.data.response.issuers; if (issuers.length !== 0) { @@ -54,7 +54,7 @@ function Issuer() { // TODO: show a loader while loading and error message in case of any errors return ( -
{loading ? From 1d992d89070718bed06b55c57652438a2cbbc1e8 Mon Sep 17 00:00:00 2001 From: Sreejit-K Date: Wed, 28 Feb 2024 16:53:51 +0530 Subject: [PATCH 3/3] Fixed the search functinlaity in issuer page Signed-off-by: Sreejit-K --- inji-web/src/pages/Home/SearchIssuers.js | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/inji-web/src/pages/Home/SearchIssuers.js b/inji-web/src/pages/Home/SearchIssuers.js index 862b0f49..a803247d 100644 --- a/inji-web/src/pages/Home/SearchIssuers.js +++ b/inji-web/src/pages/Home/SearchIssuers.js @@ -72,7 +72,8 @@ function SearchIssuers({options, setFilteredIssuerList}) { setFormatedOptions(response?.data?.response?.issuers.map((option) => { return { label: option?.display[0].name , - value: option?.display[0].name + value: option?.credential_issuer, + clientId: option?.client_id } })); } @@ -83,22 +84,25 @@ function SearchIssuers({options, setFilteredIssuerList}) { }, []); + + function getReqValue (value) { + if (value) { + let reqValue = formatedOptions.filter(i => i.label === value); + navigate(`/issuers/${reqValue[0]?.value}`, {state: {issuerDisplayName: value, clientId: reqValue[0]?.clientId}} ) + } + } + function setFilterOptions(event) { let value = event?.target?.value; - console.log(event); if (event?.type === 'click' ) { value = event?.target?.outerText - if (value) { - navigate(`/issuers/${value}`) - } + getReqValue(value) } if (event.key === "Enter") { value = event.target.value - if (value) { - navigate(`/issuers/${value}`) - } + getReqValue(value); } if (value) { @@ -110,7 +114,8 @@ function SearchIssuers({options, setFilteredIssuerList}) { setFormatedOptions(response?.data?.response?.issuers.map((option) => { return { label: option?.display[0].name , - value: option?.display[0].name + value: option?.credential_issuer, + clientId: option?.client_id } })); }