changed theme sync to websockets

2 files changed, 41 insertions, 36 deletions

diff --git a/pages/_app.tsx b/pages/_app.tsx
index aa0e428..410b333 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -32,28 +32,31 @@ function MyApp({ Component, pageProps }: AppProps) {
     yellow: '#FCCE7B',
   }
   const [emacsTheme, setEmacsTheme] = useState<typeof initialTheme>(initialTheme)
-  useEffect(() => {
-    const trackTheme = new EventSource('http://127.0.0.1:35901/theme')
-    trackTheme.addEventListener('message', (e) => {
-      const themeData = JSON.parse(e.data)
-      if (!themeData.base4) {
-        const bgfgInterpolate = d3int.interpolate(emacsTheme.bg, emacsTheme.fg)
-        themeData.base1 = bgfgInterpolate(0.1)
-        themeData.base2 = bgfgInterpolate(0.2)
-        themeData.base3 = bgfgInterpolate(0.3)
-        themeData.base4 = bgfgInterpolate(0.4)
-        themeData.base5 = bgfgInterpolate(0.5)
-        themeData.base6 = bgfgInterpolate(0.6)
-        themeData.base7 = bgfgInterpolate(0.7)
-        themeData.base8 = bgfgInterpolate(0.8)
-      }
-      setEmacsTheme(themeData)
-    })
-  }, [])
-
+  /* useEffect(() => {
+   *   const trackTheme = new EventSource('http://127.0.0.1:35901/theme')
+   *   trackTheme.addEventListener('message', (e) => {
+   *     const themeData = JSON.parse(e.data)
+   *     console.log("aa")
+   *     if (!themeData.base4) {
+   *       const bgfgInterpolate = d3int.interpolate(emacsTheme.bg, emacsTheme.fg)
+   *       themeData.base1 = bgfgInterpolate(0.1)
+   *       themeData.base2 = bgfgInterpolate(0.2)
+   *       themeData.base3 = bgfgInterpolate(0.3)
+   *       themeData.base4 = bgfgInterpolate(0.4)
+   *       themeData.base5 = bgfgInterpolate(0.5)
+   *       themeData.base6 = bgfgInterpolate(0.6)
+   *       themeData.base7 = bgfgInterpolate(0.7)
+   *       themeData.base8 = bgfgInterpolate(0.8)
+   *       console.log('o  o')
+   *     }
+   *     emacsTheme.bg !== themeData.bg && setEmacsTheme(themeData)
+   *   })
+   * }, [])
+   */
   const borderColor = emacsTheme.violet + 'aa'
   const missingColor = d3int.interpolate(emacsTheme.base1, emacsTheme.base2)(0.2)
   const theme = useMemo(() => {
+    console.log('ii')
     return {
       colors: {
         white: emacsTheme.bg,
@@ -124,7 +127,7 @@ function MyApp({ Component, pageProps }: AppProps) {
   const extendedTheme = extendTheme(theme)
   return (
     <ChakraProvider theme={extendedTheme}>
-      <Component {...pageProps} />
+      <Component {...pageProps} setEmacsTheme={setEmacsTheme} />
     </ChakraProvider>
   )
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index 00e87d8..db925da 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -35,7 +35,7 @@ export type Scope = {
   nodeIds: string[]
 }
 
-export default function Home() {
+export default function Home(setEmacsTheme: any) {
   // only render on the client
   const [showPage, setShowPage] = useState(false)
   useEffect(() => {
@@ -46,10 +46,10 @@ export default function Home() {
     return null
   }
 
-  return <GraphPage />
+  return <GraphPage setEmacsTheme={setEmacsTheme} />
 }
 
-export function GraphPage() {
+export function GraphPage(setEmacsTheme: any) {
   const [physics, setPhysics] = usePersistantState('physics', initialPhysics)
   const [filter, setFilter] = usePersistantState('filter', initialFilter)
   const [graphData, setGraphData] = useState<GraphData | null>(null)
@@ -62,6 +62,7 @@ export function GraphPage() {
     return fetch('http://localhost:35901/graph')
       .then((res) => res.json())
       .then((orgRoamGraphData) => {
+        console.log('fetching graphdata')
         parseGraphData(orgRoamGraphData)
       })
   }
@@ -115,34 +116,35 @@ export function GraphPage() {
   }
 
   useEffect(() => {
-    //const trackEmacs = new EventSource('http://127.0.0.1:35901/current-node-id')
-    //trackEmacs.addEventListener('message', (e) => {
-    // const emacsNodeId = e.data
-    //setEmacsNodeId(emacsNodeId)
-    //})
     const socket = new WebSocket('ws://localhost:35903')
     socket.addEventListener('open', (e) => {
       console.log('Connection with Emacs established')
     })
     socket.addEventListener('message', (event) => {
-      const data = JSON.parse(event.data)
-      console.log(typeof data.type)
-      switch (data.type) {
+      const message = JSON.parse(event.data)
+      console.log(typeof message.type)
+      switch (message.type) {
         case 'graphdata':
           console.log('hey')
-          parseGraphData(data.data)
+          parseGraphData(message.data)
+          break
+        case 'theme':
+          console.log('Received theme data')
+          console.log(message.data)
+          console.log(setEmacsTheme)
+          setEmacsTheme.setEmacsTheme.setEmacsTheme(message.data)
           break
         case 'command':
           console.log('command')
-          switch (data.data.commandName) {
+          switch (message.data.commandName) {
             case 'follow':
-              setEmacsNodeId(data.data.id)
+              setEmacsNodeId(message.data.id)
               break
             case 'zoom': {
-              const links = linksByNodeIdRef.current[data.data.id!] ?? []
+              const links = linksByNodeIdRef.current[message.data.id!] ?? []
               const nodes = Object.fromEntries(
                 [
-                  data.commandData.id! as string,
+                  message.commandData.id! as string,
                   ...links.flatMap((link) => [link.source, link.target]),
                 ].map((nodeId) => [nodeId, {}]),
               )