danedavid

usePrevValues(
  useMemo(() => ({
    count,
    upperCount
  }), [count, upperCount]),
  useCallback(prevValues => {
    console.log("callback invoked");
    if (prevValues.count + 1 === count) {
      console.log("inner done");
    }

danedavid

/* Usage */
const Counter = ({ upperCount }) => {
  const [count, setCount] = useState(1);

  usePrevValues(
    {
      count,
      upperCount
    },
    prevValues => {

danedavid

{
  "Punctuations": [
    "!", ".", ":", "'", ";", ",", "?",
    "@", "#", "$", "%", "^", "&", "*",
    "(", ")", "[", "]", "\"", "\\", "/",
    "-", "_", "+", "=", "<", ">", "|"
  ],
  "StopWords": [
    "a", "able", "about", "across", "after", "all", "almost", "also", "am", "among", "an",
    "and", "any", "are", "as", "at", "be", "because", "been", "but", "by", "can", "cannot",

danedavid

import React, { useRef } from 'react';
import { useActiveOnIntersect } from './hooks/useActiveOnIntersect';
import { useFocusOnActive } from './hooks/useFocusOnActive';

export const TextInputFormElement = ({ char, active, setActiveElement }) => {
  const containerEl = useRef();
  const inputRef = useRef();

  useActiveOnIntersect(() => setActiveElement(char), containerEl);
  useFocusOnActive(active, inputRef);

danedavid

import { useEffect } from 'react';

export const useFocusOnActive = (active, inputRef) => {
  useEffect(() => {
    if ( active && inputRef.current ) {
      inputRef.current.focus();
      return () => inputRef.current.blur();
    }
  }, [active]);
};

danedavid

import { useEffect } from 'react';

export const useActiveOnIntersect = (setActiveElement, elementRef) => {
  const options = {
    root: document.querySelector('#intersector'),
    rootMargin: '0px',
    threshold: 1.0,
  };

  const callback = (entries) => {

danedavid

import React, { useState } from 'react';
import { TextInputFormElement } from './TextInputFormElement';
import { NumberInputFormElement } from './NumberInputFormElement';

const data = ['a', 1, 'b', 2, 'c', 3, 'd', 4, 'e', 5];
const App = () => {
  const [activeElement, setActiveElement] = useState('a');

  return (
    <div id='intersector' className='intersection-line'>

danedavid

import { GraphQLClient } from 'graphql-request';

const client = new GraphQLClient('http://localhost:4000/api');

const handleSearch = (value) => {
  client.request(/* GraphQL */`
    query getBookList($search: String!) {
      search(searchString: $search) {
        count
        books {

danedavid

const { RESTDataSource } = require('apollo-datasource-rest');

class GoogleBooksAPI extends RESTDataSource {
  constructor() {
    super();
    this.baseURL = 'https://www.googleapis.com/books/v1/';
  }

  async getBooks() {
    const res = await this.get(`volumes?q=harry+potter`);

danedavid

const fs = require('fs');

fs.readdir('.', 'utf8', (err, files) => {
  if ( err ) {
    console.log('Error: ', err);
    return;
  }

  let largestLength = files.slice().sort((a,b) => b.length - a.length)[0].length;
  let columns = Math.floor( process.stdout.columns / largestLength );