From 0ff0899835ff4fc81d80792bf7b5f30176bec0e2 Mon Sep 17 00:00:00 2001
From: Vijay <94220135+vijay151096@users.noreply.github.com>
Date: Sun, 28 Apr 2024 15:15:17 +0530
Subject: [PATCH] injiweb-refactoring with optimization

Signed-off-by: Vijay <94220135+vijay151096@users.noreply.github.com>
---
 inji-web/src/components/Common/ItemBox.tsx          |  2 +-
 inji-web/src/components/Common/SpinningLoader.tsx   |  9 +++++----
 .../src/components/Credentials/CredentialList.tsx   |  4 +---
 inji-web/src/components/Issuers/IssuersList.tsx     |  4 +---
 inji-web/src/components/PageTemplate/Header.tsx     |  3 ++-
 .../src/components/Redirection/DownloadResult.tsx   | 13 +++++++++----
 inji-web/src/hooks/useFetch.tsx                     | 11 +++--------
 inji-web/src/pages/RedirectionPage.tsx              |  8 ++++----
 inji-web/src/types/components.d.ts                  |  9 ++++++++-
 inji-web/tailwind.config.js                         |  6 ++++++
 10 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/inji-web/src/components/Common/ItemBox.tsx b/inji-web/src/components/Common/ItemBox.tsx
index 27d80b4..9032ee8 100644
--- 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
index 62e1581..8d53625 100644
--- 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
index 3471799..01d530f 100644
--- 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/Issuers/IssuersList.tsx b/inji-web/src/components/Issuers/IssuersList.tsx
index df7316f..17798a4 100644
--- 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
index c646f8d..9a08938 100644
--- 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
index 2b0af00..6158fad 100644
--- a/inji-web/src/components/Redirection/DownloadResult.tsx
+++ b/inji-web/src/components/Redirection/DownloadResult.tsx
@@ -1,7 +1,8 @@
 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) => {
@@ -9,14 +10,18 @@ export const DownloadResult: React.FC<DownloadResultProps> = (props) => {
     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
index 1a350d2..57757ef 100644
--- 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,7 +14,6 @@ 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,
@@ -26,15 +24,12 @@ export const useFetch = () => {
                 setState(RequestStatus.DONE);
                 return await response.blob();
             }
-
-            if (response.ok) {
-                responseJson = await response.json();
-                setState(RequestStatus.DONE);
-            }
             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/pages/RedirectionPage.tsx b/inji-web/src/pages/RedirectionPage.tsx
index 9e84d6e..db161d3 100644
--- a/inji-web/src/pages/RedirectionPage.tsx
+++ b/inji-web/src/pages/RedirectionPage.tsx
@@ -73,7 +73,7 @@ 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>
     }
 
@@ -82,7 +82,7 @@ export const RedirectionPage: React.FC = () => {
             <NavBar title={activeSessionInfo?.issuerId} search={false}/>
             <DownloadResult title={t("loading.title")}
                             subTitle={t("loading.subTitle")}
-                            success={false}/>
+                            state={RequestStatus.LOADING}/>
         </div>
     }
 
@@ -91,7 +91,7 @@ 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>
     }
 
@@ -99,6 +99,6 @@ export const RedirectionPage: React.FC = () => {
         <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
index 31b2b53..5544273 100644
--- 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/tailwind.config.js b/inji-web/tailwind.config.js
index a6bd8f8..73d415a 100644
--- a/inji-web/tailwind.config.js
+++ b/inji-web/tailwind.config.js
@@ -20,10 +20,13 @@ module.exports = {
                     languageIcon: '#EB6F2D',
                     closeIcon: '#8E8E8E',
                     searchIcon: '#8E8E8E',
+                    tileBackground: '#FFFFFF',
                     shieldSuccessIcon: '#4b9d1f',
                     shieldErrorIcon: '#EF4444',
+                    shieldLoadingIcon: '#ff914b',
                     shieldSuccessShadow: '#f1f7ee',
                     shieldErrorShadow: '#FEF2F2',
+                    shieldLoadingShadow: '#f6dfbe',
                 },
                 dark: {
                     background: '#9DB2BF',
@@ -38,10 +41,13 @@ module.exports = {
                     languageIcon: '#EB6F2D',
                     closeIcon: '#8E8E8E',
                     searchIcon: '#8E8E8E',
+                    tileBackground: '#DDE6ED',
                     shieldSuccessIcon: '#4b9d1f',
                     shieldErrorIcon: '#EF4444',
+                    shieldLoadingIcon: '#EF4444',
                     shieldSuccessShadow: '#f1f7ee',
                     shieldErrorShadow: '#FEF2F2',
+                    shieldLoadingShadow: '#FEF2F2',
                 }
             }
         },