You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@couchdb.apache.org by garrensmith <gi...@git.apache.org> on 2015/01/08 13:17:17 UTC
[GitHub] couchdb-fauxton pull request: Adding React into Fauxton
GitHub user garrensmith opened a pull request:
https://github.com/apache/couchdb-fauxton/pull/216
Adding React into Fauxton
This is the building blocks for using React in Fauxton. The index editor
and the main side header link are now done in React with a flux pattern.
You can merge this pull request into a Git repository by running:
$ git pull https://github.com/garrensmith/couchdb-fauxton react
Alternatively you can review and apply these changes as the patch at:
https://github.com/apache/couchdb-fauxton/pull/216.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 #216
----
commit f4c47bb703649ca0fcf7d4111bc28e13a2a08a5b
Author: Garren Smith <ga...@gmail.com>
Date: 2015-01-08T08:51:23Z
Adding React into Fauxton
This is the building blocks for using React in Fauxton. The index editor
and the main side header link are now done un React with a flux pattern
----
---
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: Adding React into Fauxton
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-69745704
the animation on create index is broken. click: create a new index and then and click on it
---
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.
---
Re: [GitHub] couchdb-fauxton pull request: Adding React into Fauxton
Posted by Alexander Fedorenchik <al...@inpun.com>.
Regards, Alex.
> 14 янв. 2015 г., в 13:45, robertkowalski <gi...@git.apache.org> написал(а):
>
> Github user robertkowalski commented on a diff in the pull request:
>
> https://github.com/apache/couchdb-fauxton/pull/216#discussion_r22928942
>
> --- Diff: app/addons/documents/actiontypes.js ---
> @@ -0,0 +1,24 @@
> +// use this file except in compliance with the License. You may obtain a copy of
> --- End diff --
>
> the license header is cut off
>
>
> ---
> 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: Adding React into Fauxton
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/216#discussion_r22928942
--- Diff: app/addons/documents/actiontypes.js ---
@@ -0,0 +1,24 @@
+// use this file except in compliance with the License. You may obtain a copy of
--- End diff --
the license header is cut off
---
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: Adding React into Fauxton
Posted by benkeen <gi...@git.apache.org>.
Github user benkeen commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#discussion_r22675973
--- Diff: app/addons/fauxton/actions.js ---
@@ -0,0 +1,56 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+define([
+ 'app',
+ 'api',
+ 'addons/fauxton/actiontypes'
+],
+function (app, FauxtonAPI, ActionTypes) {
+
+ return {
+ toggleNavbarMenu: function () {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.TOGGLE_NAVBAR_MENU
+ });
+ },
+
+ addHeaderLink: function (link) {
+ FauxtonAPI.dispatch({
+ type: 'ADD_NAVBAR_LINK',
--- End diff --
I guess this and all the other dispatch types could all move to `/addons/fauxton/actiontypes.js`.
---
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: Adding React into Fauxton
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-69911892
there are still error-containers: https://github.com/apache/couchdb-fauxton/pull/216#discussion-diff-22875951
---
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: Adding React into Fauxton
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-70104552
hi garren, this is going to be great. i found three small issues
---
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: Adding React into Fauxton
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/216#discussion_r22649942
--- Diff: app/addons/fauxton/components.react.js ---
@@ -0,0 +1,170 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+define([
+ "api",
+ "react",
+ "addons/fauxton/stores",
+ "addons/fauxton/actions"
+],
+
+function(FauxtonAPI, React, Stores, Actions) {
+ var navBarStore = Stores.navBarStore;
+
+ var Footer = React.createClass({displayName: "Footer",
+ getStoreState: function () {
+ return {
+ version: navBarStore.getVersion()
+ };
+ },
+
+ getInitialState: function () {
+ return this.getStoreState();
+ },
+
+ onChange: function () {
+ this.setState(this.getStoreState());
+ },
+
+ componentDidMount: function () {
+ navBarStore.on('change', this.onChange, this);
+ },
+
+ componentWillUnmount: function() {
+ navBarStore.off('change', this.onChange);
+ },
+
+ render: function () {
+ var version = this.state.version;
+
+ if (!version) { return null; }
+ return (
+ React.createElement("div", {className: "version-footer"},
+ "Fauxton on",
+ React.createElement("a", {href: "http://couchdb.apache.org/"}, "Apache CouchDB"),
+ React.createElement("br", null),
+ "v. ", version
+ )
+ );
+ }
+ });
+
+ var Burger = React.createClass({displayName: "Burger",
+ render: function () {
+ return (
+ React.createElement("div", {className: "burger", onClick: this.toggleMenu},
--- End diff --
this seems to be a compiled file?
---
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: Adding React into Fauxton
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/216#discussion_r22649867
--- Diff: app/core/store.js ---
@@ -0,0 +1,34 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+define([
+ "backbone"
+],
+function(Backbone) {
+
+ var Store = function () {
+ this.initialize.apply(this, arguments);
+ _.bindAll(this);
--- End diff --
do we need bindAll?
---
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: Adding React into Fauxton
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-70104524
the testsuite is red, at least one test is failing
---
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: Adding React into Fauxton
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-69745443
Starting now functional testing:
the urls of the labels are broken, they say `href="<%-getDocUrl('map_functions')%>"`
---
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: Adding React into Fauxton
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#discussion_r22875319
--- Diff: app/addons/documents/actions.js ---
@@ -0,0 +1,164 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+define([
+ 'app',
+ 'api',
+ 'addons/documents/resources',
+ 'addons/documents/actiontypes'
+],
+function (app, FauxtonAPI, Documents, ActionTypes) {
+ var ActionHelpers = {
+ createNewDesignDoc: function (id, database) {
+ var designDoc = {
+ _id: id,
+ views: {
+ }
+ };
+
+ return new Documents.Doc(designDoc, {database: database});
+ },
+
+ findDesignDoc: function (designDocs, designDocId) {
+ return designDocs.find(function (doc) {
+ return doc.id === designDocId;
+ }).dDocModel();
+
+ }
+ };
+
+ return {
+ //helpers are added here for use in testing actions
+ helpers: ActionHelpers,
--- End diff --
Normally I would agree but I cannot how else to test this behaviour without exposing the helpers.
---
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: Adding React into Fauxton
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/216#discussion_r22649783
--- Diff: tasks/couchserver.js ---
@@ -45,11 +45,11 @@ module.exports = function (grunt) {
accept = req.headers.accept.split(','),
filePath;
- if (setContentSecurityPolicy) {
+ /*if (setContentSecurityPolicy) {
--- End diff --
is this intentional?
---
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: Adding React into Fauxton
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/216#discussion_r22865875
--- Diff: app/addons/documents/tests/componentsSpec.react.jsx ---
@@ -0,0 +1,199 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+define([
+ 'api',
+ 'addons/documents/components.react',
+ 'addons/documents/stores',
+ 'addons/documents/actions',
+ 'addons/documents/resources',
+ 'testUtils',
+ "react"
+], function (FauxtonAPI, Views, Stores, Actions, Documents, utils, React) {
+ FauxtonAPI.router = new FauxtonAPI.Router([]);
+
+ var expect = utils.chai.expect;
+ var TestUtils = React.addons.TestUtils;
+
+ var resetStore = function (designDoc) {
+ var designDocs = new Documents.AllDocs([designDoc], {
+ params: { limit: 10 },
+ database: {
+ safeID: function () { return 'id';}
+ }
+ });
+
+ Actions.editIndex({
+ newView: false,
+ viewName: 'test-view',
+ designDocs: designDocs,
+ designDocId: designDoc._id
+ });
+ };
+
+ describe('View editor', function () {
+
+ describe('Toggle button', function () {
--- End diff --
Ah, I guess it is the naming: `componentsSpec.react.jsx`
in our test helper in our gruntfile we define a testfilename as:
```js
mochaSetup: {
default: {
files: { src: helper.watchFiles(['[Ss]pec.js'], ['./app/addons/**/*[Ss]pec.js'])},
```
---
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: Adding React into Fauxton
Posted by benkeen <gi...@git.apache.org>.
Github user benkeen commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-69846759
Couple of small aesthetic things.
1. When editing the View and clicking the `Edit Index` tab to shrink it, it's smooth up until the last moment when there's a jump as the page shifts up.
2. No space between the green + red buttons?
---
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: Adding React into Fauxton
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-69751254
the added sourcefiles need license headers
---
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: Adding React into Fauxton
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/216#discussion_r22865560
--- Diff: app/addons/documents/tests/componentsSpec.react.jsx ---
@@ -0,0 +1,199 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+define([
+ 'api',
+ 'addons/documents/components.react',
+ 'addons/documents/stores',
+ 'addons/documents/actions',
+ 'addons/documents/resources',
+ 'testUtils',
+ "react"
+], function (FauxtonAPI, Views, Stores, Actions, Documents, utils, React) {
+ FauxtonAPI.router = new FauxtonAPI.Router([]);
+
+ var expect = utils.chai.expect;
+ var TestUtils = React.addons.TestUtils;
+
+ var resetStore = function (designDoc) {
+ var designDocs = new Documents.AllDocs([designDoc], {
+ params: { limit: 10 },
+ database: {
+ safeID: function () { return 'id';}
+ }
+ });
+
+ Actions.editIndex({
+ newView: false,
+ viewName: 'test-view',
+ designDocs: designDocs,
+ designDocId: designDoc._id
+ });
+ };
+
+ describe('View editor', function () {
+
+ describe('Toggle button', function () {
--- End diff --
I haven't figured out why, but this test block is not executed on a testsuite run
---
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: Adding React into Fauxton
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/216#discussion_r22875951
--- Diff: app/addons/documents/actions.js ---
@@ -0,0 +1,164 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+define([
+ 'app',
+ 'api',
+ 'addons/documents/resources',
+ 'addons/documents/actiontypes'
+],
+function (app, FauxtonAPI, Documents, ActionTypes) {
+ var ActionHelpers = {
+ createNewDesignDoc: function (id, database) {
+ var designDoc = {
+ _id: id,
+ views: {
+ }
+ };
+
+ return new Documents.Doc(designDoc, {database: database});
+ },
+
+ findDesignDoc: function (designDocs, designDocId) {
+ return designDocs.find(function (doc) {
+ return doc.id === designDocId;
+ }).dDocModel();
+
+ }
+ };
+
+ return {
+ //helpers are added here for use in testing actions
+ helpers: ActionHelpers,
+ toggleEditor: function () {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.TOGGLE_EDITOR
+ });
+ },
+
+ selectReduceChanged: function (reduceOption) {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.SELECT_REDUCE_CHANGE,
+ reduceSelectedOption: reduceOption
+ });
+ },
+
+ newDesignDoc: function () {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.NEW_DESIGN_DOC
+ });
+ },
+
+ designDocChange: function (id, newDesignDoc) {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.DESIGN_DOC_CHANGE,
+ newDesignDoc: newDesignDoc,
+ designDocId: id
+ });
+ },
+
+ editIndex: function (options) {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.EDIT_INDEX,
+ options: options
+ });
+ },
+
+ saveView: function (viewInfo, designDocs) {
+ var designDoc;
+
+ if (_.isUndefined(viewInfo.designDocId)) {
+ FauxtonAPI.addNotification({
+ msg: "Please enter a design doc name.",
+ type: "error",
+ selector: "#define-view .errors-container",
--- End diff --
i just found several usages of `selector`, we are now starting to avoid using error containers for everything that has a submit-button, and start using the global notification. like mentioned yesterday in the standup.
---
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: Adding React into Fauxton
Posted by benkeen <gi...@git.apache.org>.
Github user benkeen commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#discussion_r22677599
--- Diff: app/addons/fauxton/components.react.jsx ---
@@ -0,0 +1,170 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+define([
+ "api",
+ "react",
+ "addons/fauxton/stores",
+ "addons/fauxton/actions"
+],
+
+function(FauxtonAPI, React, Stores, Actions) {
+ var navBarStore = Stores.navBarStore;
+
+ var Footer = React.createClass({
+ getStoreState: function () {
+ return {
+ version: navBarStore.getVersion()
+ };
+ },
+
+ getInitialState: function () {
+ return this.getStoreState();
+ },
+
+ onChange: function () {
+ this.setState(this.getStoreState());
+ },
+
+ componentDidMount: function () {
+ navBarStore.on('change', this.onChange, this);
+ },
+
+ componentWillUnmount: function() {
+ navBarStore.off('change', this.onChange);
+ },
+
+ render: function () {
+ var version = this.state.version;
+
+ if (!version) { return null; }
+ return (
+ <div className="version-footer">
+ Fauxton on
+ <a href="http://couchdb.apache.org/">Apache CouchDB</a>
+ <br/>
+ v. {version}
+ </div>
+ );
+ }
+ });
+
+ var Burger = React.createClass({
+ render: function () {
+ return (
+ <div className="burger" onClick={this.toggleMenu}>
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
+ );
+ },
+
+ toggleMenu: function () {
+ Actions.toggleNavbarMenu();
+ }
+ });
+
+ var NavLink = React.createClass({
+ render: function () {
+ var link = this.props.link;
+ var liClassName = this.props.active === link.title ? 'active' : '';
+
+ return (
+ <li data-nav-name={link.title} className={liClassName} >
+ <a href={link.href}>
+ <i className={link.icon + " fonticon "}></i>
+ {link.title}
+ </a>
+ </li>
+ );
+ }
+ });
+
+ var NavBar = React.createClass({
+ getStoreState: function () {
+ return {
+ navLinks: navBarStore.getNavLinks(),
+ bottomNavLinks: navBarStore.getBottomNavLinks(),
+ footerNavLinks: navBarStore.getFooterNavLinks(),
+ activeLink: navBarStore.getActiveLink()
+ };
+ },
+
+ getInitialState: function () {
+ return this.getStoreState();
+ },
+
+ createLinks: function (links) {
+ return _.map(links, function (link, i) {
+ return <NavLink key={i} link={link} active={this.state.activeLink} />;
+ }, this);
+ },
+
+ onChange: function () {
+ this.setState(this.getStoreState());
+ },
+
+ componentDidMount: function () {
+ navBarStore.on('change', this.onChange, this);
+ },
+
+ componentWillUnmount: function() {
+ navBarStore.off('change', this.onChange);
+ },
+
+ render: function () {
+ var navLinks = this.createLinks(this.state.navLinks);
+ var bottomNavLinks = this.createLinks(this.state.bottomNavLinks);
+ var footerNavLinks = this.createLinks(this.state.footerNavLinks);
+
+ return (
+ <div className="navbar">
+ <Burger />
+ <nav id="main_navigation">
+ <ul id="nav-links" className="nav">
+ {navLinks}
+ </ul>
+
+ <div id="bottom-nav">
+ <ul id="bottom-nav-links" className="nav">
+ {bottomNavLinks}
+ </ul>
+ </div>
+ </nav>
+
+ <div className="bottom-container">
+ <div className="brand">
+ <div className="icon">Apache Fauxton</div>
+ </div>
+ <Footer />
+ <div id="footer-links">
+ <ul id="footer-nav-links" className="nav">
+ {footerNavLinks}
+ </ul>
+ </div>
+ </div>
+ </div>
+ );
+ }
+ });
+
+
+ return {
--- End diff --
[Opinion Alert!] I *really* like this pattern of having a return statement at the end of a file that does little more than outline what's being returned, e.g.
```javascript
return {
Burger: Burger,
Fries: Fries,
Coffee: Coffee
};
```
I find it much easier to read at a glance what's available without having to sift through code. We don't do this in Fauxton - we just append to an object as it goes down the file then return the object. Be nice to start doing it...
---
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: Adding React into Fauxton
Posted by benkeen <gi...@git.apache.org>.
Github user benkeen commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#discussion_r22676309
--- Diff: app/addons/fauxton/components.react.jsx ---
@@ -0,0 +1,170 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+define([
+ "api",
+ "react",
+ "addons/fauxton/stores",
+ "addons/fauxton/actions"
+],
+
+function(FauxtonAPI, React, Stores, Actions) {
+ var navBarStore = Stores.navBarStore;
+
+ var Footer = React.createClass({
+ getStoreState: function () {
+ return {
+ version: navBarStore.getVersion()
+ };
+ },
+
+ getInitialState: function () {
+ return this.getStoreState();
+ },
+
+ onChange: function () {
+ this.setState(this.getStoreState());
+ },
+
+ componentDidMount: function () {
+ navBarStore.on('change', this.onChange, this);
+ },
+
+ componentWillUnmount: function() {
+ navBarStore.off('change', this.onChange);
+ },
+
+ render: function () {
+ var version = this.state.version;
+
+ if (!version) { return null; }
+ return (
+ <div className="version-footer">
+ Fauxton on
+ <a href="http://couchdb.apache.org/">Apache CouchDB</a>
+ <br/>
+ v. {version}
+ </div>
+ );
+ }
+ });
+
+ var Burger = React.createClass({
+ render: function () {
+ return (
+ <div className="burger" onClick={this.toggleMenu}>
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
+ );
+ },
+
+ toggleMenu: function () {
+ Actions.toggleNavbarMenu();
+ }
+ });
+
+ var NavLink = React.createClass({
+ render: function () {
+ var link = this.props.link;
+ var liClassName = this.props.active === link.title ? 'active' : '';
+
+ return (
+ <li data-nav-name={link.title} className={liClassName} >
+ <a href={link.href}>
+ <i className={link.icon + " fonticon "}></i>
+ {link.title}
+ </a>
+ </li>
+ );
+ }
+ });
+
+ var NavBar = React.createClass({
--- End diff --
This all looks awesome. Just one thing that may have got lost in the refactor was the 4 or 5px shadow line that appears at the right of the primary nav.
---
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: Adding React into Fauxton
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-71431491
This is not needed anymore.
---
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: Adding React into Fauxton
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-69749636
The react tests are not unmounting elements, `React.unmountComponentAtNode(mytestedCompontent);`
---
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: Adding React into Fauxton
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/216#discussion_r22876420
--- Diff: app/addons/documents/actions.js ---
@@ -0,0 +1,164 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+define([
+ 'app',
+ 'api',
+ 'addons/documents/resources',
+ 'addons/documents/actiontypes'
+],
+function (app, FauxtonAPI, Documents, ActionTypes) {
+ var ActionHelpers = {
+ createNewDesignDoc: function (id, database) {
+ var designDoc = {
+ _id: id,
+ views: {
+ }
+ };
+
+ return new Documents.Doc(designDoc, {database: database});
+ },
+
+ findDesignDoc: function (designDocs, designDocId) {
+ return designDocs.find(function (doc) {
+ return doc.id === designDocId;
+ }).dDocModel();
+
+ }
+ };
+
+ return {
+ //helpers are added here for use in testing actions
+ helpers: ActionHelpers,
--- End diff --
i initially thought it would be code that is just there for the tests, but it is also used in production
---
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: Adding React into Fauxton
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith closed the pull request at:
https://github.com/apache/couchdb-fauxton/pull/216
---
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: Adding React into Fauxton
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/216#discussion_r22934313
--- Diff: app/addons/documents/actions.js ---
@@ -0,0 +1,164 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+define([
+ 'app',
+ 'api',
+ 'addons/documents/resources',
+ 'addons/documents/actiontypes'
+],
+function (app, FauxtonAPI, Documents, ActionTypes) {
+ var ActionHelpers = {
+ createNewDesignDoc: function (id, database) {
+ var designDoc = {
+ _id: id,
+ views: {
+ }
+ };
+
+ return new Documents.Doc(designDoc, {database: database});
+ },
+
+ findDesignDoc: function (designDocs, designDocId) {
+ return designDocs.find(function (doc) {
+ return doc.id === designDocId;
+ }).dDocModel();
+
+ }
+ };
+
+ return {
+ //helpers are added here for use in testing actions
+ helpers: ActionHelpers,
+ toggleEditor: function () {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.TOGGLE_EDITOR
+ });
+ },
+
+ selectReduceChanged: function (reduceOption) {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.SELECT_REDUCE_CHANGE,
+ reduceSelectedOption: reduceOption
+ });
+ },
+
+ newDesignDoc: function () {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.NEW_DESIGN_DOC
+ });
+ },
+
+ designDocChange: function (id, newDesignDoc) {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.DESIGN_DOC_CHANGE,
+ newDesignDoc: newDesignDoc,
+ designDocId: id
+ });
+ },
+
+ editIndex: function (options) {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.EDIT_INDEX,
+ options: options
+ });
+ },
+
+ saveView: function (viewInfo, designDocs) {
+ var designDoc;
+
+ if (_.isUndefined(viewInfo.designDocId)) {
+ FauxtonAPI.addNotification({
+ msg: "Please enter a design doc name.",
+ type: "error",
+ selector: "#define-view .errors-container",
--- End diff --
to fix, just remove the selector property
---
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: Adding React into Fauxton
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/216#discussion_r22864950
--- Diff: app/addons/documents/actions.js ---
@@ -0,0 +1,164 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+define([
+ 'app',
+ 'api',
+ 'addons/documents/resources',
+ 'addons/documents/actiontypes'
+],
+function (app, FauxtonAPI, Documents, ActionTypes) {
+ var ActionHelpers = {
+ createNewDesignDoc: function (id, database) {
+ var designDoc = {
+ _id: id,
+ views: {
+ }
+ };
+
+ return new Documents.Doc(designDoc, {database: database});
+ },
+
+ findDesignDoc: function (designDocs, designDocId) {
+ return designDocs.find(function (doc) {
+ return doc.id === designDocId;
+ }).dDocModel();
+
+ }
+ };
+
+ return {
+ //helpers are added here for use in testing actions
+ helpers: ActionHelpers,
--- End diff --
i have no good feeling when we start to mix production code with testcode.
i see that the only test that uses it is a spy which get's called, that verifies that another function is called. suggestion: lets test the result, not the steps in between that we just can access by mixing in testcode in our production environment.
---
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: Adding React into Fauxton
Posted by benkeen <gi...@git.apache.org>.
Github user benkeen commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#discussion_r22905830
--- Diff: app/addons/documents/actions.js ---
@@ -0,0 +1,164 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+define([
+ 'app',
+ 'api',
+ 'addons/documents/resources',
+ 'addons/documents/actiontypes'
+],
+function (app, FauxtonAPI, Documents, ActionTypes) {
+ var ActionHelpers = {
+ createNewDesignDoc: function (id, database) {
+ var designDoc = {
+ _id: id,
+ views: {
+ }
+ };
+
+ return new Documents.Doc(designDoc, {database: database});
+ },
+
+ findDesignDoc: function (designDocs, designDocId) {
+ return designDocs.find(function (doc) {
+ return doc.id === designDocId;
+ }).dDocModel();
+
+ }
+ };
+
+ return {
+ //helpers are added here for use in testing actions
+ helpers: ActionHelpers,
--- End diff --
If we want to differentiate the actions from the helpers, we could maybe just group the helpers in an object. Similarly, putting the actions into an actions property is tempting too, but getting verbose.
```javascript
return {
helpers: {
createNewDesignDoc: function() { ... },
findDesignDoc: function() { ... },
},
toggleEditor: function () { ... } ,
selectReduceChanged: function () { ... }
...
}
```
---
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: Adding React into Fauxton
Posted by sebastianrothbucher <gi...@git.apache.org>.
Github user sebastianrothbucher commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-70416338
I do like the idea of factoring out the Actions to make the whole thing more testable - so +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: Adding React into Fauxton
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-70103272
The editor partially overlaps the footer:
---
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: Adding React into Fauxton
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/216#discussion_r22650187
--- Diff: app/addons/documents/routes-documents.js ---
@@ -453,14 +461,14 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
updateAllDocsFromView: function (event) {
var view = event.view,
- params = this.createParams(),
- urlParams = params.urlParams,
- docParams = params.docParams,
- ddoc = event.ddoc,
- defaultPageSize,
- isLazyInit,
- pageSize,
- collection;
+ params = this.createParams(),
+ urlParams = params.urlParams,
+ docParams = params.docParams,
+ ddoc = event.ddoc,
+ defaultPageSize,
+ isLazyInit,
+ pageSize,
+ collection;
--- End diff --
intendation
---
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: Adding React into Fauxton
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/216#discussion_r22928906
--- Diff: app/addons/documents/components.react.jsx ---
@@ -0,0 +1,473 @@
+define([
+ "app",
--- End diff --
missing license header
---
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: Adding React into Fauxton
Posted by benkeen <gi...@git.apache.org>.
Github user benkeen commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-69846358
Small thing. An extra space is getting prepended to the map function each time it's saved. To reproduce:
1. Select any database.
2. All Design Docs -> New View
3. Note the Map Function field has an extra space at the start
4. Fill in the fields + click save.
Every time you re-edit the index and click save, another space gets added.
---
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: Adding React into Fauxton
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-69721484
@robertkowalski, @benkeen I've fixed all the issues you have mentioned and rebased again master.
---
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: Adding React into Fauxton
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-70481697
I've broken this into two smaller pull requests for easier merging. They are #233 and #235
---
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: Adding React into Fauxton
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-69176468
great work, very promising! I left some comments from things that i stumbled upon at a first glance.
The diff is hard to review (+183,439 −1,087) - can you separate everything into 4 commits (or more) after addressing the small things i found?
suggestion:
- adding react libraries
- setup react build
- rewrite navbar
- rewrite editor
I think this makes reviewing a lot easier and I can give better feedback afterwards.
---
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: Adding React into Fauxton
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-69776649
@robertkowalski I've pushed a new commit with all your feedback. The only thing I haven't done is convert all the expect's to asserts.
---
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: Adding React into Fauxton
Posted by benkeen <gi...@git.apache.org>.
Github user benkeen commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-70531412
Looks great. The only thing I spotted was on IE11, editing a View and clicking Save reloads the page but the Edit Index tab section has disappeared. But this is an existing bug that wasn't introduced here.
+1 from me.
---
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: Adding React into Fauxton
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-70087509
@robertkowalski @benkeen I've fixed the all the issues you both have mentioned. The one thing is I cannot get the animation for the final part any smoother at this stage. The final step can be smoothened out once all tab-panel's are in react.
Could you both give it another round of testing. I think we getting close.
---
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: Adding React into Fauxton
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/216#discussion_r22649821
--- Diff: package.json ---
@@ -25,28 +49,6 @@
"author": "",
"license": "Apache V2",
"devDependencies": {
- "async": "~0.2.6",
- "grunt": "~0.4.1",
--- End diff --
these are all `devDependencies`, we don't need any of these to run Fauxton in production, just to prepare the build.
---
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: Adding React into Fauxton
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/216#discussion_r22650165
--- Diff: app/addons/documents/routes-documents.js ---
@@ -317,9 +318,9 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
viewFn: function (databaseName, ddoc, viewName) {
var params = this.createParams(),
- urlParams = params.urlParams,
- docParams = params.docParams,
- decodeDdoc = decodeURIComponent(ddoc);
+ urlParams = params.urlParams,
+ docParams = params.docParams,
+ decodeDdoc = decodeURIComponent(ddoc);
--- End diff --
the intendation is funky from beginning of the diff until here. please also separate whitespace commits from feature-commits.
---
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: Adding React into Fauxton
Posted by kxepal <gi...@git.apache.org>.
Github user kxepal commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-69183352
Awesome @garrensmith !
---
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: Adding React into Fauxton
Posted by michellephung <gi...@git.apache.org>.
Github user michellephung commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-70181637
Hey Garren,
This is cool. I didn't run into any problems clicking around.
I looked into the failing test. I pushed a solution here:
https://github.com/michellephung/couchdb-fauxton/commit/8f415ed03bcc2d259763bece2a6687ce02bfeeef
These changes will pass the failing test.
---
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: Adding React into Fauxton
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-69911614
double click on a design-doc: sidebar/navbar is not visible and size of the editor is too small
---
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: Adding React into Fauxton
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/216#discussion_r22650102
--- Diff: app/addons/documents/components.react.js ---
@@ -0,0 +1,465 @@
+define([
+ "api",
+ "react",
+ "addons/documents/stores",
+ "addons/documents/actions",
+ "addons/fauxton/components",
+],
+
+function(FauxtonAPI, React, Stores, Actions, Components) {
+ var indexEditorStore = Stores.indexEditorStore;
+
+ var ToggleButton = React.createClass({displayName: "ToggleButton",
+ getInitialState: function () {
+ return {
+ title: indexEditorStore.getTitle()
+ };
+ },
+
+ render: function() {
+ return (
+ React.createElement("div", {className: "dashboard-upper-menu"},
--- End diff --
is this a generated file?
---
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: Adding React into Fauxton
Posted by benkeen <gi...@git.apache.org>.
Github user benkeen commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-69244262
This all looks really great - very clean! No criticisms are coming to mind.
One thing to note: the main branch has the nav bar state saved in local storage (https://github.com/apache/couchdb-fauxton/commit/0e8b68edfacdddfcf6d777fc61c605d159fa47b9) which will need to be manually added in here.
---
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: Adding React into Fauxton
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-69328401
I found two general points:
- I am no Flux-expert but reading examples and tutorials I always see the dispatcher separated from the store (in a separate file). Why are we adding the dispatcher as a property to the stores? To me it seems that this leads to the fact the Store and Dispatcher are the same Object/Element.
- We currently just use chais `assert` in Fauxton tests, this PR mixes `assert` and `expect` - I personally prefer assert but I am also happy if we decide to switch to `expect` - but I think we should keep it consistent and stick to one
---
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: Adding React into Fauxton
Posted by benkeen <gi...@git.apache.org>.
Github user benkeen commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-69229185
I wonder if we could include the jsx dependency as a grunt module? Without jsx installed it fails to build & it would nice to have npm handle all that for us. There's this guy: https://github.com/yosuke-furukawa/grunt-jsx - haven't tried it.
---
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: Adding React into Fauxton
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-70104289
editing the map and then adding a custom reduce will "freeze" both editor windows after saving and also unformat the code: https://cloudup.com/cWQLkqlm2Mx
---
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: Adding React into Fauxton
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/216#discussion_r22876340
--- Diff: app/addons/documents/actions.js ---
@@ -0,0 +1,164 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+define([
+ 'app',
+ 'api',
+ 'addons/documents/resources',
+ 'addons/documents/actiontypes'
+],
+function (app, FauxtonAPI, Documents, ActionTypes) {
+ var ActionHelpers = {
+ createNewDesignDoc: function (id, database) {
+ var designDoc = {
+ _id: id,
+ views: {
+ }
+ };
+
+ return new Documents.Doc(designDoc, {database: database});
+ },
+
+ findDesignDoc: function (designDocs, designDocId) {
+ return designDocs.find(function (doc) {
+ return doc.id === designDocId;
+ }).dDocModel();
+
+ }
+ };
+
+ return {
+ //helpers are added here for use in testing actions
+ helpers: ActionHelpers,
--- End diff --
Suggestion: just move the functions directly to the function literal, example:
```js
return {
createNewDesignDoc: function (id, database) {
var designDoc = {
_id: id,
views: {
}
};
return new Documents.Doc(designDoc, {database: database});
},
findDesignDoc: function (designDocs, designDocId) {
return designDocs.find(function (doc) {
return doc.id === designDocId;
}).dDocModel();
},
toggleEditor: function () {
FauxtonAPI.dispatch({
type: ActionTypes.TOGGLE_EDITOR
});
},
```
I think you already do the same in line 142 with
```
deleteView: function (options) {
```
---
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: Adding React into Fauxton
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#discussion_r22848698
--- Diff: app/addons/fauxton/components.react.jsx ---
@@ -0,0 +1,170 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+define([
+ "api",
+ "react",
+ "addons/fauxton/stores",
+ "addons/fauxton/actions"
+],
+
+function(FauxtonAPI, React, Stores, Actions) {
+ var navBarStore = Stores.navBarStore;
+
+ var Footer = React.createClass({
+ getStoreState: function () {
+ return {
+ version: navBarStore.getVersion()
+ };
+ },
+
+ getInitialState: function () {
+ return this.getStoreState();
+ },
+
+ onChange: function () {
+ this.setState(this.getStoreState());
+ },
+
+ componentDidMount: function () {
+ navBarStore.on('change', this.onChange, this);
+ },
+
+ componentWillUnmount: function() {
+ navBarStore.off('change', this.onChange);
+ },
+
+ render: function () {
+ var version = this.state.version;
+
+ if (!version) { return null; }
+ return (
+ <div className="version-footer">
+ Fauxton on
+ <a href="http://couchdb.apache.org/">Apache CouchDB</a>
+ <br/>
+ v. {version}
+ </div>
+ );
+ }
+ });
+
+ var Burger = React.createClass({
+ render: function () {
+ return (
+ <div className="burger" onClick={this.toggleMenu}>
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
+ );
+ },
+
+ toggleMenu: function () {
+ Actions.toggleNavbarMenu();
+ }
+ });
+
+ var NavLink = React.createClass({
+ render: function () {
+ var link = this.props.link;
+ var liClassName = this.props.active === link.title ? 'active' : '';
+
+ return (
+ <li data-nav-name={link.title} className={liClassName} >
+ <a href={link.href}>
+ <i className={link.icon + " fonticon "}></i>
+ {link.title}
+ </a>
+ </li>
+ );
+ }
+ });
+
+ var NavBar = React.createClass({
+ getStoreState: function () {
+ return {
+ navLinks: navBarStore.getNavLinks(),
+ bottomNavLinks: navBarStore.getBottomNavLinks(),
+ footerNavLinks: navBarStore.getFooterNavLinks(),
+ activeLink: navBarStore.getActiveLink()
+ };
+ },
+
+ getInitialState: function () {
+ return this.getStoreState();
+ },
+
+ createLinks: function (links) {
+ return _.map(links, function (link, i) {
+ return <NavLink key={i} link={link} active={this.state.activeLink} />;
+ }, this);
+ },
+
+ onChange: function () {
+ this.setState(this.getStoreState());
+ },
+
+ componentDidMount: function () {
+ navBarStore.on('change', this.onChange, this);
+ },
+
+ componentWillUnmount: function() {
+ navBarStore.off('change', this.onChange);
+ },
+
+ render: function () {
+ var navLinks = this.createLinks(this.state.navLinks);
+ var bottomNavLinks = this.createLinks(this.state.bottomNavLinks);
+ var footerNavLinks = this.createLinks(this.state.footerNavLinks);
+
+ return (
+ <div className="navbar">
+ <Burger />
+ <nav id="main_navigation">
+ <ul id="nav-links" className="nav">
+ {navLinks}
+ </ul>
+
+ <div id="bottom-nav">
+ <ul id="bottom-nav-links" className="nav">
+ {bottomNavLinks}
+ </ul>
+ </div>
+ </nav>
+
+ <div className="bottom-container">
+ <div className="brand">
+ <div className="icon">Apache Fauxton</div>
+ </div>
+ <Footer />
+ <div id="footer-links">
+ <ul id="footer-nav-links" className="nav">
+ {footerNavLinks}
+ </ul>
+ </div>
+ </div>
+ </div>
+ );
+ }
+ });
+
+
+ return {
--- End diff --
Yes I agree. I think we should move to doing it this way going forward.
---
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: Adding React into Fauxton
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#discussion_r22652275
--- Diff: app/core/store.js ---
@@ -0,0 +1,34 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+define([
+ "backbone"
+],
+function(Backbone) {
+
+ var Store = function () {
+ this.initialize.apply(this, arguments);
+ _.bindAll(this);
--- End diff --
For now this is needed because the methods get called in the dispatcher.
---
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: Adding React into Fauxton
Posted by garrensmith <gi...@git.apache.org>.
Github user garrensmith commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/216#issuecomment-70361832
thanks @robertkowalski, I've removed the footer.
---
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.
---