import React from 'react' ; import { LoginButton } from './LoginButton' ; import { AccountControlDropdown } from './AccountControlDropdown' ; import { AccountActions } from "../../accounts/AccountActions" ; import { useUserInfoContext } from "../../apps/repository/auth_handler/UserInfoProvider" ; export const AccountAuthButton = React . memo ( function AccountAuthButton ( ) { const userInfoContext = useUserInfoContext ( ) ; if ( ! userInfoContext ) { return null ; } function enableCloudSync ( ) { AccountActions . login ( ) ; } if ( ! userInfoContext . userInfo ) { return < LoginButton onClick = { ( ) => enableCloudSync ( ) } />; } return < AccountControlDropdown userInfo = { userInfoContext ?. userInfo } />; } ) ;