diff --git a/Example/App.js b/Example/App.js index 00d3edd8..a8e806c8 100644 --- a/Example/App.js +++ b/Example/App.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React, { useState, useCallback } from 'react'; import { UIManager, LayoutAnimation, Alert } from 'react-native'; import { authorize, refresh, revoke } from 'react-native-app-auth'; import { Page, Button, ButtonContainer, Form, FormLabel, FormValue, Heading } from './components'; @@ -27,66 +27,54 @@ const config = { // } }; -export default class App extends Component<{}, State> { - state = { - hasLoggedInOnce: false, - accessToken: '', - accessTokenExpirationDate: '', - refreshToken: '' - }; - - animateState(nextState: $Shape, delay: number = 0) { - setTimeout(() => { - this.setState(() => { - LayoutAnimation.easeInEaseOut(); - return nextState; - }); - }, delay); - } +const defaultAuthState = { + hasLoggedInOnce: false, + accessToken: '', + accessTokenExpirationDate: '', + refreshToken: '' +}; + +export default () => { + const [authState, setAuthState] = useState(defaultAuthState); - authorize = async () => { + const handleAuthorize = useCallback(async () => { try { - const authState = await authorize(config); - - this.animateState( - { - hasLoggedInOnce: true, - accessToken: authState.accessToken, - accessTokenExpirationDate: authState.accessTokenExpirationDate, - refreshToken: authState.refreshToken, - scopes: authState.scopes - }, - 500 - ); + const newAuthState = await authorize(config); + + setAuthState({ + hasLoggedInOnce: true, + ...newAuthState + }); + } catch (error) { Alert.alert('Failed to log in', error.message); } - }; + }, [authState]); - refresh = async () => { + const handleRefresh = useCallback(async () => { try { - const authState = await refresh(config, { - refreshToken: this.state.refreshToken + const newAuthState = await refresh(config, { + refreshToken: authState.refreshToken }); - this.animateState({ - accessToken: authState.accessToken || this.state.accessToken, - accessTokenExpirationDate: - authState.accessTokenExpirationDate || this.state.accessTokenExpirationDate, - refreshToken: authState.refreshToken || this.state.refreshToken - }); + setAuthState(current => ({ + ...current, + ...newAuthState + })) + } catch (error) { Alert.alert('Failed to refresh token', error.message); } - }; + }, [authState]); - revoke = async () => { + const handleRevoke = useCallback(async () => { try { await revoke(config, { - tokenToRevoke: this.state.accessToken, + tokenToRevoke: authState.accessToken, sendClientId: true }); - this.animateState({ + + setAuthState({ accessToken: '', accessTokenExpirationDate: '', refreshToken: '' @@ -94,39 +82,36 @@ export default class App extends Component<{}, State> { } catch (error) { Alert.alert('Failed to revoke token', error.message); } - }; - - render() { - const { state } = this; - return ( - - {!!state.accessToken ? ( -
- accessToken - {state.accessToken} - accessTokenExpirationDate - {state.accessTokenExpirationDate} - refreshToken - {state.refreshToken} - scopes - {state.scopes.join(', ')} -
- ) : ( - {state.hasLoggedInOnce ? 'Goodbye.' : 'Hello, stranger.'} - )} - - - {!state.accessToken ? ( -