Fix store in router #214
Fix store in router #214
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @kharus, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request addresses an issue with how the state management store is integrated and utilized within the application's router configuration. The changes standardize the access patterns for the interviewStore and its properties, ensuring a more consistent and potentially more correct way of managing application state during navigation.
Highlights
- Store Access Refactor: Updated how the
interviewStoreis accessed for state mutation within router navigation guards. Directstore.stateaccess has been replaced with calls tointerviewStore()to retrieve the store instance, followed by direct property assignment (e.g.,interviewStore().allInverviews = data). - Language Preference Update Mechanism: Changed the method for setting language preferences from calling an
updateLangmethod (e.g.,store.updateLang('nl4eng')) to directly assigning the language code to thecurrentLangproperty of theinterviewStore(e.g.,interviewStore().currentLang = 'nl4eng'). This standardizes the state update pattern. - Code Cleanup: Removed a redundant local
storevariable declaration within the globalrouter.beforeEachnavigation guard, as theinterviewStore()function can be called directly where needed.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Summary of Changes
Hello @kharus, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request addresses an issue with how the application's state management store is utilized within the Vue Router configuration. The changes modernize the store access pattern, ensuring that the correct store instance is retrieved and its properties are updated consistently across various navigation guards, thereby fixing potential data synchronization problems related to interview data and language settings.
Highlights
- Store Access Modernization: Updated how the application's store is accessed within
src/router/index.ts, transitioning from a directstoreobject to using theinterviewStore()function for retrieving the store instance. This change affects howallInverviewsdata is set after a fetch call. - State Management Updates: Replaced calls to the
store.updateLang()method with direct assignments tointerviewStore().currentLangacross multiple language-specific routerbeforeEnterguards. This streamlines how the current language state is updated. - Code Clean-up: Removed an unnecessary local
storevariable declaration within the globalrouter.beforeEachguard, as theinterviewStore()function is now called directly where needed, improving code conciseness.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
| fetch(`${host}/${to.query.uuid}/${to.query.spreadsheetId}/${to.query.sheetId}/aajson/LATEST.json`) | ||
| .then(response => response.json()) | ||
| .then(data => store.state.allInverviews = data); | ||
| .then(data => interviewStore().allInverviews = data); |
There was a problem hiding this comment.
The next() call on line 26 is outside of this promise chain, meaning navigation will proceed before the data is fetched and set in the store. This will likely cause errors in the component rendered by this route if it depends on allInverviews being populated.
The fetch operation should be completed before calling next(). This can be done by making the beforeEnter guard async and using await, or by moving the next() call into a .then() block.
| beforeEnter: (to, from, next) => { | ||
| // Call your desired function here | ||
| store.updateLang('nl4eng'); | ||
| interviewStore().currentLang = 'nl4eng' |
There was a problem hiding this comment.
It's better to use the updateLang action instead of directly mutating state.
| interviewStore().currentLang = 'nl4eng' | |
| interviewStore().updateLang('nl4eng') |
| alias: '/nl4eng/questions', | ||
| beforeEnter: (to, from, next) => { | ||
| store.updateLang('nl4eng'); | ||
| interviewStore().currentLang = 'nl4eng' |
There was a problem hiding this comment.
It's generally better practice to use actions to encapsulate state modifications. The store already has an updateLang action for this purpose.
| interviewStore().currentLang = 'nl4eng' | |
| interviewStore().updateLang('nl4eng'); |
| alias: '/nl4chi/questions', | ||
| beforeEnter: (to, from, next) => { | ||
| store.updateLang('nl4chi'); | ||
| interviewStore().currentLang = 'nl4chi' |
There was a problem hiding this comment.
It's better to use the updateLang action for consistency and to keep state mutation logic within the store.
| interviewStore().currentLang = 'nl4chi' | |
| interviewStore().updateLang('nl4chi'); |
| alias: '/nl4may/questions', | ||
| beforeEnter: (to, from, next) => { | ||
| store.updateLang('nl4may'); | ||
| interviewStore().currentLang = 'nl4may' |
There was a problem hiding this comment.
For consistency with the store's design, please use the updateLang action here as well.
| interviewStore().currentLang = 'nl4may' | |
| interviewStore().updateLang('nl4may'); |
No description provided.