From 27ecedb02ef79ce53bf533e016b00462c44541be Mon Sep 17 00:00:00 2001 From: Nate Sesti Date: Tue, 23 May 2023 23:45:12 -0400 Subject: copying from old repo --- extension/react-app/src/hooks/useArrayState.ts | 29 +++++++++++ extension/react-app/src/hooks/useWebsocket.ts | 67 ++++++++++++++++++++++++++ 2 files changed, 96 insertions(+) create mode 100644 extension/react-app/src/hooks/useArrayState.ts create mode 100644 extension/react-app/src/hooks/useWebsocket.ts (limited to 'extension/react-app/src/hooks') diff --git a/extension/react-app/src/hooks/useArrayState.ts b/extension/react-app/src/hooks/useArrayState.ts new file mode 100644 index 00000000..d379e720 --- /dev/null +++ b/extension/react-app/src/hooks/useArrayState.ts @@ -0,0 +1,29 @@ +import { useState } from "react"; + +function useArrayState(initialValue: T[]) { + const [value, setValue] = useState(initialValue); + + function add(item: any) { + setValue((prev) => [...prev, item]); + } + + function remove(index: number) { + setValue((prev) => prev.filter((_, i) => i !== index)); + } + + function edit(editFn: (prev: T[]) => T[]) { + setValue((prev) => editFn(prev)); + } + + function replace(atIndex: number, withItem: T) { + setValue((prev) => { + let updated = [...prev]; + updated[atIndex] = withItem; + return updated; + }); + } + + return { value, add, remove, edit, replace }; +} + +export default useArrayState; diff --git a/extension/react-app/src/hooks/useWebsocket.ts b/extension/react-app/src/hooks/useWebsocket.ts new file mode 100644 index 00000000..147172bd --- /dev/null +++ b/extension/react-app/src/hooks/useWebsocket.ts @@ -0,0 +1,67 @@ +import React, { useEffect, useState } from "react"; +import { RootStore } from "../redux/store"; +import { useSelector } from "react-redux"; + +function useContinueWebsocket( + serverUrl: string, + onMessage: (message: { data: any }) => void +) { + const sessionId = useSelector((state: RootStore) => state.config.sessionId); + const [websocket, setWebsocket] = useState(undefined); + + async function connect() { + while (!sessionId) { + await new Promise((resolve) => setTimeout(resolve, 300)); + } + + console.log("Creating websocket", sessionId); + + const wsUrl = + serverUrl.replace("http", "ws") + + "/notebook/ws?session_id=" + + encodeURIComponent(sessionId); + + const ws = new WebSocket(wsUrl); + setWebsocket(ws); + + // Set up callbacks + ws.onopen = () => { + console.log("Websocket opened"); + ws.send(JSON.stringify({ sessionId })); + }; + + ws.onmessage = (msg) => { + onMessage(msg); + console.log("Got message", msg); + }; + + ws.onclose = (msg) => { + console.log("Websocket closed"); + setWebsocket(undefined); + }; + + return ws; + } + + async function getConnection() { + if (!websocket) { + return await connect(); + } + return websocket; + } + + async function send(message: object) { + let ws = await getConnection(); + ws.send(JSON.stringify(message)); + } + + useEffect(() => { + if (!sessionId) { + return; + } + connect(); + }, [sessionId]); + + return { send }; +} +export default useContinueWebsocket; -- cgit v1.2.3-70-g09d2