rwieruch · olezhek85 · May 13, 2018 · May 13, 2018 · May 13, 2018 · May 13, 2018
diff --git a/.babelrc b/.babelrc
@@ -1,10 +1,4 @@
 {
- "presets": [
- "es2015",
- "react",
- "stage-2"
- ],
- "plugins": [
- "react-hot-loader/babel"
- ]
-}
+ "presets": ["es2015", "react", "stage-2"],
+ "plugins": ["transform-decorators-legacy", "react-hot-loader/babel"]
+}
diff --git a/dist/index.html b/dist/index.html
@@ -1,11 +1,14 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-  <title>FaveSound</title>
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+ <title>FaveSound</title>
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 </head>
+
 <body>
-  <div id="app"></div>
-  <script src="/bundle.js"></script>
+ <div id="app"></div>
+ <script src="/bundle.js"></script>
 </body>
-</html>
+
+</html>
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,5 @@
+{
+ "compilerOptions": {
+ "experimentalDecorators": true
+ }
+}
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
  "babel-core": "6.3.15",
  "babel-eslint": "7.1.1",
  "babel-loader": "6.2.0",
+ "babel-plugin-transform-decorators-legacy": "^1.3.4",
  "babel-preset-es2015": "6.3.13",
  "babel-preset-react": "6.3.13",
  "babel-preset-stage-2": "6.5.0",
@@ -32,6 +33,7 @@
  "eslint-plugin-jsx-a11y": "2.2.3",
  "eslint-plugin-react": "6.7.1",
  "exports-loader": "^0.6.4",
+ "file-loader": "^1.1.11",
  "imports-loader": "^0.6.5",
  "jsdom": "9.8.3",
  "mocha": "3.5.3",
@@ -53,9 +55,10 @@
  "moment": "2.18.1",
  "normalizr": "2.0.0",
  "prop-types": "15.5.10",
- "react": "16.0.0",
+ "react": "^16.3.2",
  "react-clipboard.js": "1.1.2",
- "react-dom": "16.0.0",
+ "react-dom": "^16.3.2",
+ "react-favicon": "^0.0.14",
  "react-rangeslider": "2.1.0",
  "react-redux": "5.0.6",
  "react-router": "4.1.1",

diff --git a/src/assets/btn-connect-m.png b/src/assets/btn-connect-m.png
diff --git a/src/assets/btn-disconnect-m.png b/src/assets/btn-disconnect-m.png
diff --git a/src/assets/sc_ico.png b/src/assets/sc_ico.png
diff --git a/src/assets/soundcloud.png b/src/assets/soundcloud.png
diff --git a/src/components/App/index.js b/src/components/App/index.js
@@ -1,29 +1,25 @@
-import React from 'react';
-import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
-import { OAUTH_TOKEN } from '../../constants/authentication';
-import Cookies from 'js-cookie';
-import { DEFAULT_GENRE } from '../../constants/genre';
-import Browse from '../../components/Browse';
-import Callback from '../../components/Callback';
-import Dashboard from '../../components/Dashboard';
-import Header from '../../components/Header';
-import Player from '../../components/Player';
-import Playlist from '../../components/Playlist';
-import Volume from '../../components/Volume';
-import { browse, dashboard, callback } from '../../constants/pathnames';
+import Cookies from "js-cookie";
+import React, { Component, Fragment } from "react";
 
-export default class App extends React.Component {
+import Header from "../Header";
+import Player from "../Player";
+import Volume from "../Volume";
+import Router from "../Router";
+import Playlist from "../Playlist";
+import { OAUTH_TOKEN } from "../../constants/authentication";
+
+export default class App extends Component {
  constructor(props) {
  super(props);
  this.onAppClose = this.onAppClose.bind(this);
  }
 
  componentDidMount() {
- window.addEventListener('beforeunload', this.onAppClose);
+ window.addEventListener("beforeunload", this.onAppClose);
  }
 
  componentWillUnmount() {
- window.removeEventListener('beforeunload', this.onAppClose);
+ window.removeEventListener("beforeunload", this.onAppClose);
  }
 
  onAppClose() {
@@ -32,20 +28,13 @@ export default class App extends React.Component {
 
  render() {
  return (
- <BrowserRouter>
- <div>
- <Header />
- <Switch>
- <Route exact path={`${browse}/:genre`} component={Browse} />
- <Route exact path={dashboard} component={Dashboard} />
- <Route exact path={callback} component={Callback} />
- <Redirect to={`${browse}/${DEFAULT_GENRE}`} />
- </Switch>
- <Playlist />
- <Volume />
- <Player />
- </div>
- </BrowserRouter>
+ <Fragment>
+ <Header />
+ <Router />
+ <Playlist />
+ <Volume />
+ <Player />
+ </Fragment>
  );
  }
 }
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -1,132 +1,19 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import map from '../../services/map';
-import classNames from 'classnames';
-import { Link } from 'react-router-dom';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import React from "react";
 
-import * as actions from '../../actions/index';
-import { GENRES, DEFAULT_GENRE } from '../../constants/genre';
-import { browse, dashboard } from '../../constants/pathnames';
+import Logo from "../Logo";
+import MenuList from "../MenuList";
+import SessionAction from "../SessionAction";
 
-function getGenreLink(genre) {
- return `${browse}/${genre || DEFAULT_GENRE}`;
-}
-
-function Logo() {
- return (
- <div>
- <div className="logo">
- <Link to="/">
- <h1>Favesound</h1>
- </Link>
- </div>
- <div className="github-link">
- <Link to="https://github.com/rwieruch/favesound-redux/" target="_blank">
- <p>Fork Me on Github</p>
- </Link>
- </div>
- </div>
- );
-}
-
-function MenuItem({ genre, selectedGenre }) {
- const linkClass = classNames('menu-item', {
- 'menu-item-selected': genre === selectedGenre,
- });
-
- return (
- <Link to={getGenreLink(genre)} className={linkClass}>
- {genre}
- </Link>
- );
-}
-
-function Login({ onLogin }) {
- return (
- <Link onClick={onLogin} to={dashboard}>
- Login
- </Link>
- );
-}
-
-function Logout({ onLogout }) {
- return (
- <Link onClick={onLogout} to={browse}>
- Logout
- </Link>
- );
-}
-
-function Dashboard({ onDashboard }) {
- return (
- <Link onClick={onDashboard} to={dashboard}>
- Dashboard
- </Link>
- );
-}
-
-function SessionAction({ currentUser, onLogin, onLogout, onDashboard }) {
- return (
- <div>
- <div className="dashboard-link">
- { currentUser ? <Dashboard onDashboard={onDashboard} /> : ' ' }
- </div>
- <div className="session-link">
- { currentUser ? <Logout onLogout={onLogout} /> : <Login onLogin={onLogin} /> }
- </div>
- </div>
- );
-}
-
-function MenuList({ selectedGenre }) {
- if (!selectedGenre) return null;
- return (
- <div>
- {map((genre, key) => {
- const menuItemProps = { genre, selectedGenre, key };
- return <MenuItem {...menuItemProps} />;
- }, GENRES)}
- </div>
- );
-}
-
-function Header({ currentUser, selectedGenre, onLogin, onLogout, onDashboard }) {
+const Header = () => {
  return (
  <div className="header">
  <div className="header-content">
  <Logo />
- <MenuList selectedGenre={selectedGenre} />
- <SessionAction
- currentUser={currentUser}
- onLogin={onLogin}
- onLogout={onLogout}
- onDashboard={onDashboard}
- />
+ <MenuList />
+ <SessionAction />
  </div>
  </div>
  );
-}
-
-function mapStateToProps(state) {
- return {
- currentUser: state.session.user,
- selectedGenre: state.browse.selectedGenre
- };
-}
-
-function mapDispatchToProps(dispatch) {
- return {
- onLogin: bindActionCreators(actions.login, dispatch),
- onLogout: bindActionCreators(actions.logout, dispatch),
- };
-}
-
-Header.propTypes = {
- currentUser: PropTypes.object,
- onLogin: PropTypes.func,
- onLogout: PropTypes.func,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(Header);
+export default Header;
diff --git a/src/components/Logo/index.js b/src/components/Logo/index.js
@@ -0,0 +1,25 @@
+import React, { Fragment } from "react";
+import { Link } from "react-router-dom";
+
+import logo from "../../assets/soundcloud.png";
+
+const Logo = () => (
+ <Fragment>
+ <div className="logo">
+ <Link to="/">
+ <img src={logo} alt="FaveSound" />
+ <h1>FaveSound</h1>
+ </Link>
+ </div>
+ <div className="github-link">
+ <Link to="https://github.com/rwieruch/favesound-redux" target="_blank">
+ <img
+ src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"
+ alt="Fork me on GitHub"
+ />
+ </Link>
+ </div>
+ </Fragment>
+);
+
+export default Logo;
diff --git a/src/components/MenuItem/index.js b/src/components/MenuItem/index.js
@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import { Link } from "react-router-dom";
+
+import { browse } from "../../constants/pathnames";
+import { DEFAULT_GENRE } from "../../constants/genre";
+
+const MenuItem = ({ genre, selectedGenre }) => {
+ const linkClass = classNames("menu-item", {
+ "menu-item-selected": genre === selectedGenre
+ });
+
+ return (
+ <Link to={getGenreLink(genre)} className={linkClass}>
+ {genre}
+ </Link>
+ );
+};
+
+function getGenreLink(genre) {
+ return `${browse}/${genre || DEFAULT_GENRE}`;
+}
+
+MenuItem.propTypes = {
+ genre: PropTypes.string.isRequired,
+ selectedGenre: PropTypes.string.isRequired
+};
+
+export default MenuItem;
diff --git a/src/components/MenuList/index.js b/src/components/MenuList/index.js
@@ -0,0 +1,39 @@
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import React, { Component } from "react";
+
+import MenuItem from "../MenuItem";
+import map from "../../services/map";
+import { GENRES } from "../../constants/genre";
+
+function mapStateToProps(state) {
+ return {
+ selectedGenre: state.browse.selectedGenre
+ };
+}
+
+@connect(mapStateToProps)
+class MenuList extends Component {
+ render() {
+ const { selectedGenre } = this.props;
+
+ if (!selectedGenre) {
+ return null;
+ }
+
+ return (
+ <div className="menu">
+ {map((genre, key) => {
+ const menuItemProps = { genre, selectedGenre, key };
+ return <MenuItem {...menuItemProps} />;
+ }, GENRES)}
+ </div>
+ );
+ }
+}
+
+MenuList.propTypes = {
+ selectedGenre: PropTypes.string
+};
+
+export default MenuList;
diff --git a/src/components/Router/index.js b/src/components/Router/index.js
@@ -0,0 +1,19 @@
+import React from "react";
+import { Route, Switch, Redirect } from "react-router-dom";
+
+import Browse from "../Browse";
+import Callback from "../Callback";
+import Dashboard from "../Dashboard";
+import { DEFAULT_GENRE } from "../../constants/genre";
+import { browse, dashboard, callback } from "../../constants/pathnames";
+
+const Router = () => (
+ <Switch>
+ <Route exact path={`${browse}/:genre`} component={Browse} />
+ <Route exact path={dashboard} component={Dashboard} />
+ <Route exact path={callback} component={Callback} />
+ <Redirect to={`${browse}/${DEFAULT_GENRE}`} />
+ </Switch>
+);
+
+export default Router;