Rewrite asset managment

src/js/App.jsx

@@ -15,9 +15,10 @@ import ToastHandler from './Components/toastHandler';
 
 import UWPNoise from '../img/uwp-noise.png';
 import '../css/App.css';
-import Search from './Search';
 import Games from './games';
+import Game from './Game';
 import Import from './Import';
+import Search from './Search';
 
 import Steam from './Steam';
 
@@ -178,6 +179,7 @@ class App extends React.Component {
 
                 <Route exact path="/" component={Games} />
                 <Route exact path="/import" component={Import} />
+                <Route exact path="/game" component={Game} />
                 <Route exact path="/search" component={Search} />
               </div>
             </NavigationView>

src/js/Components/Games/GameListItem.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ListView from 'react-uwp/ListView';
+
+class GameListItem extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const { platform } = this.props;
+
+    this.platform = platform;
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(index) {
+    const { onItemClick } = this.props;
+    onItemClick(this.platform, index);
+  }
+
+  render() {
+    const { platform, platformName, listSource } = this.props;
+    const { theme } = this.context;
+
+    return (
+      <div key={platform} style={{ paddingLeft: 10 }}>
+        <div style={{
+          ...theme.typographyStyles.subTitleAlt,
+          display: 'inline-block',
+          position: 'sticky',
+          zIndex: 3,
+          marginLeft: 10,
+          top: -22,
+        }}
+        >
+          {platformName}
+        </div>
+        <ListView
+          style={{ border: 0, width: '100%' }}
+          background="transparent"
+          onChooseItem={this.handleClick}
+          listSource={listSource}
+        />
+      </div>
+    );
+  }
+}
+
+GameListItem.propTypes = {
+  platform: PropTypes.string.isRequired,
+  listSource: PropTypes.arrayOf(PropTypes.node).isRequired,
+  platformName: PropTypes.string.isRequired,
+  onItemClick: PropTypes.func,
+};
+
+GameListItem.defaultProps = {
+  onItemClick: () => {},
+};
+
+GameListItem.contextTypes = { theme: PropTypes.object };
+
+export default GameListItem;

src/js/Components/spinner.jsx

@@ -4,7 +4,7 @@ import { ProgressCircle } from 'react-desktop/windows';
 
 const Spinner = (props, context) => {
   const { theme } = context;
-  const { text } = props;
+  const { text, size, style } = props;
 
   return (
     <div
@@ -15,20 +15,25 @@ const Spinner = (props, context) => {
         justifyContent: 'center',
         width: '100%',
         height: '100%',
+        ...style,
       }}
     >
-      <ProgressCircle size="100" color={theme.accent} />
+      <ProgressCircle size={size} color={theme.accent} />
       <p style={{ marginTop: 15 }}>{text}</p>
     </div>
   );
 };
 
 Spinner.propTypes = {
   text: PropTypes.string,
+  size: PropTypes.number,
+  style: PropTypes.object,
 };
 
 Spinner.defaultProps = {
   text: '',
+  size: 100,
+  style: {},
 };
 
 Spinner.contextTypes = { theme: PropTypes.object };