Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

pagination #115

Merged
merged 1 commit into from
Jan 18, 2024
Merged

pagination #115

merged 1 commit into from
Jan 18, 2024

Conversation

cloverich
Copy link
Owner

@cloverich cloverich commented Jan 17, 2024

Add limit and offset pagination using before:<uuid>. Closes #34 and the last feature work in #69 😮

Behavior implemented:

  • Next and back button work, based on before:
  • History maintained when navigating from edit view and back
  • History wiped when navigating to other views (e.g. preferences) and back
  • Refreshing page hydrates query, but loses search history (no previous page)
Screenshot 2024-01-18 at 7 09 22 AM Screenshot 2024-01-18 at 7 09 33 AM

There are some complicating factors in how react router re-renders when the query params change; this seems to behave reasonably, but there's likely more optimization (both performance and conceptual overhead) to be found.

Not pretty but functional. Deferring design to the post-functional design hackathon I'll inevitably do. Deferring a more elegant pagination solution similarly; additional use cases will better guide the refactor. Lack of functional testing library is starting to really hurt.

@cloverich cloverich changed the title wip: cursor based pagination pagination Jan 18, 2024
export class SearchV2Store {
@observable docs: SearchItem[] = [];
@observable loading = true;
@observable error: string | null = null;
private journals: JournalsStore;
private tagSeachStore: TagSearchStore;
private setTokensUrl: any; // todo: This is react-router-dom's setUrl; type it
setTokensUrl: any; // todo: This is react-router-dom's setUrl; type it
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally not public, but needs re-set on re-render from the UI.

this.journals = journals;
this.tagSeachStore = new TagSearchStore(this);
this.setTokensUrl = setTokensUrl;

// Re-run the search query anytime the tokens change.
reaction(() => this._tokens.slice(), this.search, {
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I invariably end up replacing reactions with imperative code. Reaction always feels more elegant, but @action and @computed and @observable alone are usually easier to reason about.

- support before:<uuid> to page off of note uuids (which sort by time)
- add next and back buttons utilizing before:<uuid>
- some refactoring to support this
@cloverich cloverich merged commit 1383f1a into master Jan 18, 2024
@cloverich cloverich deleted the cursor-pagination branch January 18, 2024 15:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Cursor based pagination
1 participant