adrian-afergon

import {useSWRConfig} from "swr";

interface UseDataMutation<T> {
  key: string,
  mutation: (data: T) => Promise<T>
}

export const useDataMutation = <T>({key, mutation}: UseDataMutation<T> ) => {
  const { mutate: swrMutate } = useSWRConfig()

adrian-afergon

import useSWR from "swr"

interface UseData<T> {
  key: string,
  fetcher: () => Promise<T>
}

interface Response <T> {
  data: T | undefined
  error: string | undefined

adrian-afergon

type Headers = { [key: string]: string }

const baseUrl = process.env.BASE_URL || ''

const get = async <T>(url: string, headers?: Headers) => {
  const response = await fetch(`${baseUrl}${url}`, {
    method: 'GET',
    headers: {...headers}
  })
  return await response.json() as T

adrian-afergon

title	author	description	image	date
tsyringe	Adrián Ferrera	tsyringe es una librería que facilita la inyección de dependencias en typescript, desarrollada por Microsoft. En este post haremos un repaso/introducción de dónde surge este concepto, cuál es su finalidad, como configurar el proyecto y varios ejemplos de su uso	https://adrianferrera.com/api/resources/cheatsheet-arrays.png	20/05/2021

tsyringe

Introduccción

adrian-afergon

import { inject, injectable } from 'tsyringe'

type CustomerId = string

interface TimePeriod {
  start: Date,
  end: Date
}

type Amount = number

adrian-afergon

export const ProductContext = React.createContext({
  product: {}
})

const ProductAdapter = ({ handle, children }) => {
  const { productRepository } = React.useContext(DependenciesContext)
  const [product, setProduct] = React.useState()
  React.useEffect(() => {
    productRepository.getProductByHandle(handle).then(setProduct)
  },[handle])

adrian-afergon

import { shallow } from 'enzyme';
import * as React from 'react';
import { ExerciseDetail } from './';
import { createAnExercise } from './ExerciseMockBuilder'

describe('ExerciseDetail', () => {
  it('should display the warning when it\'s present in the exercise', () => {
    const anExercise: Exercise = createAnExercise({warning: 'a warning message'})
    const message = createAnExerciseWarningWrapper(anExercise);

adrian-afergon

import { shallow } from 'enzyme';
import * as React from 'react';
import { ExerciseDetail } from './';
import { createAnExercise } from './ExerciseMockBuilder'

describe('ExerciseDetail', () => {
  it('should display the warning when it\'s present in the exercise', () => {
    const anExercise: Exercise = createAnExercise({warning: 'a warning message'})
    const wrapper = shallow(<ExerciseDetail exercise={anExercise}/>);
    const message = wrapper.find('Message');

adrian-afergon

export const createAnExercise = ({
  warning = 'irrelevant warning message',
  tags = [] as string[],
  name = 'irrelevant name',
  image = 'irrelevant image url'
  // ... at less 20 props
} as Exercise): Exercise => ({
  warning,
  tags,
  name,

adrian-afergon

import { shallow } from 'enzyme';
import * as React from 'react';
import { ExerciseDetail } from './';

describe('ExerciseDetail', () => {
  it('should display the warning when it\'s present in the exercise', () => {
    /* ... */
  });
  
  it('should not display the warning when it\'s not set in the exercise', () => {