Basic sidebar with TagsInform, SidebarMenu and Bookmarks

src/components/auth-block.js

@@ -30,10 +30,15 @@ const AuthBlock = ({ current_user, is_logged_in }) => {
   if (is_logged_in) {
     const logoutUrl = '/api/v1/logout';
 
+    let user = {};
+    if (current_user) {
+      user = current_user.user;
+    }
+
     return (
       <div className="header__toolbar">
         <div className="header__toolbar_item">
-          <User avatar={{ isRound: true }} text={{ hide: true }} user={current_user.user} />
+          <User avatar={{ isRound: true }} text={{ hide: true }} user={user} />
           <Dropdown>
             <Link className="menu__item" to={getUrl(URL_NAMES.SETTINGS)}>Profile settings</Link>
             <form action={`${API_HOST}${logoutUrl}`} className="menu__item" method="post">

src/components/bookmarks/bookmark.js

@@ -0,0 +1,64 @@
+/*
+ This file is a part of libertysoil.org website
+ Copyright (C) 2016  Loki Education (Social Enterprise)
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import React, { PropTypes } from 'react';
+
+import NavigationItem from '../navigation-item';
+import Icon from '../icon';
+
+/**
+ * An example of bookmark object
+  {
+    className: 'navigation-item--color_blue',
+    to: '/bookmark-url',
+    title: 'Bookmark Example',
+    icon: { icon: 'public' }
+  }
+**/
+
+export default class Bookmark extends React.Component {
+  static propTypes = {
+    i: PropTypes.number,
+    onSettingsClick: PropTypes.func,
+    title: PropTypes.string
+  };
+
+  static defaultProps = {
+    onSettingsClick: () => {}
+  };
+
+  handleSettingsClick = (e) => {
+    const { i, onSettingsClick } = this.props;
+
+    e.preventDefault();
+    onSettingsClick(i);
+  };
+
+  render() {
+    const { title, ...props } = this.props;
+
+    return (
+      <NavigationItem
+        badge={<Icon icon="settings" onClick={this.handleSettingsClick} />}
+        theme="2.0"
+        {...props}
+      >
+        {title}
+      </NavigationItem>
+    );
+  }
+}

src/components/v2/bookmarks.js → src/components/bookmarks/bookmarks.js

@@ -16,13 +16,13 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 import React, { PropTypes } from 'react';
+import { isNull } from 'lodash';
 
-// v1
+import Bookmark from './bookmark';
 import Navigation from '../navigation';
-import NavigationItem from '../navigation-item';
-import Icon from '../icon';
+import BookmarkSettingsModal from './settings-modal';
 
-class Bookmarks extends React.Component {
+export default class Bookmarks extends React.Component {
   static propTypes = {
     bookmarks: PropTypes.arrayOf(PropTypes.shape({}))
   };
@@ -31,46 +31,54 @@ class Bookmarks extends React.Component {
     super(props);
 
     this.state = {
-      showSettings: false
+      activeSettings: null
     };
   }
 
-  handleSettingsClick = (e) => {
-    const { showSettings } = this.state;
+  handleSettingsClick = (i) => {
+    this.setState({ activeSettings: i });
+  };
 
-    console.log(e);
-    this.setState({ showSettings: !showSettings });
+  handleModalClose = () => {
+    this.setState({ activeSettings: null });
+  };
+
+  renderModal = () => {
+    const i = this.state.activeSettings;
+    if (isNull(i)) {
+      return false;
+    }
+
+    const current = this.props.bookmarks[i];
+    return (
+      <BookmarkSettingsModal
+        {...current}
+        onClose={this.handleModalClose}
+      />
+    );
   };
 
   render() {
     const { bookmarks } = this.props;
 
+    if (!bookmarks) {
+      return <script />;
+    }
+
     return (
-      <Navigation>
-        {bookmarks &&
-          bookmarks.map((item, i) => (
-            <NavigationItem
+      <div>
+        <Navigation>
+          {bookmarks.map((item, i) => (
+            <Bookmark
+              {...item}
+              i={i}
               key={i}
-              to={item.url}
-            >
-              <div className="navigation-item__content">
-                {item.title}
-              </div>
-              <div className="navigation-item__aside">
-                <Icon
-                  icon="settings"
-                  onClick={this.handleSettingsClick}
-                />
-              </div>
-              <div className="navigation-item__icon">
-                <Icon
-                  icon={item.icon}
-                />
-              </div>
-            </NavigationItem>
-          ))
-        }
-      </Navigation>
+              onSettingsClick={this.handleSettingsClick}
+            />
+          ))}
+        </Navigation>
+        {this.renderModal()}
+      </div>
     );
   }
 }

src/components/bookmarks/index.js

@@ -0,0 +1,22 @@
+/*
+ This file is a part of libertysoil.org website
+ Copyright (C) 2016  Loki Education (Social Enterprise)
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import Bookmarks from './bookmarks';
+import Bookmark from './bookmark';
+
+export { Bookmark };
+export default Bookmarks;

src/components/bookmarks/settings-form.js

@@ -0,0 +1,84 @@
+/*
+ This file is a part of libertysoil.org website
+ Copyright (C) 2016  Loki Education (Social Enterprise)
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import React, { PropTypes } from 'react';
+import { form as inform, from } from 'react-inform';
+
+import Message from '../message';
+
+class BookmarkSettingsForm extends React.Component {
+  static propTypes = {
+    fields: PropTypes.shape({}),
+    form: PropTypes.shape({}),
+    onSave: PropTypes.func,
+    title: PropTypes.string,
+    to: PropTypes.string
+  };
+
+  static defaultProps = {
+    onSave: () => {}
+  };
+
+  componentDidMount() {
+    const { form, title, to } = this.props;
+
+    form.onValues({ title, to });
+  }
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+
+    const { form, onSave } = this.props;
+
+    form.forceValidate();
+    if (!form.isValid()) {
+      return;
+    }
+
+    const newValues = form.values();
+    onSave(newValues);
+  };
+
+  render() {
+    const { fields } = this.props;
+
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <div className="layout__row">
+          <input {...fields.title} />
+          {fields.title.error &&
+            <Message message={fields.title.error} />
+          }
+        </div>
+        <div className="layout__row">
+          <input {...fields.title} />
+          {fields.to.error &&
+            <Message message={fields.to.error} />
+          }
+        </div>
+      </form>
+    );
+  }
+}
+
+const WrappedBookmarkSettingsForm = inform(from({
+  icon: {},
+  title: {},
+  to: {}
+}))(BookmarkSettingsForm);
+
+export default WrappedBookmarkSettingsForm;

src/components/bookmarks/settings-modal.js

@@ -0,0 +1,48 @@
+/*
+ This file is a part of libertysoil.org website
+ Copyright (C) 2016  Loki Education (Social Enterprise)
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import React, { PropTypes } from 'react';
+
+import BookmarkSettingsForm from './settings-form';
+import Modal from '../modal-component';
+
+const BookmarkSettingsModal = ({ onClose, onSave, ...props }) => {
+  return (
+    <Modal {...props} onClose={onClose}>
+      <Modal.Head>
+        Bookmark settings
+      </Modal.Head>
+      <Modal.Body>
+        <BookmarkSettingsForm
+          onSave={onSave}
+        />
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+BookmarkSettingsModal.propTypes = {
+  onClose: PropTypes.func,
+  onSave: PropTypes.func
+};
+
+BookmarkSettingsModal.defaultProps = {
+  onClose: () => {},
+  onSave: () => {}
+};
+
+export default BookmarkSettingsModal;