Manage state to persist repo values across pages about badge-generator HOT 12 CLOSED

I was interested on how it would be implemented, since I'd like to contribute to your project. Thank you for your response.

Sorry for not being clear with my first comment.

from badge-generator.

Independence

The current site resets the forms whenever you switch pages which is annoying.

So yes the first benefit I want from the store is that you can reuse repo fields on multiple pages/views. Like Repo and Package views as you say.

No there is no danger of different users sharing the same values. There is no backend or database to persist data. So all the logic and store happens on the browser and for that user independent of others.

Tabs and stores

In the simple store case (no local storage or session storage), the store is just a JavaScript object on the page.

An over simplification:

const store = {}
store.username = "abc"

If you open another tab, whether incognito or not, the browser will load the entire index.html and Vue app JS code and set up a new store object. It will be empty.

const store = {}

So if you have 5 tabs open then you have 5 stores. If you close and open the browser, the store will be lost and start from empty because the JS object is lost.

This is all fine behavior for now.

Advanced store

Once the basic store logic works, then a part two in a separate PR can use localStorage which is like a cookie but has no expiry date and holds more data

The MDN (Mozilla) docs cover localStorage well.

The advantages of localStorage here:

• if you enter form values, they will persist across views as before
• you will have one global store across different tabs on the same window. I don't know how incognito works here but it doesn't matter as this is not sensitive financial data or similar.
• when you close and open the tab or browser window, the store will persist.

You should also know about sessionStorage which works identically to localStorage except it will clear when you close the browser. Same as session cookies. For this app, localStorage makes more sense.

from badge-generator.

Thank you for your throughout response! I will follow up with my PR shortly, thank you for your help and guidance.

from badge-generator.

I've merged the PR.

I made some refactor changes. Please see #126

from badge-generator.

Hello, @MichaelCurrin. How would we manage the state using a store? In what part of the project?

from badge-generator.

Hi. The link I added above describes creating store.js and that I am thinking can manage repo username and repo name

I've not implemented it yet

from badge-generator.

Are you interested in how it works in general or in it being implemented in my project?

from badge-generator.

Let me know if I can be assigned this issue to work on it

from badge-generator.

Thanks for your interest. I've assigned to you.

The link in the description shows the zero dependency store idea I had in mind. So you'd make a store.ts file which handles repo username and repo name. And then have all pages which use repo username and repo name go through the store (so you'd modify a few files in views.

Don't worry about other fields or using local storage - those can come in later issues or PRs.

Let me know of further questions or if you need comments on a work in progress PR.

from badge-generator.

I would like to follow up with some questions I have.

So, I implemented the store to track the username and repo name when they are submitted for the first time. Thus, if you create a repo badge, the username and the repo name will persist and will show up as well for the package badge form. I suppose this is how the feature works.

Another thing I am concerned with is whether this "global" won't be shared across other users. I assume that this value is local to the session, so my changes will not collide with other users' submissions. I went ahead and opened the same website on two different browser windows (one incognito and one normal), and it seemed that the values were not overwriting each other. However, I am not sure why this is the case. I am not sure if we are using sessions or something like that.

Let me know if you have any comments.

from badge-generator.

I just created PR #131 - @JerryHue I would appreciate your review or input, maybe try it locally.

So now local storage is used!

BTW I dropped use of state and reactive as they gave incorrect behavior when used with localStorage.

from badge-generator.

Merged #131.

from badge-generator.