new-log-viewer: Add `UrlContextProvider` to provide URL parameters and use them in the `StateContextProvider`.

[Henry8192]

Description

UrlContextProvider provides 3 main functions: setSearchParamSet, setHashParamSet and copyToClipboard.

• setSearchParamSet takes in new search parameters and replace its current search parameters. It then updates the URL on the search bar.
• Similarly, setHashParamSet replaces with new hash parameters. However, it stores the current hash parameter using a useState hook.

Validation performed

In Layout.tsx, add this test code block after useContext(UrlContext):

setSearchParamSet({filePath: "path/to/file", seek: "begin"});
setHashParamSet({searchEventIdx: 114514});
copyToClipboard({filePath: "path/to/filePath"}, {searchEventIdx: 1919810});

Results: Moded URL: http://localhost:3010/?seek=begin&filePath=path/to/file#searchEventIdx=114514 Clipboard: http://localhost:3010/?seek=begin&filePath=path%2Fto%2FfilePath#searchEventIdx=1919810

[junhaoliao]

Thanks for the changes.

Some significant refinements are needed before we can merge the PR. Let's use this patch file as a reference changes.patch and feel free to ask any questions offline.

[junhaoliao]

Thanks for the changes.

Some significant refinements are needed before we can merge the PR. Let's use this patch file as a reference changes.patch and feel free to ask any questions offline.

Let's also add some demo elements in the and/or so we can better demo the usages and be more confident that our implementations are working:

1. (Likely only need to modify ) Add a button which copies the link with logEventNum=theLastLogEvent to the clipboard.
2. (Likely only need to modify ) Set logEventNum in the URL after a page is loaded.
3. (Likely only need to modify ) Support loading a specific log by changing the logEventNum in the URL.

[junhaoliao]

Thanks for the changes. Some significant refinements are needed before we can merge the PR. Let's use this patch file as a reference changes.patch and feel free to ask any questions offline.

Let's also add some demo elements in the and/or so we can better demo the usages and be more confident that our implementations are working:

1. (Likely only need to modify ) Add a button which copies the link with logEventNum=theLastLogEvent to the clipboard.
2. (Likely only need to modify ) Set logEventNum in the URL after a page is loaded.
3. (Likely only need to modify ) Support loading a specific log by changing the logEventNum in the URL.

(2.) has been implemented. Let's continue to work on (1.) and (3.).

Let me know if you need help for (3.). I believe we also need to update some of the service worker code.