styling done

Author: WojciechCendrzak

src/components/book-card/book-card.tsx

@@ -0,0 +1,71 @@
+import { Book, BookDetails } from '../../logic/store/book/book.models';
+import { Button, ButtonType } from '../button/button';
+import { generatePath } from 'react-router-dom';
+import { AppRoute } from '../../app/app.route.const';
+import { useCallback } from 'react';
+import { navigateTo } from '../../logic/navigation';
+import styled from 'styled-components';
+import { BookField } from '../../pages/home/components/book-field/book-field';
+import { translate, translationKeys } from '../../logic/translations/translation.service';
+
+interface BookCardProps {
+  book: Book;
+  bookDetails?: BookDetails;
+  bigImage?: boolean;
+  navigateToDetailsButton?: boolean;
+}
+
+export const BookCard: React.FC<BookCardProps> = ({
+  book,
+  bigImage = false,
+  navigateToDetailsButton = false,
+  bookDetails,
+}) => {
+  const { isbn13 } = book;
+
+  const bookPath = isbn13 && generatePath(AppRoute.Book, { isbn13 });
+
+  const handleSeeDetails = useCallback(() => bookPath && navigateTo(bookPath), [bookPath]);
+
+  return (
+    <Container>
+      <Image src={book.image} bigImage={bigImage} width={bigImage ? 300 : 150} height={bigImage ? 350 : 175} />
+      <Description>
+        <div>
+          <BookField field={translate(translationKeys.common.book.title)} value={book.title} />
+          <BookField field={translate(translationKeys.common.book.subtitle)} value={book.subtitle} />
+          <BookField field={translate(translationKeys.common.book.isbn13)} value={book.isbn13} />
+          <BookField field={translate(translationKeys.common.book.price)} value={book.price} />
+          {bookDetails && (
+            <>
+              <BookField field={translate(translationKeys.common.book.year)} value={bookDetails.year} />
+              <BookField field={translate(translationKeys.common.book.publisher)} value={bookDetails.publisher} />
+              <BookField field={translate(translationKeys.common.book.rating)} value={bookDetails.rating} />
+              <BookField field={translate(translationKeys.common.book.pages)} value={bookDetails.pages} />
+              <BookField field={translate(translationKeys.common.book.description)} value={bookDetails.desc} />
+            </>
+          )}
+        </div>
+        {navigateToDetailsButton && <Button title="See details" type={ButtonType.Primary} onClick={handleSeeDetails} />}
+      </Description>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 3rem;
+`;
+
+const Image = styled.img<{ bigImage: boolean }>`
+  margin: -25px;
+  margin: ${({ bigImage }) => (bigImage ? -50 : -25)}px;
+`;
+
+const Description = styled.div`
+  margin-left: 2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;

…ome/components/book-cards/book-cards.tsx src/components/book-cards/book-cards.tsxsrc/pages/home/components/book-cards/book-cards.tsx renamed to src/components/book-cards/book-cards.tsx src/pages/home/components/book-cards/book-cards.tsx renamed to src/components/book-cards/book-cards.tsx

@@ -1,7 +1,7 @@
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
-import { getBookCards } from '../../../../logic/store/book/book.selector';
-import { translate, translationKeys } from '../../../../logic/translations/translation.service';
+import { getBookCards } from '../../logic/store/book/book.selector';
+import { translate, translationKeys } from '../../logic/translations/translation.service';
 import { BookCard } from '../book-card/book-card';
 
 export const BookCards: React.FC = () => {
@@ -11,7 +11,7 @@ export const BookCards: React.FC = () => {
     <>
       <Title>{translate(translationKeys.common.searchForm.title)}</Title>
       {bookCards?.map((bookCard, index) => (
-        <BookCard key={index} book={bookCard} />
+        <BookCard key={index} book={bookCard} navigateToDetailsButton />
       ))}
     </>
   );

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

@@ -16,12 +16,12 @@ const fetchBooks$: RootEpic = (action$) =>
     map((result) => bookSlice.actions.setBooks({ books: result.books }))
   );
 
-const fetchNote$: RootEpic = (action$) =>
+const fetchBook$: RootEpic = (action$) =>
   action$.pipe(
     filter(bookSlice.actions.fetchBook.match),
     map(action => action.payload.isbn13),
     managed(switchMap((isbn13) => from(bookApi.fetchBook(isbn13)))),
-    map((book) => bookSlice.actions.setBook({ book }))
+    map((bookDetails) => bookSlice.actions.setBook({  bookDetails }))
   );
 
-export const bookEpic$ = combineEpics(fetchBooks$, fetchNote$);
+export const bookEpic$ = combineEpics(fetchBooks$, fetchBook$);

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

@@ -1,10 +1,10 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { Book } from './book.models';
+import { Book, BookDetails } from './book.models';
 import { ObjectByKey } from '../../object';
 
 export interface BookState {
   books?: Book[];
-  bookById?: ObjectByKey<Book>;
+  bookById?: ObjectByKey<BookDetails>;
 }
 
 const initialState: BookState = {};
@@ -18,11 +18,11 @@ export const bookSlice = createSlice({
     setBooks: (state, action: PayloadAction<{ books: Book[] }>) => {
       state.books = action.payload.books;
     },
-    setBook: (state, action: PayloadAction<{ book: Book }>) => {
-      const { book } = action.payload;
+    setBook: (state, action: PayloadAction<{ bookDetails: BookDetails }>) => {
+      const { bookDetails } = action.payload;
       if (!state.bookById) state.bookById = {};
-      if (book.isbn13) {
-        state.bookById[book.isbn13] = book;
+      if (bookDetails.isbn13) {
+        state.bookById[bookDetails.isbn13] = bookDetails;
       }
     },
   },

src/logic/translations/locales/en.ts

@@ -1,18 +1,21 @@
 export const en = {
   common: {
-    buttons: {},
+    buttons: {
+      back: 'Back',
+    },
     book: {
       title: 'Title',
       subtitle: 'Subtitle',
       isbn13: 'ISBN 13',
       price: 'Price',
+      description: 'Description',
+      year: 'Year',
+      publisher: 'Publisher',
+      rating: 'Rating',
+      pages: 'Pages',
     },
     searchForm: {
       title: 'Search results',
     },
   },
-  pages: {
-    home: {},
-    book: {},
-  },
 };

src/pages/book/book.page.tsx

@@ -6,31 +6,41 @@ import { bookSlice } from '../../logic/store/book/book.slice';
 import { Button, ButtonType } from '../../components/button/button';
 import { Layout } from '../../components/layout/layout';
 import { navigateBack } from '../../logic/navigation';
-
-import './book.styles.css';
+import { BookCard } from '../../components/book-card/book-card';
+import { translate, translationKeys } from '../../logic/translations/translation.service';
+import styled from 'styled-components';
 
 export const BookPage: React.FC = () => {
   const dispatch = useDispatch();
+
   const { isbn13 } =
     useParams<{
       isbn13: string;
     }>();
-  const book = useSelector(getBook(isbn13));
+  const bookDetails = useSelector(getBook(isbn13));
 
   useEffect(() => {
     dispatch(bookSlice.actions.fetchBook({ isbn13 }));
   }, [dispatch, isbn13]);
 
   const handleBack = useCallback(() => navigateBack(), []);
 
-  return book ? (
+  return bookDetails ? (
     <Layout>
-      <div className="note">
-        <div className="note-buttons">
-          <Button title="Back" type={ButtonType.Secondary} onClick={handleBack} />
-        </div>
-        <div className="note-content">{book.title || ''}</div>
-      </div>
+      <Buttons>
+        <Button
+          title={translate(translationKeys.common.buttons.back)}
+          type={ButtonType.Secondary}
+          onClick={handleBack}
+        />
+      </Buttons>
+      <BookCard book={bookDetails} bigImage bookDetails={bookDetails} />
     </Layout>
   ) : null;
 };
+
+const Buttons = styled.div`
+  justify-content: space-between;
+  display: flex;
+  margin-bottom: 4rem;
+`;

src/pages/book/book.styles.css

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { Layout } from '../../components/layout/layout';
 import { bookSlice } from '../../logic/store/book/book.slice';
-import { BookCards } from './components/book-cards/book-cards';
+import { BookCards } from '../../components/book-cards/book-cards';
 import { SearchForm } from './components/search-form/search-form';
 
 export const HomePage: React.FC = () => {