Quick and dirty way to force inference on a specific component property with typescript.
interface Props<T, D extends T> {
ground: T; // Value of T is inferred here
collection: D[]; // Value of T is used here but is of generic D
function: (arg: D) => void; // And here
}
// Here we use the GroundedProps interface in our component
| // Context file | |
| export const MyContext = createContext(null); | |
| // Provider abstraction file | |
| import { MyContext } from './context'; | |
| export const ProviderAbstraction = ({ children }) => { | |
| const [modalState, setModalState] = useState(false); | |
| return ( |
| const MyComponent = ({ loading }) => ( | |
| if (loading) { | |
| return <Spinner />; | |
| } | |
| return <MainContent />; | |
| ); |
| // Trigger event | |
| const handleClick = useCallback(() => fetch(url), []); | |
| // Trigger change to render output | |
| const handleClick = useCallback(() => setNewState(s => s+1), []); | |
| describe('on mount', () => { | |
| it('renders friends list', () => { | |
| expect(shallow(<FriendsList friends={friends} />)).toMatchSnapshot() | |
| }); | |
| it('renders "no friends found"', () => { | |
| expect(shallow(<FriendsList />)).toMatchSnapshot() | |
| }); | |
| }); |
| describe('on user click', () => { | |
| const props = { | |
| friends, | |
| onUserChange: jest.fn(), | |
| }; | |
| it('calls on user change', () => { | |
| const wrapper = shallow(<FriendsList {…props} />); | |
| wrapper.find('FriendItem[value="Paul"]').simulate('click'); | |
| expect(onUserChange).toBeCalledWith('Paul'); |
| #!/bin/bash | |
| dnf update -y | |
| dnf groupinstall "Development Tools" | |
| dnf install perl kernel-devel kernel-headers dnf-plugins-core | |
| dnf config-manager --add-repo https://download.docker.com/linux/fedora/docker-ce.repo | |
| dnf install docker-ce docker-ce-cli containerd.io | |
| systemctl start docker | |
| systemctl enable docker |
| const useQuery = (query, opts) => { | |
| const source = useRef(); | |
| const [state, setState] = useState(); | |
| const makeRead = useCallback(() => { | |
| let status = "pending"; | |
| let response; | |
| let promise = new Promise((resolve) => { | |
| source.current = pipe( | |
| client.createOperation(query, opts), |
| import { ApolloProvider } from '@apollo/react-hooks'; | |
| import { ApolloClient, RequestHandler, InMemoryCache, ApolloLink, Observable } from 'apollo-boost'; | |
| import { GraphQLError } from 'graphql'; | |
| import React from 'react'; | |
| import { Users } from './Users'; | |
| export default { | |
| title: 'Pages/Users', | |
| }; |