refactor: custom hook for route data

Author: moonmeister

examples/next/template-hierarchy/example-app/src/components/Layout.js

@@ -1,9 +1,8 @@
-import { useContext } from "react";
-import { RouteDataContext } from "@/lib/context";
+import { useRouteData } from "@/lib/context";
 import TemplateHierarchyInfo from "@/components/TemplateHierarchyInfo";
 
 export default function Layout({ children }) {
-  const { templateData, uri } = useContext(RouteDataContext);
+  const { templateData, uri } = useRouteData();
 
   return (
     <div className="layout">

examples/next/template-hierarchy/example-app/src/lib/context.js

@@ -1,3 +1,20 @@
 import React from "react";
 
-export const RouteDataContext = React.createContext();
+const RouteDataContext = React.createContext();
+
+export const useRouteData = () => {
+  const context = React.useContext(RouteDataContext);
+  if (!context) {
+    throw new Error(
+      "useRouteData must be used within a RouteDataContext.Provider"
+    );
+  }
+  return context;
+};
+export const RouteDataProvider = ({ children, value }) => {
+  return (
+    <RouteDataContext.Provider value={value}>
+      {children}
+    </RouteDataContext.Provider>
+  );
+};

examples/next/template-hierarchy/example-app/src/pages/[[...uri]].js

@@ -1,5 +1,5 @@
 import { uriToTemplate } from "@/lib/templateHierarchy";
-import { RouteDataContext } from "@/lib/context";
+import { RouteDataProvider } from "@/lib/context";
 import availableTemplates from "@/wp-templates";
 
 export default function Page(props) {
@@ -8,9 +8,9 @@ export default function Page(props) {
   const PageTemplate = availableTemplates[templateData.template?.id];
 
   return (
-    <RouteDataContext.Provider value={props}>
+    <RouteDataProvider value={props}>
       <PageTemplate {...props} />
-    </RouteDataContext.Provider>
+    </RouteDataProvider>
   );
 }