Udemy course

hook.js

import React, { useState, useEffect, useCallback } from "react";
import styles from "./index.css";
import mojs from "mo-js";

const initialState = {
  isClicked: false,
  count: 0,
  countTotal: 3400,
};

/**
 *  Custom Hook for animation
 */

const useClapAnimation = ({ clapCountEl, clapTotalEl, clapEl }) => {
  const [timeline, setTimeline] = useState(() => new mojs.Timeline());
  const tlDuration = 300;

  useEffect(() => {
    const scaleButton = new mojs.Html({
      el: clapEl,
      duration: tlDuration,
      scale: { 1.3: 1 },
      easing: mojs.easing.ease.out,
    });

    const triangleBurst = new mojs.Burst({
      parent: clapEl,
      radius: { 50: 95 },
      count: 5,
      angle: 30,
      children: {
        shape: "polygon",
        radius: { 6: 0 },
        stroke: `rgba(211,54,0,0.5)`,
        strokeWidth: 2,
        angle: 210,
        speed: 0.2,
        delay: 30,
        duration: tlDuration,
        easing: mojs.easing.bezier(0.1, 1, 0.3, 1),
      },
    });

    const circleBurst = new mojs.Burst({
      parent: clapEl,
      radius: { 50: 75 },
      angle: 25,
      duration: tlDuration,
      children: {
        shape: "circle",
        fill: "rgba(149,165,166,0.5)",
        delay: 30,
        speed: 0.2,
        radius: { 3: 0 },
      },
    });

    const fadeCount = new mojs.Html({
      el: clapCountEl,
      duration: tlDuration,
      opacity: { 0: 1 },
      easing: mojs.easing.ease.out,
      y: { 0: -30 },
    }).then({
      opacity: { 1: 0 },
      delay: tlDuration / 2,
      y: -80,
    });

    const fadeCountTotal = new mojs.Html({
      el: clapTotalEl,
      duration: tlDuration,
      opacity: { 0: 1 },
      delay: (3 * tlDuration) / 2,
      easing: mojs.easing.ease.out,
      y: { 0: -3 },
    });

    if (typeof clapEl === "string") {
      clapEl.style.transform = `scale(1,1)`;
    } else {
      const clap = document.querySelector("#clap");
      clap.style.transform = `scale(1,1)`;
    }

    const newAnimTimeline = timeline.add([
      scaleButton,
      fadeCountTotal,
      fadeCount,
      triangleBurst,
      circleBurst,
    ]);

    setTimeline(newAnimTimeline);
  }, []);

  return timeline;
};

const MediumClap = () => {
  const MAX_CLAP_LIMIT = 12;
  const [clapState, setClapState] = useState(initialState);
  const { count, countTotal, isClicked } = clapState;
  const [{ clapCountRef, clapTotalRef, clapRef }, setElements] = useState({});

  const setRef = useCallback((node) => {
    setElements((prev) => ({ ...prev, [node.dataset.refkey]: node }));
  }, []);

  const animTimeline = useClapAnimation({
    clapCountEl: clapCountRef,
    clapTotalEl: clapTotalRef,
    clapEl: clapRef,
  });

  const handleClick = () => {
    animTimeline.replay();
    setClapState((prev) => ({
      isClicked: true,
      count: Math.min(prev.count + 1, MAX_CLAP_LIMIT),
      countTotal:
        count < MAX_CLAP_LIMIT ? prev.countTotal + 1 : prev.countTotal,
    }));
  };

  return (
    <button
      ref={setRef}
      data-refkey="clapRef"
      onClick={handleClick}
      className={styles.clap}
    >
      <ClapIcon isClicked={isClicked} />
      <ClapCount count={count} setRef={setRef} />
      <ClapTotal total={countTotal} setRef={setRef} />
    </button>
  );
};

const ClapIcon = ({ isClicked }) => {
  return (
    <svg
      className={`${styles.icon} ${isClicked && styles.checked}`}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="-549 338 100.1 125"
    >
      <path d="M-471.2 366.8c1.2 1.1 1.9 2.6 2.3 4.1.4-.3.8-.5 1.2-.7 1-1.9.7-4.3-1-5.9-2-1.9-5.2-1.9-7.2.1l-.2.2c1.8.1 3.6.9 4.9 2.2zm-28.8 14c.4.9.7 1.9.8 3.1l16.5-16.9c.6-.6 1.4-1.1 2.1-1.5 1-1.9.7-4.4-.9-6-2-1.9-5.2-1.9-7.2.1l-15.5 15.9c2.3 2.2 3.1 3 4.2 5.3zm-38.9 39.7c-.1-8.9 3.2-17.2 9.4-23.6l18.6-19c.7-2 .5-4.1-.1-5.3-.8-1.8-1.3-2.3-3.6-4.5l-20.9 21.4c-10.6 10.8-11.2 27.6-2.3 39.3-.6-2.6-1-5.4-1.1-8.3z" />
      <path d="M-527.2 399.1l20.9-21.4c2.2 2.2 2.7 2.6 3.5 4.5.8 1.8 1 5.4-1.6 8l-11.8 12.2c-.5.5-.4 1.2 0 1.7.5.5 1.2.5 1.7 0l34-35c1.9-2 5.2-2.1 7.2-.1 2 1.9 2 5.2.1 7.2l-24.7 25.3c-.5.5-.4 1.2 0 1.7.5.5 1.2.5 1.7 0l28.5-29.3c2-2 5.2-2 7.1-.1 2 1.9 2 5.1.1 7.1l-28.5 29.3c-.5.5-.4 1.2 0 1.7.5.5 1.2.4 1.7 0l24.7-25.3c1.9-2 5.1-2.1 7.1-.1 2 1.9 2 5.2.1 7.2l-24.7 25.3c-.5.5-.4 1.2 0 1.7.5.5 1.2.5 1.7 0l14.6-15c2-2 5.2-2 7.2-.1 2 2 2.1 5.2.1 7.2l-27.6 28.4c-11.6 11.9-30.6 12.2-42.5.6-12-11.7-12.2-30.8-.6-42.7m18.1-48.4l-.7 4.9-2.2-4.4m7.6.9l-3.7 3.4 1.2-4.8m5.5 4.7l-4.8 1.6 3.1-3.9" />
    </svg>
  );
};

const ClapCount = ({ count, setRef }) => {
  return (
    <span ref={setRef} data-refkey="clapCountRef" className={styles.count}>
      + {count}
    </span>
  );
};

const ClapTotal = ({ total, setRef }) => {
  return (
    <span ref={setRef} data-refkey="clapTotalRef" className={styles.total}>
      {total}
    </span>
  );
};

const MediumAnimatedClap = () => {
  return <MediumClap />;
};

export default MediumAnimatedClap;