diff options
Diffstat (limited to 'users/wpcarro/website/sandbox/contentful/src')
6 files changed, 138 insertions, 0 deletions
diff --git a/users/wpcarro/website/sandbox/contentful/src/App.tsx b/users/wpcarro/website/sandbox/contentful/src/App.tsx new file mode 100644 index 0000000000..288f033218 --- /dev/null +++ b/users/wpcarro/website/sandbox/contentful/src/App.tsx @@ -0,0 +1,49 @@ +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/users/wpcarro/website/sandbox/contentful/src/contentful.ts b/users/wpcarro/website/sandbox/contentful/src/contentful.ts new file mode 100644 index 0000000000..02ebc92b68 --- /dev/null +++ b/users/wpcarro/website/sandbox/contentful/src/contentful.ts @@ -0,0 +1,27 @@ +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/users/wpcarro/website/sandbox/contentful/src/index.css b/users/wpcarro/website/sandbox/contentful/src/index.css new file mode 100644 index 0000000000..b5c61c9567 --- /dev/null +++ b/users/wpcarro/website/sandbox/contentful/src/index.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/users/wpcarro/website/sandbox/contentful/src/index.html b/users/wpcarro/website/sandbox/contentful/src/index.html new file mode 100644 index 0000000000..91752af916 --- /dev/null +++ b/users/wpcarro/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/users/wpcarro/website/sandbox/contentful/src/index.tsx b/users/wpcarro/website/sandbox/contentful/src/index.tsx new file mode 100644 index 0000000000..dc28dc4a9c --- /dev/null +++ b/users/wpcarro/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/users/wpcarro/website/sandbox/contentful/src/store.ts b/users/wpcarro/website/sandbox/contentful/src/store.ts new file mode 100644 index 0000000000..b02053d302 --- /dev/null +++ b/users/wpcarro/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 }); |