react-icons/fa#FaAngleLeft JavaScript Examples

ReviewsPhotoCarousel = (props) => {
  const {
    reviewsForItem, handleModalClick, handleClickIdItem, x, goLeft, goRight,
  } = props;

  return (
    <ReviewsPhotoCarouselContainer x={x} reviewsForItem={reviewsForItem} className="ReviewsPhotoCarouselContainer">
      <div className="reviews-carousel-title">Photos from reviews</div>
      <div className="reviews-carousel">
        {reviewsForItem.map((review) => (
          <div className="reviews-carousel-item" key={review.id} style={{ transform: `translateX(${x}%)` }}>
            <a className="reviews-carousel-pic"  onClick={() => {handleModalClick(); handleClickIdItem(review.id);}} >
              <img className="reviews-carousel-pic" src={review.reviewPic} alt="" />
              <ReviewsModal />
            </a>
          </div>
        ))}
        <button type="button" id="reviews-carousel-btn-left" onClick={goLeft}>
          <FaAngleLeft className="reviews-carousel-btn-arrow-left" />
        </button>
        <button type="button" id="reviews-carousel-btn-right" onClick={() => { goRight(); }}><FaAngleRight className="reviews-carousel-btn-arrow-right" /></button>
      </div>

    </ReviewsPhotoCarouselContainer>
  );
}

Stories = (props) => {
  const [stories, setStories] = useState([]);
  const storyRef = useRef();
  const [scrollLeft, setScrollLeft] = useState(0);

  useEffect(() => {
    /**
     * Here i am using dummy stories but we need to fetch stories here from Database and add to redux store
     */
    const dummyData = dummyStories;
    setStories(dummyData);
  }, []);

  const onScrollRight = () => {
    storyRef.current.scrollLeft += storyRef.current.offsetWidth;
    setScrollLeft((prev) => prev + storyRef.current.offsetWidth);
  };
  const onScrollLeft = () => {
    storyRef.current.scrollLeft -= storyRef.current.offsetWidth;
    setScrollLeft((prev) => prev - storyRef.current.offsetWidth);
  };
  const checkScroll = () => {
    return (
      scrollLeft.toFixed(0) ===
      (+storyRef.current?.scrollWidth - +storyRef.current?.offsetWidth).toFixed(
        0
      )
    );
  };

  return (
    <div style={{ position: "relative" }}>
      <div ref={storyRef} className={classes.Stories}>
        {stories.map((user) => (
          <Story key={user.userId} story={user.stories} user={user} />
        ))}
      </div>
      <div
        style={{
          display: scrollLeft === 0 ? "none" : "block",
        }}
        className={[classes["Scroll-arrow"], classes["Left-arrow"]].join(" ")}
        onClick={onScrollLeft}
      >
        <FaAngleLeft />
      </div>
      <div
        style={{
          display: checkScroll() ? "none" : "block",
        }}
        className={[classes["Scroll-arrow"], classes["Right-arrow"]].join(" ")}
        onClick={onScrollRight}
      >
        <FaAngleRight />
      </div>
    </div>
  );
}

LayoutModal = ({ children, closeTo, navigation = {} }) => {
  const { current = -1, items = [] } = navigation
  const previous = items[current - 1] ? items[current - 1] : null
  const next = items[current + 1] ? items[current + 1] : null

  const closeModal = () => {
    navigate(closeTo, { state: { noScroll: true } })
  }

  const goPrevious = () => {
    if (!previous) {
      return
    }
    navigate(previous, {
      state: { navigation: { current: current - 1, items }, modal: true },
    })
  }

  const goNext = () => {
    if (!next) {
      return
    }
    navigate(next, {
      state: { navigation: { current: current + 1, items }, modal: true },
    })
  }

  const keyboardNavigation = (event) => {
    switch (event.keyCode) {
      case 37:
        goPrevious()
        break
      case 39:
        goNext()
        break
      case 27:
        closeModal()
        break
      default:
    }
  }

  useEffect(() => {
    window.addEventListener("keydown", keyboardNavigation)
    return () => {
      window.removeEventListener("keydown", keyboardNavigation)
    }
  })

  return (
    <div className="flex relative h-screen">
      <div className="flex flex-wrap items-end md:items-center justify-center mx-auto w-full max-w-screen-xl">
        <div className="order-3 md:order-first pb-2 w-8 mx-2 md:mx-4">
          {previous && (
            <Link
              asModal
              className="inline-block w-10 h-10 px-2 text-white dark:text-blue-300 hover:text-blue-400 dark:hover:text-blue-200"
              state={{ navigation: { current: current - 1, items } }}
              to={previous}
            >
              <FaAngleLeft className="w-full h-full fill-current transition-colors duration-200" />
            </Link>
          )}
        </div>
        <div className="w-full mt-12 md:mt-0 mx-3 md:mx-0 md:flex-1 bg-white dark:bg-gray-900 shadow-lg rounded-md overflow-hidden">
          {children}
        </div>
        <div className="order-last pb-2 w-8 mx-2 md:mx-4">
          {next && (
            <Link
              asModal
              className="inline-block w-10 h-10 px-2 text-white dark:text-blue-300 hover:text-blue-400 dark:hover:text-blue-200"
              state={{ navigation: { current: current + 1, items } }}
              to={next}
            >
              <FaAngleRight className="w-full h-full fill-current transition-colors duration-200" />
            </Link>
          )}
        </div>
      </div>
      <button
        className="absolute top-0 right-0 m-3 lg:m-6 focus:outline-none"
        onClick={closeModal}
      >
        <FaTimes className="w-8 h-8 fill-current text-white dark:text-blue-300 hover:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" />
      </button>
    </div>
  )
}