Refactor header

src/UserMenuContainer.jsx

@@ -0,0 +1,62 @@
+import React, { useCallback } from "react";
+import { useHistory, useLocation } from "react-router-dom";
+import { useClient, useProfile } from "./ConferenceCallManagerHooks";
+import { useModalTriggerState } from "./Modal";
+import { ProfileModal } from "./ProfileModal";
+import { UserMenu } from "./UserMenu";
+
+export function UserMenuContainer({ disableLogout }) {
+  const location = useLocation();
+  const history = useHistory();
+  const {
+    isAuthenticated,
+    isGuest,
+    isPasswordlessUser,
+    logout,
+    userName,
+    client,
+  } = useClient();
+  const { displayName, avatarUrl } = useProfile(client);
+  const { modalState, modalProps } = useModalTriggerState();
+
+  const onAction = useCallback(
+    (value) => {
+      switch (value) {
+        case "user":
+          modalState.open();
+          break;
+        case "logout":
+          logout();
+          break;
+        case "login":
+          history.push("/login", { state: { from: location } });
+          break;
+      }
+    },
+    [history, location, logout, modalState]
+  );
+
+  return (
+    <>
+      <UserMenu
+        disableLogout={disableLogout}
+        isAuthenticated={isAuthenticated}
+        isPasswordlessUser={isPasswordlessUser}
+        avatarUrl={avatarUrl}
+        onAction={onAction}
+        displayName={
+          displayName || (userName ? userName.replace("@", "") : undefined)
+        }
+      />
+      {modalState.isOpen && (
+        <ProfileModal
+          client={client}
+          isAuthenticated={isAuthenticated}
+          isGuest={isGuest}
+          isPasswordlessUser={isPasswordlessUser}
+          {...modalProps}
+        />
+      )}
+    </>
+  );
+}