How to use framework - 10 common examples

// D.withLog({key}),
  )(
    // Init
    D.init(seed),
    D.initAsync(sources.state$),

    // Navigation
    intents.navigateTo$.map(url => R.fn("navigateTo", R.set("url", url))),
    intents.navigateHistory$.map(url => R.fn("navigateHistory", R.set("url", url))),

    // Content
    contentSinks$.flatMapLatest(x => x.action$),
  ).$

  // COMPONENT
  let Component = F.connect(
    {
      url: D.deriveOne(state$, ["url"]),
      Content: contentSinks$.map(x => x.Component),
    },
    ({url, Content}) => {
      return <div>
        <div>
          <p>
            Current URL: {url}
          </p>
          
        </div>
        <div>
          <content>
        </content></div>
      </div>

)

  // STATE
  let detail$ = D.run(
    () => D.makeStore({}),
    // D.withLog({key}),
  )(
    D.init(seed),

    D.ifBrowser(
      fetchStart$.merge(fetchEnd$.delay(1)).map(_ => R.over(["loading"], R.not))
    ),
  ).$

  // COMPONENT
  let Component = F.connect(
    {
      loading: D.deriveOne(detail$, ["loading"]),
      user: D.deriveOne(sources.state$, baseLens),
    },
    ({loading, user}) => loading
      ? 
      : 
  )

  // ACTION (external)
  let action$ = K.merge([
    fetchEnd$.map(user => {
      if (user) {
        return function afterGET(state) {
          return R.set(baseLens, user, state)
        }

)

  // STATE
  let detail$ = D.run(
    () => D.makeStore({}),
    // D.withLog({key}),
  )(
    D.init(seed),

    D.ifBrowser(
      fetchStart$.merge(fetchEnd$.delay(1)).map(_ => R.over(["loading"], R.not))
    ),
  ).$

  // COMPONENT
  let Component = F.connect(
    {
      loading: D.deriveOne(detail$, ["loading"]),
      post: D.deriveOne(sources.state$, baseLens),
    },
    ({loading, post}) => loading
      ? 
      : 
  )

  // ACTION (external)
  let action$ = K.merge([
    fetchEnd$.map(post => {
      if (post) {
        return function afterGET(state) {
          return R.set(baseLens, post, state)
        }

});
    }

    static willFilterZeroProducts ($countElement) {
        return $countElement.html().indexOf('(0)') !== -1;
    }

    static init ($container) {
        if ($container.filterAllNodes('.js-product-list-with-paginator').length > 0) {
            // eslint-disable-next-line no-new
            new ProductListAjaxFilter($container);
        }
    }
}

(new Register()).registerCallback(ProductListAjaxFilter.init);

const hideAllOpenedIntentsEvent = (event) => {
            if ($(event.target).closest('.js-hover-intent').length === 0) {
                HoverIntent.hideAllOpenedIntent(hoverIntentSettings);
            }
        };

        $('body').off('click', hideAllOpenedIntentsEvent);
        $('body').on('click', hideAllOpenedIntentsEvent);

        // eslint-disable-next-line no-new
        new HoverIntent(hoverIntentSettings);
    }
}

if (Responsive.isDesktopVersion()) {
    (new Register()).registerCallback(HoverIntent.init, 'HoverIntent.init');
}

if (data.success === true) {
                            $('#js-cart-box').trigger('reload');
                        } else {
                            // eslint-disable-next-line no-new
                            new Window({
                                content: data.errorMessage
                            });
                        }
                    }
                });
            });
        });
    }
}

(new Register()).registerCallback(CartBoxItemRemover.init, 'CartBoxItemRemover.init');

collectionStats.totalDuration += currentVideo.duration;

                        carouselSlide.push(currentVideo);

                        if ((j > 0 && (j + 1) % 3 == 0) || j == videosLen - 1) {
                            carouselSlides.push({
                                videos: carouselSlide
                            });
                            carouselSlide = [];
                        }
                    }

                    currentActivity.collection._carouselSlides = carouselSlides;

                    // format
                    collectionStats.likes = Util.integerCommaFormat(collectionStats.likes);
                    collectionStats.views = Util.integerCommaFormat(collectionStats.views);
                    collectionStats.adoptions = Util.integerCommaFormat(collectionStats.adoptions);
                    collectionStats.totalDuration = Util.secondsToHMSFormat(collectionStats.totalDuration);

                    currentActivity.collection._collectionStats = collectionStats;
                }
            }
        },

collectionStats.totalDuration += currentVideo.duration;

                        carouselSlide.push(currentVideo);

                        if ((j > 0 && (j + 1) % 4 == 0) || j == videosLen - 1) {
                            carouselSlides.push({
                                videos: carouselSlide
                            });
                            carouselSlide = [];
                        }
                    }

                    currentActivity.collection._carouselSlides = carouselSlides;

                    // format
                    collectionStats.likes = Util.integerCommaFormat(collectionStats.likes);
                    collectionStats.views = Util.integerCommaFormat(collectionStats.views);
                    collectionStats.adoptions = Util.integerCommaFormat(collectionStats.adoptions);
                    collectionStats.totalDuration = Util.secondsToHMSFormat(collectionStats.totalDuration);

                    currentActivity.collection._collectionStats = collectionStats;
                }
            }
        },

carouselSlide.push(currentVideo);

                        if ((j > 0 && (j + 1) % 4 == 0) || j == videosLen - 1) {
                            carouselSlides.push({
                                videos: carouselSlide
                            });
                            carouselSlide = [];
                        }
                    }

                    currentActivity.collection._carouselSlides = carouselSlides;

                    // format
                    collectionStats.likes = Util.integerCommaFormat(collectionStats.likes);
                    collectionStats.views = Util.integerCommaFormat(collectionStats.views);
                    collectionStats.adoptions = Util.integerCommaFormat(collectionStats.adoptions);
                    collectionStats.totalDuration = Util.secondsToHMSFormat(collectionStats.totalDuration);

                    currentActivity.collection._collectionStats = collectionStats;
                }
            }
        },

var $rightValue;
            var $statIndicator;

            var i = 0;
            var len = $statBarWrappers.length;
            for (; i < len; i++) {
                var $currentStatBarWrapper = $statBarWrappers.eq(i);

                $statBar = $currentStatBarWrapper.find('.js-stat-bar');
                var leftValue = $statBar.data('leftValue');
                var rightValue = $statBar.data('rightValue');

                $leftValue = $currentStatBarWrapper.find('.js-left-value');
                $rightValue = $currentStatBarWrapper.find('.js-right-value');
                $leftValue.html(Util.integerCommaFormat(leftValue));
                $rightValue.html(Util.integerCommaFormat(rightValue));

                $statIndicator = $currentStatBarWrapper.find('.js-stat-indicator');

                // for basic width setting, use this line instead
                // $statIndicator.css('width', ((leftValue * 100) / (leftValue + rightValue)) + '%');

                // otherwise, this can be used to animate the effect
                $statIndicator.animate({
                    width: ((leftValue * 100) / (leftValue + rightValue)) + '%'
                }, 2000);

            }
        },