load tideLevel from database on /play ✍️

[sheleoni]

Goal

• Get userTideLevel on /play, which will be the first step of a bigger goal: load all user data on /play

Steps

• [x] try to getUserTideLevel on a purely-server component (done in f441fc7)
• [x] refactor /play so that data from getUserTideLevel can be passed to /play
• [x] pass tideLevel to client-side component to render the tide levels on the hexagons correctly
• [x] when tideLevel is updated on the client, send the new data to the DB on submit

[sheleoni]

Problem

Demonstrating a "data fetch" error that returns undefined

Code

See at 82f484e

     console.log(character, 'this is a character')
     console.log(character.level, 'level')
     console.log(character.kana, 'kana')

would not work

character.level is undefined even though while the value of character.kana is successfully retrieved.

Possible Causes

• something wrong with the format of the object

Possible Solution

apply JSON.stringify() to fetched record and then doing JSON.parse() on the stringified object.

1. stringify
2. parse

tada!

[sheleoni]

Problem

Maximum call-stack size exceeded (fixed at 18e2a3f)

Possible Causes

• if you do not JSON.stringify() and JSON.parse() the fetched data, you will run into a “maximum call stack size exceeded” error

Possible Solution

• passing the stringified and parsed object fixes this error

[sheleoni]

We are now able to

• load user's tideLevel on page load of /play
• POST user's tideLevel when they press the save score button at https://github.com/sheleoni/icecream-kana-game/pull/67 However, once saving score is completed, we get a JSON token error when user presses sign out (user is signed-out which is evident after refreshing after error). Further investigation needed.

Reproducing the Error

Solved at

7292b35

• adding early return for logged-out user (so that backend-data fetching, getUserTideLevel() etc, at server-side render does not happen)