Selecting an item after querying resets the query result

[iwatakeshi]

Question

Hi, I'm currently on Chapter 8 reading so I apologize in advance if this has already been addressed in later chapters, but I thought to share a fix for a potential issue. I noticed that when one queries in the search input box and selects a result, the list resets back to the state where no queries were performed. I think that there needs to be an update to the ListLinkItem in dashboard.expenses.tsx like so (also for income):

<ListLinkItem
  key={expense.id}
- to={`/dashboard/expenses/${expense.id}`}
+ to={
+ searchQuery ? 
+   `/dashboard/expenses/${expense.id}?q=${searchQuery}`
+   : `/dashboard/expenses/${expense.id}`
+ }
   isActive={expense.id === id}
   deleteProps={{
     ariaLabel: `Delete ${expense.title} expense`,
     action: `/dashboard/expenses/${expense.id}`,
  }}>

I'm writing this as a question since I'm new to Remix and I don't know its best practices yet. 😅

By the way, it's a great read so far. Thank you!

Context

• Chapter: 8
• Page: 148 - 152
  https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/blob/main/08-session-management/bee-rich/solution/app/routes/dashboard.expenses.tsx#L50
  seems to be the same in future chapters:
  https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/blob/main/15-advanced-session-management/bee-rich/solution/app/routes/dashboard.expenses.tsx#L67

[andrelandgraf]

Thanks for the great feedback; I appreciate it! 🙏

No, this looks like a great fix and avoids the search query reset. 😎 I will have a look later today to see if there was a reason that we didn't include that in the solution code and give an update!

[andrelandgraf]

Yes, this looks like an oversight. In Chapter 15, we keep the pagination index and search query values when searching or navigating the paginated items, but we also don't update the ListLinkItem links. Let's keep this issue open so that folks can find your solution! Thanks for asking the question!