nextcloud / nextcloud/cookbook
Category/tag navigation shows the previously selected category (setup() reads stale route in onBeforeRouteUpdate)
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 641
- Forks
- 113
- Avg merge
- 21h 31m
- Merged PRs (30d)
- 26
Description
Description
When switching directly from one category to another in the left navigation, the recipe list shows the recipes of the previously selected category (and the category filter chip also shows the previous name). The list is always "one click behind". The first click coming from the index page or from a recipe view works; only category → category (and tag → tag, same code path) is affected.
The backend is fine: GET /apps/cookbook/api/v1/category/{name} returns the correct recipes for every category. The problem is in the frontend.
Root cause (v0.11.10, src/components/SearchResults.vue)
onBeforeRouteUpdate((to, from, next) => {
// Move to next route as expected
next();
// Reload view
setup();
});
setup() reads the category from the reactive route object:
const route = useRoute();
...
} else if (props.query === 'cat') {
const cat = route.params.value;
filters.value = [new CategoriesFilter(cat)];
...
const response = await api.recipes.allInCategory(cat);
Inside onBeforeRouteUpdate the navigation is not confirmed yet: calling next() only resolves this guard, route/currentRoute is updated after the whole navigation is finalized. setup() runs synchronously up to its first await, so route.params.value still holds the old value and the old category is fetched again. The /category/:value and /tags/:value routes reuse the same Search component instance (router/index.ts, routes search-category / search-tags), so the component is not re-mounted and onMounted does not help.
Suggested fix
Pass the target route into setup() and read the parameter from it instead of from useRoute():
const setup = async (r = route) => {
...
const cat = r.params.value; // same for tags / general search
...
};
onBeforeRouteUpdate((to, from, next) => {
next();
setup(to);
});
Alternatively watch(() => route.params.value, () => setup()) after navigation is confirmed (onBeforeRouteUpdate → afterEach), or await router.isReady()-style deferral. The currently commented-out watch(route, …) block in the same file hints that this was already on the radar.
Reproduction
- Open Cookbook, click category A in the left navigation → list shows A (correct).
- Click category B in the navigation → list still shows the recipes of A, filter chip says A, URL says
#/category/B. - Click B again (or press F5) → now B is shown.
Expected behavior
The list shows the recipes of the category that was just clicked.
Actual behavior
The list shows the recipes of the previously selected category; it lags one navigation step behind.
Screenshots
n/a (behaviour is fully explained by the code above; verified that the API returns correct data for each category while the UI shows the previous one).
Browser
Reported from desktop Chromium-based and Firefox browsers; browser-independent (Vue Router timing).
Versions
Nextcloud server version: 33.0.8 (Hetzner Storage Share, managed)
Cookbook version: 0.11.10
Database system: managed by hoster (not exposed); not relevant, API responses are correct
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in src/components/SearchResults.vue, focusing on setup() and onBeforeRouteUpdate, then check the search-category and search-tags routes in router/index.ts. Reproduce category-to-category and tag-to-tag navigation, and verify that the selected route parameter drives both the filter chip and recipe list without lagging behind.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 86/100