Service worker caching, Loader component

src/js/views/modals/AddToPlaylist.js

@@ -3,8 +3,8 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import ReactGA from 'react-ga';
-import Link from '../../components/Link';
 
+import Loader from '../../components/Loader';
 import Modal from './Modal';
 import Icon from '../../components/Icon';
 import Thumbnail from '../../components/Thumbnail';
@@ -14,7 +14,7 @@ import * as mopidyActions from '../../services/mopidy/actions';
 import * as spotifyActions from '../../services/spotify/actions';
 import * as helpers from '../../helpers';
 
-class AddToPlaylist extends React.Component {
+class AddToPlaylist extends React.Component {
   constructor(props) {
     super(props);
 
@@ -41,26 +41,19 @@ class AddToPlaylist extends React.Component {
 
     playlists = helpers.sortItems(playlists, 'name');
 
-    let loader = null;
-    if (this.props.spotify_library_playlists_status == 'running') {
-      loader = (
-        <div className="lazy-loader body-loader loading">
-          <div className="loader" />
-        </div>
-      );
-    }
+    const isLoading = this.props.spotify_library_playlists_status == 'running';
 
     return (
       <Modal className="modal--add-to-playlist">
         <h1>Add to playlist</h1>
-        <h2 className="mid_grey-text">
-Select playlist to add
-          {this.props.uris.length}
-          {' '}
-track
-          {this.props.uris.length > 1 ? 's' : null}
-          {' '}
-to
+        <h2 className="mid_grey-text">
+Select playlist to add
+          {this.props.uris.length}
+          {' '}
+track
+          {this.props.uris.length > 1 ? 's' : null}
+          {' '}
+to
         </h2>
         {playlists.length <= 0 ? <div className="no-results">No playlists available</div> : null}
         <div className="list small playlists">
@@ -71,21 +64,21 @@ to
     <h4 className="list__item__name">{ playlist.name }</h4>
     <ul className="list__item__details details">
       <li><Icon type="fontawesome" className="source" name={helpers.sourceIcon(playlist.uri)} /></li>
-      <li>
-        { playlist.tracks_total ? (
-          <span className="mid_grey-text">
-            { playlist.tracks_total }
-            {' '}
-tracks
-          </span>
-        ) : null }
+      <li>
+        { playlist.tracks_total ? (
+          <span className="mid_grey-text">
+            { playlist.tracks_total }
+            {' '}
+tracks
+          </span>
+        ) : null }
       </li>
     </ul>
   </div>
 						))
 					}
         </div>
-        {loader}
+        {isLoading && <Loader body lazy loading />}
       </Modal>
     );
   }
@@ -111,4 +104,4 @@ const mapDispatchToProps = (dispatch) => ({
   spotifyActions: bindActionCreators(spotifyActions, dispatch),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(AddToPlaylist);
+export default connect(mapStateToProps, mapDispatchToProps)(AddToPlaylist);

src/js/views/modals/ShareConfiguration.js

@@ -11,7 +11,7 @@ import * as uiActions from '../../services/ui/actions';
 import * as pusherActions from '../../services/pusher/actions';
 import * as helpers from '../../helpers';
 
-class ShareConfiguration extends React.Component {
+class ShareConfiguration extends React.Component {
   constructor(props) {
     super(props);
 
@@ -73,7 +73,7 @@ class ShareConfiguration extends React.Component {
       );
     }
 
-    window.history.back();
+    window.history.back();
   }
 
   render() {
@@ -86,25 +86,27 @@ class ShareConfiguration extends React.Component {
 
     if (connections.length > 0) {
       var recipients = (
-        <div className="input">
+        <div className="input checkbox-group">
           {
 						connections.map((connection, index) => (
-  <label key={connection.connection_id}>
-    <input
-      type="checkbox"
-      name={`connection_${connection.connection_id}`}
-      checked={this.state.recipients.includes(connection.connection_id)}
-      onChange={(e) => this.toggleRecipient(connection.connection_id)}
-    />
-    <span className="label">
-      <div className="title">{ connection.username }</div>
-      <div className="description mid_grey-text">
-											(
-        { connection.ip }
-)
-      </div>
-    </span>
-  </label>
+              <div key={connection.connection_id} className="checkbox-group__item">
+                <label>
+                  <input
+                    type="checkbox"
+                    name={`connection_${connection.connection_id}`}
+                    checked={this.state.recipients.includes(connection.connection_id)}
+                    onChange={(e) => this.toggleRecipient(connection.connection_id)}
+                  />
+                  <div className="label">
+                    <div>
+                      <div className="title">{ connection.username }</div>
+                      <div className="description mid_grey-text">
+                        ({ connection.ip })
+                      </div>
+                    </div>
+                  </div>
+                </label>
+              </div>
 						))
 					}
         </div>
@@ -134,71 +136,82 @@ class ShareConfiguration extends React.Component {
           <div className="field checkbox checkbox--block">
             <div className="name">Configurations</div>
             <div className="input">
-              <label>
-                <input
-                  type="checkbox"
-                  name="interface"
-                  checked={this.state.ui}
-                  onChange={(e) => this.setState({ ui: !this.state.ui })}
-                />
-                <span className="label">
-                  <span className="title">UI customisation (theme, sorting, filters)</span>
-                </span>
-              </label>
-
-              {this.props.spotify_me && this.props.spotify_authorization ? (
+              <div className="checkbox-group__item">
                 <label>
                   <input
                     type="checkbox"
-                    name="spotify"
-                    checked={this.state.spotify}
-                    onChange={(e) => this.setState({ spotify: !this.state.spotify })}
+                    name="interface"
+                    checked={this.state.ui}
+                    onChange={(e) => this.setState({ ui: !this.state.ui })}
                   />
                   <span className="label">
-                    <div className="title">Spotify authorization</div>
-                    <div className="description mid_grey-text">
-Logged in as
-                      {this.props.spotify_me.name}
-                    </div>
+                    <span className="title">UI customisation (theme, sorting, filters)</span>
                   </span>
-                </label>
-              ) : null}
+                </label>
+              </div>
 
-              {this.props.lastfm_me && this.props.lastfm_authorization ? (
-                <label>
-                  <input
-                    type="checkbox"
-                    name="lastfm_authorization"
-                    checked={this.state.lastfm}
-                    onChange={(e) => this.setState({ lastfm: !this.state.lastfm })}
-                  />
-                  <span className="label">
-                    <div className="title">LastFM authorization</div>
-                    <div className="description mid_grey-text">
-Logged in as
-                      {this.props.lastfm_me.name}
+              {this.props.spotify_me && this.props.spotify_authorization && (
+                <div className="checkbox-group__item">
+                  <label>
+                    <input
+                      type="checkbox"
+                      name="spotify"
+                      checked={this.state.spotify}
+                      onChange={(e) => this.setState({ spotify: !this.state.spotify })}
+                    />
+                    <div className="label">
+                      <div>
+                        <div className="title">Spotify authorization</div>
+                        <div className="description mid_grey-text">
+                          {`Logged in as ${this.props.spotify_me.name}`}
+                        </div>
+                      </div>
                     </div>
-                  </span>
-                </label>
-              ) : null}
+                  </label>
+                </div>
+              )}
 
-              {this.props.genius_me && this.props.genius_authorization ? (
-                <label>
-                  <input
-                    type="checkbox"
-                    name="genius_authorization"
-                    checked={this.state.genius}
-                    onChange={(e) => this.setState({ genius: !this.state.genius })}
-                  />
-                  <span className="label">
-                    <div className="title">Genius authorization</div>
-                    <div className="description mid_grey-text">
-Logged in as
-                      {this.props.genius_me.name}
+              {this.props.lastfm_me && this.props.lastfm_authorization && (
+                <div className="checkbox-group__item">
+                  <label>
+                    <input
+                      type="checkbox"
+                      name="lastfm_authorization"
+                      checked={this.state.lastfm}
+                      onChange={(e) => this.setState({ lastfm: !this.state.lastfm })}
+                    />
+                    <div className="label">
+                      <div>
+                        <div className="title">LastFM authorization</div>
+                        <div className="description mid_grey-text">
+                          {`Logged in as ${this.props.lastfm_me.name}`}
+                        </div>
+                      </div>
                     </div>
-                  </span>
-                </label>
-              ) : null}
+                  </label>
+                </div>
+              )}
+
+              {this.props.genius_me && this.props.genius_authorization && (
+                <div className="checkbox-group__item">
+                  <label>
+                    <input
+                      type="checkbox"
+                      name="genius_authorization"
+                      checked={this.state.genius}
+                      onChange={(e) => this.setState({ genius: !this.state.genius })}
+                    />
+                    <div className="label">
+                      <div>
+                        <div className="title">Genius authorization</div>
+                        <div className="description mid_grey-text">
+                            {`Logged in as ${this.props.genius_me.name}`}
+                        </div>
+                      </div>
+                    </div>
+                  </label>
+                </div>
+              )}
             </div>
           </div>
 
@@ -228,4 +241,4 @@ const mapDispatchToProps = (dispatch) => ({
   uiActions: bindActionCreators(uiActions, dispatch),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(ShareConfiguration);
+export default connect(mapStateToProps, mapDispatchToProps)(ShareConfiguration);