Search⌘ K
Home
Courses
Quick Start Full Stack Web Development

Updating the Client: Functions

Explore how to update client-side functions for a web app to manage user login, registration, game creation, and state updates. Understand token authentication handling, error management, and asynchronous API requests to ensure smooth user interactions.

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,
...