feat: Migrate utilities from UrlContextProvider to Zustand stores (resolves #269). #286
+22
−10
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
junhaoliao
reviewed
May 21, 2025
| @@ -43,7 +43,7 @@ interface ViewStoreActions { | |||
| filterLogs: (filter: LogLevelFilter) => void; | |||
|
|
|||
| loadPageByAction: (navAction: NavigationAction) => void; | |||
| updateIsPrettified: (newIsPrettified: boolean) => void; | |||
| setIsPrettified: (newIsPrettified: boolean) => void; | |||
There was a problem hiding this comment.
(i understand this is a WIP PR and the changes are not finalized yet)
for all Zustand store actions that do not simply change the value of a state, we prefer naming them with a updatePrefix. @coderabbitai create an issue for adding this in the dev docs
There was a problem hiding this comment.
🧩 Analysis chain
@junhaoliao I've created an issue to document the Zustand store action naming conventions in the development documentation. The issue captures your point that actions which do more than simply change a state value should use an updatePrefix, while simple setters can use the setPrefix.
🏁 Script executed:
#!/bin/bash
# Create an issue for documenting Zustand store action naming conventions
gh issue create \
--title "Document Zustand store action naming conventions in dev docs" \
--body "## Background
When implementing Zustand store actions, we follow these naming conventions:
- Use \`setX\` for actions that simply change the value of a state
- Use \`updateX\` for actions that do more than simply changing a value (e.g., perform additional logic, make API calls, update multiple states)
## Task
Add this naming convention to the development documentation to ensure consistent implementation across the codebase.
## Example
\`\`\`typescript
// Example of a simple setter (use 'set' prefix)
setPageNum: (newPageNum: number) => {
set({pageNum: newPageNum});
}
// Example of a complex action (use 'update' prefix)
updateIsPrettified: (newIsPrettified: boolean) => {
// Has additional logic beyond just setting the value
if (newIsPrettified === get().isPrettified) {
return;
}
set({isPrettified: newIsPrettified});
// Performs other actions...
setUiState(UI_STATE.FAST_LOADING);
// ...
}
\`\`\`
## References
Related PR: ${GITHUB_PR_URL:-https://github.com/y-scope/yscope-log-viewer/pull/286}
" \
--assignee "junhaoliao"
Length of output: 1196
@junhaoliao I've created an issue to document the Zustand store action naming conventions in the development documentation. You can find it here: #289
🧬 Code Graph Analysis Results
Relevant snippets for understanding src/stores/viewStore.ts and the user comment about naming conventions for Zustand store actions:
From src/typings/common.ts (line 10)
Nullable- Likely a type alias for nullable types used in the store, e.g.,
Nullable<T> = T | null.
From src/typings/states.ts (line 106)
UI_STATE- Enum or constants representing UI states such as
READY,FAST_LOADING, etc., used in the store to manage UI state transitions.
From src/typings/notifications.ts (line 36)
DO_NOT_TIMEOUT_VALUE- Constant used for notification timeout duration indicating no timeout, used in error pop-ups in the store.
From src/stores/contextStore.ts (line 35)
CONTEXT_STORE_DEFAULT- Default values for the context store, including
logEventNum, referenced inuseViewStorefor default event number.
From src/typings/logs.ts (lines 51 and 56)
LogLevelFilter
LOG_LEVEL- Types and constants for log filtering and log levels, used in
filterLogsaction.
From src/contexts/UrlContextProvider.tsx (line 285)
updateWindowUrlHashParams- Function to update URL hash parameters, called in
updatePageDataaction.
From src/utils/actions.ts (lines 107 and 112)
ACTION_NAME
NavigationAction- Constants and types defining navigation action codes and their structure, used in
loadPageByActionandgetPageNumCursor.
From src/typings/worker.ts (lines 100, 102, 105, 107, 110)
CURSOR_CODE
EVENT_POSITION_ON_PAGE
BeginLineNumToLogEventNumMap
CursorType
PageData- Types and constants related to cursor codes, event positions, page data, and mappings used extensively in the store for pagination and log data management.
From src/services/LogFileManagerProxy.ts (lines 65-68)
startQuery (queryString: string, isRegex: boolean, isCaseSensitive: boolean): void {
const logFileManager = this.#getLogFileManager();
logFileManager.startQuery({queryString, isRegex, isCaseSensitive});
}- Method called in
filterLogsaction to start a log query.
From src/services/LogFileManager/index.ts (lines 356-386)
startQuery ({queryString, isRegex, isCaseSensitive}: QueryArgs): void {
this.#queryId++;
this.#queryCount = 0;
// Send an empty query result with 0 progress to the render to init the results variable
// because there could be results sent by previous task before `startQuery()` runs.
this.#onQueryResults(0, new Map());
// If the query string is empty, or there are no logs, return
if ("" === queryString || 0 === this.#numEvents) {
return;
}
// Construct query RegExp
const regexPattern = isRegex ?
queryString :
queryString.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
const regexFlags = isCaseSensitive ?
"" :
"i";
try {
const queryRegex = new RegExp(regexPattern, regexFlags);
this.#queryChunkAndScheduleNext(this.#queryId, 0, queryRegex);
} catch (e) {
if (e instanceof SyntaxError) {
console.error("Invalid regular expression:", e);
}
throw e;
}
}- Implementation details of
startQueryused by the proxy store, relevant tofilterLogsaction.
From src/services/LogFileManager/index.ts (lines 492-514)
#getCursorData (cursor: CursorType, numActiveEvents: number): CursorData {
const {code, args} = cursor;
switch (code) {
case CURSOR_CODE.PAGE_NUM:
return getPageNumCursorData(
args.pageNum,
args.eventPositionOnPage,
numActiveEvents,
this.#pageSize,
);
case CURSOR_CODE.LAST_EVENT:
return getLastEventCursorData(numActiveEvents, this.#pageSize);
case CURSOR_CODE.EVENT_NUM:
return getEventNumCursorData(
args.eventNum,
numActiveEvents,
this.#pageSize,
this.#decoder.getFilteredLogEventMap(),
);
default:
throw new Error(`Unsupported cursor type: ${code}`);
}
}- Method related to cursor data retrieval, relevant to cursor handling in
loadPageByActionandsetIsPrettified.
These snippets provide context on types, constants, and external functions used in the viewStore.ts file, especially for actions that perform more complex logic than simple state updates, which relates to the user comment about naming conventions for such actions.
✏️ Learnings added
Learnt from: junhaoliao
PR: y-scope/yscope-log-viewer#286
File: src/stores/viewStore.ts:46-46
Timestamp: 2025-05-21T20:08:19.176Z
Learning: For Zustand store actions, use `setX` for functions that simply change the value of a state, and use `updateX` for functions that do more than just set a value (e.g., perform additional logic, make API calls, update multiple states).
Learnt from: junhaoliao
PR: y-scope/yscope-log-viewer#286
File: src/stores/viewStore.ts:46-46
Timestamp: 2025-05-21T20:08:19.176Z
Learning: For Zustand store actions, use `setX` for functions that simply change the value of a state, and use `updateX` for functions that do more than just set a value (e.g., perform additional logic, make API calls, update multiple states).
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
|
@zzxthehappiest feel free to use #293 as a reference, where we replaced the NotificationConextProvider with a Zustand store |
3 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
#269
Checklist
breaking change.
Validation performed