migrate everything to react (#120)

refact(App): migrate everything to React 
BREAKING CHANGE: Remove preact and use react

README.md

@@ -1,6 +1,6 @@
 # Sound Place
 
-A Preact/Redux/RxJS/redux-observable PWA where you can manage and listen to Youtube playlists and songs.
+A React/Redux/RxJS/redux-observable PWA where you can manage and listen to Youtube playlists and songs.
 
 [![Greenkeeper badge](https://badges.greenkeeper.io/tsirlucas/soundplace.svg?token=e89f78d8d624e9199c4384185ba87645ef4309023ffbaaeee1133b0183921fd6&ts=1508702348672)](https://greenkeeper.io/)
 [![build status](https://travis-ci.com/tsirlucas/soundplace.svg?token=ZNhrvg7GyFkRokuwtw6s&branch=master)](https://travis-ci.com/tsirlucas/soundplace) 
@@ -10,7 +10,7 @@ A Preact/Redux/RxJS/redux-observable PWA where you can manage and listen to Yout
 ## Features and toolbelt
 
 - [X] [Typescript](https://www.typescriptlang.org)
-- [x] [Preact](https://github.com/developit/preact) as [React](https://github.com/facebook/react) alternative
+- [x] [React](https://github.com/facebook/react)
 - [x] [React Router](https://github.com/ReactTraining/react-router)
 - [x] [Redux](http://redux.js.org/) to manage application state
 - [x] [redux-observable](https://github.com/redux-observable/redux-observable) as middleware

config/loaders.js

@@ -13,6 +13,6 @@ export const loaders = [
       },
       'awesome-typescript-loader',
     ],
-    include: [path.resolve('src'), path.resolve('node_modules/preact-compat/src')],
+    include: [path.resolve('src')],
   },
 ];

package.json

@@ -20,12 +20,12 @@
     "history": "4.7.2",
     "localforage": "1.5.7",
     "normalize.css": "8.0.0",
-    "preact": "8.2.9",
-    "preact-compat": "3.18.2",
-    "preact-redux": "2.0.1",
     "query-string": "5.1.1",
     "raven-for-redux": "1.1.1",
     "raven-js": "3.26.4",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
+    "react-redux": "^5.0.7",
     "react-router-dom": "4.3.1",
     "redux": "3.7.2",
     "redux-act": "1.7.4",
@@ -37,6 +37,10 @@
   "devDependencies": {
     "@types/js-cookie": "2.1.0",
     "@types/node": "10.5.8",
+    "@types/react": "^16.4.16",
+    "@types/react-dom": "^16.0.9",
+    "@types/react-redux": "^6.0.9",
+    "@types/react-router-dom": "^4.3.1",
     "@types/wicg-mediasession": "1.0.2",
     "awesome-typescript-loader": "5.2.0",
     "babel-core": "6.26.3",
@@ -81,8 +85,6 @@
     "webpack-manifest-plugin": "2.0.3"
   },
   "keywords": [
-    "preact",
-    "preact-compat",
     "react",
     "redux",
     "sass",

src/components/AppLayout/AppLayout.container.tsx

@@ -1,6 +1,5 @@
-import {Component, h} from 'preact';
-import {connect} from 'preact-redux';
-
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
 import {browserHistory} from 'src/routes/routes.config';
 
 import {Player} from '../Player';
@@ -14,7 +13,7 @@ import {Bottombar, Networkbar, Sidebar, StatusBar, Topbar} from './components';
 
 export type Props = MapDispatchToProps &
   MapStateToProps & {
-    children: HTMLElement;
+    children: JSX.Element;
   };
 
 class AppLayoutComponent extends Component<Props, {}> {
@@ -53,7 +52,8 @@ class AppLayoutComponent extends Component<Props, {}> {
     browserHistory.push(path);
   }
 
-  render({children, hasNetwork, showPlayer, window, userActions, user, api}: Props) {
+  render() {
+    const {children, hasNetwork, showPlayer, window, userActions, user, api} = this.props;
     const {width} = window;
 
     const isDesktop = width > 765;

src/components/AppLayout/components/Bottombar.tsx

@@ -1,19 +1,19 @@
-import {h} from 'preact';
-
+import React from 'react';
 import {privateRoutes} from 'src/routes/routes.config';
 
 import {Icon} from '../../Icons/Icons';
 
 export const Bottombar = ({changeRoute}) => (
   <div className="bottom-bar">
-    {privateRoutes.filter((route) => route.header).map((privRoute) => (
-      <label className="bottom-bar-item">
+    {privateRoutes.filter((route) => route.header).map((privRoute, i) => (
+      <label className="bottom-bar-item" key={i}>
         <input
           type="radio"
           name="tab-bar"
           value={privRoute.path}
           checked={location.hash.includes(privRoute.path)}
           disabled={location.hash === `#${privRoute.path}`}
+          readOnly
           onClick={() => changeRoute(privRoute.path)}
         />
         <button className="bottom-bar-button">

src/components/AppLayout/components/Networkbar.tsx

@@ -1,4 +1,4 @@
-import {h} from 'preact';
+import React from 'react';
 
 type Props = {
   networkClass: string;
@@ -8,7 +8,7 @@ type Props = {
 
 export const Networkbar = ({networkClass, width, isDesktop}: Props) => {
   const parsedWidth = isDesktop ? width - 250 : width;
-  const style = `width: ${parsedWidth}px;`;
+  const style = {width: `${parsedWidth}px`};
 
   return (
     <section className={`network-bar ${networkClass}`} style={style}>

src/components/AppLayout/components/Sidebar.tsx

@@ -1,5 +1,4 @@
-import {Component, h} from 'preact';
-
+import React, {Component} from 'react';
 import {Icon} from 'components/Icons/Icons';
 import {privateRoutes} from 'src/routes/routes.config';
 
@@ -20,7 +19,9 @@ export class Sidebar extends Component<Props, null> {
     img.src = '/assets/img/avatar.jpeg';
   };
 
-  render({user}: Props) {
+  render() {
+    const {user} = this.props;
+
     return (
       <aside id="sidebar">
         {user && (
@@ -37,15 +38,16 @@ export class Sidebar extends Component<Props, null> {
                 <Icon icon="SYNC" size="24" color="white" />
               </span>
             ) : (
-              <div onClick={this.props.actions.import} style="cursor:pointer;">
+              <div onClick={this.props.actions.import} style={{cursor: 'pointer'}}>
                 <Icon icon="SYNC" size="24" color="white" />
               </div>
             )}
           </div>
         )}
         <Navigation>
-          {privateRoutes.filter((route) => route.header).map((route) => (
+          {privateRoutes.filter((route) => route.header).map((route, i) => (
             <NavigationItem
+              key={i}
               onClick={() => this.props.changeRoute(route.path)}
               header={route.header}
               icon={route.icon}
@@ -64,10 +66,14 @@ const Navigation = ({children}: {children?: JSX.Element[]}) => (
 );
 
 const NavigationItem = ({header, icon, active, onClick, disabled}) => (
-  <li className="brand-nav-item" style={disabled ? 'pointer-events:none;' : ''} onClick={onClick}>
+  <li
+    className="brand-nav-item"
+    style={disabled ? {pointerEvents: 'none'} : null}
+    onClick={onClick}
+  >
     <div className="brand-nav-icon">
       <Icon icon={icon} size="34" color={active ? 'white' : null} />
     </div>
-    <span style={active ? 'color: white' : null}>{header}</span>
+    <span style={active ? {color: 'white'} : null}>{header}</span>
   </li>
 );

src/components/AppLayout/components/Statusbar.tsx

@@ -1,4 +1,4 @@
-import {h} from 'preact';
+import React from 'react';
 
 type Props = {
   error: string;

src/components/AppLayout/components/Topbar.tsx

@@ -1,5 +1,4 @@
-import {Component, h} from 'preact';
-
+import React, {Component} from 'react';
 import {Icon} from 'components';
 
 import {Props as ContainerProps} from '../AppLayout.container';
@@ -21,7 +20,7 @@ export class Topbar extends Component<Props, null> {
     const {user} = this.props;
 
     return (
-      <div class="top-bar">
+      <div className="top-bar">
         {user && (
           <div id="brand">
             <img

src/components/Button.tsx

@@ -1,14 +1,10 @@
-import {h} from 'preact';
-
-interface EventHandler<E extends Event> {
-  (event: E): void;
-}
+import React, {MouseEvent} from 'react';
 
 interface Props {
   href?: string;
   className?: string;
-  onClick?: EventHandler<MouseEvent>;
-  children?: Element;
+  onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
+  children?: Element | string;
 }
 
 export const Button = (props: Props) => (

src/components/Card.tsx

@@ -1,3 +1,5 @@
-import {h} from 'preact';
+import React from 'react';
 
-export const Card = ({children}: {children: Element}) => <section className="card">{children}</section>;
+export const Card = ({children}: {children: Element}) => (
+  <section className="card">{children}</section>
+);

src/components/CardList.tsx

@@ -1,5 +1,4 @@
-import {h} from 'preact';
-
+import React from 'react';
 import {Cover} from 'models';
 
 type Item = {
@@ -19,7 +18,8 @@ type ItemProps = {
 
 const CardList = ({items, open}: ListProps) => (
   <section className="cardlist-container">
-    {items && Object.values(items).map((item) => <CardListItem item={item} open={open} />)}
+    {items &&
+      Object.values(items).map((item, i) => <CardListItem key={i} item={item} open={open} />)}
   </section>
 );
 

src/components/Icons/Icons.tsx

@@ -1,5 +1,4 @@
-import {h} from 'preact';
-
+import React from 'react';
 import {icons} from './Icons.constants';
 
 type Props = {
@@ -25,10 +24,10 @@ export const Icon = (props: Props) => {
       height={`${props.size}`}
       viewBox={`0 0 24 24`}
       xmlns="http://www.w3.org/2000/svg"
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      stroke-linejoin="round"
-      stroke-miterlimit="1.414"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      strokeLinejoin="round"
+      strokeMiterlimit="1.414"
     >
       <path style={styles.path} d={icons[props.icon]} />
     </svg>

src/components/Player/Player.container.tsx

@@ -1,6 +1,5 @@
-import {Component, h} from 'preact';
-import {connect} from 'preact-redux';
-
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
 import {PlayerService} from 'services';
 
 import {Icon} from '../Icons';
@@ -23,7 +22,8 @@ class PlayerComponent extends Component<Props, {}> {
     PlayerService.getInstance().setPlayer(nextProps.player, nextProps.actions);
   }
 
-  render({player, actions, playerClass}: Props) {
+  render() {
+    const {player, actions, playerClass} = this.props;
     const hasPrevious = PlayerService.getInstance().hasPrev();
     const hasNext = PlayerService.getInstance().hasNext();
 
@@ -39,7 +39,7 @@ class PlayerComponent extends Component<Props, {}> {
             <div id="playing-details">
               <div
                 id="playing-cover"
-                style={`background-image: url(${currentlyPlaying.cover.small});`}
+                style={{backgroundImage: `url(${currentlyPlaying.cover.small})`}}
               />
               <div id="playing-data">
                 <div className="music">

src/components/Player/Player.selectors.ts

@@ -6,10 +6,10 @@ import {actions as tracksActions} from 'core/tracks';
 import {RootState} from 'src/core';
 
 type OtherProps = {
-  isDesktop: boolean;
-  scrollbarWidth: number;
-  width: number;
-  playerClass: string;
+  isDesktop?: boolean;
+  scrollbarWidth?: number;
+  width?: number;
+  playerClass?: string;
 };
 
 export const mapStateToProps = ({player}: RootState, otherProps: OtherProps) => ({

src/components/Player/Progressbar.tsx

@@ -1,4 +1,4 @@
-import {Component, h} from 'preact';
+import React, {Component} from 'react';
 
 type State = {
   progressPercentage: number;
@@ -10,6 +10,9 @@ type Props = {
 };
 
 export default class PlayerProgress extends Component<Props, State> {
+  state = {
+    progressPercentage: 0,
+  };
   shouldComponentUpdate(_nextProps, nextState) {
     return this.state.progressPercentage !== nextState.progressPercentage;
   }
@@ -20,8 +23,9 @@ export default class PlayerProgress extends Component<Props, State> {
     this.setState({progressPercentage});
   }
 
-  render(_props, {progressPercentage}) {
-    const style = `width: ${progressPercentage || 0}%;`;
+  render() {
+    const {progressPercentage} = this.state;
+    const style = {width: `${progressPercentage}%`};
 
     return <div id="player-progress-bar" style={style} />;
   }

src/components/PublicLayout.tsx

@@ -1,3 +1,3 @@
-import {h} from 'preact';
+import React from 'react';
 
 export const PublicLayout = (props) => <main>{props.children}</main>;

src/components/Tracks/Tracks.tsx

@@ -1,5 +1,4 @@
-import {Component, h} from 'preact';
-
+import React, {Component} from 'react';
 import {RootState} from 'core';
 import {actions as playerActions} from 'core/player';
 import {actions as storageActions} from 'core/storage';
@@ -64,7 +63,8 @@ export class Tracks extends Component<Props, {}> {
     return false;
   };
 
-  render({tracks, playlist}: Props) {
+  render() {
+    const {tracks, playlist} = this.props;
     if (!tracks.data || !playlist) return null;
     const playlistTracks = Object.keys(tracks.playlist).map((id) => tracks.data[id]);
 
@@ -73,14 +73,15 @@ export class Tracks extends Component<Props, {}> {
         <header className="playlist-header">
           <div
             className="playlist-image"
-            style={`background-image: url(${playlist.cover.medium})`}
+            style={{backgroundImage: `url(${playlist.cover.medium})`}}
           />
           <h1 className="playlist-name">{playlist.name}</h1>
         </header>
         <main className="playlist-content">
           <ul className="tracks-list">
-            {Object.values(playlistTracks).map((track) => (
+            {Object.values(playlistTracks).map((track, i) => (
               <Track
+                key={i}
                 status={tracks.saved[track.id] ? tracks.saved[track.id].status : 'NOT-SAVED'}
                 track={track}
                 play={this.play}