Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { STATIC_ASSETS_URL } from "@hey/data/constants";
2import type { Emoji } from "@hey/types/misc";
3import { useQuery } from "@tanstack/react-query";
4import { useMemo } from "react";
5
6const GET_EMOJIS_QUERY_KEY = "getEmojis";
7const DEFAULT_MAX_EMOJI_COUNT = 5;
8
9interface UseEmojisOptions {
10 limit?: number;
11 query?: string;
12 minQueryLength?: number;
13}
14
15interface UseEmojisResult {
16 emojis: Emoji[];
17 error: Error | null;
18 isLoading: boolean;
19 allEmojis: Emoji[] | undefined;
20}
21
22const useEmojis = ({
23 limit = DEFAULT_MAX_EMOJI_COUNT,
24 query = "",
25 minQueryLength = 0
26}: UseEmojisOptions = {}): UseEmojisResult => {
27 const {
28 data: allEmojis,
29 error,
30 isLoading
31 } = useQuery<Emoji[]>({
32 queryFn: async () => {
33 const response = await fetch(`${STATIC_ASSETS_URL}/emoji.json`);
34 if (!response.ok) {
35 throw new Error(`HTTP error! Status: ${response.status}`);
36 }
37 return response.json();
38 },
39 queryKey: [GET_EMOJIS_QUERY_KEY]
40 });
41
42 const emojis = useMemo(() => {
43 if (!allEmojis) {
44 return [];
45 }
46
47 if (!query || query.length < minQueryLength) {
48 return allEmojis.slice(0, limit);
49 }
50
51 return allEmojis
52 .filter((emoji) => {
53 const lowercaseQuery = query.toLowerCase();
54 return (
55 emoji.aliases.some((alias) =>
56 alias.toLowerCase().includes(lowercaseQuery)
57 ) ||
58 emoji.tags.some((tag) =>
59 tag.toLowerCase().includes(lowercaseQuery)
60 ) ||
61 emoji.description.toLowerCase().includes(lowercaseQuery)
62 );
63 })
64 .slice(0, limit);
65 }, [query, allEmojis, limit, minQueryLength]);
66
67 return {
68 allEmojis,
69 emojis,
70 error: error as Error | null,
71 isLoading
72 };
73};
74
75export default useEmojis;