import React, { Component } from 'react'
import { connect } from 'react-redux'
import AuthPage from 'pages/AuthPage'
import FeedPage from 'pages/FeedPage'
import Nav from 'components/Nav'
import Footer from 'components/Footer'
import Modal from 'components/Modal'
import Toast from 'components/Toast'
import * as authActions from 'redux/actions/auth'
class App extends Component {
* 1. Initialize `isLoggedIn` state
* cf) sessionStorage is internet browser's feature
* which stores data until the browser tab is closed.
const walletFromSession = sessionStorage.getItem('walletInstance')
const { integrateWallet, removeWallet } = this.props
* If 'walletInstance' value exists,
* intergrateWallet method adds the instance to caver's wallet and redux store
* cf) redux/actions/auth.js -> integrateWallet()
integrateWallet(JSON.parse(walletFromSession).privateKey)
* If value in sessionStorage is invalid wallet instance,
* removeWallet method removes the instance from caver's wallet and redux store
* cf) redux/actions/auth.js -> removeWallet()
* Redux will initialize isLoggedIn state to true or false,
* depending on whether walletInstance exists in the session storage
const { isLoggedIn } = this.props
{isLoggedIn ? <FeedPage /> : <AuthPage />}
const mapStateToProps = (state) => ({
isLoggedIn: state.auth.isLoggedIn,
const mapDispatchToProps = (dispatch) => ({
integrateWallet: (privateKey) => dispatch(authActions.integrateWallet(privateKey)),
removeWallet: () => dispatch(authActions.removeWallet()),
export default connect(mapStateToProps, mapDispatchToProps)(App)