React snippets

cdup.jsx

componentDidUpdate = ( prevProps, prevState ) => {
  console.log( '=== updated' );
  this.props && Object.entries( this.props ).forEach(( [key, val] ) =>
    prevProps[key] !== val &&
    console.log( `Prop '${key}' changed: ${JSON.stringify( prevProps[key] )} -> ${JSON.stringify( val )}` ));

  this.state && Object.entries( this.state ).forEach(( [key, val] ) =>
    prevState[key] !== val &&
    console.log( `State '${key}' changed: ${JSON.stringify( prevState[key] )} -> ${JSON.stringify( val )}` ));
}

debounce.jsx

class MyComponent extends React.Component {  
  constructor(props) {
    super(props);
    this.state = {
      filter: {
        field: '',
      },
      render: {
        stuffs: initStuffsToRender();
      }
    }
    this._timeout = null;
  }

  handleEdit = field => e => {
    const newValue = e.target.value;

    if ( this._timeout ) { // if there is already a timeout in process cancel it
      clearTimeout( this._timeout );
    }

    this._timeout = setTimeout(() => {
      this._timeout = null;
      this.setState( prevState => {
        prevState.filter[field] = newValue;
        prevState.render.stuffs = heavyFilter();

        return prevState;
      });
    }, 1000 );
  }
  
  render() {
    const stuffs = this.render.stuffs;
    
    return (
      // ... some logic to render stuffs
      <Input onChange={this.handleEdit('field')} />
    );
  }
}

GrommetTable.tsx

import React, { useState, useEffect } from 'react';
import { DataTable, Box, Text, Button, TextInput, Select } from 'grommet';
import { ChevronLeft, ChevronRight } from './Icons';
import { intArr } from '../utils/functions';

const PaginatedTable: React.FC<{ [key: string]: any }> = props => {
  const { pageSize, data } = props;

  const [currentPage, changeCurrentPage] = useState(0);
  const [currentPageSize, changeCurrentPageSize] = useState(pageSize);
  const [renderedData, updateRenderedData] = useState(data.slice(0, pageSize));

  const totalPage = Math.floor(data.length / currentPageSize) + 1;
  useEffect(() => {
    updateRenderedData(
      data.slice(currentPage * currentPageSize, currentPage * currentPageSize + currentPageSize),
    );
  }, [currentPage, currentPageSize, data]);

  return (
    <Box gap="small" pad={{ horizontal: 'medium' }}>
      <DataTable {...props} data={[...renderedData]} />

      {/* controls */}
      <Box direction="row" justify="between" border="top" pad="small">
        <Button
          plain
          icon={<ChevronLeft />}
          label="Prev"
          onClick={() => {
            changeCurrentPage(currentPage - 1 >= 0 ? currentPage - 1 : 0);
          }}
        >
          Prev
        </Button>
        <Box gap="small">
          <Box direction="row" justify="start" gap="small">
            <Box alignContent="center" alignSelf="center" width="20%">
              <Text>page:</Text>
            </Box>
            <Box width="20%">
              <TextInput
                value={currentPageSize}
                onChange={e => changeCurrentPageSize(e.target.value)}
              />
            </Box>
            <Box alignContent="center" alignSelf="center">
              <Text>
                {Math.min(currentPage * currentPageSize + 1, data.length)} -{' '}
                {Math.min(currentPage * currentPageSize + currentPageSize, data.length)} of{' '}
                {data.length} records
              </Text>
            </Box>
          </Box>
          <Box direction="row" justify="start" gap="small">
            <Box alignContent="center" alignSelf="center" width="20%">
              <Text>Page:</Text>
            </Box>
            <Box width="20%">
              <Select
                valueLabel={<Box pad="small">{currentPage + 1}</Box>}
                options={intArr(totalPage).map(i => (i + 1).toString())}
                onChange={e => changeCurrentPage(e.value - 1)}
              />
            </Box>
            <Box alignContent="center" alignSelf="center" width="10%">
              <Text>/ {totalPage}</Text>
            </Box>
          </Box>
        </Box>
        <Button
          plain
          reverse
          icon={<ChevronRight />}
          label="Next"
          onClick={() => {
            changeCurrentPage(currentPage + 1 >= totalPage - 1 ? totalPage - 1 : currentPage + 1);
          }}
        >
          Next
        </Button>
      </Box>
    </Box>
  );
};

export default PaginatedTable;

HoC.jsx

// Enhancer.js
import { transform } from 'magic';

export const Enhancer = WrappedComponent =>
  class EnhancedComponent {
    // ...
    const transformedProps = transform(this.props);
    
    render() {
      return <WrappedComponent ...transformedProps />;
    }
  };

// ============== //

// HigherOrderComponent.js
import { Enhancer } from 'Enhancer.js';

class SomeComponent {
  render() {
    return <div />
  }
}
  
export default Enhancer(SomeComponent);

// ============== //

// decorator python equivalent
function decoratorFunc(wrappedFunc) {
  function wrapper(...args) {
    // stuff
    return wrappedFunc(...args);
  }
  return wrapper;
}

@decoratorFunc
function myFunc(a, b) {
  // stuff
}
// equivalent to
myfunc = decoratorFunc(myFunc);