Skip to content

Instantly share code, notes, and snippets.

View adrian-afergon's full-sized avatar
🏠
Working from home

Adrián Ferrera González adrian-afergon

🏠
Working from home
View GitHub Profile
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()
import useSWR from "swr"
interface UseData<T> {
key: string,
fetcher: () => Promise<T>
}
interface Response <T> {
data: T | undefined
error: string | undefined
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
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
20/05/2021

tsyringe

Introduccción

import { inject, injectable } from 'tsyringe'
type CustomerId = string
interface TimePeriod {
start: Date,
end: Date
}
type Amount = number
@adrian-afergon
adrian-afergon / product.provider.js
Created September 15, 2020 09:37
This gist represent how to consume a GraphQL service using the porposal of React Layers
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
adrian-afergon / ExerciseDetail.spec.tsx
Created April 11, 2019 20:42
Create an exercise warning wrapper
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
adrian-afergon / ExerciseDetail.spec.tsx
Last active April 11, 2019 20:53
Refactor our test after import the exercise builder
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');
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
adrian-afergon / ExerciseDetail.spec.tsx
Last active April 11, 2019 19:55
Renaming the tests
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', () => {