Removing test scrolling; Icon library to prevent cache lag

src/js/App.js

@@ -84,12 +84,15 @@ class App extends React.Component{
 	componentDidUpdate(prevProps){
 
 		// We've navigated to a new location
-	    if (this.props.location !== prevProps.location) {
+	    if (this.props.location !== prevProps.location){
 
 			// Close context menu
 			this.props.uiActions.hideContextMenu();
-		
-			console.log(prevProps.location);
+
+			// Restore scroll to top
+			// TODO: Detect if we've gone BACK, and then restore to previous
+			// scroll position. We'll need to keep a running history of locations
+			// and scroll positions, which may be performance-hindering
 			$(window).scrollTop(0)
 		}
 	}

src/js/components/Icon.js

@@ -1,46 +1,55 @@
 
-import React, { PropTypes } from 'react'
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { createStore, bindActionCreators } from 'redux';
 
-export default class Icon extends React.Component{
+import * as helpers from '../helpers';
+import * as uiActions from '../services/ui/actions';
+
+class Icon extends React.Component{
 
 	constructor(props){
 		super(props);
-
-		this.state = {
-			data: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"></svg>'
-		}
 	}
 
 	componentDidMount(){
-		this.load();
+		if (!this.props.icons[this.props.name]){
+			this.props.uiActions.getIcon(this.props.name);
+		}
 	}
 
 	componentWillReceiveProps(newProps){
-		if (this.props.name !== newProps.name){
-			this.load(newProps.name);
+		if (this.props.name !== newProps.name && !newProps.icons[newProps.name]){
+			this.props.uiActions.getIcon(newProps.name);
 		}
 	}
 
-	load(name = this.props.name){		
-		var self = this;
-		var url = 'assets/icons/'+name+'.svg';
-		var xmlHttp = new XMLHttpRequest();
-
-		xmlHttp.onreadystatechange = function(){ 
-			if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
-				self.setState({data: xmlHttp.responseText});
-			}
-		}
-		xmlHttp.open("GET", url, true);
-		xmlHttp.send(null);
-	}
-
 	render(){
 		var className = 'icon';
 		if (this.props.className){
 			className += ' '+this.props.className;
 		}
 
-		return <span className={className} dangerouslySetInnerHTML={{ __html: this.state.data}}></span>;
+		var svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"></svg>';
+
+		if (this.props.icons[this.props.name]){
+			svg = this.props.icons[this.props.name];
+		}
+
+		return <span className={className} dangerouslySetInnerHTML={{ __html: svg}}></span>;
 	}
-}
+}
+
+const mapStateToProps = (state, ownProps) => {
+	return {
+		icons: (state.ui.icons ? state.ui.icons : {})
+	}
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		uiActions: bindActionCreators(uiActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Icon)

src/js/services/ui/actions.js

@@ -105,6 +105,38 @@ export function set(data){
     }
 }
 
+export function getIcon(name){
+    return (dispatch, getState) => {
+        var config = {
+            method: 'GET',
+            timeout: 15000,
+            url: 'assets/icons/'+name+'.svg'
+        }
+        $.ajax(config).then(
+                response => {
+                    dispatch({
+                        type: 'ICON_LOADED',
+                        key: name,
+                        icon: new XMLSerializer().serializeToString(response)
+                    })
+                },
+                (xhr, status, error) => {
+                    dispatch(
+                        handleException(
+                            'Could not load '+name+' icon',
+                            {
+                                config: config,
+                                xhr: xhr,
+                                status: status,
+                                error: error
+                            }
+                        )
+                    );
+                }
+            )
+    }
+}
+
 
 
 /**

src/js/services/ui/reducer.js

@@ -24,6 +24,11 @@ export default function reducer(ui = {}, action){
         case 'SET_SELECTED_TRACKS':
             return Object.assign({}, ui, { selected_tracks : Object.assign([],action.keys) })
 
+        case 'ICON_LOADED':
+            var icons = Object.assign({}, ui.icons);
+            icons[action.key] = action.icon;
+            return Object.assign({}, ui, {icons : icons});
+
 
         /**
          * Context menu

src/scss/components/_header.scss

@@ -67,10 +67,13 @@ main {
 			margin-bottom: -10px;
 
 			.icon {
-				height: 1.2rem;
-				margin-bottom: 5px;
-				padding-right: 10px;
+				margin-bottom: 6px;
+				padding-right: 6px;
 				margin-left: 10px;
+
+				svg {
+					height: 1.2rem;
+				}
 			}
 
 			h1 {

src/scss/components/_playback-controls.scss

@@ -235,8 +235,9 @@
 						margin-bottom: 0;
 
 						.icon {
-							width: 12px;
-							height: 12px;
+							svg {
+								height: 12px;
+							}
 						}
 					}
 					&.previous {

src/scss/components/_sidebar.scss

@@ -57,7 +57,7 @@ aside{
 			line-height: 18px;
 
 			.icon {
-				padding-right: 10px;
+				padding-right: 6px;
 				vertical-align: top;
 				margin-top: 0;
 
@@ -139,5 +139,15 @@ aside{
 		.close {
 			display: block;
 		}
+
+		nav {
+			section {
+				padding-bottom: 10px;
+
+				title {
+					padding-bottom: 2px;
+				}
+			}
+		}
 	}
 }

src/scss/views/_settings.scss

@@ -144,6 +144,13 @@
 			}
 		}
 
+		.field.current-user {
+			.text {
+				padding-top: 10px;
+				padding-bottom: 10px;
+			}
+		}
+
 		section {
 			padding: 20px;
 		}