Merge pull request #2 from ReputationVIP/team-settings

Add TeamSettings React component
semji · Jun 11, 2016 · bc678f5 · bc678f5
2 parents 2b2d3ce + 7a56d26
commit bc678f5
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 43 deletions.
diff --git a/.meteor/packages b/.meteor/packages
@@ -19,3 +19,4 @@ ecmascript              # Enable ECMAScript2015+ syntax in app code
 
 autopublish             # Publish all data to the clients (for prototyping)
 insecure                # Allow all DB writes from clients (for prototyping)
+react-meteor-data
diff --git a/.meteor/versions b/.meteor/versions
@@ -51,6 +51,7 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
+[email protected]
 [email protected]
 [email protected]
 [email protected]
@@ -61,6 +62,7 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
+tmeasday:[email protected]
 [email protected]
 [email protected]
 [email protected]

diff --git a/client/main.html b/client/main.html
@@ -1,25 +1,7 @@
 <head>
-  <title>simple</title>
+  <title>MoodTracker.io</title>
 </head>
 
 <body>
-  <h1>Welcome to Meteor!</h1>
-
-  {{> hello}}
-  {{> info}}
+  <div id="render-target"></div>
 </body>
-
-<template name="hello">
-  <button>Click Me</button>
-  <p>You've pressed the button {{counter}} times.</p>
-</template>
-
-<template name="info">
-  <h2>Learn Meteor!</h2>
-  <ul>
-    <li><a href="https://www.meteor.com/try">Do the Tutorial</a></li>
-    <li><a href="http://guide.meteor.com">Follow the Guide</a></li>
-    <li><a href="https://docs.meteor.com">Read the Docs</a></li>
-    <li><a href="https://forums.meteor.com">Discussions</a></li>
-  </ul>
-</template>
diff --git a/client/main.js b/client/main.js
diff --git a/client/main.jsx b/client/main.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Meteor } from 'meteor/meteor';
+import { render } from 'react-dom';
+
+import App from '../imports/ui/App.jsx';
+
+Meteor.startup(() => {
+    render(<App />, document.getElementById('render-target'));
+});
diff --git a/imports/api/teams.js b/imports/api/teams.js
@@ -0,0 +1,3 @@
+import { Mongo } from 'meteor/mongo';
+
+export const Teams = new Mongo.Collection('teams');
diff --git a/imports/ui/App.jsx b/imports/ui/App.jsx
@@ -0,0 +1,37 @@
+import React, { Component, PropTypes } from 'react';
+import TeamSettings from './TeamSettings';
+import { createContainer } from 'meteor/react-meteor-data';
+
+import { Teams } from '../api/teams.js';
+
+// App component - represents the whole app
+class App extends Component {
+
+    render() {
+        return (
+            <div className="container">
+                <header>
+                    <h1>MoodTracker</h1>
+
+                    <TeamSettings team={this.props.team} />
+                </header>
+            </div>
+        );
+    }
+}
+
+App.propTypes = {
+    team: PropTypes.object.isRequired
+};
+
+export default createContainer(() => {
+    if (!Teams.findOne({})) {
+        Teams.insert({
+            name: 'My Team'
+        });
+    }
+
+    return {
+        team: Teams.findOne({})
+    };
+}, App);
diff --git a/imports/ui/TeamSettings.jsx b/imports/ui/TeamSettings.jsx
@@ -0,0 +1,28 @@
+import React, { Component, PropTypes } from 'react';
+
+export default class TeamParameters extends Component {
+    render() {
+        return (
+            <div>
+                <h2>Configure your team settings ({this.props.team.name})</h2>
+                <form>
+                    <div class="form-row">
+                        <label for="teamName">Team name</label>
+                        <input id="teamName" type="text" />
+                    </div>
+
+                    <div class="form-row">
+                        <label for="notificationHour">When will Slack asks your team its daily mood?</label>
+                        <input id="notificationHour" type="text" />
+                    </div>
+
+                    <button type="submit">Update Settings</button>
+                </form>
+            </div>
+        );
+    }
+}
+
+TeamParameters.propTypes = {
+    team: PropTypes.object.isRequired
+};
diff --git a/package.json b/package.json
@@ -5,6 +5,9 @@
     "start": "meteor run"
   },
   "dependencies": {
-    "meteor-node-stubs": "~0.2.0"
+    "meteor-node-stubs": "~0.2.0",
+    "react": "^15.1.0",
+    "react-addons-pure-render-mixin": "^15.1.0",
+    "react-dom": "^15.1.0"
   }
 }
diff --git a/server/main.js b/server/main.js
@@ -1,4 +1,5 @@
 import { Meteor } from 'meteor/meteor';
+import '../imports/api/teams.js';
 
 Meteor.startup(() => {
   // code to run on server at startup
Original file line number	Diff line number	Diff line change
Expand Up		@@ -19,3 +19,4 @@ ecmascript # Enable ECMAScript2015+ syntax in app code

		autopublish # Publish all data to the clients (for prototyping)
		insecure # Allow all DB writes from clients (for prototyping)
		react-meteor-data
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { Mongo } from 'meteor/mongo';

		export const Teams = new Mongo.Collection('teams');