#2, Реализована возможность добавления цитат

package.json

@@ -6,9 +6,14 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "axios": "^0.19.2",
+    "bootstrap": "^4.4.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "3.4.1",
+    "reactstrap": "^8.4.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

src/axios-quote.js

+import axios from "axios";
+
+const instance = axios.create({
+    baseURL: "https://controlwork8-afa3f.firebaseio.com"
+});
+
+export default instance;

src/components/FormToFill/FormToFill.js

+import React from 'react';
+import { Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';
+import CATEGORIES from "../../quotes-categories";
+
+const FormToFill = (props) => {
+    const printOptions = () => {
+        return  CATEGORIES.map(category => {
+            return <option key={`form-${category.id}`} value={category.id}>{category.title}</option>
+        })
+    };
+
+    return (
+        <Form>
+            <FormGroup>
+                <Label for="author">Author</Label>
+                <Input
+                    type="text"
+                    name="author"
+                    id="author"
+                    onChange={props.inputHandler}/>
+            </FormGroup>
+            <FormGroup>
+                <Label for="category">Select</Label>
+                <Input
+                    type="select"
+                    name="category"
+                    id="category"
+                    onChange={props.inputHandler}>
+                    <option   value="" disabled >Select category</option>
+                    {printOptions()}
+                </Input>
+            </FormGroup>
+            <FormGroup>
+                <Label for="text">Quote Text</Label>
+                <Input type="textarea"
+                       name="text"
+                       id="text"
+                       onChange={props.inputHandler}
+                />
+            </FormGroup>
+            <Button onClick={props.submitQuote}>Submit</Button>
+        </Form>
+    );
+};
+
+export default FormToFill;
\ No newline at end of file

src/containers/App.js

+import React from 'react';
+import {Switch, Route} from "react-router-dom";
+import {Container} from "reactstrap";
+import './App.css';
+import QuoteForm from "./QuoteForm/QuoteForm";
+
+function App() {
+  return (
+      <>
+          <Container>
+              <Switch>
+                  <Route path="/add-quote" exact component={QuoteForm}/>
+              </Switch>
+          </Container>
+      </>
+  );
+}
+
+export default App;

src/containers/QuoteForm/QuoteForm.js

+import React, {useEffect, useState} from "react";
+import axios from '../../axios-quote'
+import FormToFill from "../../components/FormToFill/FormToFill";
+import CATEGORIES from "../../quotes-categories";
+
+
+const QuoteForm = props => {
+    const [quoteInfo, setQuoteInfo] = useState({
+        author: '',
+        category: CATEGORIES[0].title,
+        text: ''
+    });
+
+    const inputHandler = (e) => {
+        setQuoteInfo({
+            ...quoteInfo,
+            [e.target.name]: e.target.value
+        })
+    };
+
+    const submitQuote = () => {
+        if (!quoteInfo.text || !quoteInfo.category || !quoteInfo.author) {
+            alert('все поля должны быть заполнены');
+            return
+        }
+
+        axios.post('/quotes.json', quoteInfo).then(
+            response => {
+                props.history.push('./')
+            }
+        )
+    };
+
+
+    return (
+        <div className='QuoteForm'>
+            <FormToFill submitQuote={submitQuote} inputHandler={inputHandler}/>
+        </div>
+    )
+};
+
+
+export default QuoteForm
\ No newline at end of file

src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import {BrowserRouter} from "react-router-dom";
+import App from './containers/App';
 import * as serviceWorker from './serviceWorker';
+import './index.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+    <React.StrictMode>
+        <BrowserRouter>
+            <App/>
+        </BrowserRouter>
+    </React.StrictMode>,
+    document.getElementById('root')
 );
 
 // If you want your app to work offline and load faster, you can change

src/quotes-categories.js

+const CATEGORIES = [
+    {title: 'Star Wars', id: 'star-wars'},
+    {title: 'Motivational', id: 'motivational'},
+    {title: 'Famous people', id: 'famous-people'},
+    {title: 'Saying', id: 'saying'},
+    {title: 'Humour', id: 'humour'},
+
+];
+
+
+
+export default CATEGORIES
\ No newline at end of file