Search⌘ K
AI Features
Home
Courses
Quick Start Full Stack Web Development

Updating the Client: Functions

Explore how to update client-side functions to handle user authentication, token-based API calls, and game data retrieval. Learn to manage asynchronous requests, implement flash messages for user feedback, and handle retries for expired tokens to maintain secure and smooth gameplay.

We'll cover the following...

ClickStart

Of course, we’ll need to update the function passed to the component as clickStart to accept and handle these new arguments.

The clickStart function sent to the StartForm came from the SignInScreen, which got it from App, the top-level component. It’s useful to review where we left it:

startGame(nameValue, langValue) {
    axios.post(APIURL + 'api/games',
               { username: nameValue, language: langValue })
        .then( response => {
            console.log(response.data);
            if (response.data.message === 'success') {
                const gameId = response.data.game_id;
                this.setState({
                    username:nameValue,
                    language:langValue,
                    gameId:gameId,
                });
                axios.get(APIURL + `api/games/${gameId}`)
                    .then(response2 => {
                        this.setState({
                            badGuesses: response2.data.bad_guesses,
                            guessed: response2.data.guessed,
                            playerId: response2.data.player,
                            revealWord: response2.data.reveal_word,
                            usage: response2.data.usage,
...