Function StickerModal

src/shared/components/StickerModal.tsx:19–174

(props)

}

const StickerModal: React.FC<StickerModalProps> = (props) => {
  const [query, setQuery] = useState("");
  const [allStickers, setAllStickers] = useState<Sticker[]>([]);
  const [stickers, setStickers] = useState<Sticker[]>([]);
  const [selectedSticker, setSelectedSticker] = useState<number>(null);

  const htmlFromSticker = (sticker: Sticker) => {
    if (sticker.type == "emoji") {
      return emojiFromString(sticker.html);
    }
    return sticker.html;
  };

  useEffect(() => {
    const _allImages: Sticker[] = [];
    _allImages.push(...props.ui.allStickers());
    setAllStickers(_allImages);
  }, []);

  const categories = useMemo(
    () => new Set(allStickers.map((f) => f.type)),
    [allStickers]
  );

  const [page, setPage] = useState(1);

  const loadNextPage = useCallback(() => {
    setPage((p) => p + 1);
  }, [page]);
  const loaderRef = useRef(null);
  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      const target = entries[0];
      if (target.isIntersecting) {
        loadNextPage();
      }
    });

    if (loaderRef.current) {
      observer.observe(loaderRef.current);
    }

    return () => {
      if (loaderRef.current) {
        observer.unobserve(loaderRef.current);
      }
    };
  }, [loadNextPage]);
  const [selectedCategory, setSelectedCategory] = useState<string>(null);
  useEffect(() => {
    setStickers(
      allStickers
        .filter(
          (f) =>
            f.name.includes(query.toLowerCase()) &&
            (selectedCategory == null || f.type == selectedCategory)
        )
        .slice(0, page * 250)