alexandrzavalii

class AlphaNumericIdGenerator {
    constructor() {
        const alpha = Array.from({ length: 26 }, (_, i) => String.fromCharCode(i + 97))
        const numo = Array.from({ length: 10 }, (_, i) => i.toString())
        this.alphanumeric = numo.concat(alpha)
        this.alphaIndx = this.alphanumeric.reduce((obj, cur, i) => ({ ...obj, [cur]: i }), {});
    }

    between(after, before) {
        this._validate(after);

alexandrzavalii

Group Array of JavaScript Objects by Key or Property Value

Implementation

const groupBy = key => array =>
  array.reduce((objectsByKeyValue, obj) => {
    const value = obj[key];
    objectsByKeyValue[value] = (objectsByKeyValue[value] || []).concat(obj);
    return objectsByKeyValue;

alexandrzavalii

// DumboParent.js
return (
      <Dumbo
        availableShoes={availableShoes}
        firstChild={clothing => <FirstChild clothing={clothing} lollipops={this.state.lollipops} />}
        secondChild={clothing => <SecondChild clothing={clothing} />}
      />
  )

// Dumbo.js

alexandrzavalii

import React from "react";
import FirstChild from "./FirstChild";
import SecondChild from "./SecondChild";

class DumbosParent extends React.Component {
  state = { availableShoes: 6, lollipops: 9 };

  render() {
    const { availableShoes, lollipops } = this.state;
    return (

alexandrzavalii

/* DumboParent.js */
class DumbosParent extends React.Component {
  state = { availableShoes: 6, lollipops: 9 };

  eatCandy = (quantity = 0) => {
    this.setState(({ lollipops }) => ({
      lollipops: lollipops - quantity
    }));
  };

alexandrzavalii

/* HOC for wrapping the component with Context Provider */
const connect = Component => {
  return function WrappedComponent(props) {
    return (
      <CandyContext.Consumer> /* pass lollipops as a prop */
        {value => <Component {...props} lollipops={value} />}
      </CandyContext.Consumer>
    );
  };
};

alexandrzavalii

// create Context
const initialAmountOfLollipops = 0;
const LollipopContext = React.createContext(initialAmountOfLollipops);

/* ... Dumbo's parent Component */
const { lollipops } = this.state;
return (
  // instead of passing lollipops to Dumbo, we pass it to the Context.Provider
  <CandyContext.Provider value={lollipops}>
    <Dumbo availableShoes={availableShoes} /* lollipops={lollipops} */ />

alexandrzavalii

/* Dumbo's parent component */
const { lollipops } = this.state;
return (
  <div>
    <Dumbo availableShoes={availableShoes} lollipops={lollipops} />
  </div>
);

/* Dumbo component */
render () {

alexandrzavalii

/* parent component */
const { lollipops } = this.state;
return (
  <div>
    <Dumbo availableShoes={availableShoes} candys={lollipops} />
  </div>
);

/* Dumbo component */
const { candys } = this.props;

alexandrzavalii

class DumbosParent extends React.Component {
  state = { availableShoes: 6, lollipops: 2 };
  /* sellShoes */
  render() {
    const { availableShoes, lollipops } = this.state;
    return (
      <>
        /* rest of code */
        <Dumbo availableShoes={availableShoes} lollipops={lollipops} />
      </>