icyJoseph

import React from "react";
import useSWR from "swr";
import { GridSpinner } from "react-spinners-kit";
import { SlowSuspense } from "containers/SlowSuspense";
import { UserCard } from "components/UserCard";

const endpoint = "https://api.github.com";

const fetcher = key =>
  fetch({ url: `${endpoint}/users/${key}` }).then(res => res.json());

icyJoseph

import React, {
  useEffect,
  useState,
  createContext,
  useContext,
  Suspense,
  useMemo
} from "react";

const SlowSuspenseCtx = createContext({});

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();
};

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

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 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

/** 
 * 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, { Component } from "react";
import ReactDOM from "react-dom";

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

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 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>