Bitaru

import React from 'react';
import useFindify from '@findify/react-bundle';
import { useHistory } from 'react-router';

export default ({ type, config, children }) => {
  const history = useHistory();
  const [container, isReady, hasError] = useFindify({ type, config, history });
  return children({ container, isReady, hasError });
}

Bitaru

/**
 * @module components/ItemsList
 */

import React,  { useState, useEffect } from 'react'

import ProductCard from 'components/Cards/Product'
import mapArray, { ArrayLike, MapArrayProps } from 'components/common/MapArray';

// Default item factory is using ProductCard

Bitaru

/** [1]: Import React hooks */
import React, { useState, useEffect } from 'react'
import classNames from 'classnames'
import Image from 'components/common/Image'
import Truncate from 'components/common/Truncate'
import Text from 'components/Text'
import Rating from 'components/Cards/Product/Rating';
import Price from 'components/Cards/Product/Price';
import template from 'helpers/template';
import { DiscountSticker, OutOfStockSticker  } from 'components/Cards/Product/Stickers';

Bitaru

import { useState, useEffect } from 'react';

const fetchVariantMetaData: any = async (item: any) => {
  return fetch(`${origin}${item.get('product_url')}`)
    .then(function(response) {
      return response.text()
    })
    .then(function(html) {
      let parser = new DOMParser()
      let doc = parser.parseFromString(html, "text/html")

Bitaru

import React, { Component } from 'react';
import { PropTypes } from 'prop-types';

const randomKey = () => Math.random().toString(36).substring(7);

const waitForFindify = () => new Promise(resolve => {
  if (window.findify) return resolve(window.findify);
  (window.findifyCallbacks = window.findifyCallbacks || []).push((findify) => resolve(findify));
})

Bitaru

import React from 'react';

let _key = 1;

class FindifyComponent extends React.Component{
  widgetKey = void 0;

  createFindifyComponent = (ref) => {
    if (!ref || !!this.widgetKey) return;
    const { type, config = {} } = this.props;

Bitaru

import React from 'react'
import { Transition, animated } from 'react-spring';

class ProductImagesSlider extends React.PureComponent {
  state = { index: 0 };
  interval = void 0;

  componentDidMount() {
    const interval = this.props.interval || 5000;
    this.interval = setInterval(() => this.gotToNextImg(), interval);

Bitaru

import React from 'react';
import { omit, pickBy } from 'ramda';
import {
  compose, withHandlers,
  withPropsOnChange, branch, defaultProps,
  renderNothing, withStateHandlers,
  withProps, mapProps, renameProp, shouldUpdate
} from 'recompose';
// import createLabel from '../createLabel';
import Downshift from 'downshift';

Bitaru

import * as React from 'react';
import { omit, pickBy } from 'ramda';
import {
  compose, withHandlers,
  withPropsOnChange, branch, defaultProps,
  renderNothing, withStateHandlers,
  withProps, mapProps, renameProp
} from 'recompose';
// import createLabel from '../createLabel';
import Downshift from 'downshift';

Bitaru

TASK:

Implement a "withModal" high order component (HOC) that will accept two arguments [modalName: String] and [modalComponent: React.Component]. It should render a "modalComponent" into the portal. In addition, this HOC should inject 'showModal' and 'hideModal' handlers into a new collection of props that are passed to the base component. For instance:

const PricingModal = ({ title, onHide }) => <button onClick={onHide}>Hide {title} modal</button>;

class PricingButton extends React.Component {
  showPricing: () => {
 const { openModal, hideModal } = this.props;