Preserving user ui decisions about trueblocks-explorer

[dszlachta]

I think the easiest way is to use useEffect to save the variables from App.tsx into localStorage. Other option would be to do the same, but with wrapping them in Context. I think at some point we will want to do the latter. In both cases the logic would be very similar:

const saveToLocalStorage = (key, data) => {
  try {
    window.localStorage.setItem(key, JSON.stringify(data));
  } catch (error) {
    console.error(error); // this will not throw, but still show the error in the console
  }
}

const loadFromLocalStorage  = (key, defaultValue) => 
  const loadedData = window.localStorage.getItem(key);
  return loadedData ?? defaultValue; // ?? operator returns right hand side only if left side is null or undefined
}

// useState with function as an initial value will run only once, which is great, because reading/writing
// to LS is blocking
const [helpExpanded, setHelpExpanded] = useState(() => loadFromLocalStorage('helpExpanded'));

// The function inside will be called each time a variable in the list of dependencies (the array being the last argument)
// is changed
useEffect(() => {
  saveToLocalStorage('helpExpanded', helpExpanded);
}, ['helpExpanded']);

// Just send the state as a prop to the component
<HelpPanel expanded={helpExpanded} />

This is basically the same code, but with Context: https://stackoverflow.com/a/62505656

[tjayrush]

All I need here is a recommendation or pointer to how to best do this.

[tjayrush]

Sorry to be so ignorant, but where does all this code go? I'd like to make these changes, and I fully understand the code, but I'm very unsure where to put it.

[dszlachta]

It is OK. I would put the two functions (saveToLocalStorage and loadFromLocalStorage) into a module in src/modules. It could be named e.g. local_storage.ts. This way we have these nice wrappers available whenever we need localStorage access. The rest (state and useEffect) could go to App.tsx.

[deeayeen]

#61

[tjayrush]

Thanks Dan.