Created
November 30, 2018 23:04
-
-
Save chriskwan/13bab03c7897451231009f843a9c59c9 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import { fetchAccounts } from '../services/AccountService'; | |
| import { fetchTransactions } from '../services/TransactionService'; | |
| import App from './App'; | |
| export const UIContext = React.createContext(); | |
| export const AccountContext = React.createContext(); | |
| export const TransactionContext = React.createContext(); | |
| class AppContainer extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { | |
| isLoading: true, | |
| isLoggedIn: false, | |
| accounts: [], | |
| activeAccountId: null, | |
| transactions: [] | |
| }; | |
| } | |
| async componentDidMount() { | |
| const accounts = await fetchAccounts(); | |
| const transactions = await fetchTransactions(); | |
| let activeAccountId = null; | |
| if (accounts.length) { | |
| activeAccountId = accounts[0].id; | |
| } | |
| this.setState({ | |
| isLoading: false, | |
| accounts, | |
| activeAccountId, | |
| transactions | |
| }); | |
| } | |
| render() { | |
| return ( | |
| // NOTE: setting the value this way may cause unnecessary re-renders (https://reactjs.org/docs/context.html#caveats) | |
| // but fixing that might be a premature optimization | |
| // To get around that, we could also have context live in a separate Provider file | |
| // and pass the whole state as the value (https://alligator.io/react/context-api/) | |
| <UIContext.Provider value={{ | |
| isLoading: this.state.isLoading, | |
| isLoggedIn: this.state.isLoggedIn, | |
| handleLoginClick: (callback) => { | |
| this.setState({ isLoggedIn: true }, callback); | |
| }, | |
| handleLogoutClick: () => { | |
| this.setState({ isLoggedIn: false }); | |
| } | |
| }}> | |
| <AccountContext.Provider value={{ | |
| accounts: this.state.accounts, | |
| activeAccountId: this.state.activeAccountId, | |
| handleToggleAccountActive: (activeAccountId) => { | |
| this.setState({ activeAccountId }); | |
| } | |
| }}> | |
| <TransactionContext.Provider value={{ | |
| transactions: this.state.transactions, | |
| handleTransactionListChange: (newTransactions) => { | |
| this.setState({ transactions: newTransactions }); | |
| } | |
| }}> | |
| <App /> | |
| </TransactionContext.Provider> | |
| </AccountContext.Provider> | |
| </UIContext.Provider> | |
| ); | |
| } | |
| } | |
| export default AppContainer; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import { fetchAccounts } from '../services/AccountService'; | |
| import { fetchTransactions } from '../services/TransactionService'; | |
| import App from './App'; | |
| class AppContainer extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { | |
| isLoggedIn: false, | |
| isLoading: true, | |
| accounts: [], | |
| activeAccountId: null, | |
| transactions: [] | |
| }; | |
| } | |
| async componentDidMount() { | |
| const accounts = await fetchAccounts(); | |
| const transactions = await fetchTransactions(); | |
| let activeAccountId = null; | |
| if (accounts.length) { | |
| activeAccountId = accounts[0].id; | |
| } | |
| this.setState({ | |
| isLoading: false, | |
| accounts, | |
| activeAccountId, | |
| transactions | |
| }); | |
| } | |
| handleLoginClick = (callback) => { | |
| this.setState({ isLoggedIn: true }, callback); | |
| } | |
| handleLogoutClick = () => { | |
| this.setState({ isLoggedIn: false }); | |
| } | |
| handleTransactionListChange = (newTransactions) => { | |
| this.setState({ transactions: newTransactions }); | |
| } | |
| handleToggleAccountActive = (activeAccountId) => { | |
| this.setState({ activeAccountId }); | |
| } | |
| render() { | |
| return <App isLoggedIn={this.state.isLoggedIn} | |
| onLoginClick={this.handleLoginClick} | |
| onLogoutClick={this.handleLogoutClick} | |
| isLoading={this.state.isLoading} | |
| accounts={this.state.accounts} | |
| activeAccountId={this.state.activeAccountId} | |
| transactions={this.state.transactions} | |
| onTransactionListChange={this.handleTransactionListChange} | |
| onToggleAccountActive={this.handleToggleAccountActive} | |
| /> | |
| } | |
| } | |
| export default AppContainer; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment