2.1.3: Better support adding new dynamic pages

clarkmalmgren · May 9, 2020 · f28e43d · f28e43d
1 parent 6395071
commit f28e43d
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bolingbrook-church",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.9.9",

diff --git a/src/App.tsx b/src/App.tsx
@@ -2,15 +2,14 @@ import { ThemeProvider } from '@material-ui/styles'
 import { createBrowserHistory } from 'history'
 import React, { FunctionComponent } from 'react'
 import { Provider } from 'react-redux'
-import { Route, Router, Switch } from 'react-router'
+import { Router } from 'react-router'
+import { BCSwitch } from './bc-switch'
 import Banner from './components/banner'
 import Box from './components/box'
 import Footer from './components/footer'
 import Header from './components/header'
-import { ContentfulPage } from './contentful/page'
-import * as Routes from './pages/index'
-import theme from './theme'
 import { NavWatcher } from './components/nav-watcher'
+import theme from './theme'
 
 const history = createBrowserHistory()
 
@@ -28,30 +27,8 @@ const App: FunctionComponent<AppProps> =
             <Header />
             <Banner />
             <Box variant="main">
-              <Switch>
-                <Route exact path="/"                     component={() => <ContentfulPage path='/' />} />
-                <Route exact path="/about"                component={() => <ContentfulPage path='/about' />} />
-                <Route exact path="/location"             component={Routes.Location} />
-                <Route exact path="/connect"              component={Routes.Connect} />
-                <Route exact path="/friends-and-family"   component={() => <ContentfulPage path='/friends-and-family' />}  />
-                <Route exact path="/giving"               component={() => <ContentfulPage path='/giving' />}  />
-                <Route exact path="/shop-bc"              component={Routes.ShopBC} />
-                <Route exact path="/meet-us"              component={() => <ContentfulPage path='/meet-us' />}  />
-                <Route exact path="/newsletter"           component={Routes.Newsletter} />
-                <Route exact path="/sermons/:id"          component={Routes.Sermon} />
-                <Route exact path="/sermons"              component={Routes.Sermons} />
-                <Route exact path="/serve"                component={Routes.Serve} />
-                <Route exact path="/thank-you"            component={() => <ContentfulPage path='/thank-you' />}  />
-                <Route exact path="/refuel"               component={() => <ContentfulPage path='/refuel' />}  />
-
-                <Route exact path="/admin"                component={Routes.AdminPage} />
-                <Route exact path="/admin/login"          component={Routes.Login} />
-                <Route exact path="/admin/sermons"        component={Routes.EditSermons} />
-                <Route exact path="/admin/sermons/new"    component={Routes.NewSermon} />
-                <Route exact path="/admin/sermons/:id"    component={Routes.EditSermon} />
-                <Route                                    component={ContentfulPage} />
-              </Switch>
-              </Box>
+              <BCSwitch />
+            </Box>
             <Footer />
           </Router>
         </Provider>

diff --git a/src/bc-switch.tsx b/src/bc-switch.tsx
@@ -0,0 +1,57 @@
+import React, { FunctionComponent, useEffect, useState } from 'react'
+import { Route, Switch } from 'react-router'
+import { ContentfulPage, PageData } from './contentful/page'
+import * as Routes from './pages/index'
+import { client } from './services/contentful'
+
+export const BCSwitch: FunctionComponent<{}> =
+  () => {
+    const [pages, setPages] = useState([] as string[])
+
+    useEffect(() => {
+      if (!pages.length) {
+        client
+          .getEntries<PageData>({ content_type: 'page' })
+          .then(collection => {
+            console.log(collection.items.map(e => e.fields.path))
+            setPages(collection.items.map(e => e.fields.path))
+          })
+      }
+    })
+
+    if (pages.length === 0) {
+      return null
+    }
+
+    return (
+      <Switch>
+        <Route exact path="/"                     component={() => <ContentfulPage path='/' />} />
+        <Route exact path="/about"                component={() => <ContentfulPage path='/about' />} />
+        <Route exact path="/location"             component={Routes.Location} />
+        <Route exact path="/connect"              component={Routes.Connect} />
+        <Route exact path="/friends-and-family"   component={() => <ContentfulPage path='/friends-and-family' />}  />
+        <Route exact path="/giving"               component={() => <ContentfulPage path='/giving' />}  />
+        <Route exact path="/shop-bc"              component={Routes.ShopBC} />
+        <Route exact path="/meet-us"              component={() => <ContentfulPage path='/meet-us' />}  />
+        <Route exact path="/newsletter"           component={Routes.Newsletter} />
+        <Route exact path="/sermons/:id"          component={Routes.Sermon} />
+        <Route exact path="/sermons"              component={Routes.Sermons} />
+        <Route exact path="/serve"                component={Routes.Serve} />
+        <Route exact path="/thank-you"            component={() => <ContentfulPage path='/thank-you' />}  />
+
+        <Route exact path="/admin"                component={Routes.AdminPage} />
+        <Route exact path="/admin/login"          component={Routes.Login} />
+        <Route exact path="/admin/sermons"        component={Routes.EditSermons} />
+        <Route exact path="/admin/sermons/new"    component={Routes.NewSermon} />
+        <Route exact path="/admin/sermons/:id"    component={Routes.EditSermon} />
+
+        {
+          pages.map(path => (<Route key={path} exact path={path} component={() => <ContentfulPage path={path} />} />))
+        }
+
+        <Route                                    component={ContentfulPage} />
+    </Switch>
+    )
+
+
+  }
diff --git a/src/contentful/page.tsx b/src/contentful/page.tsx
@@ -8,7 +8,7 @@ import { Typography } from '@material-ui/core'
 import { useLocation } from 'react-router'
 import Box from '../components/box'
 
-interface PageData {
+export interface PageData {
   name: string
   path: string
   hero: Entry<HeroData>