[INJIWEB-1203] show service not available toaster if the internet is …

…not available when calling the authorization server wellknown endpoint Signed-off-by: PuBHARGAVI <46226958+PuBHARGAVI@users.noreply.github.com>
mosip · Jan 8, 2025 · c5e2ee5 · c5e2ee5
1 parent 0beb2b5
commit c5e2ee5
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 38 deletions.
diff --git a/inji-web/src/components/Credentials/CredentialList.tsx b/inji-web/src/components/Credentials/CredentialList.tsx
@@ -9,19 +9,25 @@ import {SpinningLoader} from "../Common/SpinningLoader";
 import {CredentialListProps} from "../../types/components";
 import {HeaderTile} from "../Common/HeaderTile";
 import {DownloadResult} from "../Redirection/DownloadResult";
+import {toast} from "react-toastify";
 
 export const CredentialList: React.FC<CredentialListProps> = ({state}) => {
     const [errorObj, setErrorObj] = useState({
         code: "",
         message: ""
     });
+    const [toastError, setToastError] = useState("");
     const credentials = useSelector((state: RootState) => state.credentials);
     const {t} = useTranslation("CredentialsPage");
 
     if (state === RequestStatus.LOADING) {
         return <SpinningLoader />;
     }
 
+    if (toastError !== "") {
+        toast.error(t("errorContent"), {onClose: () => setToastError("")});
+    }
+
     if (
         state === RequestStatus.ERROR ||
         !credentials?.filtered_credentials
@@ -64,6 +70,7 @@ export const CredentialList: React.FC<CredentialListProps> = ({state}) => {
                                     key={index}
                                     index={index}
                                     setErrorObj={setErrorObj}
+                                    setToastError={setToastError}
                                 />
                             ))}
                     </div>

diff --git a/inji-web/src/components/Credentials/Crendential.tsx b/inji-web/src/components/Credentials/Crendential.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 import {getObjectForCurrentLanguage} from "../../utils/i18n";
 import {ItemBox} from "../Common/ItemBox";
 import {generateCodeChallenge, generateRandomString} from "../../utils/misc";
@@ -8,17 +8,16 @@ import {api} from "../../utils/api";
 import {CredentialProps} from "../../types/components";
 import {
     AuthServerWellknownObject,
-    CodeChallengeObject,
     CredentialConfigurationObject
 } from "../../types/data";
 import {RootState} from "../../types/redux";
 import {DataShareExpiryModal} from "../../modals/DataShareExpiryModal";
 import {useTranslation} from "react-i18next";
-import {useFetch} from "../../hooks/useFetch";
+import {RequestStatus, useFetch} from "../../hooks/useFetch";
 
 export const Credential: React.FC<CredentialProps> = (props) => {
     const {t} = useTranslation("CredentialsPage");
-    const {fetchRequest} = useFetch();
+    const {state, response, fetchRequest} = useFetch();
     const selectedIssuer = useSelector((state: RootState) => state.issuers);
     const [credentialExpiry, setCredentialExpiry] = useState<boolean>(false);
     const language = useSelector((state: RootState) => state.common.language);
@@ -33,55 +32,67 @@ export const Credential: React.FC<CredentialProps> = (props) => {
     const vcStorageExpiryLimitInTimes = useSelector(
         (state: RootState) => state.common.vcStorageExpiryLimitInTimes
     );
+    const [authorizationReqState, setAuthorizationRequestState] = useState("");
+    const [codeChallenge, setCodeChallenge] = useState({
+        codeChallenge: "",
+        codeVerifier: ""
+    });
+
+    useEffect(() => {
+        if (state === RequestStatus.ERROR) {
+            props.setToastError(t("errorContent"));
+        }
+        if (response) {
+            if (state === RequestStatus.DONE) {
+                if (validateIfAuthServerSupportRequiredGrantTypes(response)) {
+                    window.open(
+                        api.authorization(
+                            selectedIssuer.selected_issuer,
+                            filteredCredentialConfig,
+                            authorizationReqState,
+                            codeChallenge,
+                            response["authorization_endpoint"]
+                        ),
+                        "_self",
+                        "noopener"
+                    );
+                } else {
+                    props.setErrorObj({
+                        code: "errors.authorizationGrantTypeNotSupportedByWallet.code",
+                        message:
+                            "errors.authorizationGrantTypeNotSupportedByWallet.message"
+                    });
+                }
+            }
+        }
+    }, [response, state]);
 
     const onSuccess = async (
         defaultVCStorageExpiryLimit: number = vcStorageExpiryLimitInTimes
     ) => {
-        setCredentialExpiry(false);
         const state = generateRandomString();
-        const code_challenge: CodeChallengeObject =
-            generateCodeChallenge(state);
-        addNewSession({
+		setAuthorizationRequestState(state);
+        setCodeChallenge(generateCodeChallenge(state));
+        setCredentialExpiry(false);
+
+		addNewSession({
             selectedIssuer: selectedIssuer.selected_issuer,
             certificateId: props.credentialId,
             codeVerifier: state,
             vcStorageExpiryLimitInTimes: isNaN(defaultVCStorageExpiryLimit)
                 ? vcStorageExpiryLimitInTimes
                 : defaultVCStorageExpiryLimit,
-            state: state,
+            state: state
         });
         const apiRequest = api.fetchAuthorizationServerWellknown(
             props.credentialWellknown.authorization_servers[0]
         );
-        const authorizationServerWellknown = await fetchRequest(
+
+        await fetchRequest(
             apiRequest.url(),
             apiRequest.methodType,
             apiRequest.headers()
         );
-
-        if (
-            validateIfAuthServerSupportRequiredGrantTypes(
-                authorizationServerWellknown
-            )
-        ) {
-            window.open(
-                api.authorization(
-                    selectedIssuer.selected_issuer,
-                    filteredCredentialConfig,
-                    state,
-                    code_challenge,
-                    authorizationServerWellknown["authorization_endpoint"]
-                ),
-                "_self",
-                "noopener"
-            );
-        } else {
-            props.setErrorObj({
-                code: "errors.authorizationGrantTypeNotSupportedByWallet.code",
-                message:
-                    "errors.authorizationGrantTypeNotSupportedByWallet.message"
-            });
-        }
     };
 
     const validateIfAuthServerSupportRequiredGrantTypes = (

diff --git a/inji-web/src/hooks/useFetch.tsx b/inji-web/src/hooks/useFetch.tsx
@@ -36,14 +36,13 @@ export const useFetch = () => {
                 throw new Error();
             }
             setState(RequestStatus.DONE);
-            return await response.json();
+            const responseJson = await response.json();
+            setResponse(responseJson);
+            return responseJson;
         } catch (e) {
             setState(RequestStatus.ERROR);
             setError("Error Happened");
         }
     };
     return {state, error, response, fetchRequest};
 }
-
-
-
diff --git a/inji-web/src/types/components.d.ts b/inji-web/src/types/components.d.ts
@@ -29,6 +29,7 @@ export type CredentialProps = {
     credentialWellknown: IssuerWellknownObject;
     index: number;
     setErrorObj: Dispatch<SetStateAction<ErrorObj>>;
+    setToastError: Dispatch<SetStateAction<string>>;
 }
 
 export type HelpAccordionItemProps = {