Skip at start of the tutorial prevents 2nd half from playing

[Gavinok]

This PR resolves issue #61 when skip is selected all automatic tutorial playback is stopped unless the info icon is selected.

[Gavinok]

I have now moved the demo system over to use localStorage. However, I could not come up with a clean way to make use of useMemo since I needed to also manually allow users to skip the demo.

I had a working solution using a foundCookies (which used useMemo to get the state of the cookies) variable as well as a skipDemo variable but it over complicated the code since

• We now need to check both foundCookies and skipDemo when displaying the initial demo
• foundCookies and skipDemo need to be tracked as dependencies for callbacks on overlay changes
• If I had skipDemo as a dependency for foundCookies updates would happen whenever a user skipped the rest of the demo.

I opted to simply check for cookies on initialization as the initial state for skipDemo and have a dedicated function to update that skipDemo to true and update the localStorage. This way we

• Avoid redundant checks and localStorage updates
• Reduce the locations that the application state is held

[amanji]

I'm a bit confused here about the need to track all the different edge cases (and it might just be best to hop on a call).

Why don't we just have a single state that tracks the current progress of the tutorial?

I was thinking something along the lines of (and again point out if I'm overlooking anything):

• When a user enters the app for the first time, the tutorial flow starts, the current state in localStorage should be updated to reflect current tutorial progress (currently in some 'start' or null state.
• If the user skips the tutorial, an 'end' state should be logged to localStorage and that is the end of the tutorial
• If the user makes it to the end of the tutorial, an 'end' state should be logged to localStorage and that is the end of the tutorial
• If the user clicks the info button then reset the current state and localStorage should be updated to reflect the current tutorial progress

In order to make this work you can use a useEffect hook to watch changes to the state and update the localStorage.

The useMemo in this case is just to load the current state out of localStorage and only ever gets run when the component mounts for the first time. If the 'end' state is loaded from localStorage then we don't run the demo.

[Gavinok]

I attempted to use useMemo like so

  // Track if we should skip the rest of the demo.
  const [skipDemo, setSkipDemo] = useState<boolean>(false);

   useMemo(() => {
    // Default value should be set based on the stored token in local storage
    setSkipDemo(localStorage.getItem('OCAExplorerSeenDemo') != null)
  }, [skipDemo])

  useEffect( () => {
    // update localStorage to reflect the skipDemo state
    if (skipDemo == true) {
      localStorage.setItem('OCAExplorerSeenDemo', 'true');
    }
  }, [skipDemo])

However the useMemo seems to prevent any updates going to skipDemo when the skip button is hit