users/ryan/modules/simple-bar/simple-bar-source/lib/hooks/use-server-socket.js

2070b29ae3b86654b7a8ad0a09a7ea4c63dfa73a · 6.4 KB · 221 lines raw

1 import * as Uebersicht from "uebersicht";
2 import * as Settings from "../settings";
3 import { useSimpleBarContext } from "../components/simple-bar-context.jsx";
4
5 const { React } = Uebersicht;
6
7 /**
8 * Custom hook to manage server socket connections and handle incoming messages.
9 *
10 * @param {string} target - The target widget to manage.
11 * @param {boolean} visible - Visibility state of the widget.
12 * @param {function} getter - Function to handle data retrieval.
13 * @param {function} resetWidget - Function to reset the widget state.
14 * @param {function} setLoading - Function to set the loading state.
15 * @param {number} [userWidgetIndex] - Index of the user widget (if applicable).
16 *
17 * @returns {void}
18 */
19 export default function useServerSocket(
20 target,
21 visible,
22 getter,
23 resetWidget,
24 setLoading,
25 userWidgetIndex,
26 ) {
27 const { settings, setSettings } = useSimpleBarContext();
28 const { enableServer, serverSocketPort } = settings.global;
29 const socket = React.useRef(null);
30
31 const isUserWidget = target === "user-widget";
32
33 /**
34 * Handles incoming WebSocket messages and performs actions based on the message content.
35 * @param {Object} e - The event object containing the message data.
36 * @param {string} e.data - The JSON string containing the action and data.
37 * @param {string} e.data.action - The action to perform (e.g., "push", "refresh", "disable", "enable", "toggle").
38 * @param {Object} e.data.data - The data associated with the action.
39 */
40 const handleMessage = React.useCallback(
41 (e) => {
42 const { action, data } = JSON.parse(e.data);
43
44 if (action === "push" || (visible && action === "refresh")) {
45 getter(data);
46 }
47
48 if (action === "disable" || action === "enable") {
49 const state = action === "enable";
50
51 if (isUserWidget) {
52 toggleUserWidget(
53 userWidgetIndex,
54 resetWidget,
55 setSettings,
56 state,
57 setLoading,
58 );
59 } else {
60 toggleWidget(target, resetWidget, setSettings, state, setLoading);
61 }
62 }
63
64 if (action === "toggle") {
65 if (isUserWidget) {
66 toggleUserWidget(
67 userWidgetIndex,
68 resetWidget,
69 setSettings,
70 undefined,
71 setLoading,
72 );
73 } else {
74 toggleWidget(target, resetWidget, setSettings, undefined, setLoading);
75 }
76 }
77 },
78 [
79 getter,
80 isUserWidget,
81 resetWidget,
82 setLoading,
83 setSettings,
84 target,
85 userWidgetIndex,
86 visible,
87 ],
88 );
89
90 React.useEffect(() => {
91 // If the server is enabled, create a new WebSocket connection
92 if (enableServer) {
93 // If the socket is not already created, create a new one
94 if (socket.current === null) {
95 let queryParams = `target=${target}`;
96
97 if (userWidgetIndex !== undefined) {
98 queryParams = queryParams.concat(
99 `&userWidgetIndex=${userWidgetIndex}`,
100 );
101 }
102
103 const newSocket = new WebSocket(
104 `ws://localhost:${serverSocketPort}/?${queryParams}`,
105 );
106
107 newSocket.onmessage = handleMessage;
108 socket.current = newSocket;
109 }
110 } else {
111 // If the server is disabled, close the socket if it exists
112 if (socket.current) {
113 socket.current.close();
114 socket.current = null;
115 }
116 }
117 }, [enableServer, handleMessage, serverSocketPort, target, userWidgetIndex]);
118 }
119
120 const settingsKeys = {
121 battery: "batteryWidget",
122 "browser-track": "browserTrackWidget",
123 cpu: "cpuWidget",
124 crypto: "cryptoWidget",
125 "date-display": "dateWidget",
126 gpu: "gpuWidget",
127 keyboard: "keyboardWidget",
128 mic: "micWidget",
129 mpd: "mpdWidget",
130 music: "musicWidget",
131 netstats: "netstatsWidget",
132 "next-meeting": "nextMeetingWidget",
133 notifications: "notificationsWidget",
134 sound: "soundWidget",
135 spotify: "spotifyWidget",
136 stock: "stockWidget",
137 time: "timeWidget",
138 "viscosity-vpn": "vpnWidget",
139 weather: "weatherWidget",
140 wifi: "wifiWidget",
141 memory: "memoryWidget",
142 "youtube-music": "youtubeMusicWidget",
143 zoom: "zoomWidget",
144 };
145
146 /**
147 * Toggles the state of a widget and updates the settings accordingly.
148 *
149 * @param {string} widget - The name of the widget to toggle.
150 * @param {Function} resetWidget - A function to reset the widget state, if needed.
151 * @param {Function} setSettings - A function to update the settings state.
152 * @param {boolean} [forcedState] - An optional parameter to force the widget state.
153 * @param {Function} setLoading - A function to set the loading state.
154 * @returns {Promise<void>} - A promise that resolves when the widget state is toggled.
155 */
156 async function toggleWidget(
157 widget,
158 resetWidget,
159 setSettings,
160 forcedState,
161 setLoading,
162 ) {
163 const key = settingsKeys[widget];
164 setSettings((settings) => {
165 const { widgets } = settings;
166 const active = forcedState ?? !widgets[key];
167 if (!active) {
168 resetWidget?.();
169 } else {
170 setLoading?.(true);
171 }
172 const newSettings = {
173 ...settings,
174 widgets: { ...widgets, [key]: active },
175 };
176 Settings.set(newSettings);
177 return newSettings;
178 });
179 }
180
181 /**
182 * Toggles the active state of a user widget.
183 *
184 * @param {number} index - The index of the user widget to toggle.
185 * @param {Function} resetWidget - A function to reset the widget, called when the widget is deactivated.
186 * @param {Function} setSettings - A function to update the settings state.
187 * @param {boolean} [forcedState] - An optional boolean to force the widget's active state.
188 * @param {Function} setLoading - A function to set the loading state, called when the widget is activated.
189 * @returns {Promise<void>} A promise that resolves when the settings have been updated.
190 */
191 async function toggleUserWidget(
192 index,
193 resetWidget,
194 setSettings,
195 forcedState,
196 setLoading,
197 ) {
198 setSettings((settings) => {
199 const { userWidgetsList = {} } = settings.userWidgets;
200 const active = forcedState ?? !userWidgetsList[index].active;
201 if (!active) {
202 resetWidget?.();
203 } else {
204 setLoading?.(true);
205 }
206 const newUserWidgetsList = {
207 ...userWidgetsList,
208 [index]: { ...userWidgetsList[index], active },
209 };
210
211 const newSettings = {
212 ...settings,
213 userWidgets: {
214 ...settings.userWidgets,
215 userWidgetsList: newUserWidgetsList,
216 },
217 };
218 Settings.set(newSettings);
219 return newSettings;
220 });
221 }