From 8a4250093913ac9bc3cb1c20229203e3187ff7e9 Mon Sep 17 00:00:00 2001 From: Zeeshan Mehboob <82993262+zesu22@users.noreply.github.com> Date: Mon, 2 Dec 2024 17:20:27 +0530 Subject: [PATCH] [MODIFIED] redesign userprofile for mobile screen (#295) Signed-off-by: Zeeshan Mehboob --- .../public/images/menu_icon.png | Bin 0 -> 179 bytes .../public/images/signout_icon.png | Bin 0 -> 437 bytes .../src/components/ProfileUI.js | 224 +++++------ .../src/components/Sidenav.js | 379 +++++++++++------- 4 files changed, 339 insertions(+), 264 deletions(-) create mode 100644 mock-relying-party-ui/public/images/menu_icon.png create mode 100644 mock-relying-party-ui/public/images/signout_icon.png diff --git a/mock-relying-party-ui/public/images/menu_icon.png b/mock-relying-party-ui/public/images/menu_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..dcb737e33c1c433e61d052f8e727a782ffeb5f4b GIT binary patch literal 179 zcmeAS@N?(olHy`uVBq!ia0vp^B0$W?!3HGtkJx+wQk(@Ik;M!Q+`=Ht$S`Y;1W=H% zILO_JVcj{Imp~3nx}&cn1H;CC?mvmFK)#2ki(^OyoXj~rHLEP?Bgy9 zBp?UH`K36vF8*>p-yK4&baEAi;akkpMAm4re7sxlpr=rVv)Mc`ghyURZ6gs)`@*yg z2Gl)oldVfcD!+|~ZPwc(eR94?`PVVemxt~876wWqnixodwT&lTI-Sigl~vbP+3C|J zE7~>%9tr^pK#Gv#$PEc!YkhAZ{Cd+6cB6W9bA^ f#6L&La_FfqnTw)Z%5#F{00000NkvXXu0mjf$d0h+ literal 0 HcmV?d00001 diff --git a/mock-relying-party-ui/src/components/ProfileUI.js b/mock-relying-party-ui/src/components/ProfileUI.js index cbfc3f1e..d0f243d9 100644 --- a/mock-relying-party-ui/src/components/ProfileUI.js +++ b/mock-relying-party-ui/src/components/ProfileUI.js @@ -42,132 +42,130 @@ export default function ProfileUI({ let el = ( <> -
-
-
-
-

{t("current_medication")} ({medicationCount})

+
+
+
+

{t("current_medication")} ({medicationCount})

-
-
-
+
-
-

{t("next_appointment")}

-
-
-
    - {appointmentInfo?.appointment?.map((data, index) => ( -
  • -
    -
    -

    - {i18n.t(formattedDate)} -

    -

    - - {data["time"]} -

    -
    - - {t(data["location"])} -
    -
    -
    - Jese Leos image -
    -

    - {t(data["doctorName"])} -

    -

    - {t(data["department"])} -

    -
    +
    +

    {t("next_appointment")}

    +
    +
    +
      + {appointmentInfo?.appointment?.map((data, index) => ( +
    • +
      +
      +

      + {i18n.t(formattedDate)} +

      +

      + + {data["time"]} +

      +
      + + {t(data["location"])} +
      +
      +
      + Jese Leos image +
      +

      + {t(data["doctorName"])} +

      +

      + {t(data["department"])} +

      -
      • - ))} -
    • -
      • -
    -
    + ))} +
  • + +
    • +
diff --git a/mock-relying-party-ui/src/components/Sidenav.js b/mock-relying-party-ui/src/components/Sidenav.js index 0872085f..ef807f70 100644 --- a/mock-relying-party-ui/src/components/Sidenav.js +++ b/mock-relying-party-ui/src/components/Sidenav.js @@ -27,6 +27,7 @@ export default function Sidenav({ const [messagesInfo, setMessagesInfo] = useState([]); const [address, setAddress] = useState(null); const [emailAddress, setEmailAddress] = useState(null); + const [showMenu, setShowMenu] = useState(false); const navigate = useNavigate(); const navigateToLogin = (errorCode, errorDescription) => { @@ -60,12 +61,12 @@ export default function Sidenav({ }, [langOptions]); //Gets fired when changeLanguage got called. - i18n.on('languageChanged', function (lng) { + i18n.on('languageChanged', function (lng) { let lang = langOptions.find((option) => { return option.value === lng; }); setSelectedLang(lang); - }) + }) useEffect(() => { const getSearchParams = async () => { @@ -80,7 +81,17 @@ export default function Sidenav({ getMessages(); getUserDetails(authCode); }; + // hiding or showing the side nav + // according to windows height + const handleResize = () => { + const { innerWidth: width } = window; + setShowMenu(width > 767); + }; + // adding event listener for window resize + window.addEventListener("resize", handleResize); getSearchParams(); + // removing event listener for window resize + return () => window.removeEventListener("resize", handleResize); }, []); const getUserDetails = async (authCode) => { @@ -130,7 +141,7 @@ export default function Sidenav({ var messagesInfo = get_messages(); setMessagesInfo(messagesInfo); }; - const messagesCount = messagesInfo.messages?.length + const messagesCount = messagesInfo.messages?.length const getAddress = (userAddress) => { let address = ""; @@ -183,21 +194,165 @@ export default function Sidenav({ return address.substring(0, address.length - 2); }; + // new message component + const newMessageComponent = () => { + return <> +

+ {t("new_messages")} ({messagesCount}) +

+ {messagesInfo?.messages?.map((message, index) => { + const pastDate = new Date( + currentDate.getTime() - message["days"] * 24 * 60 * 60 * 1000 + ); + const formattedDate = new Intl.DateTimeFormat(i18n.language, { dateStyle: 'full' }).format(pastDate); + return ( +
+
+ Jese Leos image + +
+

+ {t(message["doctorName"])} +

+

+ {i18n.t(formattedDate)} +

+ +

+ {t("hi")} {userInfo?.name} , {t(message["message"])} +

+
+ +
+
+ ); + })} + ; + }; + + // vaccination history component + const vaccinationHistoryComponent = () => { + return <> +
+
+

{t("vaccinations")}

+
+ +
+
+ + + + + + + + + + + {claimInfo?.claimproviders?.map((item, idx) => { + const pastDate = new Date( + currentDate.getTime() - + item["days"] * 24 * 60 * 60 * 1000 + ); + return ( + + + + + + + ); + })} + +
+

{t("vaccination_details")}

+ 		+ {t("date")} + + {t("vaccination_center")} + + {t("total_cost")} +
+

{t(item["vaccinationName"])}

+ 		+

{pastDate.toLocaleDateString()}

+ 		+

{t(item["vaccinationCenter"])}

+ 		+

{item["totalCost"]}

+
+
+ + }; + let el = ( <> -
- {t("language")} - +
{status === states.LOADING && (
@@ -461,8 +654,8 @@ export default function Sidenav({ {status === states.LOADED && ( <> -
-
+
+
{t("welcome")}, {userInfo?.name} @@ -472,7 +665,7 @@ export default function Sidenav({

-
+
-

+

{userInfo?.name}

@@ -513,7 +706,7 @@ export default function Sidenav({ {isOpen && (
- + {t("email")}:  {emailAddress?.split("@")[0]} @@ -553,132 +746,16 @@ export default function Sidenav({
-
- {component} -
-
-
-

{t("vaccinations")}

-
- +
+ {component}
-
- - - - - - - - - - - - {claimInfo?.claimproviders?.map((item, idx) => { - const pastDate = new Date( - currentDate.getTime() - - item["days"] * 24 * 60 * 60 * 1000 - ); - return ( - - - - - - - ); - })} - -
-

{t("vaccination_details")}

- 		- {t("date")} - - {t("vaccination_center")} - - {t("total_cost")} -
-

{t(item["vaccinationName"])}

- 		-

{pastDate.toLocaleDateString()}

- 		-

{t(item["vaccinationCenter"])}

- 		-

{item["totalCost"]}

-
+
+ {newMessageComponent()}
+ {vaccinationHistoryComponent()}
-
-

- {t("new_messages")} ({messagesCount}) -

- {messagesInfo?.messages?.map((message, index) => { - const pastDate = new Date( - currentDate.getTime() - message["days"] * 24 * 60 * 60 * 1000 - ); - const formattedDate = new Intl.DateTimeFormat(i18n.language, { dateStyle: 'full' }).format(pastDate); - return ( -
-
- Jese Leos image - -
-

- {t(message["doctorName"])} -

-

- {i18n.t(formattedDate)} -

- -

- {t("hi")} {userInfo?.name} , {t(message["message"])} -

-
- -
-
- ); - })} +
+ {newMessageComponent()}