Add webpack

Author: Grishina Nastiya

.babelrc

@@ -0,0 +1,6 @@
+{
+   "presets": ["es2015", "stage-0", "react"],
+   "plugins": [
+      ["transform-decorators-legacy", "lodash", "add-module-exports"],
+    ]
+}

src/action.js

@@ -0,0 +1,8 @@
+import { createAction } from 'redux-actions';
+
+
+const setCurrentTip = createAction('SET_CURRENT_TIP', id => (id));
+const closeTips = createAction('CLOSE_TIPS');
+const openTips = createAction('OPEN_TIPS');
+
+export default {setCurrentTip, closeTips, openTips }

src/component/Tips.js

@@ -0,0 +1,57 @@
+import CSSModules from 'react-css-modules';
+import clickOutsideWrapper from 'react-click-outside';
+import styles from './Tips.scss';
+import images from '../images';
+
+export default
+@clickOutsideWrapper
+@CSSModules(styles, {allowMultiple: true})
+
+class Tips extends React.Component {
+  static propTypes = {
+    currentTipId: React.PropTypes.number.isRequired,
+    tips: React.PropTypes.number.isRequired,
+    open: React.PropTypes.bool.isRequired,
+    onCloseTips: React.PropTypes.func.isRequired,
+    setCurrentTip: React.PropTypes.func.isRequired,
+  };
+
+  handleClickOutside(event) {
+    if (this.props.open) {
+      this.props.onCloseTips();
+      event.stopPropagation();
+    }
+  }
+
+  renderDot(i) {
+    const active = i === this.props.currentTipId ? "active" : ""
+    return <span styleName={`dot ${active}`} onClick={() => this.props.setCurrentTip(i)}></span>
+  }
+
+  renderNextButton = () => {
+    return <button styleName="next-btn" onClick={()=>this.props.setCurrentTip(this.props.currentTipId + 1)}>next</button>
+  }
+
+  renderLastButton = () => {
+    return <button styleName="last-btn" onClick={this.props.onCloseTips}>{"ok,let's go!"}</button>
+  }
+
+  render() {
+    const tip = this.props.tips[this.props.currentTipId];
+    const isLast = this.props.currentTipId === (this.props.tips.length - 1);
+    return (
+      <div styleName="body">
+        <div styleName="close-btn" onClick={this.props.onCloseTips}>SKIP</div>
+        <div styleName="header">{tip.header}</div>
+        <div styleName="title">{tip.title}</div>
+        <img styleName="image"src={images[this.props.currentTipId + 1]}/>
+        <div styleName="dots-wrap">
+          {
+            this.props.tips.map((t,i) => this.renderDot(i))
+          }
+        </div>
+        {isLast ? this.renderLastButton() : this.renderNextButton()}
+      </div>
+    );
+  }
+}

src/component/Tips.scss

@@ -0,0 +1,102 @@
+.body {
+  width: 600px;
+  height: 600px;
+  padding: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) ;
+  background-color: white;
+  z-index: 100;
+}
+.close-btn {
+  top: 12px;
+  right: 14px;
+  cursor: pointer;
+  opacity: 0.8;
+  position: absolute;
+  color: #A0A0A0;
+  &:hover {
+    opacity: 1;
+  }
+}
+.header {
+  text-align: center;
+  margin: 30px 0px 16px;
+  font-size: 26px;
+}
+.title {
+  vertical-align: middle;
+  text-align: center;
+  padding: 0;
+  font-size: 18px;
+  color: #A0A0A0;
+}
+
+.image {
+  border-radius: 50%;
+  width: 265px;
+  height: 265px;
+  display: block;
+  margin: 20px auto;
+  border: 2px solid #E9E9E9;
+}
+.popup {
+  animation: fadeIn .3s ease;
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 4;
+}
+
+.dots-wrap {
+  position: relative;
+  display: inline-block;
+  left: 50%;
+  transform: translateX(-50%) ;
+}
+.dot {
+  display: inline-block;
+  border-radius: 50%;
+  width: 15px;
+  height: 15px;
+  background-color: #E9E9E9;
+  cursor: pointer;
+  &.active {
+    background-color: #27AAE1;
+  }
+}
+.dot+.dot {
+  margin-left: 10px;
+}
+
+%button {
+  margin: 0 auto;
+  padding: 14px 10px;
+  text-transform: uppercase;
+  display: block;
+  border-radius: 5px;
+  margin-top: 28px;
+  min-width: 168px;
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.next-btn {
+  @extend %button;
+  border: 2px solid #e9e9e9;
+  color: #27aae1;
+  background-color: #fff;
+  &:hover {
+    border: 1px solid #27AAE1;
+  }
+}
+.last-btn {
+  @extend %button;
+  border: 2px solid #27AAE1;
+  background-color: #27AAE1;
+  color: #fff;
+}

src/component/action.js

@@ -0,0 +1,7 @@
+import { createAction } from 'redux-actions';
+import { API_SERVICES } from '../config/config';
+
+
+export const setCurrentTip = createAction('SET_CURRENT_TIP', id => (id));
+export const closeTips = createAction('CLOSE_TIPS');
+export const openTips = createAction('OPEN_TIPS');

src/component/index.js

@@ -0,0 +1,23 @@
+import CSSModules from 'react-css-modules';
+import Transition from 'react-motion-ui-pack';
+
+import Tips from './Tips';
+import styles from './Tips.scss';
+
+export default
+@CSSModules(styles)
+
+class TipsWrap extends React.Component {
+
+  render() {
+    return (
+      <Transition enter={{opacity: 1}} leave={{opacity: 0}}>
+      {  this.props.open &&
+          <div key="Tips" styleName="popup">
+            <Tips {...this.props} />
+          </div>
+      }
+    </Transition>
+    );
+  }
+}

src/container.js

@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+import Tips from './component';
+import { isTipsOpen, getTips, getCurrentTipId, tipsCount } from './reducer';
+import { closeTips, setCurrentTip } from './action.js';
+
+const mapStateToProps = (state) => {
+  return {
+    open: isTipsOpen(state),
+    currentTipId: getCurrentTipId(state),
+    tips: getTips(state),
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onCloseTips: () => { dispatch(closeTips()); },
+    setCurrentTip: (id) => {dispatch(setCurrentTip(id))}
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Tips);

src/images/1.png

@@ -0,0 +1,6 @@
+export default {
+  1: require('./1.png'),
+  2: require('./2.png'),
+  3: require('./3.png'),
+  4: require('./4.png'),
+}

src/images/2.png

@@ -0,0 +1,4 @@
+import tipsreducer from './reducer';
+import TipsContainer from './container';
+
+export {TipsContainer, tipsreducer};

src/images/3.png

@@ -0,0 +1,18 @@
+export default [
+  {
+    header: "Build Your Shadow Team.",
+    title: "1. Use players from your lists.",
+  },
+  {
+    header: "Build you app",
+    title: "Amazing tip about app 2",
+  },
+  {
+    header: "Build you app",
+    title: "Amazing tip about app 3",
+  },
+  {
+    header: "Build you app",
+    title: "Amazing tip about app 4",
+  }
+]

src/images/4.png

@@ -0,0 +1,10 @@
+import Duce from './duce';
+
+class CurretTip extends Duce {
+
+  defaultState = 0;
+
+  setCurrentTip = (id) => ( this.replace(id) )
+}
+
+export default CurretTip.reducer();

src/images/index.js

@@ -0,0 +1,51 @@
+import _ from 'lodash';
+
+export default class Duce {
+
+  static RESERVED_FUNCTIONS = ['set', 'reduce', 'delete', 'replace', '_functionMap'];
+
+  defaultState = { }
+
+  state = { }
+
+  replace = (value) => {
+    return value;
+  }
+
+  set = (key, value) => {
+    return { ...this.state, [key]: value }
+  }
+
+  delete = (key) => {
+    return _.omit(this.state, key);
+  }
+
+  union = (key, value) => {
+    return { ...this.state, [key]: _.union(this.state[key], _.flatten([value])) }
+  }
+
+  without = (key, value) => {
+    return { ...this.state, [key]: _.without(this.state[key], value) }
+  }
+
+  _functionMap = () => {
+    const functions = _.omit(_.keyBy(_.functions(this)), Duce.RESERVED_FUNCTIONS);
+    const functionNames = _.mapKeys(functions, (value, key) => ( _.toUpper(_.snakeCase(key)) ));
+    return _.mapValues(functionNames, value => ( this[value] ));
+  }
+
+  reduce = () => {
+    const functionMap = _.memoize(this._functionMap)();
+
+    return (state = this.defaultState, action) => {
+      if (!functionMap[action.type]) return state;
+      this.state = state;
+      return functionMap[action.type](action.payload);
+    }
+  }
+
+  static reducer = function() {
+    return new this().reduce();
+  }
+
+}

src/index.js

@@ -0,0 +1,15 @@
+import tips from './config';
+import { combineReducers } from 'redux';
+import open from './open';
+import currentTip from './currentTip';
+
+const Tips = combineReducers({
+  open,
+  currentTip
+});
+
+export default Tips;
+
+export const isTipsOpen = state => state.tips.open;
+export const getCurrentTipId = state => state.tips.currentTip;
+export const getTips = () => tips;

src/reducer/config.js

@@ -0,0 +1,11 @@
+import Duce from './duce';
+
+class Open extends Duce {
+
+  defaultState = true;
+
+  openTips = () => ( this.replace(true) )
+  closeTips = () => ( this.replace(false) )
+}
+
+export default Open.reducer();