maurice/snix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

subtree(users/wpcarro): docking briefcase at '24f5a642'

Browse source 
git-subtree-dir: users/wpcarro
git-subtree-mainline: 464bbcb15c
git-subtree-split: 24f5a642af
Change-Id: I6105b3762b79126b3488359c95978cadb3efa789
This commit is contained in:
Vincent Ambo 2021-12-14 01:51:19 +03:00
commit 019f8fd211
766 changed files with 175420 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

49
users/wpcarro/website/sandbox/contentful/src/App.tsx Normal file
View file

@ -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;

27
users/wpcarro/website/sandbox/contentful/src/contentful.ts Normal file
View file

@ -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"
);
}
}
};

3
users/wpcarro/website/sandbox/contentful/src/index.css Normal file
View file

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

11
users/wpcarro/website/sandbox/contentful/src/index.html Normal file
View file

@ -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>

12
users/wpcarro/website/sandbox/contentful/src/index.tsx Normal file
View file

@ -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")
);

36
users/wpcarro/website/sandbox/contentful/src/store.ts Normal file
View file

@ -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 });