CODEWITHSUNDEEP
javascriptarraysreactjstypescriptlocal-storage
Tayshawn Hill
Tayshawn Hill

Reputation: 85

How to keep the current state of a page after a refresh? - React

I am using a custom pagination component that paginates the data from an array. When a user goes to a certain page and refreshes, it takes the user back to the first page. I am thinking I can use Local Storage to handle this. See below:

export interface PublicProps {
  ID: number;
}
const PAGE_SIZE: number = 10;

export const TestPage: React.FC<PublicProps> = ({ ID }) => {
  const [currentPage, setCurrentPage] = useState<number>(1);

  
  const suitesForProject = SOME DATA FROM AN ARRAY 

  const totalPages = suitesForProject.length
    ? Math.ceil(suitesForProject.length / PAGE_SIZE)
    : 0;

  const handleClickNext = () => {
    if (!suitesForProject.length) {
      return;
    }
    setCurrentPage((currentPage) => Math.min(currentPage + 1));
  };

  const handleClickPrev = () => {
    if (!suitesForProject.length || currentPage === 1) {
      return;
    }
    setCurrentPage((currentPage) => currentPage - 1);
  };

  return (
    <>
      {suitesForProject
        .slice((currentPage - 1) * PAGE_SIZE, PAGE_SIZE * currentPage)
        .map((suitesForProject) => (
          //doing stuff with the data here
        ))}
      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        onClickPrevious={handleClickPrev}
        onClickNext={handleClickNext}
        previousPageButtonAriaLabel="To previous page"
        nextPageButtonAriaLabel="To next page"
      />
    </>
  );
};

Is there a way to handle this?

Upvotes: 1

Views: 2048

Answers (2)

Toxnyc
Toxnyc

Reputation: 1350

You can do something like this..

export interface PublicProps {
  ID: number;
}
const PAGE_SIZE: number = 10;

const PAGE_KEY = "MY_PAGINATION_KEY";

const getPageNumber = () => {
  if(localStorage && parseInt(localStorage.getItem(PAGE_KEY)) > 0) {
    return parseInt(localStorage.getItem(PAGE_KEY));
  }
  return 1;
}

export const TestPage: React.FC<PublicProps> = ({ ID }) => {
  const [currentPage, setCurrentPage] = useState<number>(getPageNumber());

  
  const suitesForProject = SOME DATA FROM AN ARRAY 

  const totalPages = suitesForProject.length
    ? Math.ceil(suitesForProject.length / PAGE_SIZE)
    : 0;

  const handleClickNext = () => {
    if (!suitesForProject.length) {
      return;
    }
    localStorage.setItem(PAGE_KEY, currentPage +1)
    setCurrentPage((currentPage) => Math.min(currentPage + 1));
  };

  const handleClickPrev = () => {
    if (!suitesForProject.length || currentPage === 1) {
      return;
    }
    localStorage.setItem(PAGE_KEY, currentPage - 1)
    setCurrentPage((currentPage) => currentPage - 1);
  };

  return (
    <>
      {suitesForProject
        .slice((currentPage - 1) * PAGE_SIZE, PAGE_SIZE * currentPage)
        .map((suitesForProject) => (
          //doing stuff with the data here
        ))}
      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        onClickPrevious={handleClickPrev}
        onClickNext={handleClickNext}
        previousPageButtonAriaLabel="To previous page"
        nextPageButtonAriaLabel="To next page"
      />
    </>
  );
};

Upvotes: 1

Kirill Skomarovskiy
Kirill Skomarovskiy

Reputation: 1565

useState has lazy loading. It is looks like useState(() => 1); function as first arg is lazy function which called once. Inside this function read localStorage by key, parse value and if it is number return it, else return 1.

Upvotes: 2

Related Questions