Skip to content

Instantly share code, notes, and snippets.

@cladley
cladley / isInParent.js
Created February 21, 2020 09:03
Check if dom node is contained in parent node
/**
* Determines if html element is
* contained within other html element
*
* @param {HTMLElement} refNode
* @param {HTMLElement} otherNode
*/
const isParent = (refNode, otherNode) => {
var parent = otherNode.parentNode;
do {
@cladley
cladley / foldable.js
Created May 21, 2019 11:25
Folding image effect using react spring
import React from 'react';
import {useSpring, animated, config} from 'react-spring';
import Slider from './Slider';
const convertPercentageToRotation = percentage => {
return percentage * 1.8;
}
function norm(value, min, max) {
return (value - min) / (max - min);
@cladley
cladley / accordion.js
Created April 29, 2019 11:13
A better accordion example hook
import React, {useState, useImperativeHandle, useRef, useEffect, useMemo, useCallback} from 'react';
const AccordionContext = React.createContext();
function AccordionProvider(props) {
const accordionItems = new Map();
const registerAccordionItem = (id, item) => {
accordionItems.set(id, item);
};
@cladley
cladley / accordion.js
Created April 26, 2019 10:35
Accordion using react hooks
import React, {forwardRef, useRef, useImperativeHandle, useState, useCallback, useMemo} from 'react';
const Accordion = (props) => {
let items = useRef(new Map()).current;
const handleOnToggle = (id) => {
items.forEach((value, key) => {
if (key != id) {
value.close();
}
@cladley
cladley / integration.test.js
Created March 11, 2019 22:17
Integration tests, testing action and reducer working together
import { storeFactory } from "../test/testUtils";
import { guessWord } from "./actions";
describe("guessWord action dispatcher", () => {
const secretWord = "party";
const unsuccessfulGuess = "train";
describe("no guessed words", () => {
let store;
const initialState = { secretWord };
@cladley
cladley / testUtils.js
Created March 11, 2019 22:15
Simple test utils for jest redux
import { createStore, applyMiddleware } from "redux";
import ReduxThunk from "redux-thunk";
import rootReducer from "./reducers";
export const middlewares = [ReduxThunk];
const createStoreWidthMiddleware = applyMiddleware(...middlewares)(createStore);
export default createStoreWidthMiddleware(rootReducer);
/////////////////////////////////////////////////////////////////////////////////////////////
@cladley
cladley / randomise-svg-ids.js
Last active November 27, 2018 10:52
randomise avg ids
const fs = require('fs');
const path = require('path');
const crypto = require('crypto');
const findIdsRegex = /id="(.+?)"?/ig;
const fileName = process.argv[2];
const fileAbsoluteDirectory = path.dirname(path.resolve(fileName));
let buffer = '';
if (path.extname(fileName) !== '.svg') {
// Its like $('<h1>hello</h1>') in jquery
var parseHTML = function(str) {
var tmp = document.implementation.createHTMLDocument();
tmp.body.innerHTML = str;
return tmp.body.children;
};
@cladley
cladley / jeststuff.js
Last active August 19, 2020 14:17
Jest Mocking examples
// To mock a function
// utils has a function called getWinner that takes two strings
// as arguments and return one of them as the winner. It
// is used internally by thumbWar. Problem here is that the original
// function gets clobbered by our mock, so we have to manually
// reassign the original back after the test has run.
// This is called monkey patching and only works with commonjs modules
const utils = require('./utils');
const thumbWar = require('./thumb-war');
@cladley
cladley / esLint
Last active November 11, 2018 18:10
eslint example
to install eslint run
npm install eslint
create eslint.rc file with contents
{
"parserOptions": {
"ecmaVersion": "2018"
},
"extends": ["eslint:recommended"],