refactor: Modify Context Provider

lib/context/PageContext.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+import useSessionStorage from "../hooks/useSessionStorage";
+
+export type PageDispatch = React.Dispatch<any>;
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const PageStateContext = React.createContext<number | undefined>(undefined);
+
+const PageDispatchContext = React.createContext<PageDispatch | undefined>(
+  undefined
+);
+
+const PageContextProvider = ({ children }: Props) => {
+  const [page, setPage] = useSessionStorage("offset", 0);
+  return (
+    <PageDispatchContext.Provider value={setPage}>
+      <PageStateContext.Provider value={page}>
+        {children}
+      </PageStateContext.Provider>
+    </PageDispatchContext.Provider>
+  );
+};
+
+export const usePageState = () => {
+  const state = React.useContext(PageStateContext);
+  if (!state) throw new Error("PageContextProvider not found");
+  return state;
+};
+
+export const usePageDispatch = () => {
+  const dispatch = React.useContext(PageDispatchContext);
+  if (!dispatch) throw new Error("PageContextProvider not found");
+  return dispatch;
+};
+
+export default PageContextProvider;

lib/context/PageCountContext.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+export type PageCountDispatch = React.Dispatch<any>;
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const PageCountStateContext = React.createContext<number | undefined>(
+  undefined
+);
+
+const PageCountDispatchContext = React.createContext<
+  PageCountDispatch | undefined
+>(undefined);
+
+const PageCountContextProvider = ({ children }: Props) => {
+  const [pageCount, setPageCount] = React.useState(1);
+  return (
+    <PageCountDispatchContext.Provider value={setPageCount}>
+      <PageCountStateContext.Provider value={pageCount}>
+        {children}
+      </PageCountStateContext.Provider>
+    </PageCountDispatchContext.Provider>
+  );
+};
+
+export const usePageCountState = () => {
+  const state = React.useContext(PageCountStateContext);
+  if (!state) throw new Error("PageCountContextProvider not found");
+  return state;
+};
+
+export const usePageCountDispatch = () => {
+  const dispatch = React.useContext(PageCountDispatchContext);
+  if (!dispatch) throw new Error("PageCountContextProvider not found");
+  return dispatch;
+};
+
+export default PageCountContextProvider;

lib/context/index.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+import PageContext from "./PageContext";
+import PageCountContext from "./PageCountContext";
+
+const ContextProvider = ({ children }) => (
+  <PageContext>
+    <PageCountContext>{children}</PageCountContext>
+  </PageContext>
+);
+
+export default ContextProvider;