2020-03-24 14:27:30 +01:00
|
|
|
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();
|
2020-03-27 11:52:13 +01:00
|
|
|
const { isLoading, books } = useTypedSelector((state) => ({
|
2020-03-24 14:27:30 +01:00
|
|
|
isLoading: state.isLoading,
|
|
|
|
books: state.books,
|
|
|
|
}));
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
async function fetchData() {
|
|
|
|
const entries = await getClient().getEntries();
|
2020-03-27 11:52:13 +01:00
|
|
|
const books = entries.items.map((x) => x.fields) as Book[];
|
2020-03-24 14:27:30 +01:00
|
|
|
|
|
|
|
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>
|
2020-03-27 11:52:13 +01:00
|
|
|
{books.map((book) => (
|
2020-03-24 14:27:30 +01:00
|
|
|
<li key={book.title} className="py-3">
|
2020-03-27 11:52:13 +01:00
|
|
|
<p>
|
|
|
|
<span className="font-bold pr-3">{book.title}</span>
|
|
|
|
<span className="text-gray-600">{book.author}</span>
|
|
|
|
</p>
|
2020-03-24 14:27:30 +01:00
|
|
|
</li>
|
|
|
|
))}
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</Route>
|
|
|
|
</Switch>
|
|
|
|
</Router>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default App;
|