import React from "react" ; import { loadSdk , DEFAULT_STYLE } from "./utils" ; import { ExtendedWindow , Props , State } from "./types" ; declare let window ; export default class KakaoLogin extends React . PureComponent < Props , State > { state = { isLoggedIn : false } ; public static DEFAULT_STYLE = DEFAULT_STYLE ; public async componentDidMount ( ) { await loadSdk ( ) ; window . Kakao . init ( this . props . token ) ; } private onButtonClick = ( ) => { const { throughTalk = true , persistAccessToken = true , needProfile = true , useLoginForm = false , onSuccess , onFail , } = this . props ; const method = useLoginForm ? "loginForm" : "login" ; ( window . Kakao ?. Auth ) [ method ] ( { throughTalk , persistAccessToken , success : ( response ) => { this . setState ( { isLoggedIn : true } ) ; if ( needProfile ) { window . Kakao ?. API . request ( { url : "/v2/user/me" , success : ( profile ) => { const result = { response , profile } ; onSuccess ( result ) ; } , fail : onFail , } ) ; } else { onSuccess ( { response } ) ; } } , fail : onFail , } ) ; } ; private onLogout = ( ) => { window . Kakao ?. Auth . logout ( ( ) => { this . props . onLogout ?. ( window . Kakao ?. Auth . getAccessToken ( ) ) ; this . setState ( { isLoggedIn : false } ) ; } ) ; } ; public render ( ) { const { isLoggedIn } = this . state ; const onClick = isLoggedIn ? this . onLogout : this . onButtonClick ; const { render , className = "" , style = DEFAULT_STYLE , children = "카카오로 로그인하기" , } = this . props ; if ( typeof render === "function" ) { return render ( { onClick } ) ; } return ( < button type = "button" className = { className } onClick = { onClick } style = { style } > { children } < /button>); } }