Add sandbox project using Contentful CMS

I used the boilerplate/typescript project as a starting point. This project fetches and renders books that I'm defining in a Contentful CMS that I created.
author: William Carroll <wpcarro@gmail.com> 2020-03-24T13·27+0000
committer: William Carroll <wpcarro@gmail.com> 2020-03-24T13·27+0000
commit: 527aeeeced9fdcc2fc3a6a08c58ceb3a17ae2122 (patch)
tree: 0d7d31079c2b7e1791e4726ca47ff25a812e325e /website/sandbox/contentful/src
parent: 57b58e9b2fe2a1b178f42bc16d7c5ab1f8da9cdd (diff)
6 files changed, 133 insertions, 0 deletions
diff --git a/website/sandbox/contentful/src/App.tsx b/website/sandbox/contentful/src/App.tsx
new file mode 100644
index 000000000000..6342bfc98dd6
--- /dev/null
+++ b/website/sandbox/contentful/src/App.tsx
@@ -0,0 +1,46 @@
+import React, { useEffect } from "react";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import { useDispatch } from "react-redux";
+import { actions, useTypedSelector } from "./store";
+import { Link } from "react-router-dom";
+import { getClient } from "./contentful";
+import type { Book } from "./store";
+
+const App: React.FC = () => {
+  const dispatch = useDispatch();
+  const { isLoading, books } = useTypedSelector(state => ({
+    isLoading: state.isLoading,
+    books: state.books,
+  }));
+
+  useEffect(() => {
+    async function fetchData() {
+      const entries = await getClient().getEntries();
+      const books = entries.items.map(x => x.fields) as Book[];
+
+      dispatch(actions.setBooks(books));
+    }
+    fetchData();
+  }, []);
+
+  return (
+    <Router>
+      <Switch>
+        <Route exact path="/">
+          <div className="container mx-auto">
+            <h1 className="py-6 text-2xl">Books</h1>
+            <ul>
+              {books.map(book => (
+                <li key={book.title} className="py-3">
+                  <p><span className="font-bold pr-3">{book.title}</span><span className="text-gray-600">{book.author}</span></p>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </Route>
+      </Switch>
+    </Router>
+  );
+};
+
+export default App;
diff --git a/website/sandbox/contentful/src/contentful.ts b/website/sandbox/contentful/src/contentful.ts
new file mode 100644
index 000000000000..e09cd8fc4ad3
--- /dev/null
+++ b/website/sandbox/contentful/src/contentful.ts
@@ -0,0 +1,25 @@
+import { createClient } from "contentful";
+import type { ContentfulClientApi } from "contentful";
+
+const space = process.env.CONTENTFUL_SPACE_ID;
+const accessToken = process.env.CONTENTFUL_ACCESS_TOKEN;
+
+let client: ContentfulClientApi;
+
+// Idempotent way to get a reference to the Contentful client.
+export const getClient = (): ContentfulClientApi => {
+  if (typeof client !== 'undefined') {
+    return client;
+  } else {
+    if (typeof space === 'string' && typeof accessToken === 'string') {
+      let client = createClient({
+        space,
+        accessToken,
+      });
+
+      return client;
+    } else {
+      throw new Error('Please set CONTENTFUL_SPACE_ID and CONTENTFUL_ACCESS_TOKEN');
+    }
+  }
+}
diff --git a/website/sandbox/contentful/src/index.css b/website/sandbox/contentful/src/index.css
new file mode 100644
index 000000000000..b5c61c956711
--- /dev/null
+++ b/website/sandbox/contentful/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/website/sandbox/contentful/src/index.html b/website/sandbox/contentful/src/index.html
new file mode 100644
index 000000000000..05dd7ad95e79
--- /dev/null
+++ b/website/sandbox/contentful/src/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="./index.css">
+  </head>
+  <body>
+    <div id="mount"></div>
+    <script src="./index.tsx"></script>
+  </body>
+</html>
diff --git a/website/sandbox/contentful/src/index.tsx b/website/sandbox/contentful/src/index.tsx
new file mode 100644
index 000000000000..dc28dc4a9cc8
--- /dev/null
+++ b/website/sandbox/contentful/src/index.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import { Provider } from "react-redux";
+import store from "./store";
+
+ReactDOM.render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById("mount")
+);
diff --git a/website/sandbox/contentful/src/store.ts b/website/sandbox/contentful/src/store.ts
new file mode 100644
index 000000000000..c4396d681a17
--- /dev/null
+++ b/website/sandbox/contentful/src/store.ts
@@ -0,0 +1,36 @@
+import { createSlice, configureStore, PayloadAction } from "@reduxjs/toolkit";
+import { useSelector, TypedUseSelectorHook } from "react-redux";
+
+export interface Book {
+  title: string;
+  author: string;
+  // TODO(wpcarro): Prefer datetime type here.
+  publicationDate: string;
+}
+
+export interface State {
+  isLoading: boolean;
+  books: Book[];
+}
+
+const initialState: State = {
+  isLoading: true,
+  books: [],
+};
+
+export const { actions, reducer } = createSlice({
+  name: "application",
+  initialState,
+  reducers: {
+    toggleIsLoading: state => ({ ...state, isLoading: !state.isLoading }),
+    setBooks: (state, action) => ({ ... state, books: action.payload }),
+  }
+});
+
+/**
+ * Defining and consuming this allows us to avoid annotating State in all of our
+ * selectors.
+ */
+export const useTypedSelector: TypedUseSelectorHook<State> = useSelector;
+
+export default configureStore({ reducer });
author	William Carroll <wpcarro@gmail.com>	2020-03-24T13·27+0000
committer	William Carroll <wpcarro@gmail.com>	2020-03-24T13·27+0000
commit	527aeeeced9fdcc2fc3a6a08c58ceb3a17ae2122 (patch)
tree	0d7d31079c2b7e1791e4726ca47ff25a812e325e /website/sandbox/contentful/src
parent	57b58e9b2fe2a1b178f42bc16d7c5ab1f8da9cdd (diff)