You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@couchdb.apache.org by garrensmith <gi...@git.apache.org> on 2016/12/06 08:29:29 UTC
[GitHub] couchdb-fauxton pull request #820: Reactify
GitHub user garrensmith opened a pull request:
https://github.com/apache/couchdb-fauxton/pull/820
Reactify
You can merge this pull request into a Git repository by running:
$ git pull https://github.com/garrensmith/couchdb-fauxton reactify
Alternatively you can review and apply these changes as the patch at:
https://github.com/apache/couchdb-fauxton/pull/820.patch
To close this pull request, make a commit to your master/trunk branch
with (at least) the following in the commit message:
This closes #820
----
commit 5242e19b989ac683a43b858e5ca154c887081433
Author: Garren Smith <ga...@gmail.com>
Date: 2016-12-05T09:57:08Z
basic setup of single react point
commit c3fc6bfc456ba6528647e54a155b983307d59592
Author: Garren Smith <ga...@gmail.com>
Date: 2016-12-06T08:25:17Z
Move to all React
This removes the last parts of backbone.layout manager. We now have a
single React entry point.
commit c06c1cad1a5d826318f8328c774e4f7423681101
Author: Garren Smith <ga...@gmail.com>
Date: 2016-12-06T08:27:34Z
remove sections we no longer use
----
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #820: Reactify
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/820#discussion_r91295992
--- Diff: app/addons/fauxton/navigation/tests/componentsSpec.react.jsx ---
@@ -19,26 +19,18 @@ import React from "react";
import ReactDOM from "react-dom";
import TestUtils from "react-addons-test-utils";
import sinon from "sinon";
+import {mount} from 'enzyme';
var assert = utils.assert;
describe('NavBar', function () {
describe('burger', function () {
- var container, burgerEl, toggleMenu;
-
- beforeEach(function () {
- toggleMenu = sinon.spy();
- container = document.createElement('div');
- burgerEl = TestUtils.renderIntoDocument(<Views.Burger toggleMenu={toggleMenu} />, container);
- });
-
- afterEach(function () {
- ReactDOM.unmountComponentAtNode(container);
- });
-
it('dispatch TOGGLE_NAVBAR_MENU on click', function () {
- TestUtils.Simulate.click(ReactDOM.findDOMNode(burgerEl));
+ const toggleMenu = sinon.spy();
+ const burgerEl = mount(<Views.Burger toggleMenu={toggleMenu} />);
+ burgerEl.simulate('click');
+ //TestUtils.Simulate.click(ReactDOM.findDOMNode(burgerEl));
--- End diff --
delete
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #820: Reactify
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/820#discussion_r91296286
--- Diff: app/core/router.js ---
@@ -48,32 +49,35 @@ export default Backbone.Router.extend({
},
addModuleRouteObject: function (RouteObject) {
- var that = this;
- var masterLayout = FauxtonAPI.masterLayout,
- routeUrls = RouteObject.prototype.getRouteUrls();
+ const that = this;
+ const routeUrls = RouteObject.prototype.getRouteUrls();
- _.each(routeUrls, function (route) {
- this.route(route, route.toString(), function () {
- var args = Array.prototype.slice.call(arguments),
- roles = RouteObject.prototype.getRouteRoles(route),
- authPromise = FauxtonAPI.auth.checkAccess(roles);
+ routeUrls.forEach(route => {
+ this.route(route, route.toString(), (...args) => {
+ //const args = Array.prototype.slice.call(arguments),
--- End diff --
delete comment
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton issue #820: Reactify
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on the issue:
https://github.com/apache/couchdb-fauxton/pull/820
This is pretty cool `+384 \u22122,112`
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton issue #820: Reactify
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on the issue:
https://github.com/apache/couchdb-fauxton/pull/820
+1
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #820: Reactify
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith closed the pull request at:
https://github.com/apache/couchdb-fauxton/pull/820
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #820: Reactify
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/820#discussion_r91296455
--- Diff: assets/index.underscore ---
@@ -47,23 +47,11 @@
</div>
</noscript>
- <div id="notifications"></div>
- <!-- Main container. -->
- <div role="main" id="main">
- <div id="app-container">
- <div class="wrapper">
- <div id="primary-navbar"></div>
- </div>
- </div>
- </div>
+ <div id="app"></div>
<!-- Application source. -->
<script src="<%= bundlejs %>" type="text/javascript"></script>
- <% if (development) {%>
- <script src="/templates.js" type="text/javascript"></script>
- <%}%>
-
--- End diff --
finally! :)
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton issue #820: Reactify
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on the issue:
https://github.com/apache/couchdb-fauxton/pull/820
merged!
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request #820: Reactify
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/820#discussion_r91296234
--- Diff: app/core/routeObject.js ---
@@ -14,325 +14,46 @@ import FauxtonAPI from "./base";
import React from "react";
import ReactDOM from "react-dom";
import Backbone from "backbone";
+import _ from "lodash";
var RouteObject = function (options) {
this._options = options;
this.reactComponents = {};
this._configure(options || {});
this.initialize.apply(this, arguments);
- this.addEvents();
-};
-
-var broadcaster = {};
-_.extend(broadcaster, Backbone.Events);
-
-RouteObject.on = function (eventName, fn) {
- broadcaster.on(eventName, fn);
};
/* How Route Object events work
- To listen to a specific route objects events:
-
- myRouteObject = FauxtonAPI.RouteObject.extend({
- events: {
- "beforeRender": "beforeRenderEvent"
- },
-
- beforeRenderEvent: function (view, selector) {
- console.log('Hey, beforeRenderEvent triggered',arguments);
- },
- });
-
- It is also possible to listen to events triggered from all Routeobjects.
- This is great for more general things like adding loaders, hooks.
-
- FauxtonAPI.RouteObject.on('beforeRender', function (routeObject, view, selector) {
- console.log('hey, this will trigger when any routeobject renders a view');
- });
- Current Events to subscribe to:
- * beforeFullRender -- before a full render is being done
- * beforeEstablish -- before the routeobject calls establish
- * afterEstablish -- after the routeobject has run establish
- * beforeRender -- before a view is rendered
- * afterRender -- a view is finished being rendered
- * renderComplete -- all rendering is complete
+Its now very simple. We don't want it to do much. It creates a list of routes. Then each route callback must return
+a React component that will be rendered into the app
*/
// Piggy-back on Backbone's self-propagating extend function
RouteObject.extend = Backbone.Model.extend;
-var routeObjectOptions = ["views", "routes", "events", "roles", "crumbs", "layout", "apiUrl", "establish"];
+var routeObjectOptions = ["routes", "roles"];
-_.extend(RouteObject.prototype, Backbone.Events, {
+_.extend(RouteObject.prototype, {
// Should these be default vals or empty funcs?
- views: {},
routes: {},
- events: {},
- crumbs: [],
- layout: "empty",
- apiUrl: null,
- hideNotificationPanel: null,
- loaderClassname: 'loader',
- renderedState: false,
- establish: function () {},
route: function () {},
roles: [],
- _promises: [],
initialize: function () {}
}, {
- renderWith: function (route, masterLayout, args) {
-
- // set the options for this render
- var options = {
- masterLayout: masterLayout,
- route: route,
- args: args
- };
-
- var promiseLayout = this.setTemplateOnFullRender(masterLayout);
-
- this.triggerBroadcast('beforeEstablish');
-
- var renderAllViews = _.bind(this.renderAllViews, this, options),
- establishError = _.bind(this.establishError, this),
- renderComplete = _.bind(this.renderComplete, this),
- callEstablish = _.bind(this.callEstablish, this),
- renderReactComponents = _.bind(this.renderReactComponents, this);
-
- const promise = this.establish();
-
- // Only start the view rendering process once the template has been rendered
- // otherwise we get double renders
- promiseLayout.then(function () {
- renderReactComponents();
-
- callEstablish(promise)
- .then(renderAllViews, establishError)
- .then(renderComplete, (err) => {
- console.error('renderpipeline broke');
- console.error('check your establish method');
-
- console.log(this.establish.toString());
- console.error(err);
- });
-
-
- }.bind(this));
- },
-
- setTemplateOnFullRender: function (masterLayout) {
-
- var promise = $.Deferred();
-
- // Only want to redo the template if its a full render
- if (!this.renderedState) {
- this.triggerBroadcast('beforeFullRender');
- masterLayout.setTemplate(this.layout).then(promise.resolve, promise.reject);
- } else {
- promise.resolve();
- }
-
- return promise;
- },
-
- renderReactComponents: function () {
- _.each(this.reactComponents, function (componentInfo, selector) {
- if ($(selector)[0]) {
- ReactDOM.render(React.createElement(componentInfo.component, componentInfo.props), $(selector)[0]);
- }
- });
- },
-
- callEstablish: function (establishPromise) {
- this.addPromise(establishPromise);
- return FauxtonAPI.when(establishPromise);
- },
-
- renderAllViews: function (options, resp) {
- var routeObject = this,
- renderView = _.bind(this.renderView, this, routeObject, options);
-
- this.triggerBroadcast('afterEstablish');
-
- var promises = _.map(routeObject.getViews(), renderView, this);
- return FauxtonAPI.when(promises);
- },
-
- renderView: function (routeObject, options, view, selector) {
- var viewInfo = {
- view: view,
- selector: selector,
- masterLayout: options.masterLayout
- };
-
- var renderViewOnLayout = _.bind(this.renderViewOnLayout, this, viewInfo);
-
- if (view.hasRendered) {
- this.triggerBroadcast('viewHasRendered', view, selector);
- return;
- }
-
- this.triggerBroadcast('beforeRender', view, selector);
-
- return this.callEstablish(view.establish()).then(renderViewOnLayout, this.establishError);
- },
-
- renderViewOnLayout: function (viewInfo, resp, xhr) {
- var masterLayout = viewInfo.masterLayout,
- triggerBroadcast = _.bind(this.triggerBroadcast, this);
-
- masterLayout.setView(viewInfo.selector, viewInfo.view);
- var promise = masterLayout.renderView(viewInfo.selector).promise();
-
- promise.then(function () {
- triggerBroadcast('afterRender', viewInfo.view, viewInfo.selector);
- });
-
- return promise;
- },
-
- establishError: function (resp) {
- if (!resp || !resp.responseText) { return; }
- FauxtonAPI.addNotification({
- msg: 'An Error occurred: ' + JSON.parse(resp.responseText).reason,
- type: 'error',
- clear: true
- });
- },
-
- renderComplete: function () {
- // Track that we've done a full initial render
- this.setRenderedState(true);
- this.triggerBroadcast('renderComplete');
- },
-
- setRenderedState: function (bool) {
- this.renderedState = bool;
- },
-
- triggerBroadcast: function (eventName) {
- var args = Array.prototype.slice.call(arguments);
- this.trigger.apply(this, args);
-
- args.splice(0, 1, eventName, this);
- broadcaster.trigger.apply(broadcaster, args);
- },
-
--- End diff --
pure joy!
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---