compile coffeescript and sync to _attachments

_attachments/components/ListComponent.coffee

@@ -27,6 +27,7 @@ factory = (request, _, React, History, today, require) ->
       # function, this session extracts then from an object and build
       # a query string, which then is passed to the History module, a simple
       # wrapper around browsers window.history.
+      viewparams.include_docs = true
       query = _.pairs(viewparams).map((pair) -> pair.join '=').join '&'
       History.to "/someKindOfThing?#{query}"
 
@@ -53,13 +54,23 @@ factory = (request, _, React, History, today, require) ->
 
   Results = React.createClass
     displayName: 'Results'
+
+    showItem: (thingid, e) ->
+      # this will render a click on one of the elements of the list
+      # the click will cause a signal to be emitted by a global event
+      # emitter that will be listened by the Thing component, which
+      # will then render itself.
+      ee.emit 'showThing', thingid
+
     render: ->
       (table {},
-        (h1 {}, 'items of some kind')
+        (h1 {}, 'things of some kind')
         (ul {},
-          (li {ref: item._id}
-          , item.value
-          ) for item in @props.results
+          (li
+            ref: thing._id
+            onClick: @showItem.bind @, thing._id
+          , thing.value
+          ) for thing in @props.results
         )
       )
 

_attachments/components/ListComponent.js

@@ -0,0 +1,73 @@
+var deps, factory;
+
+deps = ['lib/superagent', 'lib/lodash', 'lib/react', 'lib/history', 'lib/today'];
+
+factory = function(request, _, React, History, today, require) {
+  var ListComponent, Results, a, button, dd, div, dl, dt, fieldset, form, h1, h2, h3, hr, input, label, legend, p, span, style, table, td, textarea, th, tr, _ref;
+  _ref = React.DOM, style = _ref.style, button = _ref.button, div = _ref.div, span = _ref.span, a = _ref.a, p = _ref.p, hr = _ref.hr, dl = _ref.dl, dt = _ref.dt, dd = _ref.dd, label = _ref.label, fieldset = _ref.fieldset, legend = _ref.legend, table = _ref.table, tr = _ref.tr, th = _ref.th, td = _ref.td, h1 = _ref.h1, h2 = _ref.h2, h3 = _ref.h3, form = _ref.form, input = _ref.input, textarea = _ref.textarea;
+  ListComponent = React.createClass({
+    displayName: 'ListResults',
+    getInitialState: function() {
+      return {
+        list: this.props.listOfSomeKindOfThing
+      };
+    },
+    reload: function(viewparams, e) {
+      var query, self;
+      viewparams.include_docs = true;
+      query = _.pairs(viewparams).map(function(pair) {
+        return pair.join('=');
+      }).join('&');
+      History.to("/someKindOfThing?" + query);
+      self = this;
+      request.get("/_list/standardListOfSomeKindOfThing/someKindOfThing").set('Accept', 'application/json').query(viewparams).end(function(res) {
+        return self.setState({
+          list: res.body
+        });
+      });
+      return e.preventDefault();
+    },
+    render: function() {
+      return div({}, button({
+        onClick: this.reload.bind(this)
+      }, {
+        startkey: [2014, null]
+      }, 'newer results'), button({
+        onClick: this.reload.bind(this)
+      }, {
+        endkey: [2013, {}]
+      }, 'older results'), Results({
+        results: this.state.list
+      }));
+    }
+  });
+  Results = React.createClass({
+    displayName: 'Results',
+    showItem: function(thingid, e) {
+      return ee.emit('showThing', thingid);
+    },
+    render: function() {
+      var thing;
+      return table({}, h1({}, 'things of some kind'), ul({}, (function() {
+        var _i, _len, _ref2, _results;
+        _ref2 = this.props.results;
+        _results = [];
+        for (_i = 0, _len = _ref2.length; _i < _len; _i++) {
+          thing = _ref2[_i];
+          _results.push(li({
+            ref: thing._id,
+            onClick: this.showItem.bind(this, thing._id)
+          }, thing.value));
+        }
+        return _results;
+      }).call(this)));
+    }
+  });
+  return ListComponent;
+};
+
+if (typeof define === 'function' && define.amd) {
+  define(deps, factory);
+} else if (typeof exports === 'object') {
+  module.exports = factory.apply(this, deps.map(require));
+}

_attachments/components/RadioField.js

@@ -9,7 +9,7 @@ factory = function(React) {
     displayName: 'RadioField',
     handleChange: function(e) {
       if (e.target.checked) {
-        return this.props.reportValue(this.props.name, e.target.value);
+        return this.props.onChange(this.props.name, e.target.value);
       }
     },
     render: function() {

_attachments/components/RangeField.js

@@ -8,7 +8,7 @@ factory = function(React) {
   RangeField = React.createClass({
     displayName: 'RangeField',
     handleChange: function(e) {
-      return this.props.reportInputChange(e);
+      return this.props.onChange(e);
     },
     componentDidMount: function() {
       var elem;

_attachments/components/Thing.coffee

@@ -1,116 +1,43 @@
-deps = ['lib/superagent', 'lib/lodash', 'lib/react', 'lib/history', 'components/RadioField', 'components/MoneyField', 'components/PacienteField', 'components/PagamentosField']
-factory = (request, _, React, History, RadioField, MoneyField, PacienteField, PagamentosField) ->
+deps = ['lib/superagent', 'lib/lodash', 'lib/react']
+factory = (request, _, React, RadioField) ->
   {style, button, div, span, a, p, hr, dl, dt, dd, label, fieldset, legend, table, tr, th, td, h1, h2, h3, form, input, textarea} = React.DOM
 
-  Operacao = React.createClass
+  Thing = React.createClass
     getInitialState: ->
-      operacao: @props.operacao or {}
-      editing: false
+      # this component will have all his data passed to it at @props.thing
+      # when it is rendered by a call to the displayThing show function at
+      # server side, otherwise none, it will render itself empty, waiting
+      # to populate itself with data after a client side call.
+      thing: @props.thing or {}
 
     componentDidMount: ->
+      # here we listen for the showThing signal, using the global event
+      # emitter `ee`. the signal will be emitted anytime someone clicks
+      # at some element of the list at the ListComponent.
       self = this
-      ee.on 'showOperacao', (operacao) ->
-        self.setState operacao: operacao
-        History.to "/operacao/#{operacao._id}"
+      ee.on 'showThing', (thingid) ->
+        request.get("/_shows/displayThing/#{thingid}")
+               .set('Accept', 'application/json')
+               .end (res) ->
+                 self.setState thing: res.body
 
-    saveOperacao: (e) ->
-      operacao = @state.operacao
-      self = @
-      request.post('/_ddoc/_update/operacao')
-             .send(operacao)
-             .end (res) ->
-                console.log res
-                if res.ok
-                  operacao = JSON.parse res.body
-                  self.setState operacao: operacao
-      e.preventDefault()
-
-    startEditing: (e) ->
-      @setState editing: true
-      e.preventDefault()
-
-    handleChange: (e) ->
-      operacao = @state.operacao
-      operacao[e.target.name] = e.target.value
-      @setState operacao: operacao
+        self.setState thing: thing
+        History.to "/thing/#{thing._id}"
 
     render: ->
-      operacao = @state.operacao
-      if @state.editing or not @props.ref
-        (tr {},
-          (td {},
-            (DateField
-              name: 'date'
-              value: operacao.date
-              onChange: @handleChange)
-          )
-          (td {},
-            (RadioField
-              name: 'cod'
-              fields: [{
-                label: '1',
-                value: 1
-              }, {
-                label: '2',
-                value: 2
-              }, {
-                label: '3',
-                value: 3
-              }, {
-                label: '4',
-                value: 4
-              }]
-              reportValue: @handleChange
-              value: operacao.cod),
-          ),
-          (td {},
-            (PacienteField
-              name: pacienteid
-              value: operacao.pacienteid
-              onChange: @handleChange)
-          ),
-          (td {},
-            (MoneyField
-              name: 'orcamento'
-              value: operacao.orcamento
-              onChange: @handleChange
-            ) if @state.cod in (1, 2),
-          ),
-          (td {},
-            (PagamentosField
-              name: 'pagamento'
-              onChange: @handleChange
-              value: operacao.pagamentos
-            ) if @state.code in (1, 3, 4),
-          ),
-          (td {},
-            (input
-              type: 'text'
-              name: 'dentista'
-              onChange: @handleChange
-              value: operacao.dentista)
-          )
-          (td {},
-            (button type: 'submit', 'Salvar')
-          ),
-        )
-      else
+      thing = @state.thing
+      if thing._id
         (div {},
-          (tr {},
-            (td {}, operacao.date),
-            (td {}, operacao.cod),
-            (td {}, operacao.paciente.ficha),
-            (td {}, operacao.paciente.nome),
-            (td {}, operacao.orcamento),
-            (td {}, operacao.valor),
-            (td {}, operacao.dentista),
-            (td {},
-              (button {onClick: @startEditing}, 'editar')
-            )
-          )
+          (h2 {}, thing.title)
+          (dt {}, 'Property'),
+          (dd {}, thing.property),
+          (dt {}, 'Kind'),
+          (dd {}, thing.kind),
+          (dt {}, 'Value'),
+          (dd {}, thing.value),
         )
-
-  return Operacao
+      else
+        (div {style: 'display: none'})
 
 if typeof define == 'function' and define.amd
   define deps, factory

_attachments/components/Thing.js

@@ -0,0 +1,47 @@
+var deps, factory;
+
+deps = ['lib/superagent', 'lib/lodash', 'lib/react'];
+
+factory = function(request, _, React, RadioField) {
+  var Thing, a, button, dd, div, dl, dt, fieldset, form, h1, h2, h3, hr, input, label, legend, p, span, style, table, td, textarea, th, tr, _ref;
+  _ref = React.DOM, style = _ref.style, button = _ref.button, div = _ref.div, span = _ref.span, a = _ref.a, p = _ref.p, hr = _ref.hr, dl = _ref.dl, dt = _ref.dt, dd = _ref.dd, label = _ref.label, fieldset = _ref.fieldset, legend = _ref.legend, table = _ref.table, tr = _ref.tr, th = _ref.th, td = _ref.td, h1 = _ref.h1, h2 = _ref.h2, h3 = _ref.h3, form = _ref.form, input = _ref.input, textarea = _ref.textarea;
+  return Thing = React.createClass({
+    getInitialState: function() {
+      return {
+        thing: this.props.thing || {}
+      };
+    },
+    componentDidMount: function() {
+      var self;
+      self = this;
+      return ee.on('showThing', function(thingid) {
+        request.get("/_shows/displayThing/" + thingid).set('Accept', 'application/json').end(function(res) {
+          return self.setState({
+            thing: res.body
+          });
+        });
+        self.setState({
+          thing: thing
+        });
+        return History.to("/thing/" + thing._id);
+      });
+    },
+    render: function() {
+      var thing;
+      thing = this.state.thing;
+      if (thing._id) {
+        return div({}, h2({}, thing.title), dt({}, 'Property'), dd({}, thing.property), dt({}, 'Kind'), dd({}, thing.kind), dt({}, 'Value'), dd({}, thing.value));
+      } else {
+        return div({
+          style: 'display: none'
+        });
+      }
+    }
+  });
+};
+
+if (typeof define === 'function' && define.amd) {
+  define(deps, factory);
+} else if (typeof exports === 'object') {
+  module.exports = factory.apply(this, deps.map(require));
+}

app/app.js

@@ -12,8 +12,7 @@ curl.config({
 
 curl(['eventemitter'], function(EventEmitter) {
   window.ee = new EventEmitter();
-  return curl(['lib/react', 'components/Operacoes', 'components/Despesas'], function(React, Login, SearchResults, Bicho) {
-    React.renderComponent(Operacoes(window.data.operacoes), document.getElementById('operacoes'));
-    return React.renderComponent(Despesas(window.data.despesas), document.getElementById('despesas'));
+  return curl(['lib/react', 'components/SomeKindResultsDisplayComponent'], function(React, SomeFormOfDisplayOfSomeKindOfThing) {
+    return React.renderComponent(SomeFormOfDisplayOfSomeKindOfThing(window.data), document.getElementById('someKindOfThingList'));
   });
 });

app/template.js

@@ -1,11 +1,9 @@
-var Despesas, Operacoes, React;
+var React, SomeFormOfDisplayOfSomeKindOfThing;
 
 React = require('lib/react');
 
-Operacoes = require('components/Operações');
-
-Despesas = require('components/Despesas');
+SomeFormOfDisplayOfSomeKindOfThing = require('components/SomeFormOfDisplayOfSomeKindOfThing');
 
 module.exports = function(browsercode, data) {
-  return "<!DOCTYPE html>\n<html>\n  <head>\n    <title>Curitiba 942</title>\n    <link rel=\"stylesheet\" href=\"/default.css\" type=\"text/css\">\n  </head>\n  <body>\n\n    <div id=\"operacoes\">\n      " + (React.renderComponentToString(Operacoes(data.operacoes))) + "\n    </div>\n    <div id=\"despesas\">\n      " + (React.renderComponentToString(Despesas(data.despesas))) + "\n    </div>\n\n  </body>\n\n  <script src=\"//cdnjs.cloudflare.com/ajax/libs/curl/0.7.3/curl/curl.min.js\"></script>\n  <script>\n    window.data = " + (toJSON(data)) + "\n    " + browsercode + "\n  </script>\n\n</html>";
+  return "<!DOCTYPE html>\n<html>\n  <head>\n    <title>Curitiba 942</title>\n    <link rel=\"stylesheet\" href=\"/default.css\" type=\"text/css\">\n  </head>\n  <body>\n\n    <div id=\"someKindOfThingList\">\n      " + (React.renderComponentToString(SomeFormOfDisplayOfSomeKindOfThing(data))) + "\n    </div>\n\n  </body>\n\n  <script src=\"//cdnjs.cloudflare.com/ajax/libs/curl/0.7.3/curl/curl.min.js\"></script>\n  <script>\n    window.data = " + (toJSON(data)) + "\n    " + browsercode + "\n  </script>\n\n</html>";
 };