Pagination without safari component

[AstaDK]

I using sajari for my demo app.

1. I have 1 list and I want to show more items, I don't want to use the sajari component but I can't query after I change variables page.

2. I using useSearchContext to get page and results, I cover my component with component search provider, code example bellow:
   <SearchProvider key="{index}" searchOnLoad={false} initialResponse="" search={{ pipeline: new Pipeline( { ...getConfigPipeline("") }, "query" ), variables: new Variables({ q: "", filter: "", resultsPerPage: 6, }), }} > <MyComponent/> </SearchProvider>

3. Render result
   const { setQuery } = useQuery(); const { variables } = useVariables(); const { results, searching, totalResults, page, pageCount, } = useSearchContext();

4. And then I use variables hook(useVariables) to set request for other page but It not request, code example bellow:
   const OtherComponent = ({ setQuery, textSearch, variables }) => { const handleShowMore = () => { variables.set({ page: page + 1, }); };

So how can set pagination without component your support?

• I only try for used useSearch but not good for my case.

[zlatanpham]

Hi @AstaDK, have you tried the usePagination hook? - https://react.docs.sajari.com/hooks/usepagination

[AstaDK]

Hi @AstaDK, have you tried the usePagination hook? - https://react.docs.sajari.com/hooks/usepagination

Tks for reply, but this example using component pagination, in my case I don't want to using it.

[AstaDK]

FIY my version using
"@sajari/react-components": "1.4.8",
"@sajari/react-hooks": "1.4.1",
"@sajari/react-search-ui": "1.7.4",
"@sajari/server": "1.2.1",

[zlatanpham]

You don't have to use the Pagination component, the variables and methods from usePagination can be consumed by any piece of UI. For example:

const { page, setPage, resultsPerPage, pageCount, totalResults } = usePagination();

return (
   <div>
       <div>Current page: {page}</div>
       <div>
          <button onClick={() => {setPage(1)}}>Go to page 1</button>
          <button onClick={() => {setPage(2)}}>Go to page 2</button>          
          ....
       </div>
   </div>
)

Or maybe I misunderstood your question. Any further elaboration is very much appreciated.

[AstaDK]

Cool, That all I need.
Tks you countryman.

[AstaDK]

Sr, I just find one point and want to ask you. After I setPage the request server called. But variable searching from useSearchContext not change, It mean the result do not update. The code:
const handleShowMore = () => { setPage(page + 1) };

const { setPage } = usePagination(); const { results, searching, page, pageCount, } = [useSearchContext(); console.log("searching", searching);

The log not appear. The request server called but results not update
@zlatanpham

[zlatanpham]

@AstaDK, I see your point. The searching actually doesn't change if you set a new page number. @tuanddd can you confirm if it could be a bug?

[AstaDK]

@AstaDK, I see your point. The searching actually doesn't change if you set a new page number. @tuanddd can you confirm if it could be a bug?

Tks, I hope you can check this issue.
Im using the Sajari and somethings have some bugs but if update new version the code maybe do not work with my desire.

[zlatanpham]

The log not appear. The request server called but results not update

@AstaDK although the searching doesn't change, the results should still be updated as I can check it works on my end.

Im using the Sajari and somethings have some bugs but if update new version the code maybe do not work with my desire.

May I ask why the new versions do not work for you?

[tuanddd]

It is indeed not updating the searching variable, I'll create a PR for this.

[AstaDK]

May I ask why the new versions do not work for you?

Im not sure but I was updated latest versions for all Sajari, but the filter option do not work fine, It have some issue and after I downgrade with the version present.

[zlatanpham]

Im not sure but I was updated latest versions for all Sajari, but the filter option do not work fine, It have some issue and after I downgrade with the version present.

Sorry, I'm not quite clear what you mean 😅

[AstaDK]

No problem, Can you update for me the latest stable versions?

[zlatanpham]

You can find the latest version of the packages in README.md.

[AstaDK]

You can find the latest version of the packages in README.md.

Tks, I will check with the latest version. If another issue, I will create a topic on this.

[AstaDK]

edfd019
I check this commit, after I setPage the searching is true FOREVER?
The log show true and not another change

I think it change from true to false and response the results right?
@tuanddd @zlatanpham

[zlatanpham]

@AstaDK thanks for reporting. We'll check and fix it if it's an issue.

[tuanddd]

@AstaDK Can you give me a codesandbox of the mentioned issue? I can't seem to be able to reproduce it locally.

[AstaDK]

The codesandbox do not fully shown my case. But I don't use set Paging and used setQuery, it is okay. I don't know what a reason.
The code exp:

const { setQuery } = useQuery();
const { variables } = useVariables()

const handleShowMore = () => {
    // setPage(page + 1);
    variables.set({
      page: page + 1,
    });
    setQuery(textSearch);
  };

But How I can set page inside variables and then I use setQuery to query with the new config variables I set
@tuanddd

[AstaDK]

https://github.com/AstaDK/Next-Sajari/tree/pagination
This is repo code I reproduced my case. I think reason loading only "true" due to the SearchProvider rebuild. But how can I update code better.
@tuanddd @zlatanpham

[tuanddd]

Hi @AstaDK, I'll checkout your code whenever I got the time, thank you.

[AstaDK]

FYI: I used component pagination still the same issue.

[tuanddd]

Hi @AstaDK, your code seems to render multiple SearchProvider in your app, this is not recommended as noted in our documentation. Rendering only one SearchProvider now works. Feel free to ask any questions. Cheers.

import { FilterBuilder, SearchProvider, Variables } from "@sajari/react-hooks";
import { useState } from "react";
import { pipelineConfig } from "../../config";
import ItemComponent from "../items";

const variables = new Variables({
  resultsPerPage: 6,
  q: ``,
});

const pipeline = pipelineConfig();

const HomeComponent = () => {
  const [listViews, setListViews] = useState([
    {
      name: "Asta",
      isRender: true,
      text: "SanDisk",
    },
    {
      name: "Nick",
      isRender: true,
      text: "HP",
    },
    {
      name: "Deku",
      isRender: true,
      text: "Apple",
    },
  ]);

  const brandFilter = new FilterBuilder({
    name: "brand",
    options: listViews.reduce((acc, v) => {
      acc[v.text] = `brand = '${v.text}'`;
      return acc;
    }, {}),
  });

  return (
    <div className="space-y-6">
      <SearchProvider
        search={{
          variables,
          pipeline,
          filters: [brandFilter],
        }}
        searchOnLoad={true}
      >
        {listViews &&
          listViews
            .filter((i) => i.isRender)
            .map((item, index) => {
              return (
                <ItemComponent
                  listViews={listViews}
                  setListViews={setListViews}
                  item={item}
                />
              );
            })}
      </SearchProvider>
    </div>
  );
};
export default HomeComponent;

[AstaDK]

I think it does work incorrectly, Image below shows that when I load more one part (load more data of Asta), other data will load more too.

[AstaDK]

I try to move the provider to the top level but I still have the same issue above.