sapphic.moe
🏷️ Search for custom tailnet name offers with keywords.
1import { useEffect, useRef, useState } from 'react';
2
3export const useSettings = (defaultInterval: number) => {
4 const [show, setShow] = useState(false);
5 const [visible, setVisible] = useState(false);
6 const [shouldRender, setShouldRender] = useState(false);
7 const [interval, setInterval] = useState(defaultInterval);
8 const timeoutRef = useRef<NodeJS.Timeout | null>(null);
9
10 useEffect(() => {
11 browser.storage.local.get(['checkInterval'], (result) => {
12 if (result.checkInterval) setInterval(result.checkInterval);
13 });
14 }, []);
15
16 useEffect(() => {
17 if (timeoutRef.current) {
18 clearTimeout(timeoutRef.current);
19 timeoutRef.current = null;
20 }
21 if (show) {
22 setShouldRender(true);
23 timeoutRef.current = setTimeout(() => setVisible(true), 10);
24 } else if (visible) {
25 setVisible(false);
26 timeoutRef.current = setTimeout(() => setShouldRender(false), 300);
27 } else {
28 setShouldRender(false);
29 }
30 return () => {
31 if (timeoutRef.current) {
32 clearTimeout(timeoutRef.current);
33 timeoutRef.current = null;
34 }
35 };
36 }, [show, visible]);
37
38 const open = () => {
39 if (timeoutRef.current) {
40 clearTimeout(timeoutRef.current);
41 timeoutRef.current = null;
42 }
43 setShow(true);
44 };
45 const close = () => {
46 if (timeoutRef.current) {
47 clearTimeout(timeoutRef.current);
48 timeoutRef.current = null;
49 }
50 setShow(false);
51 };
52 const handleIntervalChange = (val: number) => {
53 const safeVal = Math.max(5, val);
54 setInterval(safeVal);
55 browser.storage.local.set({ checkInterval: safeVal });
56 browser.runtime.sendMessage({
57 action: 'setAlarmInterval',
58 interval: safeVal,
59 });
60 };
61
62 return {
63 show,
64 visible,
65 shouldRender,
66 interval,
67 setInterval: handleIntervalChange,
68 open,
69 close,
70 };
71};