Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Discussion: adds local storage clearing #155

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

fdoflorenzano
Copy link
Contributor

Moving a conversation started in #150 here:

One thing that worried me about the #140 was that it maybe resets values for the inputs too frequently, even if it's not needed in certain scenarios. Like maybe an number input value I tweaked into a very specific value already in the UI, but if I tweak the max value in the definition it will reset the current value. But of course, what if that max value is smaller than the current value? There may be a lot of edge cases that are weird to control, but at some point we could introduce smarter resets. The current setup is simpler in that sense.

But another thing I worry it introduces is adding much more new entries in local storage. I started worrying back when we introduced seed history storage, cause this too already seems like a lot saved there. So here I also add a little clearLocalStorage function that could be called from the UI in certain scenarios (like debugging or something crashes and we add to the error log that they can clear it). Tho I don't know yet how or where to add that in the UI. Any ideas welcome :)

Lucas thoughts:

I'm just leaving some initial ideas here:

  • I'm not sure how much of an issue too many local storage entries are performance wise, but maybe a simple heuristic to clean up could be keep track of the current local storage key. If the key gets changed (because the inputs change) we could just delete the current key, before setting current key to the new key
    • I also like your idea of adding a UI option as this might be the more explicit solution
  • I think localStorage is stored on hard drive, so maybe there's a minor performance gain in debouncing localStorage writes?
  • I would like to brainstorm if there could be a simple heuristic of when to reset the cache key and when to keep the old one without things becoming too complex. Maybe we could also avoid resetting all values to their default by merging the contents of the previous local storage cache with the new local storage. This could maybe be done fairly simple (if nothing about the input was changed -> copy the old value, if something about the input was changed -> reset the value to default)

@runemadsen
Copy link
Contributor

Nice! I think this is a good thing to implement if people are having problems with the localStorage state. I know that @bravomartin wants to take a look at the UI to try to make the inputs a bit smaller, since just a few inputs will now take up most of the sidebar. So perhaps let's have a quick discussion about this before that work starts?

Base automatically changed from input-storage-sort-hash-2 to main September 21, 2022 11:55
@fdoflorenzano
Copy link
Contributor Author

That makes sense! Yeah after Lucas' comments I did some research and indeed it doesn't seem as a very important issue at the moment. I guess it's mostly feeling there's potentially too much stuff left in localStorage haha

@@ -135,6 +135,18 @@ function useLocalStorageState(key, initialState, clean) {
return [value, setValue, remove];
}

function clearLocalStorage() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this also take an optional argument so it can be used to delete a very specific local storage entry?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@@ -96,7 +96,7 @@ function undoReducer(state, action) {
const getNewSeed = () => seedrandom(null, { pass: (_, seed) => ({ seed }) }).seed;

export function useSeedHistory(functionName) {
const key = `--${functionName}-seed`;
const key = `mechanic_seed_${functionName}`;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given that the mechanic_ prefix is used in multiple places now I think this should be a constant.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@netlify
Copy link

netlify bot commented Sep 22, 2022

Deploy Preview for dsi-logo-maker ready!

Name Link
🔨 Latest commit 0ba3528
🔍 Latest deploy log https://app.netlify.com/sites/dsi-logo-maker/deploys/632c744d959e960009806539
😎 Deploy Preview https://deploy-preview-155--dsi-logo-maker.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants