#7, Добавлена возможность редактирования цитат

src/components/FormToFill/FormToFill.js

@@ -14,6 +14,7 @@ const FormToFill = (props) => {
             <FormGroup>
                 <Label for="author">Author</Label>
                 <Input
+                    value={props.author}
                     type="text"
                     name="author"
                     id="author"
@@ -22,6 +23,7 @@ const FormToFill = (props) => {
             <FormGroup>
                 <Label for="category">Select</Label>
                 <Input
+                    value={props.category}
                     type="select"
                     name="category"
                     id="category"
@@ -32,7 +34,9 @@ const FormToFill = (props) => {
             </FormGroup>
             <FormGroup>
                 <Label for="text">Quote Text</Label>
-                <Input type="textarea"
+                <Input
+                    value={props.text}
+                        type="textarea"
                        name="text"
                        id="text"
                        onChange={props.inputHandler}

src/components/Header/Header.js

@@ -12,7 +12,7 @@ const Header = () => {
                         <NavLink className="nav-link" to="/quotes">Quotes</NavLink>
                     </NavItem>
                     <NavItem>
-                        <NavLink className="nav-link" to="/add-quote">Add Quote</NavLink>
+                        <NavLink className="nav-link" to="/add-quote">Add new quote</NavLink>
                     </NavItem>
                 </Nav>
             </Container>

src/components/Quote/Quote.js

 import React from 'react';
 import { Card, Button, CardFooter, CardBody,
     CardTitle, CardText } from 'reactstrap';
+import {NavLink} from "react-router-dom";
+
 
 const Quote = props => {
     return (
@@ -10,7 +12,7 @@ const Quote = props => {
                     <CardTitle className='text-uppercase font-weight-bold'>{props.author}</CardTitle>
                     <CardText>{props.text}</CardText>
                     <Button onClick={props.delete} className='mr-3' color='danger'>Delete</Button>
-                    <Button color='info'>Edit</Button>
+                    <Button tag={NavLink} to={`/quotes/${props.id}/edit`} color='info'>Edit</Button>
                 </CardBody>
                 <CardFooter className='text-muted'>{props.category}</CardFooter>
             </Card>

src/components/Sidebar/Sidebar.js

@@ -7,7 +7,7 @@ const Sidebar = () => {
 
     const printCategories = () => {
         return CATEGORIES.map(category => {
-            return <NavItem>
+            return <NavItem  key={`sidebar_${category.id}` }>
                 <NavLink className="nav-link"  to={'/quotes/' + category.id} >{category.title}</NavLink>
             </NavItem>
         })

src/containers/App.js

@@ -22,6 +22,7 @@ function App() {
                         <Route path="/" exact component={Quotes}/>
                         <Route path="/quotes/" exact component={Quotes}/>
                         <Route path="/quotes/:category" exact component={Quotes}/>
+                        <Route path="/quotes/:id/edit" exact component={QuoteForm}/>
                     </Switch>
                 </div>
             </Container>

src/containers/QuoteForm/QuoteForm.js

@@ -11,6 +11,25 @@ const QuoteForm = props => {
         text: ''
     });
 
+    useEffect(() => {
+        if (props.match.params.id) {
+            axios.get(`quotes/${props.match.params.id}.json`)
+                .then(
+                    response => {
+                        setQuoteInfo(response.data)
+                    }
+                )
+        }
+        else{
+            let resetQuoteInfo = {
+                author: '',
+                category: CATEGORIES[0].id,
+                text: ''
+            };
+            setQuoteInfo(resetQuoteInfo)
+        }
+    },[props.match.params.id]);
+
     const inputHandler = (e) => {
         setQuoteInfo({
             ...quoteInfo,
@@ -25,7 +44,7 @@ const QuoteForm = props => {
         }
 
         axios.post('/quotes.json', quoteInfo).then(
-            response => {
+            ()=> {
                 props.history.push('./')
             }
         )
@@ -34,7 +53,12 @@ const QuoteForm = props => {
 
     return (
         <div className='QuoteForm'>
-            <FormToFill submitQuote={submitQuote} inputHandler={inputHandler}/>
+            <FormToFill submitQuote={submitQuote}
+                        inputHandler={inputHandler}
+                        text={quoteInfo.text}
+                        category={quoteInfo.category}
+                        author={quoteInfo.author}
+            />
         </div>
     )
 };

src/containers/Quotes/Quotes.js

@@ -40,6 +40,7 @@ const Quotes = props => {
                           category={quotes[quote].category}
                           key={quote}
                           delete={() => deleteQuote(quote)}
+                          id={quote}
             />
         })
     };