Skip to content

Instantly share code, notes, and snippets.

View atmd83's full-sized avatar

Andrew Markham-Davies atmd83

View GitHub Profile
@atmd83
atmd83 / profile.tsx
Created January 14, 2020 17:46
profile
import React from 'react';
import { useQuery } from '@apollo/react-hooks';
import { withRouter } from 'react-router-dom';
import gql from 'graphql-tag';
import { Container, Col, Row } from 'react-bootstrap';
import Post from '../components/post';
@atmd83
atmd83 / .vimrc
Created March 5, 2019 17:02
current vimrc
set nocompatible
filetype off
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
Plugin 'VundleVim/Vundle.vim'
set nocompatible
filetype off
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
Plugin 'VundleVim/Vundle.vim'
@atmd83
atmd83 / questions.txt
Last active September 28, 2018 08:33
Javascript questions
1. What are some of the new language features introduced into javascript from es6 onwards and Which do you use the most?
2. Whats the difference between `let` and `const`, when would you use each?
3. Explain the difference between `.map` and `.forEach` and when you'd use each.
4. When writing modern javascript/typescript, what tools can you use to transpile your code?
5. What tools/techniques can you use to test modern javascript applications.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
import React from 'react';
import PubSub from 'pubsub-js';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
import Thing from './thing';
describe('thing', () => {
@atmd83
atmd83 / thing.full.js
Created February 27, 2018 13:03
medium
import React from 'react';
import PubSub from 'pubsub-js';
export default class Thing extends React.Component {
constructor(props) {
super(props);
this.state = {
message: 'The value is'
}
}
@atmd83
atmd83 / thing.3.spec.js
Created February 27, 2018 13:02
medium failed test
describe('when the state changes', () => {
it('it renders correctly', () => {
component = shallow(<Thing value={3} />);
expect(component.find('h1').text()).toEqual('The value is 3');
// lets alter the state
component.setState({ message: 'You have a value of' });
// remember our shouldComponentUpdate() rejects any update
// unless the prop value has changed
expect(component.find('h1').text()).toEqual('The value is 3');
@atmd83
atmd83 / thing.2.js
Created February 27, 2018 12:49
medium post updated shouldComponentUpdate
shouldComponentUpdate(nextProps, nextState) {
if (this.props.value !== nextProps.value) {
PubSub.publish('thing.should.update');
return true;
}
return false;
}
@atmd83
atmd83 / thing.2.spec.js
Created February 27, 2018 12:48
medium post updated describe
describe('when the props change', () => {
it('will publish the correct messages based on the prop', () => {
// lets give the component a 'value' prop
component = shallow(<Thing value={3} />);
// lets update the component with the same prop
component.setProps({ value: 3 });
expect(PubSub.publish).lastCalledWith('thing.will.receive.props');
// shouldComponentUpdate will return false
// so componentWillUpdate() will not call