#4, Реализован вывод цитат по категориям

.gitignore

@@ -7,6 +7,7 @@
 
 # testing
 /coverage
+.idea
 
 # production
 /build

src/components/Quote/Quote.js

 import React from 'react';
-import { Card, Button, CardHeader, CardFooter, CardBody,
+import { Card, Button, CardFooter, CardBody,
     CardTitle, CardText } from 'reactstrap';
 
 const Quote = props => {
@@ -7,12 +7,12 @@ const Quote = props => {
         <div>
             <Card>
                 <CardBody>
-                    <CardTitle>{props.author}</CardTitle>
+                    <CardTitle className='text-uppercase font-weight-bold'>{props.author}</CardTitle>
                     <CardText>{props.text}</CardText>
-                    <Button color='danger'>Delete</Button>
+                    <Button className='mr-3' color='danger'>Delete</Button>
                     <Button color='info'>Edit</Button>
                 </CardBody>
-                <CardFooter className='text-hide'>{props.category}</CardFooter>
+                <CardFooter className='text-muted'>{props.category}</CardFooter>
             </Card>
         </div>
     );

src/containers/App.js

@@ -12,7 +12,8 @@ function App() {
               <Switch>
                   <Route path="/add-quote" exact component={QuoteForm}/>
                   <Route path="/" exact component={Quotes}/>
-
+                  <Route path="/quotes/" exact component={Quotes}/>
+                  <Route path="/quotes/:category" exact component={Quotes}/>
               </Switch>
           </Container>
       </>

src/containers/QuoteForm/QuoteForm.js

@@ -7,7 +7,7 @@ import CATEGORIES from "../../quotes-categories";
 const QuoteForm = props => {
     const [quoteInfo, setQuoteInfo] = useState({
         author: '',
-        category: CATEGORIES[0].title,
+        category: CATEGORIES[0].id,
         text: ''
     });
 

src/containers/Quotes/Quotes.js

@@ -2,17 +2,24 @@ import React, {useEffect, useState} from "react";
 import axios from '../../axios-quote'
 import Quote from "../../components/Quote/Quote";
 
-const Quotes = () => {
+const Quotes = props => {
 
     const [quotes, setQuotes] = useState({});
 
     useEffect(() => {
-        axios.get('/quotes.json').then(
-            response => {
-                setQuotes(response.data)
-            }
-        )
-    }, []);
+            axios.get(
+                props.match.params.category ?
+                    `/quotes.json?orderBy="category"&equalTo="${props.match.params.category}"` :
+                    '/quotes.json')
+                .then(
+                    response => {
+                        setQuotes(response.data)
+                    })
+                .catch(error => {
+                    console.log(error)
+                })
+        }
+        , []);
 
 
     const printQuotes = () => {