import React, { useCallback, useEffect } from 'react' import { useHistory } from 'react-router' import { observer, useLocalStore } from 'mobx-react' import { useGoogleLogin, useGoogleLogout } from 'react-google-login' import axios from 'axios' import Swal from 'sweetalert2' import { useStores } from 'stores' import { getUserInfo, logoutApi } from 'utils/apis' import { setServerUrl } from 'utils/server' import { refreshTokenSetup } from 'utils/refreshLoginSetup' import InfoContainer from './InfoContainer' import TimeTableContainer from './TimeTableContainer' import Main from 'components/Main' import MainChat from 'components/Main/MainChat' import MainQna from 'components/Main/MainQna' import MainTimeTable from 'components/Main/MainTimeTable' import MainLuckydraw from 'components/Main/MainLuckydraw' import MainSurveyContainer from './MainSurvey/MainSurveyContainer' import Header from 'components/Header' import chatIcon from 'assets/images/[email protected]' import qnaIcon from 'assets/images/[email protected]' import timeTableIcon from 'assets/images/[email protected]' import surveyIcon from 'assets/images/[email protected]' import luckydrawIcon from 'assets/images/[email protected]' import chatActiveIcon from 'assets/images/[email protected]' import qnaActiveIcon from 'assets/images/[email protected]' import timeTableActiveIcon from 'assets/images/[email protected]' import surveyActiveIcon from 'assets/images/[email protected]' import luckydrawActiveIcon from 'assets/images/[email protected]' const host = window.location.hostname let SERVER_URL = setServerUrl(host) const MainContainer = observer(() => { const { WebinarInfoStore, userStore } = useStores() const history = useHistory() const { getWebinarInfo, link, title, detail } = WebinarInfoStore const { userLogin, userLogout, accessToken } = userStore const store = useLocalStore(() => ({ menuIndex: 0, changeMenu: (index) => { store.menuIndex = index }, sideMenuIndex: 0, changeSideMenu: (index) => { store.sideMenuIndex = index }, })) const { menuIndex, changeMenu, sideMenuIndex, changeSideMenu } = store const handleGetWebinarInfo = useCallback(() => { getWebinarInfo().catch((error) => { return error }) }, [getWebinarInfo]) const InfoMenus = [ { title: '정보', contents: InfoContainer }, { title: '타임테이블', contents: TimeTableContainer }, ] const SideMenuInfo = [ { title: '채팅', img: chatIcon, active: chatActiveIcon, content: <MainChat /> }, { title: 'Q&A', img: qnaIcon, active: qnaActiveIcon, content: <MainQna /> }, { title: '타임테이블', img: timeTableIcon, active: timeTableActiveIcon, content: <MainTimeTable /> }, ] // const onLogoutSuccess = (res) => { // console.log('logout success', res) // Swal.fire({ // title: '로그아웃 완료', // text: '로그아웃 되었습니다.', // icon: 'info', // }) // } // // const onSuccess = (res) => { // getUserInfo() // .then((result) => { // const { userInfo, accessToken='' } = result // console.log('login complete userData: ', userInfo, accessToken) // userLogin(userInfo, accessToken) // }) // .catch((err) => { // console.log('get user info err', err) // }) // refreshTokenSetup(res) // } // // const onFailure = (res) => { // console.log('fail', res) // if (res.error === 'idpiframe_initialization_failed' || res.error === 'popup_closed_by_user') { // Swal.fire({ // title: '브라우저 쿠키 설정', // text: '브라우저 설정에서 쿠키를 허용해주세요.', // icon: 'warning', // }) // } // } // // const { signIn } = useGoogleLogin({ // onSuccess, // onFailure, // autoLoad: true, // clientId: GOOGLE_ID, // isSignedIn: true, // accessType: 'offline', // }) // const { signOut } = useGoogleLogout({ // clientId: GOOGLE_ID, // onLogoutSuccess, // }) const logout = () => { userLogout() const wnd = window.open('https://accounts.google.com/logout', '_blank') setTimeout(() => { wnd.close() }, 300) axios.post(`${SERVER_URL}/auth/logout`, { access_token: accessToken }).then(() => { history.go(0) }) // signOut() } useEffect(() => { handleGetWebinarInfo() getUserInfo({ access_token: accessToken }) .then((result) => { const { userInfo, accessToken = '' } = result userLogin(userInfo, accessToken) }) .catch((err) => { console.log('get user info err', err) }) }, []) return ( <> <Header login={accessToken.length !== 0} logout={logout} /> <Main InfoMenus={InfoMenus} menuIndex={menuIndex} changeMenu={changeMenu} sideMenuIndex={sideMenuIndex} changeSideMenu={changeSideMenu} SideMenuInfo={SideMenuInfo} link={link} title={title} detail={detail} /> </> ) }) export default MainContainer