514136c99a
Problem:
Prettier was not running when I saved Emacs buffers.
Why?
- prettier-js-mode needs needs node; lorri exposes node to direnv; direnv
exposes node to Emacs; lorri was not working as expected.
Solution:
Now that I'm using nix-buffer, I can properly expose node (and other
dependencies) to my Emacs buffers. Now Prettier is working.
Commentary:
Since prettier hadn't worked for so long, I stopped thinking about it. As such,
I did not include it as a dependency in boilerplate/typescript. I added it
now. I retroactively ran prettier across a few of my frontend projects to unify
the code styling.
I may need to run...
```shell
$ cd ~/briefcase
$ nix-shell
$ npx prettier --list-different "**/*.{js,ts,jsx,tsx,html,css,json}"
```
...to see which files I should have formatted.
49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
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;
|