sergiodxa

import ms from "ms";
import * as React from "react";
import { useQuery } from "react-query";
import { hasOwn } from "../utils";

let isProduction = process.env.NODE_ENV === "production";

export interface Translations {
  [key: string]: string;
}

sergiodxa

import { useMutation, UseMutationOptions } from "react-query";
import { pluralize, singularize } from "inflected";
import { generatePath } from "react-router-dom";

type Config<Input, Output, Error> = {
  /**
   * Any React Query option for useMutation
   * @type {UseMutationOptions<Output, APIError<Error>, Input>}
   */
  options?: UseMutationOptions<Output, APIError<Error>, Input>;

sergiodxa

import { useCallback, ReactNode, FormEventHandler } from "react";
import { MutationResultPair, MutateConfig, QueryStatus } from "react-query";
import * as yup from "yup";

function noop() {}

type FormProps<Data> = {
  action: MutationResultPair<Data, Error, FormData, never | (() => void)>;
  children(status: QueryStatus): ReactNode;
  validation: yup.ObjectSchema;

sergiodxa

import { useQuery, QueryConfig } from "react-query";

type ID = string | number;

type Resource = { name: string; id: ID };

class APIClientError extends Error {}
class APIServerError extends Error {}

export async function getEntity<Entity = unknown>(

sergiodxa

/**
 * Si tenemos este HTML
 * <section id="some-section">
 *   <article> <h2>Article 1</h2> <article>A nested one</article> </article>
 *   <article> <h2>Article 2</h2> <article>A nested one</article> </article>
 *   <article> <h2>Article 3</h2> <article>A nested one</article> </article>
 * </section>
 */
const section = document.querySelector("#some-section");
// Haciendo esto obtenemos seis artículos

sergiodxa

function MyComponent(props) {
  // refs
  const $item = React.useRef();
  // states
  const [value, setValue] = React.useState("");
  // computed
  const filtered = React.useMemo(
    () => props.list.filter((item) => item.includes(value)),
    [props.list, value]
  );

sergiodxa

import React from "react";

const FeatureFlags = React.createContext(null);

export function FeatureProvider({ features = null, children }) {
  if (features === null || typeof features !== "object") {
    throw new TypeError("The features prop must be an object or an array.");
  }
  return (
    <FeatureFlags.Provider value={features}>{children}</FeatureFlags.Provider>

sergiodxa

const URL = "https://jsonplaceholder.typicode.com/posts?_page=2";

async function getData(staleData = {}) {
  const response = await fetch(URL);
  const data = await response.json();
  return data.reduce((posts, post) => {
    return {
      ...posts,
      [post.id]: posts.hasOwnProperty(post.id)
        ? { ...posts[post.id], ...post }

sergiodxa

import { useRef, useEffect } from "react";
import NProgress from "nprogress";
import Router from "next/router";

function useNProgress(showAfterMs = 300, options = {}) {
  const timer = useRef(null);

  function routeChangeStart() {
    const { showAfterMs } = this.props;
    clearTimeout(timer.current);

sergiodxa

const messages = {
  year: { singular: 'year', plural: 'years', denominator: 365, inSeconds: 31536000 },
  day: { singular: 'day', plural: 'days', denominator: 24, inSeconds: 86400 },
  hour: { singular: 'hour', plural: 'hours', denominator: 60, inSeconds: 3600 },
  minute: { singular: 'minute', plural: 'minutes', denominator: 60, inSeconds: 60 },
  second: { singular: 'second', plural: 'seconds', inSeconds: 1 }
}

function pluralize(value, unit) {
  if (value === 1) return messages[unit].singular;