Search pagination

package.json

@@ -75,7 +75,7 @@
     "inferno-router": "^9.1.0",
     "inferno-server": "^9.1.0",
     "jwt-decode": "^4.0.0",
-    "lemmy-js-client": "1.0.0-search.3",
+    "lemmy-js-client": "1.0.0-search-pagination.1",
     "markdown-it": "^14.1.0",
     "markdown-it-bidi": "^0.2.0",
     "markdown-it-container": "^4.0.0",

src/shared/components/home/home.tsx

@@ -1506,7 +1506,7 @@ async function handleMarkPageAsRead(i: Home, myUserInfo?: MyUserInfo) {
 }
 
 async function handleHideDonationDialog(myUserInfo?: MyUserInfo) {
-  const res = await HttpService.client.donationDialogShown();
+  const res = await HttpService.client.markDonationDialogShown();
   if (res.state === "success") {
     if (myUserInfo !== undefined) {
       myUserInfo.local_user_view.local_user.last_donation_notification_at =

src/shared/components/home/login-reset.tsx

@@ -121,7 +121,7 @@ export class LoginReset extends Component<
     if (email && validEmail(email)) {
       i.setState(s => ((s.form.loading = true), s));
 
-      const res = await HttpService.client.passwordReset({ email });
+      const res = await HttpService.client.resetPassword({ email });
 
       if (res.state === "success") {
         toast(I18NextService.i18n.t("reset_password_mail_sent"));

src/shared/components/person/password-change.tsx

@@ -126,7 +126,7 @@ export class PasswordChange extends Component<
 
     if (password && password_verify) {
       i.setState({
-        passwordChangeRes: await HttpService.client.passwordChangeAfterReset({
+        passwordChangeRes: await HttpService.client.changePasswordAfterReset({
           token: i.state.form.token,
           password,
           password_verify,

src/shared/components/search.tsx

@@ -72,6 +72,7 @@ import { SearchTypeDropdown } from "./common/search-type-dropdown";
 import { FilterChipCheckbox } from "./common/filter-chip-checkbox";
 import { NoOptionI18nKeys } from "i18next";
 import { FilterChipSelect } from "./common/filter-chip-select";
+import { PaginatorCursor } from "./common/paginator-cursor";
 
 interface SearchProps {
   q?: string;
@@ -589,6 +590,7 @@ export class Search extends Component<SearchRouteProps, SearchState> {
       postUrlOnly: post_url_only,
       communityId: community_id,
       creatorId: creator_id,
+      cursor,
     },
   }: InitialFetchRequest<
     SearchPathProps,
@@ -634,6 +636,7 @@ export class Search extends Component<SearchRouteProps, SearchState> {
         title_only,
         post_url_only,
         limit: fetchLimit,
+        page_cursor: cursor,
       };
 
       searchResponse = await client.search(form);
@@ -647,14 +650,19 @@ export class Search extends Component<SearchRouteProps, SearchState> {
     };
   };
 
+  get getNextPage(): PaginationCursor | undefined {
+    const { searchRes: res } = this.state;
+    return res.state === "success" ? res.data.next_page : undefined;
+  }
+
   get documentTitle(): string {
     const { q } = this.props;
     const name = this.state.siteRes.site_view.site.name;
     return `${I18NextService.i18n.t("search")} - ${q ? `${q} - ` : ""}${name}`;
   }
 
   render() {
-    const { type } = this.props;
+    const { type, cursor } = this.props;
 
     return (
       <div className="search container-lg">
@@ -671,6 +679,11 @@ export class Search extends Component<SearchRouteProps, SearchState> {
           this.state.searchRes.state === "success" && (
             <span>{I18NextService.i18n.t("no_results")}</span>
           )}
+        <PaginatorCursor
+          current={cursor}
+          resource={this.state.searchRes}
+          onPageChange={cursor => handlePageChange(this, cursor)}
+        />
       </div>
     );
   }
@@ -1042,6 +1055,7 @@ export class Search extends Component<SearchRouteProps, SearchState> {
       titleOnly,
       postUrlOnly,
       creatorId,
+      cursor,
     } = props;
 
     if (q) {
@@ -1055,6 +1069,7 @@ export class Search extends Component<SearchRouteProps, SearchState> {
         title_only: titleOnly,
         post_url_only: postUrlOnly,
         limit: fetchLimit,
+        page_cursor: cursor,
       });
       if (token !== this.searchToken) {
         return;
@@ -1147,6 +1162,10 @@ function handlePostUrlOnlyChange(i: Search, postUrlOnly: boolean) {
   i.updateUrl({ postUrlOnly, q: i.getQ(), titleOnly: false });
 }
 
+function handlePageChange(i: Search, cursor?: PaginationCursor) {
+  i.updateUrl({ cursor });
+}
+
 function handleTypeChange(i: Search, type: SearchType) {
   i.updateUrl({
     type,

src/shared/utils/config.ts

@@ -24,7 +24,7 @@ export const markdownFieldCharacterLimit = 10000;
 export const maxUploadImages = 20;
 export const concurrentImageUpload = 4;
 export const updateUnreadCountsInterval = 30000;
-export const fetchLimit = 20;
+export const fetchLimit = 1;
 export const similarPostFetchLimit = 6;
 export const relTags = "noopener nofollow";
 export const emDash = "\u2014";