Save the code and a checkpoint so the users can start from where they left off

[JeelRajodiya]

Assume the user is on Chapter 2 - Lesson 2, now the user closes the tour, opens it again by visiting https://tour.json-schema.org. but the problem is when They click on Start the tour button, it starts from all over again. and the code they wrote in the any of the previous sessions is lost.

We need to save the following informations:

1. The chapter and lesson on which the user was last time, (when they start the tour again, it should start from that checkpoint)
2. Actively save the code they are writing in the code editor (for each lesson), so even when they refresh or go to any previous lessons the code they wrote stays there.

We can use browser's local storage to store the progress so that it stays on the user's machine as long as they don't clear the cache.

Additional Task: When the user resets their progress (through settings), the saved code should also be cleared.

[pavanydg]

@JeelRajodiya can I work on this?

[JeelRajodiya]

Yes @pavanydg, please go ahead!

[JeelRajodiya]

Hello @pavanydg, for this issue I suggest the following approach.

1. Create a new file under the /lib folder named progressSaving.ts (if you have any better name in mind please use that)

2. inside that file you can create the following functions

   1. Checkpoints

      • setCheckpoint(chapter:number ,lesson:number): Will set the value of the key "checkpoint" to a JSON Object that contains contains index of the current chapter and lesson
      • getCheckpoint(): Will read the key from localstorage named "checkpoint"

      When the user changes their chapter/lesson checkpoint is updated

   2. Code saving: For this part, we need a bit complex data structure, that can handle the lesson wise code.

      • setCode(chapter:number, lesson:number, code: string): Will set the value of the key "codeData" to a JSON Object
      • getCode(chapter:number, lesson:number): Will read the key from localstorage named "codeData" for the specific chapter and lesson,

      when the user types in the code editor, setCode is also ran so the editor code stays synced with the localStorage when the user loads the lesson, We will check if it has any saved code, if yes load that from localStorage. For the codeData JSON Object, you can think of something similar to what I have given below

      {
        "codeData":{
             "1.1": "{ \"type\": \"string\"} " // contains the code as a string 
             "1.2": .... 
               }    
      }

      You can also take reference of this code, which involves saving the status of a lesson as completed https://github.com/json-schema-org/tour/blob/9a792081a13b3d567ae4bc01fe903be4e57f3d22/lib/client-functions.ts#L105-L129

[JeelRajodiya]

@pavanydg Are you still working on it?

[pavanydg]

@JeelRajodiya sorry for the delay. Will raise a pr within 2-3 days. Is it fine? Since the homepage is revamped should we still need checkpoint? Or should i do something like, when i open the website it should directly open the previously visited chapter and lesson. (i have completed the saving code part).

[JeelRajodiya]

@pavanydg

Will raise a pr within 2-3 days. Is it fine?

You can take as much time as you want. Just make sure you give some updates so that we can know that you are working on it.

Since the homepage is revamped should we still need checkpoint? Or should i do something like, when i open the website it should directly open the previously visited chapter and lesson.

Yes, That's a good idea. When a returning user opens tour.json-schema.org, we can redirect them to the page when they previously left off. Please go ahead with this idea.

[pavanydg]

@JeelRajodiya i have 2 doubts:-

1. I am planning to implement checkpoint using a custom client component which uses useEffect and uses router.push() to add the saved checkpoint from localstorage. This works but it first displays homepage and then redirects. Any suggestions on how to improve this?
2. When clicking the reset button, should it reset only the current chapter code or all the chapter codes?

[JeelRajodiya]

1. I am planning to implement checkpoint using a custom client component which uses useEffect and uses router.push() to add the saved checkpoint from localstorage. This works but it first displays homepage and then redirects. Any suggestions on how to improve this?

I think It is a good approach. You can go ahead with it. If I have some suggestions I will leave it in the PR review

2. When clicking the reset button, should it reset only the current chapter code or all the chapter codes?

It should reset all chapter codes.