injiweb-refactoring with optimization

Signed-off-by: Vijay <[email protected]>
mosip · Apr 28, 2024 · 0ff0899 · 0ff0899
1 parent ae04344
commit 0ff0899
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 29 deletions.
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/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,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
@@ -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,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/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',
                 }
             }
         },