andyrichardson

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

andyrichardson

// Context file
export const MyContext = createContext(null);

// Provider abstraction file
import { MyContext } from './context';

export const ProviderAbstraction = ({ children }) => {
  const [modalState, setModalState] = useState(false);
  
  return (

andyrichardson

const MyComponent = ({ loading }) => (
  if (loading) {
    return <Spinner />;
  }
  
  return <MainContent />;
);

andyrichardson

// Trigger event
const handleClick = useCallback(() => fetch(url), []);

// Trigger change to render output
const handleClick = useCallback(() => setNewState(s => s+1), []);

andyrichardson

describe('on mount', () => {
  it('renders friends list', () => {
    expect(shallow(<FriendsList friends={friends} />)).toMatchSnapshot()
  });
 
  it('renders "no friends found"', () => {
    expect(shallow(<FriendsList />)).toMatchSnapshot()
  });
});

andyrichardson

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');

andyrichardson

#!/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

andyrichardson

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),

andyrichardson

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',
};

andyrichardson

About

I absolutely failed at a timed challenge on how to serialize and deserialize a binary tree in JS.

This is my way of compensating for that failure 🤦‍

Hopefully this helps someone!

Data structure