it api done

Author: WojciechCendrzak

package.json

@@ -10,6 +10,10 @@
     "prettify": "prettier --config ./.prettierrc.js -w ./src"
   },
   "dependencies": {
+    "babel-plugin-styled-components": "^1.12.0",
+    "beprofiler": "^0.2.3",
+    "i18n-keys": "^1.0.8",
+    "i18next": "^20.3.1",
     "@reduxjs/toolkit": "^1.5.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
@@ -26,13 +30,18 @@
     "redux-logger": "^3.0.6",
     "redux-observable": "^1.2.0",
     "rxjs": "^6.6.7",
-    "typescript": "^4.1.2"
+    "typescript": "^4.1.2",
+    "styled-components": "^5.3.0",
+    "tailwindcss": "^2.1.4",
+    "twin.macro": "^2.4.2"
   },
   "devDependencies": {
+    "@types/styled-components": "^5.1.9",
     "@types/react-router-dom": "^5.1.7",
     "@types/redux-logger": "^3.0.8",
     "prettier": "^2.3.0"
   },
+  "proxy": "https://api.itbook.store/1.0",
   "eslintConfig": {
     "extends": [
       "react-app",

src/app/app.route.const.ts

@@ -1,5 +1,5 @@
 export enum AppRoute {
   Home = '/',
-  Book = '/book/:id',
+  Book = '/book/:isbn13',
   NotFound = '/not-found',
 }

src/logic/environment.ts

@@ -1 +1,5 @@
 export const isProduction = () => process.env.NODE_ENV === 'production';
+
+export const getEnv = () => ({
+  NODE_ENV: process.env.NODE_ENV,
+});

src/logic/operators/managed.operator.ts

@@ -8,6 +8,7 @@ export const managed: Managed = (operator) =>
     of(action).pipe(
       operator,
       catchError((error: Error) => {
+        console.log(error);
         alert(error.message);
         return EMPTY;
       })

src/logic/store/book/book.api.ts

@@ -1,10 +1,8 @@
-import { Book } from './book.models';
+import { BookDetails, BookSearchResult } from './book.models';
 
 export const bookApi = {
-  fetchBooks: async () => {
-    return [] as Book[];
-  },
-  fetchBook: async (id: string) => {
-    return {} as Book;
-  },
+  fetchBooks: async (searchPhrase: string): Promise<BookSearchResult> =>
+    (await fetch(`/search/${searchPhrase}`)).json(),
+
+  fetchBook: async (isbn13: string): Promise<BookDetails> => (await fetch(`/books/${isbn13}`)).json(),
 };

src/logic/store/book/book.epic.ts

@@ -11,14 +11,16 @@ const fetchBooks$: RootEpic = (action$) =>
   action$.pipe(
     filter(bookSlice.actions.fetchBooks.match),
     throttleTime(AVOID_QUICK_MULTIPLY_API_CALLS_TIMEOUT_MS),
-    managed(switchMap(() => from(bookApi.fetchBooks()))),
-    map((books) => bookSlice.actions.setBooks({ books }))
+    map((action) => action.payload.searchPhrase),
+    managed(switchMap((searchPhrase) => from(bookApi.fetchBooks(searchPhrase)))),
+    map((result) => bookSlice.actions.setBooks({ books: result.books }))
   );
 
 const fetchNote$: RootEpic = (action$) =>
   action$.pipe(
     filter(bookSlice.actions.fetchBook.match),
-    managed(switchMap((action) => from(bookApi.fetchBook(action.payload.id)))),
+    map(action => action.payload.isbn13),
+    managed(switchMap((isbn13) => from(bookApi.fetchBook(isbn13)))),
     map((book) => bookSlice.actions.setBook({ book }))
   );
 

src/logic/store/book/book.models.ts

@@ -1,5 +1,35 @@
 export interface Book {
-  id?: string;
-  date?: string;
-  content?: string;
+  title?: string;
+  subtitle?: string;
+  isbn13?: string;
+  price?: string;
+  image?: string;
+  url?: string;
+}
+
+export interface BookSearchResult {
+  error?: string;
+  total?: string;
+  page?: string;
+  books: Book[];
+}
+
+export interface BookDetails {
+  error?: string;
+  title?: string;
+  subtitle?: string;
+  authors?: string;
+  publisher?: string;
+  isbn10?: string;
+  isbn13?: string;
+  pages?: string;
+  year?: string;
+  rating?: string;
+  desc: string;
+  price?: string;
+  image?: string;
+  url?: string;
+  pdf: {
+    [x: string]: string;
+  };
 }

src/logic/store/book/book.selector.ts

@@ -1,5 +1,5 @@
 import { StoreState } from '../../../app/app.reducers';
 
-export const getBooks = (store: StoreState) => store.book.books;
+export const getBookCards = (store: StoreState) => store.book.books;
 
-export const getBook = (id: string) => (store: StoreState) => store.book.bookById[id];
+export const getBook = (id: string) => (store: StoreState) => store.book.bookById && store.book.bookById[id];

src/logic/store/book/book.slice.ts

@@ -3,28 +3,26 @@ import { Book } from './book.models';
 import { ObjectByKey } from '../../object';
 
 export interface BookState {
-  books: Book[];
-  bookById: ObjectByKey<Book>;
+  books?: Book[];
+  bookById?: ObjectByKey<Book>;
 }
 
-const initialState: BookState = {
-  books: [],
-  bookById: {},
-};
+const initialState: BookState = {};
 
 export const bookSlice = createSlice({
   name: 'book',
   initialState,
   reducers: {
     fetchBooks: (_state, _action: PayloadAction<{ searchPhrase: string }>) => undefined,
-    fetchBook: (_state, _action: PayloadAction<{ id: string }>) => undefined,
+    fetchBook: (_state, _action: PayloadAction<{ isbn13: string }>) => undefined,
     setBooks: (state, action: PayloadAction<{ books: Book[] }>) => {
       state.books = action.payload.books;
     },
     setBook: (state, action: PayloadAction<{ book: Book }>) => {
       const { book } = action.payload;
-      if (book.id) {
-        state.bookById[book.id] = book;
+      if (!state.bookById) state.bookById = {};
+      if (book.isbn13) {
+        state.bookById[book.isbn13] = book;
       }
     },
   },

src/pages/book/book.page.tsx

@@ -11,15 +11,15 @@ import './book.styles.css';
 
 export const BookPage: React.FC = () => {
   const dispatch = useDispatch();
-  const { id } =
+  const { isbn13 } =
     useParams<{
-      id: string;
+      isbn13: string;
     }>();
-  const book = useSelector(getBook(id));
+  const book = useSelector(getBook(isbn13));
 
   useEffect(() => {
-    dispatch(bookSlice.actions.fetchBook({ id }));
-  }, [dispatch, id]);
+    dispatch(bookSlice.actions.fetchBook({ isbn13 }));
+  }, [dispatch, isbn13]);
 
   const handleBack = useCallback(() => navigateBack(), []);
 
@@ -29,7 +29,7 @@ export const BookPage: React.FC = () => {
         <div className="note-buttons">
           <Button title="Back" type={ButtonType.Secondary} onClick={handleBack} />
         </div>
-        <div className="note-content">{book.content || ''}</div>
+        <div className="note-content">{book.title || ''}</div>
       </div>
     </Layout>
   ) : null;