base mod show methods

src/mods.go

@@ -4,7 +4,6 @@ import (
     "io/ioutil"
     "log"
     "encoding/json"
-    "os"
 )
 
 type Mod struct {
@@ -22,20 +21,16 @@ func listInstalledMods(modDir string) ([]Mod, error) {
 
     if err != nil {
         log.Println(err.Error())
-        os.Exit(1)
+        return nil, err
     }
 
-    log.Print(file)
-
     var result ModsList
     err_json := json.Unmarshal(file, &result)
 
     if err_json != nil {
         log.Println(err_json.Error())
-        os.Exit(1)
+        return result.Mods, err_json
     }
 
-    log.Printf("%v", result)
-
 	return result.Mods, nil
 }

ui/App/components/Mods/Mod.jsx

@@ -1,14 +1,6 @@
 import React from 'react';
 
 class Mod extends React.Component {
-    togglePress(e) {
-        e.preventDefault();
-        console.log(this.refs.modName);
-        const node = this.refs.modName;
-        const modName = node.name;
-        this.props.toggleMod(modName);
-    }
-
     render() {
         if (this.props.mod.enabled === "false") {
             this.modStatus = <span className="label label-danger">Disabled</span>
@@ -20,14 +12,12 @@ class Mod extends React.Component {
                 <td>{this.props.mod.name}</td>
                 <td>{this.modStatus}</td>
                 <td>
-                    <form onSubmit={this.togglePress.bind(this)}>
+                    <input className='btn btn-default btn-sm'
-                        <input className='btn btn-default btn-sm'
+                        ref='modName'
-                            ref='modName'
+                        type='submit'
-                            type='submit'
+                        value='Toggle'
-                            value='Toggle'
+                        name={this.props.mod.name}
-                            name={this.props.mod.name}
+                    />
-                        />
-                    </form>
                 </td>
             </tr>
         )
@@ -35,8 +25,7 @@ class Mod extends React.Component {
 }
 
 Mod.propTypes = {
-    mod: React.PropTypes.object.isRequired,
+    mod: React.PropTypes.object.isRequired
-    toggleMod: React.PropTypes.func.isRequired
 }
 
 export default Mod

ui/App/components/Mods/overview.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import Mod from './Mod';
+
+class ModOverview extends React.Component {
+    render() {
+        <div className="box">
+            <div className="box-header">
+                <h3 className="box-title">Manage Mods</h3>
+            </div>
+
+            <div className="box-body">
+                <div className="table-responsive">
+                    <table className="table table-striped">
+                        <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Status</th>
+                            <th>Toggle Status</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        {this.props.installedMods.map ( (mod, i) => {
+                            return(
+                                <Mod
+                                    key={i}
+                                    mod={mod}
+                                    {...this.props}
+                                />
+                            )
+                        })}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    }
+}
+
+ModOverview.propTypes = {
+    installedMods: React.PropTypes.array.isRequired
+}
+
+export default ModOverview;

ui/App/components/ModsContent.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {IndexLink} from 'react-router';
+import ModOverview from './Mods/overview';
 
 class ModsContent extends React.Component {
     constructor(props) {
@@ -46,7 +47,9 @@ class ModsContent extends React.Component {
                 </section>
 
                 <section className="content">
-                    Test
+                    <ModOverview
+                        {...this.state}
+                    />
                 </section>
             </div>
         )