Added day 1 not resolved and sync with trello as practice.

jotaoncode · Jul 11, 2016 · 3fb9bcb · 3fb9bcb
1 parent fd16ec6
commit 3fb9bcb
Show file tree

Hide file tree

Showing 34 changed files with 5,844 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -27,3 +27,11 @@ It will be divided in 6 days of learning and teaching. Learning because it is al
 - Typescript
 
 - Jest
+
+#Requirements to start typescript
+
+Follow this steps :)
+
+https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
+
+And then just install the tools you need for your favorite IDE, I am using Atom at the moment.
diff --git a/day-1-not-resolved/.gitignore b/day-1-not-resolved/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+dist/
diff --git a/day-1-not-resolved/README.md b/day-1-not-resolved/README.md
@@ -0,0 +1,29 @@
+#Synopsis
+
+First day on training with react, typescript, flux and webpack.
+
+#Objectives
+
+Learn as much as possible on the latest trends, and provide to my partners some knowledge and tools they can use.
+
+- Introduction to ReactJs
+
+- Components
+
+- Props and State
+
+- Communication between Components
+
+- The Finer Points
+
+- Thinking in React
+
+- Flux Architecture
+
+- Questions
+
+#Contributors
+
+Juan José García
+
+wwww.jotaoncode.com
diff --git a/day-1-not-resolved/index.html b/day-1-not-resolved/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <title>Animation lists!</title>
+        <style media="screen">
+          .stop {
+            display: none;
+          }
+          .play: {
+            display: block;
+          }
+          .list-to-play {
+            width: 20%;
+            float: left;
+          }
+          .animation {
+            width: 60%;
+            float: left;
+          }
+          .full-list {
+            width: 20%;
+            float: left;
+          }
+        </style>
+    </head>
+    <body>
+        <div id="example"></div>
+
+        <!-- Dependencies -->
+        <script src="./node_modules/react/dist/react.js"></script>
+        <script src="./node_modules/react-dom/dist/react-dom.js"></script>
+
+        <!-- Main -->
+        <script src="./dist/bundle.js"></script>
+    </body>
+</html>
diff --git a/day-1-not-resolved/package.json b/day-1-not-resolved/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "proj",
+  "version": "1.0.0",
+  "description": "ejemplo",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Jotaoncode",
+  "license": "ISC",
+  "dependencies": {
+    "classnames": "^2.2.5",
+    "events": "^1.1.1",
+    "flux": "^2.1.1",
+    "material-ui": "^0.15.1",
+    "react": "^15.2.0",
+    "react-addons-update": "^15.2.1",
+    "react-dom": "^15.2.0",
+    "ts-eventemitter": "^0.1.0"
+  },
+  "devDependencies": {
+    "retyped-classnames-tsd-ambient": "0.0.0-0",
+    "source-map-loader": "^0.1.5",
+    "ts-loader": "^0.8.2"
+  }
+}
diff --git a/day-1-not-resolved/src/actions/CommonAction.tsx b/day-1-not-resolved/src/actions/CommonAction.tsx
@@ -0,0 +1,11 @@
+import { IStyleLearntState } from '../stores/dancingStyles';
+
+class CommonAction  {
+  type: string
+  msg: IStyleLearntState
+  constructor (type: string, msg: IStyleLearntState) {
+    this.type = type;
+    this.msg = msg;
+  }
+}
+export default CommonAction;
diff --git a/day-1-not-resolved/src/actions/PlayAction.tsx b/day-1-not-resolved/src/actions/PlayAction.tsx
@@ -0,0 +1,11 @@
+import { IStyleLearntState } from "../stores/dancingStyles";
+
+class PlayAction  {
+  type: string
+  data: IStyleLearntState
+  constructor (type: string, dancingStyle: IStyleLearntState) {
+    this.type = type;
+    this.data = dancingStyle;
+  }
+}
+export default PlayAction;
diff --git a/day-1-not-resolved/src/actions/learningActions.tsx b/day-1-not-resolved/src/actions/learningActions.tsx
@@ -0,0 +1,20 @@
+import appDispatcher from '../dispatcher/appDispatcher';
+import CommonAction from '../actions/CommonAction';
+import { IStyleLearntState } from '../stores/dancingStyles';
+
+class LearningActions {
+  forgetDancingStyle(dancingStyle: IStyleLearntState) {
+    //TODO 11: Dipatch dancing style with a new instance Common Action and the action "forgetDancingStyle"
+
+  }
+  learnDancingStyle(dancingStyle: IStyleLearntState) {
+    //TODO 10: Dipatch dancing style with a new instance Common Action and the action "learnDancingStyle"
+
+  }
+  setPlayingStyle(dancingStyle: IStyleLearntState) {
+    //TODO 10: Dipatch dancing style with a new instance Common Action and the action "setPlayingStyle"
+
+  }
+}
+
+export default new LearningActions();
diff --git a/day-1-not-resolved/src/actions/playActions.tsx b/day-1-not-resolved/src/actions/playActions.tsx
@@ -0,0 +1,11 @@
+import appDispatcher from '../dispatcher/appDispatcher';
+import PlayAction from '../actions/PlayAction';
+import { IStyleLearntState } from "../stores/dancingStyles";
+
+class PlayActions {
+  toggleAnimation(dancingStyle: IStyleLearntState) {
+    //TODO 10: Dipatch dancing style with a new instance Play Action and the action "toggleDancing"
+  }
+}
+
+export default new PlayActions();
diff --git a/day-1-not-resolved/src/components/animation.tsx b/day-1-not-resolved/src/components/animation.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+import playActions from "../actions/playActions";
+import dancingControls from '../stores/dancingControls';
+import dancingStyles from '../stores/dancingStyles';
+import {IStyleLearntState} from '../stores/dancingStyles';
+export interface IAnimationProps { }
+export interface IAnimationState { isPlaying: boolean; selectedStyle: IStyleLearntState}
+
+export class Animation extends React.Component<IAnimationProps, IAnimationState> {
+    constructor() {
+      super();
+      this.state = {
+        isPlaying: dancingControls.isPlaying(),
+        selectedStyle: dancingControls.getSelectedStyle()
+      };
+    }
+    componentWillMount() {
+      //TODO 6: Subscribe to dancingControls "change" event with the onChange function
+    }
+    componentWillUnmount() {
+      //TODO 6: Unsubscribe from dancingControls "change" event  with the onChange function
+    }
+    onChange() {
+      //TODO 6: Set state of animation component check setState method please
+    }
+    render() {
+      let classPlaying = this.state.isPlaying ? 'play': 'stop';
+      let gifRef = this.state.selectedStyle ? this.state.selectedStyle.href : null;
+      return <div>
+              <iframe src={gifRef} className={classPlaying}></iframe>
+             </div>;
+    }
+}
diff --git a/day-1-not-resolved/src/components/animations/fullList.tsx b/day-1-not-resolved/src/components/animations/fullList.tsx
@@ -0,0 +1,34 @@
+import * as React from "react";
+import { ListItem } from "./listItem";
+import { IStyleLearntState, IStylesLearntState } from '../../stores/dancingStyles';
+import dancingStyles from '../../stores/dancingStyles';
+
+export interface IStylesLearntProps { }
+
+export class FullList extends React.Component<IStylesLearntProps, IStylesLearntState> {
+    constructor() {
+      super();
+      this.state = {
+        stylesLearnt: dancingStyles.getDancingLearnt(),
+        existingStyles: dancingStyles.getDancingStyles()
+      };
+    }
+    componentWillMount() {
+      //TODO 2: Subscribe to dancingStyles change event with the onChange function
+    }
+    componentWillUnmount() {
+      //TODO 2: Unsubscribe to dancing styles change event with the onChange function
+    }
+    onChange() {
+      //TODO 2: Change the state of Playables by setting a new state to the component
+      //Check for setState method.
+    }
+    public render() {
+      var styles = this.state.existingStyles.map((style: IStyleLearntState, index: number) => {
+        return (<ListItem href={style.href} song={style.song} style={style.style} key={index}/>);
+      });
+      return <ul>
+              { styles }
+             </ul>;
+    }
+}
diff --git a/day-1-not-resolved/src/components/animations/listItem.tsx b/day-1-not-resolved/src/components/animations/listItem.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import learningActions from "../../actions/learningActions";
+import { IStyleLearntState } from '../../stores/dancingStyles';
+
+export class ListItem extends React.Component<IStyleLearntState, void> {
+    //TODO 3: Implement a method to call an action that a remove this item and sets it to playable
+    render() {
+        return <li>{this.props.song}</li>;
+    }
+}
diff --git a/day-1-not-resolved/src/components/application.tsx b/day-1-not-resolved/src/components/application.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import { Animation } from './animation';
+import { ListToPlay } from './playable/playables';
+import { FullList } from './animations/fullList';
+
+export interface ApplicationProps { }
+
+export class Application extends React.Component<ApplicationProps, {}> {
+    render() {
+        return <div>
+                <section className="list-to-play">
+                  <h1>Playable List</h1>
+                  <ListToPlay/>
+                </section>
+                <section className="animation">
+                  <h1>Animation</h1>
+                  <Animation />
+                </section>
+                <section className="full-list">
+                  <h1>Choosing List</h1>
+                  <FullList/>
+                </section>
+               </div>;
+    }
+}
diff --git a/day-1-not-resolved/src/components/playable/playable.tsx b/day-1-not-resolved/src/components/playable/playable.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import learningActions from "../../actions/learningActions";
+import dancingControls from '../../stores/dancingControls';
+import playActions from "../../actions/playActions";
+import { IStyleLearntState } from "../../stores/dancingStyles";
+
+export class Playable extends React.Component<IStyleLearntState, void> {
+    //TODO 5 Implement Forget Dancing Style button Remove
+    //TODO 4 Implement Toggle Play button-play
+    render() {
+      let isPlayingNow = dancingControls.isPlaying() && dancingControls.getSelectedStyle().style === this.props.style;
+      let textButton = "Play!";
+      if (isPlayingNow) {
+        textButton = "Stop!";
+      }
+      return <li>
+              {this.props.song}
+              <button className="button-play">{textButton}</button>
+              <button>Remove</button>
+             </li>;
+    }
+}
diff --git a/day-1-not-resolved/src/components/playable/playables.tsx b/day-1-not-resolved/src/components/playable/playables.tsx
@@ -0,0 +1,34 @@
+import * as React from "react";
+import { Playable } from './playable';
+import { IStyleLearntState, IStylesLearntState } from '../../stores/dancingStyles';
+import dancingStyle from '../../stores/dancingStyles';
+
+export interface IStylesLearntProps { }
+
+export class ListToPlay extends React.Component<IStylesLearntProps, IStylesLearntState> {
+    constructor() {
+      super();
+      this.state = {
+        stylesLearnt: dancingStyle.getDancingLearnt(),
+        existingStyles: dancingStyle.getDancingStyles()
+      };
+    }
+    componentWillMount() {
+      //TODO 1: Subscribe to dancingStyle change event 
+    }
+    componentWillUnmount() {
+      //TODO 1: Unsubscribe to dancingStyle change event
+    }
+    onChange() {
+      //TODO 1: Change the state of Playables by setting a new state to the component
+      //Check for setState method.
+    }
+    public render() {
+      var styles = this.state.stylesLearnt.map((style: IStyleLearntState, index: number) => {
+        return (<Playable href={style.href} song={style.song} style={style.style} key={index}/>);
+      });
+      return <ul>
+              { styles }
+             </ul>;
+    }
+}
diff --git a/day-1-not-resolved/src/constants/animations.tsx b/day-1-not-resolved/src/constants/animations.tsx
diff --git a/day-1-not-resolved/src/dispatcher/appDispatcher.tsx b/day-1-not-resolved/src/dispatcher/appDispatcher.tsx
@@ -0,0 +1,4 @@
+import * as flux from 'flux';
+//I work as a HUB, dispatching actions to those who needs it, caugh caugh stores...
+const appDispatcher = new flux.Dispatcher<any>()
+export default appDispatcher;
diff --git a/day-1-not-resolved/src/index.tsx b/day-1-not-resolved/src/index.tsx
@@ -0,0 +1,9 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+import { Application } from "./components/application";
+
+ReactDOM.render(
+    <Application />,
+    document.getElementById("example")
+);
diff --git a/day-1-not-resolved/src/stores/dancingControls.tsx b/day-1-not-resolved/src/stores/dancingControls.tsx
@@ -0,0 +1,52 @@
+import * as events from 'events';
+import PlayAction from '../actions/PlayAction';
+import appDispatcher from '../dispatcher/appDispatcher';
+import { IStyleLearntState } from '../stores/dancingStyles';
+/**
+ * Mocked values for dancing styles
+ */
+let isPlaying = false;
+
+const CHANGE_EVENT = 'change';
+let actualStyle : IStyleLearntState;
+/**
+ * I am in charge of informing the component a change event
+ */
+class PlayingActions extends events.EventEmitter {
+  //Add callback to change event
+  addChangeListener(cb:Function) {
+    this.on(CHANGE_EVENT, cb);
+  }
+  //Remove callback to change event
+  removeChangeListener(cb:Function) {
+    this.removeListener(CHANGE_EVENT, cb);
+  }
+  isPlaying() {
+    return isPlaying;
+  }
+
+  toggleAnimation(dancingStyle: IStyleLearntState) {
+    //TODO 9: Add dancing style as actual style variable when it is playing
+    //Toggle is Playing value
+  }
+  getSelectedStyle() {
+    return actualStyle;
+  }
+  emitChange() {
+    this.emit(CHANGE_EVENT);
+  }
+}
+const playingStore = new PlayingActions();
+
+appDispatcher.register(function (action: PlayAction) {
+  switch(action.type) {
+    case "toggleDancing":
+      //TODO 9: Call toggle Animation
+      break;
+    default:
+    //No op
+  }
+  playingStore.emitChange();
+});
+
+export default playingStore;