Isomorphic

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["es2015", "react"],
+  "plugins": ["transform-object-rest-spread"]
+}

.gitignore

@@ -1,6 +1,3 @@
 node_modules
-coverage
-.env
 npm-debug.log
-build
-env.js
+server/env.js

src/components/login.js → app/components/login.js

@@ -1,10 +1,12 @@
 import React, { Component } from 'react';
 import { Grid, Row, Col, PageHeader, Alert } from 'react-bootstrap';
 
+const server = 'https://cryptify.herokuapp.com';
+const redirect = encodeURIComponent(server + '/auth/callback');
+const OAuthLink = 'https://accounts.spotify.com/authorize?client_id=49859018c9a4462cbb4336259546f1e9&redirect_uri=' + redirect + '&response_type=code&scope=user-top-read%20user-read-private';
+
 class Login extends Component {
   render() {
-    const redirect = encodeURIComponent('http://localhost:3001/auth/callback');
-    const OAuthLink = 'https://accounts.spotify.com/authorize?client_id=49859018c9a4462cbb4336259546f1e9&redirect_uri=' + redirect + '&response_type=code&scope=user-top-read%20user-read-private';
     return (
       <Grid>
         <Row>

src/components/preview.js → app/components/preview.js

@@ -1,5 +1,10 @@
 import React, { Component } from 'react';
-import Sound from 'react-sound';
+
+let Sound;
+
+if (global.window) {
+  Sound = require('react-sound');
+}
 
 class Preview extends Component {
   render() {
@@ -8,7 +13,7 @@ class Preview extends Component {
       setTrackPlaying
     } = this.props;
 
-    if (!trackPlaying) return null;
+    if (!trackPlaying || !global.window) return null;
 
     let playStatus = 'STOPPED';
 

src/components/tracks-table.js → app/components/tracks-table.js

@@ -4,7 +4,9 @@ import Track from './track';
 
 class TracksTable extends Component {
   componentDidMount() {
-    this.props.fetchUserTopTracks();
+    if (this.props.tracks.length === 0) {
+      this.props.fetchUserTopTracks();
+    }
   }
 
   render() {

app/routes.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Route, IndexRoute } from 'react-router';
+import App from './components/app';
+import Login from './components/login';
+
+
+export default (
+  <Route path="/">
+    <IndexRoute component={Login} />
+    <Route path="home" component={App} />
+  </Route>
+);

src/store/actions/creators.js → app/store/actions/creators.js

@@ -123,20 +123,20 @@ export function fetchPassword(trackId, why) {
   }
 }
 
-function requestFromApi(type) {
+export function requestFromApi(type) {
     return {
         type
     }
 }
 
-function receiveFromApi(type, data) {
+export function receiveFromApi(type, data) {
     return {
         type,
         data
     }
 }
 
-function handleError(type, error) {
+export function handleError(type, error) {
     return {
         type,
         error

src/store/index.js → app/store/configure.js

@@ -5,12 +5,15 @@ import createLogger from 'redux-logger';
 
 const logger = createLogger();
 
-const store = createStore(
+function configureStore(initialState = undefined) {
+  return createStore(
     rootReducer,
+    initialState,
     applyMiddleware(
         thunk,
         logger
     )
-);
+  );
+}
 
-export default store;
+export default configureStore;

browser.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { Router, browserHistory } from 'react-router';
+import { Provider } from 'react-redux';
+import routes from './app/routes';
+import configureStore from './app/store/configure';
+
+let initialState = document.getElementById('initial-state').textContent;
+
+if (initialState.length > 0) {
+  initialState = JSON.parse(initialState);
+}
+
+const store = configureStore(initialState);
+
+render((
+  <Provider store={store}>
+    <Router history={browserHistory} routes={routes} />
+  </Provider>
+), document.getElementById('root'));