React create a queue of data for offline use

Question

I have the follwoing component:

import React, { Component } from 'react';

import axios from 'axios';

class Form extends Component {
    constructor(props) {
        super(props);

        this.state = {
            firstName: '',
            email: '',
            university: '',
            degree: ''  
        }

        this.setFirstName = this.setFirstName.bind(this);
        this.setEmail = this.setEmail.bind(this);
        this.setUniversity = this.setUniversity.bind(this);
        this.setDegree = this.setDegree.bind(this); 
    }

    setFirstName(name) {
        this.setState({
            firstName: name
        });
    }

    setEmail(email) {
        this.setState({
            email: email 
        });
    }

    setUniversity(university) {
        this.setState({
            university: university
        });
    }

    setDegree(degree) {
        this.setState({
            degree: degree
        });
    }

    getSingleInputValue(e) {

        if(e.target.getAttribute('name') == 'name'){
            this.setFirstName(e.target.value);
        }

        if(e.target.getAttribute('name') == 'email'){
            this.setEmail(e.target.value);
        }

        if(e.target.getAttribute('name') == 'university'){
            this.setUniversity(e.target.value);
        }

        if(e.target.getAttribute('name') == 'degree'){
            this.setDegree(e.target.value);
        }

    }

    submitForm(e) {
        var token = document.getElementsByTagName("meta")[0].getAttribute("content");

        e.preventDefault();

        axios({
            url: '/save-data',
            method: 'POST',
            contentType: 'application/json',
            data: {
                "candidates": [
                    {
                        "name": this.state.firstName, 
                        "email": this.state.email,
                        "university": this.state.university,
                        "degree": this.state.degree
                    }
                ]
            },

            headers: { 
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': token
            }

        }).then(function(response) {
            console.log(response);

            // go to next screen
        })
    }

    render() {
        let isVisible = this.props.visibility ? "" : "hide-form";

        return(
            <form className={"form " + isVisible}>
                <input 
                    placeholder="John Green" 
                    type="text" 
                    name="name"
                    onChange={this.getSingleInputValue.bind(this)} />

                <input 
                    placeholder="Email" 
                    type="text" 
                    name="email"
                    onChange={this.getSingleInputValue.bind(this)} />

                <input 
                    placeholder="University"
                    type="text" 
                    name="university"
                    onChange={this.getSingleInputValue.bind(this)} />

                <input 
                    placeholder="Degree"
                    type="text" 
                    name="degree"
                    onChange={this.getSingleInputValue.bind(this)} />

                <button onClick={this.submitForm.bind(this)}>enter</button>
            </form>
        );
    }
}

export default Form;

is there a way of saving data in a queue captured from the form to be later (once connection is back in) sent with AXIOS?

Answer 1

Sounds like a use case for localStorage. Your submit handler, instead of posting the data to the server, can instead save it into the local browser storage, which has an API for saving and fetching data in a key/value pattern (see the link above).

You can JSON serialize pretty much any normal Javascript data and save it in localStorage, and then when you decide it's time, aggregate the data and send it over the wire.

Something like -

// ...
submitForm(e) {
  e.preventDefault();

  window.localStorage.setItem("foo", JSON.stringify({
    name: this.state.firstName, 
    email: this.state.email,
    university: this.state.university,
    degree: this.state.degree
  });
}

Of course there will be more details to iron out than that, but that would be the general gist.