import { useHistory } from 'react-router';
import { useQueries } from "@trz/hooks";

/* -------------------------------------------------------------------------- */
// App.tsx
function TestComponent(): ReactElement {
  const [ queries, setQueries ] = useQueries({ pageSize: 10, pageNo: 1 });
  
  const _clickHandler = useCallback(() => {
    setQueries((queries) => {
      return { ...queries, pageNo: 2};
    });
    //Redirect => /index?pageNo=2&pageSize=10
  }, [])
  
  useLayoutEffect(() => {
    console.log(queries.pageSize, queries.pageNo);
    //print => 10 1
  }, [ queries ]);
  
  
  return (
    <Some.Component>
      <Link to={`/index?pageNo=${queries.pageNo - 1}&pageSize=${queries.pageSize}`}>Prev</Link>
      <Link to={`/index?pageNo=${queries.pageNo + 1}&pageSize=${queries.pageSize}`}>Next</Link>
      
      <Button
        onClick={() => {
          setQueries({ pageNo: 2 });
          //Redirect => /index?pageNo=2
        }}>
        Click me
      </Button>
      
      <Button
        onClick={_clickHandler}>
        Click me
      </Button>
    </<Some.Component>>
  );
}