Added about page and changed home page

frontend/src/App.js

@@ -2,7 +2,10 @@ import React, { Component } from "react";
 import "./App.css";
 import NavBar from "./components/NavBar";
 import SearchMusic from "./components/SearchMusic";
-import SearchAlbum from "./components/SearchAlbum"
+import SearchAlbum from "./components/SearchAlbum";
+import Routes from "./routes"
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import About from "./components/About";
 
 const AppContext = React.createContext();
 export const AppProvider = AppContext.Provider;
@@ -12,10 +15,14 @@ class App extends Component {
   render() {
     return (
       <React.Fragment>
-        <NavBar/>
-        <h1 className="text-center">Get Stats for your favorite musics and albums</h1>
-        <SearchMusic/>
-        <SearchAlbum/>
+        <NavBar />
+        <Router>
+          <Switch>
+            <Route path="/about" component={About}></Route>
+            <Route path="/music" component={SearchMusic}></Route>
+            <Route path="/album" component={SearchAlbum}></Route>
+          </Switch>
+        </Router>    
       </React.Fragment>
     );
   }

frontend/src/components/About.jsx

@@ -0,0 +1,31 @@
+import React, { Component }  from "react";
+import { withRouter } from 'react-router-dom'
+import music from '../music.jpg'
+
+
+function About() {
+    return (
+        <div className="about">
+            <div class="container">
+                <div class="row align-items-center my-5">
+                    <div class="col-lg-7">
+                        <img
+                            class="img-fluid rounded mb-4 mb-lg-0"
+                            src={music}
+                        />
+                    </div>
+                    <div class="col-lg-5">
+                        <h1 class="font-weight-light">About</h1>
+                        <p>
+                           This project has the objective of showing how many times each word
+                           is used in, either a particular song, or a particular album, using the Genious website.
+                           Graphs are displayed for people who like these kind of statistics!
+            </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default About;

frontend/src/components/NavBar.js

@@ -38,13 +38,25 @@ export default class NavBar extends Component {
           <NavbarToggler onClick={this.toggle} />
           <Collapse isOpen={this.state.isOpen} navbar>
             <Nav className="ml-auto" navbar>
+              <NavItem>
+                <NavLink href="/"> Home </NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink href="/music"> Search Music </NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink href="/album"> Search Album </NavLink>
+              </NavItem>
               <NavItem>
                 <NavLink>
                   <a href="https://github.com/pigaoMIEIC/LyricsWebScraping" >
                     <img alt="Git-Hub Mark" src={require("../GitHub-Mark-Light-32px.png")} />
                   </a>
                 </NavLink>
               </NavItem>
+              <NavItem>
+                <NavLink href="/about"> About </NavLink>
+              </NavItem>
             </Nav>
           </Collapse>
         </Navbar>

frontend/src/components/SearchMusic.js

@@ -11,13 +11,16 @@ export default class SearchMusic extends Component {
 
   handleSubmit(event) {
     console.log("tou no handle submit no search music")
-    console.log(event);
     event.preventDefault();
-
-    let response = fetch("http://127.0.0.1:5000/music?artist=eminem&music=kamikaze", {
-      mode: "no-cors"})
-    response = response.json()
-    console.log(response);
+
+    fetch(`/music?artist=${this.state.Artist}&music=${this.state.Music}`, { mode: "no-cors" }).then(res => {
+      console.log(res);
+      // your code
+    })
+    this.props.history.push('/about');
+    //console.log(response)
+    //response = response.json()
+    //console.log(response);
 
   }