diff --git a/apps/web/src/components/Settings/Settings.tsx b/apps/web/src/components/Settings/Settings.tsx index 240e06d70a..bde547bffb 100644 --- a/apps/web/src/components/Settings/Settings.tsx +++ b/apps/web/src/components/Settings/Settings.tsx @@ -5,7 +5,6 @@ import styled from 'styled-components'; import breakpoints from '~/components/core/breakpoints'; import { Button } from '~/components/core/Button/Button'; import { HStack, VStack } from '~/components/core/Spacer/Stack'; -import DrawerHeader from '~/contexts/globalLayout/GlobalSidebar/DrawerHeader'; import { SettingsFragment$key } from '~/generated/SettingsFragment.graphql'; import { useLogout } from '~/hooks/useLogout'; import colors from '~/shared/theme/colors'; @@ -19,9 +18,11 @@ import MobileAuthManagerSection from './MobileAuthManagerSection/MobileAuthManag type Props = { queryRef: SettingsFragment$key; + onLogout?: () => void; + header?: React.ReactNode; }; -function Settings({ queryRef }: Props) { +function Settings({ queryRef, onLogout, header }: Props) { const query = useFragment( graphql` fragment SettingsFragment on Query { @@ -36,7 +37,7 @@ function Settings({ queryRef }: Props) { useClearURLQueryParams('settings'); - const logout = useLogout(); + const logout = useLogout({ onLogout }); const handleSignOutClick = useCallback(() => { logout(); @@ -44,7 +45,7 @@ function Settings({ queryRef }: Props) { return ( <> - + {header} diff --git a/apps/web/src/contexts/globalLayout/GlobalNavbar/GalleryNavbar/GalleryRightContent.tsx b/apps/web/src/contexts/globalLayout/GlobalNavbar/GalleryNavbar/GalleryRightContent.tsx index 5124d8786d..d23bcbcff6 100644 --- a/apps/web/src/contexts/globalLayout/GlobalNavbar/GalleryNavbar/GalleryRightContent.tsx +++ b/apps/web/src/contexts/globalLayout/GlobalNavbar/GalleryNavbar/GalleryRightContent.tsx @@ -10,9 +10,11 @@ import { Dropdown } from '~/components/core/Dropdown/Dropdown'; import { DropdownItem } from '~/components/core/Dropdown/DropdownItem'; import { DropdownLink } from '~/components/core/Dropdown/DropdownLink'; import { DropdownSection } from '~/components/core/Dropdown/DropdownSection'; +import IconContainer from '~/components/core/IconContainer'; import { HStack, VStack } from '~/components/core/Spacer/Stack'; import FollowButton from '~/components/Follow/FollowButton'; import useCreateGallery from '~/components/MultiGallery/useCreateGallery'; +import Settings from '~/components/Settings/Settings'; import { EditLink } from '~/contexts/globalLayout/GlobalNavbar/CollectionNavbar/EditLink'; import { SignInButton } from '~/contexts/globalLayout/GlobalNavbar/SignInButton'; import { useModalActions } from '~/contexts/modal/ModalContext'; @@ -20,8 +22,10 @@ import { useToastActions } from '~/contexts/toast/ToastContext'; import { GalleryRightContentFragment$key } from '~/generated/GalleryRightContentFragment.graphql'; import { GalleryRightContentGalleryFragment$key } from '~/generated/GalleryRightContentGalleryFragment.graphql'; import { useIsMobileOrMobileLargeWindowWidth } from '~/hooks/useWindowSize'; +import CogIcon from '~/icons/CogIcon'; import EditUserInfoModal from '~/scenes/UserGalleryPage/EditUserInfoModal'; import LinkButton from '~/scenes/UserGalleryPage/LinkButton'; +import { useTrack } from '~/shared/contexts/AnalyticsContext'; import { SignUpButton } from '../SignUpButton'; import QRCodeButton from './QRCodeButton'; @@ -57,6 +61,8 @@ export function GalleryRightContent({ queryRef, galleryRef, username }: GalleryR ...FollowButtonUserFragment } } + + ...SettingsFragment } `, queryRef @@ -98,7 +104,7 @@ export function GalleryRightContent({ queryRef, galleryRef, username }: GalleryR }); }, [query, showModal]); - const shouldShowEditButton = useMemo(() => { + const isViewingSignedInUser = useMemo(() => { return Boolean( query.viewer && 'user' in query.viewer && @@ -120,6 +126,8 @@ export function GalleryRightContent({ queryRef, galleryRef, username }: GalleryR const isMobile = useIsMobileOrMobileLargeWindowWidth(); const [showDropdown, setShowDropdown] = useState(false); + const track = useTrack(); + const handleEditClick = useCallback(() => { setShowDropdown((previous) => !previous); }, []); @@ -128,6 +136,15 @@ export function GalleryRightContent({ queryRef, galleryRef, username }: GalleryR setShowDropdown(false); }, []); + const handleSettingsClick = useCallback(() => { + track('Sidebar Settings Click'); + showModal({ + content: , + headerText: 'Settings', + isFullPage: true, + }); + }, [query, showModal, track]); + const editGalleryUrl: Route | null = useMemo(() => { if (!gallery?.dbid) { return null; @@ -155,7 +172,7 @@ export function GalleryRightContent({ queryRef, galleryRef, username }: GalleryR - {shouldShowEditButton && ( + {isViewingSignedInUser && ( @@ -167,6 +184,9 @@ export function GalleryRightContent({ queryRef, galleryRef, username }: GalleryR )} + {isViewingSignedInUser && ( + } /> + )} ); } diff --git a/apps/web/src/contexts/globalLayout/GlobalSidebar/StandardSidebar.tsx b/apps/web/src/contexts/globalLayout/GlobalSidebar/StandardSidebar.tsx index 566011e804..ddeb562ab0 100644 --- a/apps/web/src/contexts/globalLayout/GlobalSidebar/StandardSidebar.tsx +++ b/apps/web/src/contexts/globalLayout/GlobalSidebar/StandardSidebar.tsx @@ -29,6 +29,7 @@ import UserIcon from '~/icons/UserIcon'; import { useTrack } from '~/shared/contexts/AnalyticsContext'; import useExperience from '~/utils/graphql/experiences/useExperience'; +import DrawerHeader from './DrawerHeader'; import { useDrawerActions, useDrawerState } from './SidebarDrawerContext'; import SidebarIcon from './SidebarIcon'; import SidebarPfp from './SidebarPfp'; @@ -103,9 +104,15 @@ export function StandardSidebar({ queryRef }: Props) { const handleSettingsClick = useCallback(() => { track('Sidebar Settings Click'); showDrawer({ - content: , + content: ( + } + onLogout={hideDrawer} + /> + ), }); - }, [query, showDrawer, track]); + }, [hideDrawer, query, showDrawer, track]); const handleNotificationsClick = useCallback(() => { track('Sidebar Notifications Click'); diff --git a/apps/web/src/hooks/useLogout.ts b/apps/web/src/hooks/useLogout.ts index 5958327412..f890f963b7 100644 --- a/apps/web/src/hooks/useLogout.ts +++ b/apps/web/src/hooks/useLogout.ts @@ -1,12 +1,15 @@ import { startTransition, useCallback, useContext } from 'react'; import { graphql } from 'react-relay'; -import { useDrawerActions } from '~/contexts/globalLayout/GlobalSidebar/SidebarDrawerContext'; import { RelayResetContext } from '~/contexts/RelayResetContext'; import { useLogoutMutation } from '~/generated/useLogoutMutation.graphql'; import { usePromisifiedMutation } from '~/shared/relay/usePromisifiedMutation'; -export const useLogout = () => { +type Props = { + onLogout?: () => void; +}; + +export const useLogout = ({ onLogout }: Props) => { const [logout] = usePromisifiedMutation( graphql` mutation useLogoutMutation { @@ -19,8 +22,6 @@ export const useLogout = () => { const reset = useContext(RelayResetContext); - const { hideDrawer } = useDrawerActions(); - return useCallback(async () => { await logout({ variables: {}, @@ -29,8 +30,11 @@ export const useLogout = () => { // Wipe the relay cache and show the old content while // the new content is loading in the background. startTransition(() => { - hideDrawer(); + if (onLogout) { + onLogout(); + } + reset?.(); }); - }, [hideDrawer, logout, reset]); + }, [logout, onLogout, reset]); }; diff --git a/apps/web/src/scenes/Nuke/Nuke.tsx b/apps/web/src/scenes/Nuke/Nuke.tsx index 8e78f0c686..96a3fd14a2 100644 --- a/apps/web/src/scenes/Nuke/Nuke.tsx +++ b/apps/web/src/scenes/Nuke/Nuke.tsx @@ -8,7 +8,7 @@ import { useLogout } from '~/hooks/useLogout'; // Suggest a user visit this page if they're in a seriously broken state function Nuke() { - const logout = useLogout(); + const logout = useLogout({}); useEffect(() => { logout();