Merge pull request mosip#19 from shiva-beehyv/fix-search-issue-homepage

Pass title to the issuers page when redirected from search box in homepage
shiva-beehyv · Apr 3, 2024 · 0ca1850 · 0ca1850
2 parents ccfd969 + 6ca9eb1
commit 0ca1850
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/inji-web/src/index.css b/inji-web/src/index.css
@@ -11,3 +11,9 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+/*The following changes are to remove default 'x' button that appears in a input field of type search in chrome browser*/
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration { display: none; }
diff --git a/inji-web/src/pages/Home/SearchIssuers.js b/inji-web/src/pages/Home/SearchIssuers.js
@@ -61,6 +61,11 @@ const PageSubTitle = styled(Typography)`
 
 let abortController = new AbortController();
 
+const getSelectedIssuerObject = (formattedOptions, name) => {
+    let issuerDetails = formattedOptions.filter(option => option.label === name);
+    return issuerDetails?.length === 1 ? issuerDetails[0] : {}
+}
+
 function SearchIssuers({options, setFilteredIssuerList}) {
     const navigate = useNavigate();
     const [formatedOptions, setFormatedOptions] = useState([]);
@@ -76,7 +81,8 @@ function SearchIssuers({options, setFilteredIssuerList}) {
                     return {
                         label: option?.display[0].name ,
                         value: option?.credential_issuer,
-                        clientId: option?.client_id
+                        clientId: option?.client_id,
+                        title: option?.display[0].title
                     }
                 }));
             } 
@@ -90,8 +96,8 @@ 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}} )
+            let reqValue = getSelectedIssuerObject(formatedOptions, value);
+            navigate(`/issuers/${reqValue?.value}`, {state: {issuerDisplayName: reqValue?.title, clientId: reqValue?.clientId}} )
         }
     }
 
@@ -120,7 +126,8 @@ function SearchIssuers({options, setFilteredIssuerList}) {
                         return {
                             label: option?.display[0].name ,
                             value: option?.credential_issuer,
-                            clientId: option?.client_id
+                            clientId: option?.client_id,
+                            title: option?.display[0].title
                         }
                     }));
                 }
@@ -139,7 +146,8 @@ function SearchIssuers({options, setFilteredIssuerList}) {
         let value = event?.target?.value;
 
         if( value && value?.length> 0) {
-        navigate(`/issuers/${value}`)
+            const issuerDetails = getSelectedIssuerObject(formatedOptions, value);
+            navigate(`/issuers/${value}`, {state: {issuerDisplayName: issuerDetails?.title, clientId: issuerDetails?.clientId}});
         }
 
     }