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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import useSWR from "swr" | |
interface UseData<T> { | |
key: string, | |
fetcher: () => Promise<T> | |
} | |
interface Response <T> { | |
data: T | undefined | |
error: string | undefined |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { inject, injectable } from 'tsyringe' | |
type CustomerId = string | |
interface TimePeriod { | |
start: Date, | |
end: Date | |
} | |
type Amount = number |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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]) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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', () => { |
NewerOlder