joeporpeglia · June 30, 2017 16:25 · Jun 29, 2017 · Jun 29, 2017 · Jun 29, 2017 · Jun 29, 2017
diff --git a/behavior-with-state-and-structure.js b/behavior-with-state-and-structure.js
@@ -5,7 +5,7 @@ document
     handleSave
   );
 
-const isSaving = false;
+let isSaving = false;
 
 const handleSave = () => {
   if (isSaving) {

diff --git a/behavior-with-state.js b/behavior-with-state.js
@@ -5,7 +5,7 @@ document
     handleSave
   );
 
-const isSaving = false;
+let isSaving = false;
 
 const handleSave = () => {
   if (isSaving) {

diff --git a/withDropdownState.jsx b/withDropdownState.jsx
@@ -1,5 +1,6 @@
 const withDropdownState = WrappedComponent => {
   return class extends Component {
+    // Initialize state in constructor
     render() {
       return (
         <WrappedComponent

diff --git a/redux-recompose.js b/redux-recompose.js
@@ -6,10 +6,10 @@ const withCounter = connect(
 const withCounter = compose(
   withState('value', 'setValue', 0),
   withHandlers({
-    onIncrement: ({ setValue, value }) => {
+    onIncrement: ({ setValue, value }) => () => {
       setValue(value + 1);
     },
-    onDecrement: ({ setValue, value }) => {
+    onDecrement: ({ setValue, value }) => () => {
       setValue(value - 1);
     },
   })

diff --git a/higher-order-function.jsx b/higher-order-function.jsx
@@ -7,6 +7,11 @@ const increment = num => num + 1;
 
 const incrementWithLog = withLog(increment);
 
+const withLog = WrappedComponent => (props) => {
+  console.log('rendered with props:', props);
+  return <WrappedComponent {...props} />;
+}
+
 const Button = props => <button {...props} />;
 
 const ButtonWithLog = withLog(Button);
diff --git a/Dropdown.jsx b/Dropdown.jsx
@@ -1,15 +1,21 @@
 type DropdownProps = {
   expanded: boolean,
   value: string | number,
-  onChange: (string | number) => void
+  onChange: (string | number) => void,
+  onExpand: () => void,
+  onCollapse: () => void,
   options: {
     [optionValue: string | number]: string | React$Element
   },
 };
 
 const Dropdown = props => (
   <div>
-    <button aria-haspopup="true" aria-expanded={props.expanded}>
+    <button
+      aria-haspopup="true"
+      aria-expanded={props.expanded}
+      onClick={props.expanded ? props.onCollapse : props.onExpand}
+    >
       {props.options[props.value]}
     </button>
     <ul aria-hidden={!props.expanded}>

diff --git a/withDropdownHandlers.jsx b/withDropdownHandlers.jsx
@@ -4,7 +4,10 @@ const withDropdownHandlers = WrappedComponent => {
       {...props}
       onExpand={() => props.setExpanded(true)}
       onCollapse={() => props.setExpanded(false)}
-      onChange={props.setValue}
+      onChange={value => {
+        props.setValue(value);
+        props.setExpanded(false);
+      }
     />
   );
 };
diff --git a/Dropdown.jsx b/Dropdown.jsx
@@ -1,7 +1,10 @@
 type DropdownProps = {
   expanded: boolean,
   value: string | number,
-  options: { [optionValue: string | number]: string | React$Element },
+  onChange: (string | number) => void
+  options: {
+    [optionValue: string | number]: string | React$Element
+  },
 };
 
 const Dropdown = props => (
@@ -12,7 +15,9 @@ const Dropdown = props => (
     <ul aria-hidden={!props.expanded}>
       {Object.keys(props.options).map(value => (
         <li key={value}>
-          {props.options[value]}
+          <button onClick={() => props.onChange(value)}>
+            {props.options[value]}
+          </button>
         </li>
       ))}
     </ul>

diff --git a/redux-recompose.js b/redux-recompose.js
@@ -1,9 +1,16 @@
-const withCounter = connect(selectCounterState, counterActions);
+const withCounter = connect(
+  selectCounterState,
+  counterActions
+);
 
 const withCounter = compose(
   withState('value', 'setValue', 0),
   withHandlers({
-    onIncrement: ({ setValue, value }) => setValue(value + 1),
-    onDecrement: ({ setValue, value }) => setValue(value - 1),
+    onIncrement: ({ setValue, value }) => {
+      setValue(value + 1);
+    },
+    onDecrement: ({ setValue, value }) => {
+      setValue(value - 1);
+    },
   })
 );
diff --git a/redux-recompose.js b/redux-recompose.js
@@ -0,0 +1,9 @@
+const withCounter = connect(selectCounterState, counterActions);
+
+const withCounter = compose(
+  withState('value', 'setValue', 0),
+  withHandlers({
+    onIncrement: ({ setValue, value }) => setValue(value + 1),
+    onDecrement: ({ setValue, value }) => setValue(value - 1),
+  })
+);
diff --git a/layout-content.jsx b/layout-content.jsx
@@ -0,0 +1,11 @@
+const Article = (props) => (
+  <article>
+    <header>{props.header}</header>
+    <main>{props.content}</main>
+    <footer>{props.footer}</footer>
+  </article>
+);
+
+const Strong = (props) => (
+  <strong>{props.children}</strong>
+);
diff --git a/higher-order-function.js → higher-order-function.jsx b/higher-order-function.js → higher-order-function.jsx
diff --git a/compose.jsx → composition.jsx b/compose.jsx → composition.jsx
diff --git a/higher-order-function.js b/higher-order-function.js
@@ -0,0 +1,12 @@
+const withLog = wrappedFn => (...args) => {
+  console.log('called with args:', args);
+  return wrappedFn(...args);
+}
+
+const increment = num => num + 1;
+
+const incrementWithLog = withLog(increment);
+
+const Button = props => <button {...props} />;
+
+const ButtonWithLog = withLog(Button);
diff --git a/compose.jsx b/compose.jsx
@@ -4,4 +4,8 @@ const Composed = () => (
   <Outer>
     <Inner />
   </Outer>
+);
+
+const Composed = () => (
+  <Outer children={<Inner />} />
 );
diff --git a/compose.jsx b/compose.jsx
@@ -1,4 +1,4 @@
-const composed = () => outer(inner(...args));
+const composed = () => outer(inner());
 
 const Composed = () => (
   <Outer>

diff --git a/compose.jsx b/compose.jsx
@@ -1,4 +1,4 @@
-const compose2 = (f, g) => (...args) => f(g(...args));
+const composed = () => outer(inner(...args));
 
 const Composed = () => (
   <Outer>

diff --git a/behavior-with-state-and-structure.js b/behavior-with-state-and-structure.js
@@ -0,0 +1,18 @@
+document
+  .querySelector('.btn-save')
+  .addEventListener(
+    'click',
+    handleSave
+  );
+
+const isSaving = false;
+
+const handleSave = () => {
+  if (isSaving) {
+    return;
+  }
+
+  isSaving = true;
+  showLoader();
+  saveForm();
+};
diff --git a/behavior-with-state.js b/behavior-with-state.js
@@ -0,0 +1,17 @@
+document
+  .querySelector('.btn-save')
+  .addEventListener(
+    'click',
+    handleSave
+  );
+
+const isSaving = false;
+
+const handleSave = () => {
+  if (isSaving) {
+    return;
+  }
+
+  isSaving = true;
+  saveForm();
+};
diff --git a/behavior.js b/behavior.js
@@ -0,0 +1,10 @@
+document
+  .querySelector('.btn-save')
+  .addEventListener(
+    'click',
+    handleSave
+  );
+
+const handleSave = () => { 
+  saveForm();
+};
diff --git a/compose.jsx b/compose.jsx
@@ -0,0 +1,7 @@
+const compose2 = (f, g) => (...args) => f(g(...args));
+
+const Composed = () => (
+  <Outer>
+    <Inner />
+  </Outer>
+);
diff --git a/presentation.css b/presentation.css
@@ -0,0 +1,4 @@
+.btn-save {
+  background: #1ab7ea;
+  color: #ffffff;
+}
diff --git a/semantic-structure.html b/semantic-structure.html
@@ -0,0 +1,5 @@
+<form>
+  <button class=”btn-save”>
+    Save
+  </button>
+</form>
diff --git a/OriginalDropdownProps.jsx b/OriginalDropdownProps.jsx
@@ -1,6 +1,8 @@
 type DropdownProps = {
   className: string,
-  options: string[] | number[] | Element[],
+  options: Array<string>
+    | Array<number>
+    | Array<{ label: React$Element, value: string | number }>
   onChange: Function,
   placeholder: string | Element,
   value: string | number,

diff --git a/DropdownProps.js → OriginalDropdownProps.jsx b/DropdownProps.js → OriginalDropdownProps.jsx
diff --git a/Dropdown.jsx b/Dropdown.jsx
@@ -0,0 +1,20 @@
+type DropdownProps = {
+  expanded: boolean,
+  value: string | number,
+  options: { [optionValue: string | number]: string | React$Element },
+};
+
+const Dropdown = props => (
+  <div>
+    <button aria-haspopup="true" aria-expanded={props.expanded}>
+      {props.options[props.value]}
+    </button>
+    <ul aria-hidden={!props.expanded}>
+      {Object.keys(props.options).map(value => (
+        <li key={value}>
+          {props.options[value]}
+        </li>
+      ))}
+    </ul>
+  </div>
+);
diff --git a/DropdownProps.js b/DropdownProps.js
@@ -0,0 +1,11 @@
+type DropdownProps = {
+  className: string,
+  options: string[] | number[] | Element[],
+  onChange: Function,
+  placeholder: string | Element,
+  value: string | number,
+  defaultValue: string | number,
+  readOnly: boolean,
+  optionsMaxHeight: number,
+  calculateWidth: boolean,
+};
diff --git a/dropdown-behavior.js b/dropdown-behavior.js
@@ -1,10 +0,0 @@
-const withDropdownHandlers = WrappedComponent => {
-  return props => (
-    <WrappedComponent
-      {...props}
-      onExpand={...}
-      onCollapse={...}
-      onChange={...}
-    />
-  );
-};

diff --git a/withDropdownHandlers.jsx b/withDropdownHandlers.jsx
@@ -0,0 +1,10 @@
+const withDropdownHandlers = WrappedComponent => {
+  return props => (
+    <WrappedComponent
+      {...props}
+      onExpand={() => props.setExpanded(true)}
+      onCollapse={() => props.setExpanded(false)}
+      onChange={props.setValue}
+    />
+  );
+};
diff --git a/withDropdownState.jsx b/withDropdownState.jsx
@@ -0,0 +1,14 @@
+const withDropdownState = WrappedComponent => {
+  return class extends Component {
+    render() {
+      return (
+        <WrappedComponent
+          {...this.props}
+          expanded={this.state.expanded}
+          value={this.state.value}
+          setExpanded={expanded => this.setState({ expanded })}
+          setValue={value => this.setState({ value })}
+        />
+      );
+    }
+};
diff --git a/dropdown-behavior.js b/dropdown-behavior.js
@@ -0,0 +1,10 @@
+const withDropdownHandlers = WrappedComponent => {
+  return props => (
+    <WrappedComponent
+      {...props}
+      onExpand={...}
+      onCollapse={...}
+      onChange={...}
+    />
+  );
+};
No results found