Merge pull request #708 from Lokiedu/feature/sidebar-v2

Implement new sidebar
Lokiedu · Nov 13, 2016 · 5f86b0b · 5f86b0b
2 parents ac65860 + 732de70
commit 5f86b0b
Show file tree

Hide file tree

Showing 43 changed files with 1,478 additions and 819 deletions.
diff --git a/src/components/add-tag-modal/form/geotag/index.js b/src/components/add-tag-modal/form/geotag/index.js
@@ -16,6 +16,7 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 import React, { PropTypes, Component } from 'react';
+import { Map as ImmutableMap } from 'immutable';
 
 import { Tab, Tabs } from '../../deps';
 import { TagCloud } from '../../deps';
@@ -110,8 +111,8 @@ export default class AddGeotagForm extends Component {
               Used recently:
               <div className="layout__row">
                 <TagCloud
-                  addable
-                  geotags={this.props.userRecentGeotags}
+                  action="add"
+                  tags={ImmutableMap({ geotags: this.props.userRecentGeotags })}
                   onClick={this._selectRecentlyUsedGeotag}
                 />
               </div>
@@ -121,8 +122,8 @@ export default class AddGeotagForm extends Component {
               Popular:
               <div className="layout__row">
                 <TagCloud
-                  addable
-                  geotags={popularGeotags}
+                  action="add"
+                  tags={ImmutableMap({ geotags: popularGeotags })}
                 />
               </div>
             </Tab.Content>

diff --git a/src/components/add-tag-modal/form/hashtag/index.js b/src/components/add-tag-modal/form/hashtag/index.js
@@ -16,6 +16,7 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 import React, { PropTypes, Component } from 'react';
+import { Map as ImmutableMap } from 'immutable';
 
 import { Tab, Tabs } from '../../deps';
 import { TagCloud } from '../../deps';
@@ -105,8 +106,8 @@ export default class AddHashtagForm extends Component {
               Used recently:
               <div className="layout__row">
                 <TagCloud
-                  addable
-                  hashtags={this.props.userRecentHashtags}
+                  action="add"
+                  tags={ImmutableMap({ hashtags: this.props.userRecentHashtags })}
                   onClick={this._selectRecentlyUsedHashtag}
                 />
               </div>
@@ -116,8 +117,8 @@ export default class AddHashtagForm extends Component {
               Popular:
               <div className="layout__row">
                 <TagCloud
-                  addable
-                  hashtags={popularHashtags}
+                  action="add"
+                  tags={ImmutableMap({ hashtags: popularHashtags })}
                 />
               </div>
             </Tab.Content>

diff --git a/src/components/add-tag-modal/form/school/index.js b/src/components/add-tag-modal/form/school/index.js
@@ -16,6 +16,7 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 import React, { PropTypes, Component } from 'react';
+import { Map as ImmutableMap } from 'immutable';
 
 import { Tab, Tabs } from '../../deps';
 import { TagCloud } from '../../deps';
@@ -114,8 +115,8 @@ export default class AddSchoolForm extends Component {
               Used recently:
               <div className="layout__row">
                 <TagCloud
-                  addable
-                  schools={this.props.userRecentSchools}
+                  action="add"
+                  tags={ImmutableMap({ schools: this.props.userRecentSchools })}
                   onClick={this._selectRecentlyUsedSchool}
                 />
               </div>
@@ -125,8 +126,8 @@ export default class AddSchoolForm extends Component {
               Popular:
               <div className="layout__row">
                 <TagCloud
-                  addable
-                  schools={popularSchools}
+                  action="add"
+                  tags={ImmutableMap({ schools: popularSchools })}
                 />
               </div>
             </Tab.Content>

diff --git a/src/components/add-tag-modal/index.js b/src/components/add-tag-modal/index.js
@@ -43,9 +43,9 @@ function AddedTags({ addedTags, onDelete }) {
       </div>
       <div className="layout__row add_tag_modal__added_tags">
         <TagCloud
-          deletable
-          onDelete={onDelete}
-          {...addedTags}
+          action="delete"
+          tags={i.fromJS(addedTags)}
+          onClick={onDelete}
         />
       </div>
     </div>

diff --git a/src/components/continent.js b/src/components/continent.js
@@ -16,6 +16,7 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 import React, { PropTypes } from 'react';
+import { Map as ImmutableMap } from 'immutable';
 import { Link } from 'react-router';
 
 import { ArrayOfGeotags as ArrayOfGeotagsPropType } from '../prop-types/geotags';
@@ -40,7 +41,7 @@ const Continent = ({ code, count, geotags }) => {
         {name} <span className="continent__amount">({count})</span>
       </Link>
       <div className="layout__row">
-        <TagCloud geotags={geotags} showPostCount />
+        <TagCloud showPostCount tags={ImmutableMap({ geotags })} />
       </div>
     </div>
   );

diff --git a/src/components/icon.js b/src/components/icon.js
@@ -1,32 +1,36 @@
-import React from 'react';
-
-import favorite from 'react-icons/lib/md/favorite';
-import favorite_border from 'react-icons/lib/md/favorite-border';
-import _public from 'react-icons/lib/md/public';
-import star from 'react-icons/lib/md/star';
-import star_border from 'react-icons/lib/md/star-border';
-import chat_bubble_outline from 'react-icons/lib/md/chat-bubble-outline';
-import link from 'react-icons/lib/md/link';
-import edit from 'react-icons/lib/md/edit';
-import close from 'react-icons/lib/md/close';
-import _delete from 'react-icons/lib/md/delete';
-import search from 'react-icons/lib/md/search';
-import refresh from 'react-icons/lib/md/refresh';
-
-const icons = {
-  favorite,
-  favorite_border,
-  public: _public,
-  star,
-  star_border,
-  chat_bubble_outline,
-  link,
-  edit,
-  close,
-  delete: _delete,
-  search,
-  refresh
-};
+/*
+ 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 classNames from 'classnames';
+
+import * as MdIconPack from 'react-icons/lib/md';
+import { FaHashtag } from 'react-icons/lib/fa';
+
+const FaIconPack = { FaHashtag };
+
+function findIcon(iconName) {
+  const camelized = iconName.replace(/(?:^|[-_])(\w)/g, (match, c) =>
+    c ? c.toUpperCase() : ''
+  );
+  const capitalized = camelized.charAt(0).toUpperCase() + camelized.slice(1);
+
+  return MdIconPack[`Md${capitalized}`] || FaIconPack[`Fa${capitalized}`];
+}
 
 const IconComponent = ({
   className,
@@ -39,44 +43,58 @@ const IconComponent = ({
   size,
   ...props
 }) => {
-  const Icon = icons[icon];
-  const classnameIcon = ['icon'];
-  const classnameIconPic = ['micon'];
-  let localOnClick = onClick;
+  const Icon = findIcon(icon);
 
-  className && classnameIcon.push(className);
-  outline && classnameIcon.push('icon-outline');
+  const classNameIcon = classNames('icon', {
+    'icon-outline': outline,
+    'icon-disabled': disabled,
+    'micon-rotate': spin,
+    [`micon-${size}`]: size,
+    [`icon--size_${size}`]: size,
+    [className]: className,
+  });
 
-  color && classnameIconPic.push(`color-${color}`);
+  const classNameIconPic = classNames('micon', {
+    [`color-${color}`]: color,
+    [`micon-${size}`]: size,
+    [`icon--size_${size}`]: size
+  });
 
-  if (!Icon) {
-    return <div>{`Please import '${icon}' from react-icons/lib/md`}</div>;
-  }
-
-  if (size) {
-    classnameIcon.push(`icon-${size}`);
-    classnameIconPic.push(`micon-${size}`);
+  let renderedIcon = false;
+  if (Icon) {
+    renderedIcon = <Icon className={classNameIconPic} />;
   }
 
+  let localOnClick = onClick;
   if (disabled) {
-    classnameIcon.push(`icon-disabled`);
     localOnClick = null;
   }
 
-  if (spin) {
-    classnameIcon.push(`micon-rotate`);
-  }
-
   return (
     <div
       {...props}
+      className={classNameIcon}
       disabled={disabled}
       onClick={localOnClick}
-      className={classnameIcon.join(' ')}
     >
-      <Icon className={classnameIconPic.join(' ')} />
+      {renderedIcon}
     </div>
   );
 };
 
+IconComponent.propTypes = {
+  className: PropTypes.string,
+  color: PropTypes.string,
+  disabled: PropTypes.bool,
+  icon: PropTypes.string,
+  onClick: PropTypes.func,
+  outline: PropTypes.bool,
+  size: PropTypes.string,
+  spin: PropTypes.bool
+};
+
+IconComponent.defaultProps = {
+  icon: ''
+};
+
 export default IconComponent;