update branch effector

README.md

@@ -5,7 +5,7 @@ kaspersky react test-task
 * [React](https://github.com/facebook/react/)
 * [Redux](https://github.com/reduxjs/redux)
 * [Webpack](https://github.com/webpack/webpack)
-* [@reach/router](https://github.com/reach/router)
+* [wouter](https://github.com//molefrog/wouter)
 * [Material UI](https://github.com/mui-org/material-ui)
 
 ## Установка и запуск проекта
@@ -20,4 +20,4 @@ kaspersky react test-task
 
 `src` - картинки, шрифты, css, etc
 
-`webpack` - модули вебпака
+`webpack` - модули вебпака

app/components/BookForm/BookForm.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Match } from '@reach/router';
 
 import { Field, Form } from 'react-final-form';
 import arrayMutators from 'final-form-arrays';
@@ -61,10 +60,10 @@ export const BookForm = ({ edit, onAddBook, onEditBook, book }) => {
     const newBook = { id: nextid.toString(), ...values };
 
     if (edit) {
-      return onEditBook(values);
+      onEditBook(values);
     }
     onAddBook(newBook);
-    return formApi.reset();
+    setTimeout(formApi.reset)
   };
   return (
     <Paper style={style.paper}>
@@ -79,16 +78,16 @@ export const BookForm = ({ edit, onAddBook, onEditBook, book }) => {
           ...arrayMutators
         }}
         render={({
-                   handleSubmit,
-                   form: {
-                     mutators: { push, pop },
-                     submitting,
-                     pristine
-                   },
-                   values
-                 }) => (
+          handleSubmit,
+          form: {
+            mutators: { push, pop },
+            submitting,
+            pristine
+          },
+          values
+        }) => (
           <form onSubmit={handleSubmit}>
-            <Grid container spacing={16} style={style.form} direction="column">
+            <Grid container spacing={2} style={style.form} direction="column">
               <Grid item xs>
                 <Field
                   name="title"
@@ -112,9 +111,9 @@ export const BookForm = ({ edit, onAddBook, onEditBook, book }) => {
                 <FieldArray name="authors" validate={validateAuthors}>
                   {({ fields }) =>
                     fields.map((name, index) => (
-                      <Grid container key={name} alignItems="center" spacing={8}>
+                      <Grid container key={name} alignItems="center" spacing={2}>
                         <Grid item>
-                          <Typography>{`Автор #${index + 1}`}</Typography>
+                          <Typography variant="overline">{`Автор #${index + 1}`}</Typography>
                         </Grid>
                         <Grid item xs>
                           <Field
@@ -164,7 +163,7 @@ export const BookForm = ({ edit, onAddBook, onEditBook, book }) => {
                 <Field
                   name="publishYear"
                   component={TextFieldAdapter}
-                  type="year"
+                  type="month"
                   label="Год публикации"
                   InputLabelProps={{
                     shrink: true
@@ -186,22 +185,17 @@ export const BookForm = ({ edit, onAddBook, onEditBook, book }) => {
                 <Field name="ISBN" component={TextFieldAdapter} type="text" label="ISBN" />
               </Grid>
             </Grid>
-            <Match path="/book/*">
-              {({ match }) =>
-                match && (
-                  <Zoom in={Boolean(match)} unmountOnExit>
-                    <Fab
-                      color="primary"
-                      style={style.fab}
-                      type="submit"
-                      disabled={submitting || pristine}
-                    >
-                      {edit ? <Save /> : <AddIcon />}
-                    </Fab>
-                  </Zoom>
-                )
-              }
-            </Match>
+
+            <Zoom in unmountOnExit>
+              <Fab
+                color="primary"
+                style={style.fab}
+                type="submit"
+                disabled={submitting || pristine}
+              >
+                {edit ? <Save /> : <AddIcon />}
+              </Fab>
+            </Zoom>
           </form>
         )}
       />

app/components/BookForm/styles.js

@@ -1,8 +1,7 @@
 export const style = {
   paper: {
     width: '50%',
-    margin: 16,
-    padding: 8
+    padding: 16
   },
   typo: {
     margin: 8

app/components/BooksList/BooksList.jsx

@@ -23,4 +23,3 @@ export function BooksList({ books, onDeleteBook }) {
     />
   ));
 }
-

app/components/BooksListItem/BookListItem.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { navigate } from '@reach/router';
+import { useLocation } from 'wouter';
 import { makeStyles } from '@material-ui/styles';
 import Grid from '@material-ui/core/Grid';
+import Box from '@material-ui/core/Box';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import ButtonBase from '@material-ui/core/ButtonBase';
@@ -14,7 +15,7 @@ const useStyles = makeStyles(theme => ({
   root: {
     flexGrow: 1,
     maxWidth: 600,
-    padding: theme.spacing.unit * 2
+    padding: theme.spacing(2)
   },
   image: {
     width: 128
@@ -50,16 +51,17 @@ export function BooksListItem({
   onDeleteBook
 }) {
   const classes = useStyles();
+  const [, navigate] = useLocation();
   return (
-    <Paper className={classes.root} style={{ margin: 16 }}>
-      <Grid container spacing={16}>
+    <Paper className={classes.root} component={Box} m={1}>
+      <Grid container spacing={1}>
         <Grid item>
           <ButtonBase className={classes.image}>
             <img className={classes.img} alt={title} src={image} style={{ objectFit: 'contain' }} />
           </ButtonBase>
         </Grid>
         <Grid item xs={6} sm container>
-          <Grid item xs container direction="row" spacing={16} style={{ width: 'auto' }}>
+          <Grid item xs container direction="row" spacing={1} style={{ width: 'auto' }}>
             <Grid item xs>
               <Typography gutterBottom variant="h5">
                 {title}

app/components/Link/Link.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Link } from 'wouter';
+
+export const LinkBehavior = React.forwardRef((props, ref) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  <Link ref={ref} {...props} />
+));

app/components/Link/index.js

@@ -0,0 +1 @@
+export { LinkBehavior } from './Link.jsx';

app/pages/Book/AddBook/AddBook.jsx

@@ -0,0 +1,26 @@
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import Grid from '@material-ui/core/Grid';
+import { BookForm } from 'components/BookForm';
+
+import { addBookAction, editBookAction } from 'actions/book';
+
+function getBookSelector(books, id) {
+  return books.find(book => book.id === id);
+}
+
+export function AddBookPage({ id, edit }) {
+  const dispatch = useDispatch();
+
+  const book = useSelector(({ books }) => getBookSelector(books, id));
+
+  const editBook = useCallback(bookId => dispatch(editBookAction(bookId)), [dispatch]);
+  const addBook = useCallback(newBook => dispatch(addBookAction(newBook)), [dispatch]);
+
+  return (
+    <Grid container justify="center" component="main">
+      <BookForm onAddBook={addBook} onEditBook={editBook} edit={edit} book={book} />
+    </Grid>
+  );
+}

app/pages/Book/AddBook/index.js

@@ -0,0 +1 @@
+export { AddBookPage } from './AddBook';

app/pages/Home/HomePage.jsx

@@ -0,0 +1,32 @@
+import React, { useEffect, useCallback } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+
+import Grid from '@material-ui/core/Grid';
+
+import { BooksList } from 'components/BooksList';
+
+import { deleteBookAction, editBookAction, getBooksAction } from 'actions/book';
+
+export function HomePage() {
+  const dispatch = useDispatch();
+  const { books, loaded } = useSelector(state => ({ books: state.books, loaded: state.loaded }));
+
+  const getBooks = useCallback(() => dispatch(getBooksAction()), [dispatch]);
+  const editBook = useCallback(book => dispatch(editBookAction(book)), [dispatch]);
+  const deleteBook = useCallback(id => dispatch(deleteBookAction(id)), [dispatch]);
+
+  useEffect(() => {
+    if (books.length === 0) {
+      console.log(books.length);
+      getBooks();
+    }
+  }, [getBooks, loaded, books.length]);
+
+  if (!loaded) return null;
+
+  return (
+    <Grid container justify="center" component="main">
+      <BooksList books={books} onEditBook={editBook} onDeleteBook={deleteBook} />
+    </Grid>
+  );
+}

app/pages/Home/index.js

@@ -0,0 +1 @@
+export { HomePage } from './HomePage';