Handling a form with sensitive data that won't be submitted until at least an hour

user_16825231 0
Viewed 32

I am building a project using next js for my basketball league. The goal is to keep track of games, players, stats, etc. I am having trouble implementing the submission of a game. I have a table of all the player in the particular game and I want the user to be able to edit the stats of the game to keep track of points, assists, rebounds, etc. The issue lies in the fact that the user will be editing these fields constantly and I am worried that if the user refreshes the page or loses connection then the page will refresh and the current game stats that the user was keeping track of will be lost. I am storing the seasonal stats in a database and was planning to have an onSubmit for the game so when the game is over, the game stats are sent to the season stats database and updated accordingly. I am just not sure how to handle the form so that the game stats the user is updating won't be lost.

One thought I had was to set an interval every n seconds inside a useEffect to send the gameStats to the database.

Any other ideas?

Thank you in advance!

It would go something like this...


const GameForm = ({players}) => {
    // players is a list of objects from a database coming from getServerSideProps, where each document stores player id, player name, //points, assists... the points, rebounds, assists, etc. are from the entire season so what I am doing is //setting them all to zero and when I post them to the database again I will simply increment the seasonal //stats with the game stats.
    const gamePlayers = players.map(player => {...player, points:0,assists:0, rebounds: 0, blocks: 0,     steals:0, turnovers:0})

    const [playerStats, setPlayerStats] = useState(gamePlayers)

    useEffect(() => {
         setInterval(async () => {
              // increments the player season stats by the stats the player had in the game
              const res = await fetch('/players', {method: 'PATCH', body: JSON.stringify(playerStats)})
         }, 60000)
    })

}
next.js reactjs mongodb
1 Answers

I actually run a very similar site for rec sports leagues. I'm using React but the principal would be the same.

The way I handle this is by using local storage in the user's browser. On every update made by the user I save the input both in state and in local storage. You'll need a useEffect function when the page initially loads to check local storage for stats and push them into state, this way even if a user navigates away from the game page, loses connection, or refreshes the page they can retrieve their previous input.

You did say this is sensitive data, if you are concerned with storing player names in local storage you could just use their _id field instead.

My thinking behind this was that the user now only needs internet connection at the beginning of the game (to load player, team, match info from the DB) and at the end (to actually submit the completed game info to the DB).

user_133246840
Related