From ef360e6919784c8993c9da32ef10fc2f1e94460f Mon Sep 17 00:00:00 2001
From: dcordz <17937472+dcordz@users.noreply.github.com>
Date: Sun, 3 Nov 2024 18:35:00 -0500
Subject: [PATCH] Deploy (#41)

* main - remove uneeded code

* deploy - eslint --fix, fix docker build issue, add some logging

* deploy - only show hover logged in as when user is present
---
 app/frontend/components/drawer/AppDrawer.tsx  | 12 ++++-----
 app/frontend/components/drawer/SwayDrawer.tsx | 26 ++++++++++++-------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/app/frontend/components/drawer/AppDrawer.tsx b/app/frontend/components/drawer/AppDrawer.tsx
index 3e8630bd..7966ff1c 100644
--- a/app/frontend/components/drawer/AppDrawer.tsx
+++ b/app/frontend/components/drawer/AppDrawer.tsx
@@ -55,6 +55,9 @@ interface IProps {
     children: React.ReactNode;
 }
 
+const SearchIcon = () => <FiSearch className="pulse-text" style={{ color: SWAY_COLORS.tertiaryLight }} />;
+const Noop = () => <Fragment />;
+
 const AppDrawer: React.FC<IProps> = (props) => {
     const user = useUser();
 
@@ -64,12 +67,12 @@ const AppDrawer: React.FC<IProps> = (props) => {
         return [
             {
                 route: ROUTES.registration,
-                Icon: () => <FiSearch className="pulse-text" style={{ color: SWAY_COLORS.tertiaryLight }} />,
+                Icon: SearchIcon,
                 text: <span className="pulse-text">Find Representatives</span>,
             },
             {
                 route: "divider",
-                Icon: () => <Fragment />,
+                Icon: Noop,
                 text: "",
             },
             ...MenuChoices,
@@ -82,10 +85,7 @@ const AppDrawer: React.FC<IProps> = (props) => {
     );
 
     return (
-        <SwayDrawer
-            menuChoices={withFindRepresentativesPrepended}
-            bottomMenuChoices={bottomMenuChoices}
-        >
+        <SwayDrawer menuChoices={withFindRepresentativesPrepended} bottomMenuChoices={bottomMenuChoices}>
             {props.children}
         </SwayDrawer>
     );
diff --git a/app/frontend/components/drawer/SwayDrawer.tsx b/app/frontend/components/drawer/SwayDrawer.tsx
index a03bf763..107f2c83 100644
--- a/app/frontend/components/drawer/SwayDrawer.tsx
+++ b/app/frontend/components/drawer/SwayDrawer.tsx
@@ -10,6 +10,8 @@ import { useLogout } from "../../hooks/users/useLogout";
 import { router } from "@inertiajs/react";
 import { SWAY_COLORS } from "../../sway_utils";
 import SocialIconsList from "../user/SocialIconsList";
+import { useUser } from "app/frontend/hooks/users/useUser";
+import { formatPhone } from "app/frontend/sway_utils/phone";
 
 type MenuItem = {
     route: string;
@@ -26,7 +28,8 @@ interface IProps extends PropsWithChildren {
 const SwayDrawer: React.FC<IProps> = (props) => {
     const logout = useLogout();
 
-    const { user, menuChoices, bottomMenuChoices } = props;
+    const { menuChoices, bottomMenuChoices } = props;
+    const user = useUser();
 
     const handleNavigate = useCallback((route: string, state?: Record<string, any>) => {
         logDev("Navigating to route -", route);
@@ -110,15 +113,18 @@ const SwayDrawer: React.FC<IProps> = (props) => {
                             key="overlay"
                             placement={"bottom"}
                             overlay={
-                                <Popover id="sway-drawer-popover">
-                                    <Popover.Header as="h3">Logged in as:</Popover.Header>
-                                    <Popover.Body>
-                                        <div className="col">
-                                            <div className="px-0">{user?.phone}</div>
-                                            {/* <div className="px-0">{user?.email}</div> */}
-                                        </div>
-                                    </Popover.Body>
-                                </Popover>
+                                user?.phone ? (
+                                    <Popover id="sway-drawer-popover">
+                                        <Popover.Header as="h3">Logged in as:</Popover.Header>
+                                        <Popover.Body>
+                                            <div className="col">
+                                                <div className="px-0">{formatPhone(user.phone)}</div>
+                                            </div>
+                                        </Popover.Body>
+                                    </Popover>
+                                ) : (
+                                    <></>
+                                )
                             }
                         >
                             <span style={{ zIndex: 1000 }}>