rename and docs

yext · Oct 15, 2021 · f35b6ea · f35b6ea
1 parent 35ec45f
commit f35b6ea
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 15 deletions.
diff --git a/sample-app/src/App.tsx b/sample-app/src/App.tsx
@@ -1,7 +1,7 @@
 import './sass/App.scss';
 import VerticalSearchPage from './pages/VerticalSearchPage';
 import UniversalSearchPage from './pages/UniversalSearchPage';
-import BaseRouter from './BaseRouter';
+import PageRouter from './PageRouter';
 import Layout from './Layout';
 import { AnswersActionsProvider } from '@yext/answers-headless-react';
 import { universalResultsConfig } from './universalResultsConfig';
@@ -18,22 +18,22 @@ const routes = [
       page: <VerticalSearchPage verticalKey={key} />
     }
   })
-]
+];
 
-function App() {
+export default function App() {
   return (
     <AnswersActionsProvider
       apiKey='2d8c550071a64ea23e263118a2b0680b'
       experienceKey='slanswers'
       locale='en'
       verticalKey='people'
     >
-      <BaseRouter
-        Layout={Layout}
-        routes={routes}
-      />
+      <div className='App'>
+        <PageRouter
+          Layout={Layout}
+          routes={routes}
+        />
+      </div>
     </AnswersActionsProvider>
   );
 }
-
-export default App;
diff --git a/sample-app/src/Layout.tsx b/sample-app/src/Layout.tsx
@@ -2,6 +2,7 @@ import Navigation from './components/Navigation';
 import SearchBar from './components/SearchBar';
 import { useAnswersState } from '@yext/answers-headless-react';
 import { universalResultsConfig } from './universalResultsConfig';
+import { LayoutComponent } from './PageRouter';
 
 const navLinks = [
   {
@@ -14,16 +15,20 @@ const navLinks = [
   }))
 ]
 
-export default function Layout({ page }: { page: JSX.Element }) {
+/**
+ * A LayoutComponent that renders a page with a SearchBar and Navigation tabs.
+ */
+const Layout: LayoutComponent = ({ page }) => {
   const isVertical = useAnswersState(state => !!state.vertical.key);
   return (
-    <div className='App'>
+    <>
       <SearchBar
         placeholder='Search...'
         isVertical={isVertical}
       />
       <Navigation links={navLinks} />
       {page}
-    </div>
+    </>
   )
-}
+}
+export default Layout;
diff --git a/sample-app/src/BaseRouter.tsx → sample-app/src/PageRouter.tsx b/sample-app/src/BaseRouter.tsx → sample-app/src/PageRouter.tsx
@@ -7,12 +7,18 @@ interface RouteData {
   exact?: boolean
 }
 
+export type LayoutComponent = ComponentType<{ page: JSX.Element }>
+
 interface PageProps {
-  Layout?: ComponentType<{ page: JSX.Element }>
+  Layout?: LayoutComponent
   routes: RouteData[]
 }
 
-export default function BaseRouter({ Layout, routes }: PageProps) {
+/**
+ * PageRouter abstracts away logic surrounding react-router, and provides an easy way
+ * to specify a {@link LayoutComponent} for a page.
+ */
+export default function PageRouter({ Layout, routes }: PageProps) {
   const pages = routes.map(routeData => {
     const { path, page, exact } = routeData;
     if (Layout) {