feat: Add book edit forms

georgegillams · Mar 9, 2024 · c61893a · c61893a
1 parent 880549a
commit c61893a
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 5 deletions.
diff --git a/src/components/Books/BooksList.js b/src/components/Books/BooksList.js
@@ -1,18 +1,76 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { BUTTON_TYPES } from '@george-gillams/components/button/constants';
 
 import { StyledBookCard, StyledButton, StyledFeatureCard } from './books-list.styles';
+import FormBuilder from '@george-gillams/components/form-builder';
 
 const BooksList = props => {
-  const { admin, books, deleteBook, linkPrefix, ...rest } = props;
+  const { admin, books, updateBook, deleteBook, linkPrefix, ...rest } = props;
+
+  // TODO Put this inside book editor component
+  const [updatedBook, setUpdatedBook] = useState({});
 
   return (
     <div {...rest}>
       {admin && <StyledFeatureCard title="Add a new book" href="/create-book" />}
       {books.map(book => (
         <div key={book.id}>
           <StyledBookCard key={`card_${book.id}`} book={book} linkPrefix={linkPrefix} withControls={!!deleteBook} />
+          {updateBook && (
+            <FormBuilder
+              formFields={[
+                {
+                  id: 'title',
+                  name: 'Title',
+                  show: true,
+                },
+                {
+                  id: 'author',
+                  name: 'Author',
+                  show: true,
+                },
+                {
+                  id: 'bookImage',
+                  name: 'Book image',
+                  show: true,
+                },
+                {
+                  id: 'recommendation',
+                  name: 'Recommendation',
+                  show: true,
+                },
+                {
+                  id: 'amazonLink',
+                  name: 'Amazon link',
+                  show: true,
+                },
+                {
+                  id: 'audibleLink',
+                  name: 'Audible link',
+                  show: true,
+                },
+                {
+                  id: 'status',
+                  name: 'Status',
+                  type: 'SELECT',
+                  options: [
+                    { value: 'toRead', name: 'Want to read' },
+                    { value: 'currentlyReading', name: 'Currently reading' },
+                    { value: 'using', name: 'Using' },
+                  ],
+                  show: true,
+                },
+              ]}
+              entity={book}
+              onDataChanged={book => {
+                console.log(`onDataChanged`, book);
+                setUpdatedBook(book);
+              }}
+              onSubmit={updateBook}
+              submitLabel={'Save'}
+            />
+          )}
           {deleteBook && (
             <StyledButton
               key={`delete_button_${book.id}`}

diff --git a/src/components/HomePageV2/LifeSection/homepage-card.styles.js b/src/components/HomePageV2/LifeSection/homepage-card.styles.js
@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 import { breakpointMd, spacingBase } from '@george-gillams/components/constants/layout';
 import { fontSizeMd } from '@george-gillams/components/constants/font';
 import Paragraph from '@george-gillams/components/paragraph';
-import Card from '@george-gillams/components/card';
+import Card from 'components/common/Card';
 import subsection from '@george-gillams/components/subsection';
 import Button from 'components/common/Button';
 import { HP_CARD_LAYOUT } from './HomepageCard-constants';

diff --git a/src/containers/Photography/Container.js b/src/containers/Photography/Container.js
@@ -10,7 +10,7 @@ import LoadingCover from '@george-gillams/components/loading-cover';
 import { ImageWrapper, LinkContainer, StyledImage } from './photography.styles';
 import PhotoGallery from 'components/photo-gallery';
 import { ANIMATIONS, ScrollAnimationWrapper, withScrollAnimation } from '@george-gillams/components/effects';
-import Button from 'components/common/Button/Button';
+import Button from 'components/common/Button';
 import IopMember from './images/iop-member.jpg';
 import GuildQualified from './images/guild-qualified.jpg';
 

diff --git a/src/containers/ReadingList/Container.js b/src/containers/ReadingList/Container.js
@@ -23,6 +23,10 @@ const ReadingList = props => {
 
   const admin = authenticatorState.user && authenticatorState.user.admin;
 
+  const updateBook = book => {
+    console.log(`updateBook`, book);
+  };
+
   return (
     <>
       <StyledPageContainer>
@@ -44,7 +48,12 @@ const ReadingList = props => {
           <>
             {booksToRender && (
               <ScrollAnimationWrapper>
-                <BooksList admin={admin} books={booksToRender} deleteBook={admin ? deleteBook : null} />
+                <BooksList
+                  admin={admin}
+                  books={booksToRender}
+                  updateBook={admin ? updateBook : null}
+                  deleteBook={admin ? deleteBook : null}
+                />
               </ScrollAnimationWrapper>
             )}
           </>