| 1 | import { useEffect, useState } from "react"; |
| 2 | |
| 3 | import { type EmojiData, MAX_RECENT, pushRecent } from "../../lib/emoji"; |
| 4 | |
| 5 | /** |
| 6 | * The standard emoji (data.json, about 54 KB gzipped), fetched the first |
| 7 | * time anything needs them: the picker opening, a `:` typed in the |
| 8 | * composer. A chunk of its own, so the site's main bundle never carries it. |
| 9 | */ |
| 10 | let loading: Promise<EmojiData> | null = null; |
| 11 | |
| 12 | export function loadEmojiData(): Promise<EmojiData> { |
| 13 | loading ??= import("./data.json").then((module) => ((module as { default?: unknown }).default ?? module) as EmojiData); |
| 14 | loading.catch(() => { |
| 15 | loading = null; |
| 16 | }); |
| 17 | return loading; |
| 18 | } |
| 19 | |
| 20 | /** The standard emoji once loaded; null until then, or while `enabled` is false. */ |
| 21 | export function useEmojiData(enabled = true): EmojiData | null { |
| 22 | const [data, setData] = useState<EmojiData | null>(null); |
| 23 | useEffect(() => { |
| 24 | if (!enabled || data) return; |
| 25 | let live = true; |
| 26 | loadEmojiData() |
| 27 | .then((loaded) => live && setData(loaded)) |
| 28 | .catch(() => {}); |
| 29 | return () => { |
| 30 | live = false; |
| 31 | }; |
| 32 | }, [enabled, data]); |
| 33 | return data; |
| 34 | } |
| 35 | |
| 36 | const RECENT_KEY = "g1t:emoji-recent"; |
| 37 | const TONE_KEY = "g1t:emoji-tone"; |
| 38 | |
| 39 | /** Emoji this browser used lately, newest first. Nothing when storage is off. */ |
| 40 | export function readRecent(): string[] { |
| 41 | try { |
| 42 | const list = JSON.parse(localStorage.getItem(RECENT_KEY) ?? "[]"); |
| 43 | return Array.isArray(list) ? list.filter((e): e is string => typeof e === "string").slice(0, MAX_RECENT) : []; |
| 44 | } catch { |
| 45 | return []; |
| 46 | } |
| 47 | } |
| 48 | |
| 49 | export function rememberRecent(emoji: string): string[] { |
| 50 | const next = pushRecent(readRecent(), emoji); |
| 51 | try { |
| 52 | localStorage.setItem(RECENT_KEY, JSON.stringify(next)); |
| 53 | } catch { |
| 54 | // No storage: recent lasts as long as the page. |
| 55 | } |
| 56 | return next; |
| 57 | } |
| 58 | |
| 59 | /** The skin tone last picked: 0 for none, 1 to 5 light to dark. */ |
| 60 | export function readTone(): number { |
| 61 | try { |
| 62 | const tone = Number(localStorage.getItem(TONE_KEY)); |
| 63 | return Number.isInteger(tone) && tone >= 0 && tone <= 5 ? tone : 0; |
| 64 | } catch { |
| 65 | return 0; |
| 66 | } |
| 67 | } |
| 68 | |
| 69 | export function rememberTone(tone: number): void { |
| 70 | try { |
| 71 | localStorage.setItem(TONE_KEY, String(tone)); |
| 72 | } catch { |
| 73 | // No storage: the tone lasts as long as the page. |
| 74 | } |
| 75 | } |