icyJoseph

export const curry = f => a => (...b) => f(a,...b)

export const pipe = (...funcs) => (...args) => funcs.reduce((res, func, i) => (i === 0 ? func(...res) : func(res)), args);

export const mapf = (func, arr) => arr.map(func);

export const filterf = (func, arr) => arr.filter(func);

export const flatten = arr => [].concat(...arr);

icyJoseph

import React from 'react';
import Media from 'react-media';

const Responsive = () => (
  <Media query={{ maxWidth: 1023 }}>
    {
    matches => 
      matches 
      ? <div>Less than 1023</div> 
      : <div>More than 1023</div> 

icyJoseph

import React from 'react';
import Media from 'react-media';

const Mobile = ({ title }) => <div>{title} Mobile</div>;
const Desktop = ({title}) => <div>{title} Desktop</div>;

const Responsive = ({ ...props }) => (
  <Media query={{ maxWidth: 1023 }}>
    {matches => (matches ? <Mobile {...props} /> : <Desktop {...props} />)}
  </Media>

icyJoseph

import React from 'react';
import Media from 'react-media';

// functional helper
const curry = f => a => (...b) => f(a,...b)

const Mobile = ({ title }) => <div>{title} Mobile</div>;
const Desktop = ({title}) => <div>{title} Desktop</div>;

const MediaContent = (props, matches) => {

icyJoseph

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      result: ""
    };
  }

icyJoseph

/** 
 * Map
 * Map a function fn over every element of arr
 * */
const map = (arr, fn) =>
	arr.reduce((acc, val, index) => acc.concat(fn(val, index)), []);

/** 
 *  Filter
 *  Remove elements that do not return truthy when evaluated against the function fn

icyJoseph

import React from "react";
import ReactDOM from "react-dom";

export default ({ children, closeCallback }) => {
  const composed = (
    <div className="Modal-container">
      <div className="Modal-content">
        {children}
        <button onClick={closeCallback}> Close Basic Modal </button>
      </div>

icyJoseph

import React, { Component, Fragment } from "react";
import Portal from "./Portal";

export default class BasicModal extends Component {
  state = { open: false };

  componentDidMount() {
    this.listener = document.body.addEventListener("click", () => {
      this.closeModal();
    });

icyJoseph

import React, { Component } from "react";
import BasicModal from "../components/BasicModal";
import FixButton from "../components/FixButton";
import { MyModalContent, ReactHeader } from "../components/Commons";
import { bodyClickFix } from "../utils";

import "./App.css";

export default class App extends Component {
  state = { open: false, counter: 0, fixed: false };

icyJoseph

export const bodyClickFix = cb => {
  if ("ontouchstart" in document.documentElement) {
    const highlight = "-webkit-tap-highlight-color";
    document.body.style.cursor = "pointer";
    document.body.style[highlight] = "transparent";
  }
  return cb();
};