VitorLuizC

import { ChangeEvent } from 'react';

/**
 * Update selection position simply removing diff between current and formatted
 * values and handling negative results.
 * @param currentPosition - Current selection position.
 * @param currentValue - Current value.
 * @param formattedValue - Formatted value.
 */
const updateSelection = (

VitorLuizC

interface Monad<T> {
  ap<U>(monad: Monad<(value: T) => U>): Monad<U>;

  map<U>(fn: (value: T) => U): Monad<T>;

  chain<U>(fn: (value: T) => Monad<U>): Monad<U>;

  static of<T>(value: T): Monad<T>;
}

VitorLuizC

1. Apresentação.
2. GraphQL, Graph Query Language.
3. Linguagem de consumo de grafos.
4. O que são grafos?
5. Facebook o criou, 2012. Tornou público em 2015,
  teve a treta das licenças open source do Facebook,
  mais recentemente tem uma GraphQL Foundation que é administrada pela Linux Foundation (o nome em open-source).

// Beleza, agora mais prático.
Back-end e Front-end, clientes.

VitorLuizC

import { useCallback, useEffect, useRef, useState } from 'react';

/**
 * @typedef State
 * @property {null | Error} error
 * @property {null | T} result
 * @property {boolean} loading
 * @template T
 */

VitorLuizC

/**
 * Since TypeScript doesn't support **Variadic Kinds** we explicitly have to
 * define the type of all the possible usages as method overloads.
 *
 * https://github.com/microsoft/TypeScript/issues/5453
 *
 * Our `pipe` supports N arguments, but we probably will not use more than 10.
 */
// prettier-ignore
type Pipe = {

VitorLuizC

const KEY = 'isMenuVisible';

const getIsMenuVisible = () => {
  const json = window.localStorage.getItem(KEY);
  if (json) {
    try {
      const value = JSON.parse(json);
      if (typeof value === 'boolean') {
        return value;
      }

VitorLuizC

import { useCallback, useEffect } from 'react';

const useClickOutside = (
  wrapperOrWrappers: null | HTMLElement | (null | HTMLElement)[],
  onClickOutside: (event: MouseEvent) => void
) => {
  const wrappers = resolveToArray(wrapperOrWrappers);

  const handleWindowClick = useCallback(
    (event: MouseEvent) => {

VitorLuizC

function groupBy(fn) {
  return function(items) {
    return items.reduce(function(groups, item) {
      var key = fn(item);
      if (!(key in groups))
        // eslint-disable-next-line no-param-reassign
        groups[key] = [];
      groups[key].push(item);
      return groups;
    }, Object.create(null));

VitorLuizC

import { useCallback, useEffect, useRef } from 'react';

/**
 * Hook that provides a safe way to check if component is mounted.
 * @example
 * const isMounted = useIsMounted();
 * const [users, setUsers] = useState([]);
 *
 * useEffect(() => {
 *   fetchUsers().then(users => {

VitorLuizC

import { useEffect, useCallback } from 'react';

/**
 * React Hook that prevents the browser from opening files when a user drops
 * files on the screen. It doesn't affect component specific drag-and-drop
 * behavior since it prevents the default behavior of bubbled events on the
 * higher instance (Window).
 */
const useDontOpenFileOnDrop = () => {
  const handleDrop = useCallback((event: DragEvent) => {