Update issuer display name

inji-web/src/Router.js

@@ -13,7 +13,7 @@ export const router = createBrowserRouter([
         element: <Home />,
     },
     {
-        path: "/issuers/:issuerId/:displayName",
+        path: "/issuers/:issuerId",
         element: <Issuer/>,
     },
     {

inji-web/src/pages/Home/IssuerList.js

@@ -27,7 +27,8 @@ const getCardsData = (issuersList, navigate) => {
             title: issuer.display[0].name,
             icon: null,
             onClick: () => {
-                navigate(`/issuers/${issuer.credential_issuer}/${issuer.display[0].name}`)
+                navigate(`/issuers/${issuer.credential_issuer}`, {state: {issuerDisplayName: issuer.display[0].name, clientId: issuer.client_id}})
+
             },
             clickable: true
         }

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
                         }
                     }));
                 } 

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, displayName} = useParams();
     const [defaultOptions, setDefaultOptions] = useState([]);
 
     useEffect(() => {
@@ -51,7 +50,7 @@ function Header({credentialsList, updateCredentialsList, defaultList}) {
                             <BackArrow />
                         </IconButton>
                         <IssuerTitle>
-                            {displayName}
+                            {loading && !issuerDisplayName ? <CircularProgress/> : issuerDisplayName}
                         </IssuerTitle>
                     </Box>
                 </Grid>

inji-web/src/pages/IssuerPage/index.js

@@ -4,14 +4,17 @@ 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';
 import LoadingScreen from '../../utils/LoadingScreen';
 
 function Issuer() {
     const { issuerId, displayName } = 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();
 
@@ -32,26 +35,31 @@ function Issuer() {
     }, []);
 
     useEffect(() => {
-        _axios.get(getSearchIssuersUrl(issuerId))
+        // make an api call only when the state is not available
+        if (issuerClientId && issuerDisplayName) return;
+        _axios.get(getSearchIssuersUrl(issuerDisplayName? issuerDisplayName : 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 (
         <PageTemplate>
-            <Header issuer={displayName} credentialsList={credentialsList} updateCredentialsList={setCredentialsList} defaultList={defaultList}/>
-            {loading ? <LoadingScreen /> :
-             <CertificateList credentialList={credentialsList} issuerId={issuerId} clientId={issuerClientId}/>
-            }    
+            <Header issuerDisplayName={issuerDisplayName ? issuerDisplayName : issuerId} credentialsList={credentialsList}
+                    loading={loading} updateCredentialsList={setCredentialsList} defaultList={defaultList}/>
+            {loading 
+                ? <LoadingScreen />
+                : <CertificateList credentialList={credentialsList} issuerId={issuerId} clientId={issuerClientId}/>
+            }
         </PageTemplate>
     );
 }