Merge pull request #9 from FoxComm/feature/categories-for-mobile

Sidebar for mobiles

.eslintrc

@@ -24,7 +24,12 @@
       }
     ],
     "arrow-body-style": 0,
-    "react/prop-types": 0
+    "react/prop-types": 0,
+    "react/jsx-no-bind": [2,
+      {
+        "allowArrowFunctions": true,
+      }
+    ]
   },
   "parser": "babel-eslint",
 }

src/components/categories/categories.css

@@ -1,5 +1,6 @@
 
 @import "colors.css";
+@import "variables.css";
 
 .list {
   display: flex;
@@ -15,4 +16,21 @@
 .item-link {
   color: var(--blackish);
   text-decoration: none;
+  cursor: pointer;
+}
+
+@media (--small-viewport) {
+  .list {
+    display: block;
+  }
+
+  .item {
+    margin: 32px 0 0 0;
+  }
+
+  .item-link {
+    color: var(--whitish);
+    text-decoration: none;
+    margin: 0;
+  }
 }

src/components/categories/categories.jsx

@@ -6,34 +6,63 @@ import styles from './categories.css';
 import cssModules from 'react-css-modules';
 import { connect } from 'react-redux';
 import type { HTMLElement } from '../../types';
+import { autobind } from 'core-decorators';
+import { browserHistory } from 'react-router';
 
 import * as actions from '../../modules/categories';
 
+type Category = {
+  name: string;
+  id: number;
+};
+
 const getState = state => ({ list: state.categories.list });
 
 class Categories extends React.Component {
 
   static propTypes = {
     list: PropTypes.array,
     fetchCategories: PropTypes.func.isRequired,
+    onClick: PropTypes.func,
+  };
+
+  static defaultProps = {
+    onClick: _.noop,
   };
 
   componentDidMount() {
     this.props.fetchCategories();
   }
 
+  @autobind
+  onClick(category : ?Category) {
+    this.props.onClick(category);
+    if (category == undefined) {
+      browserHistory.push('/');
+    } else {
+      const dashedName = category.name.replace(/\s/g, '-');
+      browserHistory.push(`/${dashedName}`);
+    }
+  }
+
   render(): HTMLElement {
     const categoryItems = _.map(this.props.list, (item) => {
-      const key = `category-${item.replace(/\s/g, '-')}`;
+      const dashedName = item.name.replace(/\s/g, '-');
+      const key = `category-${dashedName}`;
       return (
         <div styleName="item" key={key}>
-          <a href="#" styleName="item-link">{item.toUpperCase()}</a>
+          <a onClick={() => this.onClick(item)} styleName="item-link">
+            {item.name.toUpperCase()}
+          </a>
         </div>
       );
     });
 
     return (
       <div styleName="list">
+        <div styleName="item" key="category-all">
+          <a onClick={() => this.onClick()} styleName="item-link">ALL</a>
+        </div>
         {categoryItems}
       </div>
     );

src/components/layout/storefront.css

@@ -48,6 +48,14 @@
   margin-top: 40px;
 }
 
+.mobile-sidebar {
+  display: none;
+}
+
+.overlay {
+  display: none;
+}
+
 @media (--medium-viewport) {
   .storefront {
     lost-column: 1/1;
@@ -79,4 +87,8 @@
   .hamburger {
     display: block;
   }
+
+  .mobile-sidebar {
+    display: block;
+  }
 }

src/components/layout/storefront.jsx

@@ -1,21 +1,30 @@
 /* @flow */
 
-import React, { PropTypes } from 'react';
+import React from 'react';
+import type { HTMLElement } from '../../types';
 import cssModules from 'react-css-modules';
 import styles from './storefront.css';
 
 import Icon from '../common/icon';
 import { Link } from 'react-router';
 import Categories from '../categories/categories';
+import Sidebar from '../sidebar/sidebar';
+import { connect } from 'react-redux';
+import { toggleSidebar } from '../../modules/sidebar';
 
-const StoreFront = props => {
+type StoreFrontProps = {
+  children: HTMLElement;
+  toggleSidebar: Function;
+}
+
+const StoreFront = (props : StoreFrontProps) : HTMLElement => {
   return (
     <div styleName="storefront">
       <div styleName="head">
         <div styleName="search">
           <Icon name="fc-magnifying-glass" styleName="head-icon"/>
         </div>
-        <div styleName="hamburger">
+        <div styleName="hamburger" onClick={props.toggleSidebar}>
           <Icon name="fc-hamburger" styleName="head-icon"/>
         </div>
         <Icon styleName="logo" name="fc-some_brand_logo" />
@@ -35,12 +44,11 @@ const StoreFront = props => {
       <div styleName="footer">
         Here will be footer
       </div>
+      <div styleName="mobile-sidebar">
+        <Sidebar />
+      </div>
     </div>
   );
 };
 
-StoreFront.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default cssModules(StoreFront, styles);
+export default connect(null, {toggleSidebar})(cssModules(StoreFront, styles));

src/components/pages/auth/reset-password.jsx

@@ -47,7 +47,7 @@ const validate = values => {
 })
 @cssModules(styles)
 /* ::`*/
-export default class RestorePassword extends Component {
+export default class ResetPassword extends Component {
 
   static propTypes = {
     fields: PropTypes.object.isRequired,

src/components/pages/home.jsx

@@ -1,8 +1,19 @@
+/* @flow */
 
 import React from 'react';
+import type { HTMLElement } from '../../types';
 
-const Home = () => {
-  return <h2>Storefront Demo</h2>;
+type HomeParams = {
+  params: Object;
+}
+
+const Home = (props: HomeParams) : HTMLElement => {
+  return (
+    <div>
+      <h2>Storefront Demo</h2>
+      <p>Current category: {props.params.categoryName ? props.params.categoryName : 'all'}</p>
+    </div>
+  );
 };
 
 export default Home;

src/components/sidebar/sidebar.css

@@ -0,0 +1,53 @@
+
+@import "colors.css";
+
+.sidebar-hidden {
+  display: none;
+}
+
+.sidebar-shown {
+  display: block;
+  position: fixed;
+}
+
+.overlay {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  position: fixed;
+  background: var(--light-grayish);
+}
+
+.container {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 280px;
+  position: fixed;
+  background: var(--blackish);
+  color: var(--whitish);
+}
+
+.controls {
+  margin-left: 20px;
+  margin-top: 20px;
+  color: var(--whitish);
+}
+
+.controls-close {
+
+}
+
+.close-button {
+  color: var(--whitish);
+  text-decoration: none;
+}
+
+.close-button {
+  stroke: var(--whitish);
+}
+
+.controls-categories {
+  margin-left: 20px;
+}

src/components/sidebar/sidebar.jsx

@@ -0,0 +1,51 @@
+/* @flow */
+
+import React from 'react';
+import type { HTMLElement } from '../../types';
+import { connect } from 'react-redux';
+import classNames from 'classnames';
+import cssModules from 'react-css-modules';
+import styles from './sidebar.css';
+
+import Icon from '../common/icon';
+import Categories from '../categories/categories';
+
+import * as actions from '../../modules/sidebar';
+
+type SidebarProps = {
+  isVisible: boolean;
+  toggleSidebar: Function;
+};
+
+const getState = state => ({ ...state.sidebar });
+
+const Sidebar = (props : SidebarProps) : HTMLElement => {
+  const sidebarClass = classNames({
+    'sidebar-hidden': !props.isVisible,
+    'sidebar-shown': props.isVisible,
+  });
+
+  const changeCategoryCallback = () => {
+    props.toggleSidebar();
+  };
+
+  return (
+    <div styleName={sidebarClass}>
+      <div styleName="overlay" onClick={props.toggleSidebar}></div>
+      <div styleName="container">
+        <div styleName="controls">
+          <div styleName="controls-close">
+            <a styleName="close-button" onClick={props.toggleSidebar}>
+              <Icon name="fc-close" className="close-icon"/>
+            </a>
+          </div>
+          <div styleName="controls-categories">
+            <Categories onClick={changeCategoryCallback} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default connect(getState, actions)(cssModules(Sidebar, styles));

src/css/colors.css

@@ -6,6 +6,7 @@
   --greyish: #C4C4C4;
   --redish: #f65554;
   --greenish: #49C699;
+  --light-grayish: rgba(0, 0, 0, 0.3);
 }
 
 :root {

src/css/icons.css

@@ -5,6 +5,10 @@
 
 @import "media-queries.css";
 
+:global(.icon) {
+  stroke: currentColor;
+}
+
 @media (--small-viewport) {
   :global(.icon) {
     width: 16px;

src/modules/categories.js

@@ -10,14 +10,23 @@ export function fetchCategories(): Function {
   return dispatch => {
     dispatch(categoriesFetchStated());
 
-    const result = ['all', 'eyeglasses', 'sunglasses', 'readers'];
+    const result = [
+      {id: 2, name: 'eyeglasses'},
+      {id: 3, name: 'sunglasses'},
+      {id: 4, name: 'readers'},
+    ];
     return dispatch(categoriesFetchSucceded(result));
   };
 }
 
+type Category = {
+  id: number;
+  name: string;
+}
+
 type FormData = {
   isFetching: boolean;
-  list: Array<string>;
+  list: Array<Category>;
 }
 
 const initialState: FormData = {

src/modules/index.js

@@ -5,13 +5,15 @@ import {reducer as formReducer} from 'redux-form';
 import cart from './cart';
 import checkout from './checkout';
 import categories from './categories';
+import sidebar from './sidebar';
 
 const reducer = combineReducers({
   routing: routeReducer,
   form: formReducer,
   categories,
   cart,
   checkout,
+  sidebar,
 });
 
 export default reducer;