InjiWeb refactoring for PDF Download (#45)

* injiweb-refactoring with pdf download Signed-off-by: Vijay <[email protected]> * injiweb-refactoring with pdf download Signed-off-by: Vijay <[email protected]> * injiweb-refactoring with pdf download Signed-off-by: Vijay <[email protected]> * injiweb-refactoring with pdf download Signed-off-by: Vijay <[email protected]> * injiweb-refactoring with optimization Signed-off-by: Vijay <[email protected]> --------- Signed-off-by: Vijay <[email protected]>
mosip · Apr 29, 2024 · 51c4b0b · 51c4b0b
1 parent d14798c
commit 51c4b0b
Show file tree

Hide file tree

Showing 14 changed files with 68 additions and 37 deletions.
diff --git a/.github/workflows/push-trigger.yml b/.github/workflows/push-trigger.yml
@@ -2,9 +2,9 @@ name: inji-web build upon a push
 
 on:
   release:
-    types: [published]
+    types: [ published ]
   pull_request:
-    types: [opened, reopened, synchronize]
+    types: [ opened, reopened, synchronize ]
   push:
     branches:
       - '!release-branch'
@@ -13,6 +13,7 @@ on:
       - 1.*
       - develop
       - MOSIP*
+      - injiweb*
 
 jobs:
   build-dockers-inji-web:

diff --git a/inji-web/src/components/Common/ItemBox.tsx b/inji-web/src/components/Common/ItemBox.tsx
@@ -5,7 +5,7 @@ export const ItemBox: React.FC<ItemBoxProps> = (props) => {
     return <React.Fragment>
         <div key={props.index}
              data-testid="ItemBox-Outer-Container"
-             className="bg-light-background dark:bg-dark-background shadow flex flex-row shadow-light-shadow dark:shadow-dark-shadow p-4 rounded-md cursor-pointer items-center"
+             className="bg-light-tileBackground dark:bg-dark-tileBackground shadow flex flex-row shadow-light-shadow dark:shadow-dark-shadow p-4 rounded-md cursor-pointer items-center"
              onClick={props.onClick}>
             <img data-testid="ItemBox-Logo" src={props.url} alt="Issuer Logo"
                  className="w-30 h-10 justify-center mr-4"/>

diff --git a/inji-web/src/components/Common/SpinningLoader.tsx b/inji-web/src/components/Common/SpinningLoader.tsx
@@ -1,18 +1,19 @@
 import React from "react";
-import {TailSpin} from "react-loader-spinner";
+import {Oval} from "react-loader-spinner";
 
 export const SpinningLoader: React.FC = () => {
     return <React.Fragment>
         <div className={"flex justify-center items-center"}>
-            <TailSpin
+            <Oval
                 visible={true}
                 height="80"
                 width="80"
                 color="#EB6F2D"
-                ariaLabel="tail-spin-loading"
-                radius="2"
+                secondaryColor="#E6E6E6"
+                ariaLabel="oval-loading"
                 wrapperStyle={{}}
                 wrapperClass=""
+                strokeWidth={3}
             />
         </div>
     </React.Fragment>

diff --git a/inji-web/src/components/Credentials/CredentialList.tsx b/inji-web/src/components/Credentials/CredentialList.tsx
@@ -7,6 +7,7 @@ import {EmptyListContainer} from "../Common/EmptyListContainer";
 import {useTranslation} from "react-i18next";
 import {RequestStatus} from "../../hooks/useFetch";
 import {SpinningLoader} from "../Common/SpinningLoader";
+import {CredentialListProps} from "../../types/components";
 
 export const CredentialList: React.FC<CredentialListProps> = ({state}) => {
 
@@ -33,6 +34,3 @@ export const CredentialList: React.FC<CredentialListProps> = ({state}) => {
 }
 
 
-type CredentialListProps = {
-    state: RequestStatus;
-}
diff --git a/inji-web/src/components/Help/HelpAccordionItem.tsx b/inji-web/src/components/Help/HelpAccordionItem.tsx
@@ -10,7 +10,7 @@ export const HelpAccordionItem: React.FC<HelpAccordionItemProps> = (props) => {
              data-testid="Help-Item-Container">
             <button
                 data-testid="Help-Item-Title-Button"
-                className="w-full p-4 text-left font-bold hover:bg-light-subTitle hover:dark:bg-dark-subTitle focus:outline-none"
+                className="w-full p-5 text-left font-bold hover:bg-light-helpAccordionHover hover:dark:bg-dark-helpAccordionHover focus:outline-none"
                 onClick={() => props.setOpen(props.id)}
             >
                 <div className={"flex flex-row text-light-title dark:text-dark-title"}
@@ -25,7 +25,7 @@ export const HelpAccordionItem: React.FC<HelpAccordionItemProps> = (props) => {
                 </div>
             </button>
             {(props.id === props.open) && (
-                <div className="p-4 bg-light-background dark:bg-dark-background border-t-2"
+                <div className="p-5 bg-light-background dark:bg-dark-background border-t-2"
                      data-testid="Help-Item-Content-Text">
                     {props.content.map(content => <p className={"text-light-title dark:text-dark-title"}>{content}</p>)}
 

diff --git a/inji-web/src/components/Issuers/IssuersList.tsx b/inji-web/src/components/Issuers/IssuersList.tsx
@@ -7,6 +7,7 @@ import {useTranslation} from "react-i18next";
 import {EmptyListContainer} from "../Common/EmptyListContainer";
 import {RequestStatus} from "../../hooks/useFetch";
 import {SpinningLoader} from "../Common/SpinningLoader";
+import {IssuersListProps} from "../../types/components";
 
 export const IssuersList: React.FC<IssuersListProps> = ({state}) => {
     const issuers = useSelector((state: RootState) => state.issuers);
@@ -31,6 +32,3 @@ export const IssuersList: React.FC<IssuersListProps> = ({state}) => {
     </React.Fragment>
 }
 
-type IssuersListProps = {
-    state: RequestStatus;
-}
diff --git a/inji-web/src/components/PageTemplate/Header.tsx b/inji-web/src/components/PageTemplate/Header.tsx
@@ -25,7 +25,8 @@ export const Header: React.FC = () => {
                             <div onClick={() => navigate("/help")}
                                  className="text-light-title dark:text-dark-title font-bold cursor-pointer">{t("Header.help")}</div>
                         </li>
-                        <li data-testid="Header-Menu-AboutInji"><a href="https://docs.mosip.io/inji" target="_blank"
+                        <li data-testid="Header-Menu-AboutInji"><a href="https://docs.mosip.io/inji/inji-web/overview"
+                                                                   target="_blank"
                                                                    rel="noreferrer"
                                                                    className="text-light-title dark:text-dark-title font-bold">{t("Header.aboutInji")}</a>
                         </li>

diff --git a/inji-web/src/components/Redirection/DownloadResult.tsx b/inji-web/src/components/Redirection/DownloadResult.tsx
@@ -1,22 +1,27 @@
 import React from "react";
 import {useNavigate} from "react-router-dom";
-import {BsShieldFillCheck, BsShieldFillX} from "react-icons/bs";
+import {BsShieldFillCheck, BsShieldFillExclamation, BsShieldFillX} from "react-icons/bs";
 import {DownloadResultProps} from "../../types/components";
+import {RequestStatus} from "../../hooks/useFetch";
 
 
 export const DownloadResult: React.FC<DownloadResultProps> = (props) => {
     const navigate = useNavigate();
     return <React.Fragment>
         <div data-testid="DownloadResult-Outer-Container" className="flex flex-col justify-center items-center pt-32">
             <div className="rounded-full p-2 shadow">
-                {props.success ?
+                {props.state === RequestStatus.DONE &&
                     <div className="rounded-full p-8 bg-light-shieldSuccessShadow dark:bg-dark-shieldSuccessShadow ">
                         <BsShieldFillCheck
-                            data-testid="DownloadResult-Success-SheildIcon" size={40} color={"green"}/>
-                    </div> :
+                            data-testid="DownloadResult-Success-SheildIcon" size={40} color={"green"}/></div>}
+                {props.state === RequestStatus.ERROR &&
                     <div className="rounded-full p-8 bg-light-shieldErrorShadow dark:bg-dark-shieldErrorShadow">
                         <BsShieldFillX
                             data-testid="DownloadResult-Error-SheildIcon" size={40} color={"red"}/></div>}
+                {props.state === RequestStatus.LOADING &&
+                    <div className="rounded-full p-8 bg-light-shieldLoadingShadow dark:bg-dark-shieldLoadingShadow">
+                        <BsShieldFillExclamation
+                            data-testid="DownloadResult-Loading-SheildIcon" size={40} color={"#ef9105"}/></div>}
             </div>
             <div className="mt-4 ">
                 <p className="font-bold" data-testid="DownloadResult-Title">{props.title}</p>

diff --git a/inji-web/src/hooks/useFetch.tsx b/inji-web/src/hooks/useFetch.tsx
@@ -1,6 +1,5 @@
 import {useState} from "react";
 import {api, MethodType} from "../utils/api";
-import {ResponseTypeObject} from "../types/data";
 
 export enum RequestStatus {
     LOADING,
@@ -15,21 +14,22 @@ export const useFetch = () => {
     const fetchRequest = async (uri: string, method: MethodType, header: any, body?: any) => {
         try {
             setState(RequestStatus.LOADING);
-            let responseJson: (ResponseTypeObject) = {};
             const response = await fetch(`${api.mimotoHost}${uri}`, {
                 method: MethodType[method],
                 headers: header,
                 body: body,
             });
-            responseJson = response;
-            if (response.ok && uri.indexOf("download") === -1) {
-                responseJson = await response.json();
+
+            if (uri.indexOf("download") !== -1) {
                 setState(RequestStatus.DONE);
+                return await response.blob();
             }
             if (!response.ok) {
                 setState(RequestStatus.ERROR);
+                return response;
             }
-            return responseJson;
+            setState(RequestStatus.DONE);
+            return await response.json();
         } catch (e) {
             setState(RequestStatus.ERROR);
             setError("Error Happened");

diff --git a/inji-web/src/locales/en.json b/inji-web/src/locales/en.json
@@ -25,6 +25,10 @@
     "errorContent": "The service is currently unavailable now. Please try again later."
   },
   "RedirectionPage": {
+    "loading": {
+      "title": "Download InProgress...",
+      "subTitle": "please wait while your pdf gets downloaded."
+    },
     "success": {
       "title": "Download Success",
       "subTitle": "PDF is generated"

diff --git a/inji-web/src/pages/RedirectionPage.tsx b/inji-web/src/pages/RedirectionPage.tsx
@@ -42,20 +42,19 @@ export const RedirectionPage: React.FC = () => {
 
                 let apiRequest: ApiRequest = api.fetchToken;
                 let response = await fetchRequest(
-                    apiRequest.url(issuerId) + `?code=${code}&clientId=${clientId}&codeVerifier=${codeVerifier}`,
+                    apiRequest.url(issuerId),
                     apiRequest.methodType,
                     apiRequest.headers(),
                     requestBody
                 );
 
                 apiRequest = api.downloadVc;
                 response = await fetchRequest(
-                    apiRequest.url(issuerId, certificateId) + `?token=${response?.access_token}`,
+                    apiRequest.url(issuerId, certificateId),
                     apiRequest.methodType,
                     apiRequest.headers(response?.access_token)
                 );
-                await downloadCredentialPDF(response, certificateId);
-                if (state === RequestStatus.DONE) {
+                if (state !== RequestStatus.ERROR) {
                     await downloadCredentialPDF(response, certificateId);
                 }
                 if (urlState != null) {
@@ -74,7 +73,16 @@ export const RedirectionPage: React.FC = () => {
             <NavBar title={activeSessionInfo?.issuerId} search={false}/>
             <DownloadResult title={t("error.invalidSession.title")}
                             subTitle={t("error.invalidSession.subTitle")}
-                            success={false}/>
+                            state={RequestStatus.ERROR}/>
+        </div>
+    }
+
+    if (state === RequestStatus.LOADING) {
+        return <div data-testid="Redirection-Page-Container">
+            <NavBar title={activeSessionInfo?.issuerId} search={false}/>
+            <DownloadResult title={t("loading.title")}
+                            subTitle={t("loading.subTitle")}
+                            state={RequestStatus.LOADING}/>
         </div>
     }
 
@@ -83,14 +91,14 @@ export const RedirectionPage: React.FC = () => {
             <NavBar title={activeSessionInfo?.issuerId} search={false}/>
             <DownloadResult title={t("error.generic.title")}
                             subTitle={t("error.generic.subTitle")}
-                            success={false}/>
+                            state={RequestStatus.ERROR}/>
         </div>
     }
 
     return <div data-testid="Redirection-Page-Container">
         <NavBar title={activeSessionInfo?.issuerId} search={false}/>
         <DownloadResult title={t("success.title")}
                         subTitle={t("success.subTitle")}
-                        success={true}/>
+                        state={RequestStatus.DONE}/>
     </div>
 }
diff --git a/inji-web/src/types/components.d.ts b/inji-web/src/types/components.d.ts
@@ -1,5 +1,6 @@
 import {CredentialWellknownObject, IssuerObject, ResponseTypeObject} from "./data";
 import React from "react";
+import {RequestStatus} from "../hooks/useFetch";
 
 export type ItemBoxProps = {
     index: number;
@@ -29,7 +30,7 @@ export type IssuerProps = {
     issuer: IssuerObject;
 }
 export type DownloadResultProps = {
-    success: boolean;
+    state: RequestStatus;
     title: string;
     subTitle: string;
 }
@@ -44,3 +45,9 @@ export type HeaderTileProps = {
 export type SearchIssuerProps = {
     fetchRequest: (...arg: any) => ResponseTypeObject
 }
+export type IssuersListProps = {
+    state: RequestStatus;
+}
+export type CredentialListProps = {
+    state: RequestStatus;
+}
diff --git a/inji-web/src/utils/misc.ts b/inji-web/src/utils/misc.ts
@@ -34,11 +34,11 @@ export const getFileName = (contentDispositionHeader: any) => {
 
 export const downloadCredentialPDF = async (response: any, certificateId: string) => {
 
-    const blob: Blob = new Blob([response.data], {type: response.headers['content-type']});
+    // const blob: Blob = new Blob([response], {type: 'application/pdf'});
 
-    let fileName = getFileName(response.headers['content-disposition']) ?? `${certificateId}.pdf`;
+    let fileName = `${certificateId}.pdf`;
     // Create a temporary URL for the Blob
-    const url = window.URL.createObjectURL(blob);
+    const url = window.URL.createObjectURL(response);
 
     // Create a temporary link element
     const link = document.createElement('a');

diff --git a/inji-web/tailwind.config.js b/inji-web/tailwind.config.js
@@ -14,15 +14,19 @@ module.exports = {
                     subTitle: '#717171',
                     searchTitle: '#3E3E3E',
                     primary: '#EB6F2D',
+                    helpAccordionHover: '#e0e0e0',
                     shadow: '#18479329',
                     navigationBar: '#F2FBFF',
                     languageIcon: '#EB6F2D',
                     closeIcon: '#8E8E8E',
                     searchIcon: '#8E8E8E',
+                    tileBackground: '#FFFFFF',
                     shieldSuccessIcon: '#4b9d1f',
                     shieldErrorIcon: '#EF4444',
+                    shieldLoadingIcon: '#ff914b',
                     shieldSuccessShadow: '#f1f7ee',
                     shieldErrorShadow: '#FEF2F2',
+                    shieldLoadingShadow: '#f6dfbe',
                 },
                 dark: {
                     background: '#9DB2BF',
@@ -31,15 +35,19 @@ module.exports = {
                     subTitle: '#717171',
                     searchTitle: '#3E3E3E',
                     primary: '#EB6F2D',
+                    helpAccordionHover: '#e0e0e0',
                     shadow: '#526D82',
                     navigationBar: '#DDE6ED',
                     languageIcon: '#EB6F2D',
                     closeIcon: '#8E8E8E',
                     searchIcon: '#8E8E8E',
+                    tileBackground: '#DDE6ED',
                     shieldSuccessIcon: '#4b9d1f',
                     shieldErrorIcon: '#EF4444',
+                    shieldLoadingIcon: '#EF4444',
                     shieldSuccessShadow: '#f1f7ee',
                     shieldErrorShadow: '#FEF2F2',
+                    shieldLoadingShadow: '#FEF2F2',
                 }
             }
         },