Restarting waggle on F5 reload (#488)

* Restarting waggle on F5 reload

* Fixed bug with re-registering certificate on reload

* Close socket connection and detach sagas on disconnect event

* Lint fix

* Uncommented assertions in Channel test

* Workaround for broken ipfs-core-types package

* Removed leftovers from tests

package.json

@@ -81,6 +81,7 @@
     "build:main": "tsc -p tsconfig.build.main.json",
     "build:main:prod": "tsc -p tsconfig.build.main.json",
     "build:renderer:prod": "webpack --config webpack/webpack.config.renderer.prod.js",
+    "postinstall": "rm -rf node_modules/ipfs-core-types/src",
     "prestart": "npm run build:main",
     "start": "ZBAY_IS_TESTNET=0 DEBUG='waggle:*,zbay:*' npm run start:renderer",
     "start-testnet": "ZBAY_IS_TESTNET=1 npm run start:renderer",
@@ -306,7 +307,7 @@
     "ts-loader": "^8.3.0",
     "typed-redux-saga": "^1.3.1",
     "typeface-roboto": "0.0.54",
-    "waggle": "^4.3.14",
+    "waggle": "^4.3.15",
     "websocket": "^1.0.32",
     "worker-loader": "^3.0.1",
     "ws": "^7.3.1",

src/main/main.ts

@@ -12,12 +12,12 @@ import { DataServer } from 'waggle/lib/socket/DataServer'
 
 import { setEngine, CryptoEngine } from 'pkijs'
 import { Crypto } from '@peculiar/webcrypto'
+
 const log = Object.assign(debug('zbay:main'), {
   error: debug('zbay:main:err')
 })
 
 electronStore.set('appDataPath', app.getPath('appData'))
-electronStore.set('waggleInitialized', false)
 electronStore.set('waggleVersion', waggleVersion)
 
 export const isDev = process.env.NODE_ENV === 'development'
@@ -107,6 +107,7 @@ if (!gotTheLock) {
     // }
   })
 }
+
 app.on('open-url', (event, url) => {
   event.preventDefault()
   const data = new URL(url)
@@ -141,8 +142,10 @@ const checkForPayloadOnStartup = (payload: string) => {
     }
   }
 }
+
 let browserWidth: number
 let browserHeight: number
+
 const createWindow = async () => {
   const windowUserSize = electronStore.get('windowSize')
   mainWindow = new BrowserWindow({
@@ -248,7 +251,7 @@ export const checkForUpdate = async (win: BrowserWindow) => {
 }
 
 let waggleProcess: { connectionsManager: ConnectionsManager; dataServer: DataServer } | null = null
-let waggleProcessStarted: boolean = false
+
 app.on('ready', async () => {
   // const template = [
   //   {
@@ -296,10 +299,6 @@ app.on('ready', async () => {
     if (!isBrowserWindow(mainWindow)) {
       throw new Error('mainWindow is on unexpected type {mainWindow}')
     }
-    if (!waggleProcessStarted) {
-      waggleProcessStarted = true
-      waggleProcess = await runWaggle(mainWindow.webContents)
-    }
     if (process.platform === 'win32' && process.argv) {
       const payload = process.argv[1]
       if (payload) {
@@ -320,6 +319,12 @@ app.on('ready', async () => {
   ipcMain.on('proceed-update', () => {
     autoUpdater.quitAndInstall()
   })
+
+  ipcMain.on('start-waggle', async () => {
+    await waggleProcess?.connectionsManager.closeAllServices()
+    await waggleProcess?.dataServer.close()
+    waggleProcess = await runWaggle(mainWindow.webContents)
+  })
 })
 
 app.setAsDefaultProtocolClient('zbay')
@@ -354,9 +359,3 @@ app.on('activate', async () => {
     await createWindow()
   }
 })
-
-ipcMain.on('hello', async () => {
-  await waggleProcess.connectionsManager.closeAllServices()
-  await waggleProcess.dataServer.close()
-  waggleProcess = await runWaggle(mainWindow.webContents)
-})

src/renderer/containers/pages/Channel.test.tsx

@@ -4,9 +4,7 @@ import { screen } from '@testing-library/dom'
 import { apply, fork, take } from 'typed-redux-saga'
 import { renderComponent } from '../../testUtils/renderComponent'
 import { prepareStore } from '../../testUtils/prepareStore'
-import { StoreKeys } from '../../store/store.keys'
-import { publicChannels, getFactory } from '@zbayapp/nectar'
-import { SocketState } from '../../sagas/socket/socket.slice'
+import { getFactory, publicChannels } from '@zbayapp/nectar'
 import MockedSocket from 'socket.io-mock'
 import { act } from 'react-dom/test-utils'
 import { ioMock } from '../../../shared/setupTests'
@@ -27,12 +25,7 @@ describe('Channel', () => {
 
   it("causes no error if there's no data yet", async () => {
     const { store } = await prepareStore(
-      {
-        [StoreKeys.Socket]: {
-          ...new SocketState(),
-          isConnected: true
-        }
-      },
+      {},
       socket // Fork Nectar's sagas
     )
 
@@ -49,12 +42,7 @@ describe('Channel', () => {
 
   it('displays properly on app (re)start', async () => {
     const { store } = await prepareStore(
-      {
-        [StoreKeys.Socket]: {
-          ...new SocketState(),
-          isConnected: true
-        }
-      },
+      {},
       socket // Fork Nectar's sagas
     )
 
@@ -84,12 +72,7 @@ describe('Channel', () => {
 
   it('asks for missing messages and displays them', async () => {
     const { store, runSaga } = await prepareStore(
-      {
-        [StoreKeys.Socket]: {
-          ...new SocketState(),
-          isConnected: true
-        }
-      },
+      {},
       socket // Fork Nectar's sagas
     )
 

src/renderer/containers/widgets/createUsernameModal/CreateUsername.tsx

@@ -41,7 +41,7 @@ const CreateUsernameModal = () => {
   }, [channels.length, invitationUrl, certificate])
 
   useEffect(() => {
-    if (id?.hiddenService) {
+    if (id?.hiddenService && !certificate) {
       dispatch(identity.actions.registerUsername(username))
     }
   }, [id?.hiddenService])

src/renderer/index.tsx

@@ -34,6 +34,8 @@ if (window) {
   window.localStorage.setItem('debug', process.env.DEBUG)
 }
 
+ipcRenderer.send('start-waggle')
+
 ipcRenderer.on('newUpdateAvailable', (_event) => {
   store.dispatch(updateHandlers.epics.checkForUpdate() as any)
 })
@@ -43,7 +45,7 @@ ipcRenderer.on('connectToWebsocket', (_event, payload: WebsocketConnectionPayloa
 })
 
 ipcRenderer.on('waggleInitialized', (_event) => {
-  log('waggle Initialized')
+  log('waggle initialized')
   store.dispatch(waggleHandlers.actions.setIsWaggleConnected(true))
 })
 

src/renderer/sagas/socket/socket.saga.ts

@@ -1,15 +1,22 @@
 import { io, Socket } from 'socket.io-client'
-import { call, fork, put } from 'typed-redux-saga'
+import { fork, takeEvery, call, put, select, cancel, FixedTask } from 'typed-redux-saga'
 import { PayloadAction } from '@reduxjs/toolkit'
 import { socket as nectar } from '@zbayapp/nectar'
 import { socketActions } from './socket.slice'
+import { socketSelectors } from './socket.selectors'
+import { eventChannel } from 'redux-saga'
 
 export function* startConnectionSaga(
   action: PayloadAction<ReturnType<typeof socketActions.startConnection>['payload']>
 ): Generator {
+  const isConnected = yield* select(socketSelectors.isConnected)
+  if (isConnected) return
   const socket = yield* call(connect, action.payload.dataPort)
-  yield* fork(nectar.useIO, socket)
+  const task = yield* fork(nectar.useIO, socket)
   yield* put(socketActions.setConnected())
+  // Detach sagas and close websocket connection on reload
+  yield* fork(handleSocketLifecycleActions, socket)
+  yield* takeEvery(socketActions.closeConnection, cancelRootTaskSaga, task)
 }
 
 export const connect = async (dataPort: number): Promise<Socket> => {
@@ -22,3 +29,26 @@ export const connect = async (dataPort: number): Promise<Socket> => {
     })
   })
 }
+
+function* handleSocketLifecycleActions(socket: Socket): Generator {
+  const socketChannel = yield* call(subscribeSocketLifecycle, socket)
+  yield takeEvery(socketChannel, function* (action) {
+    yield put(action)
+  })
+}
+
+function subscribeSocketLifecycle(socket: Socket) {
+  return eventChannel<ReturnType<typeof socketActions.closeConnection>>(emit => {
+    socket.on('disconnect', () => {
+      console.log('closing socket connection')
+      socket.close()
+      emit(socketActions.closeConnection())
+    })
+    return () => {}
+  })
+}
+
+function* cancelRootTaskSaga(task: FixedTask<Generator>): Generator {
+  console.log('canceling root task')
+  yield* cancel(task)
+}

src/renderer/sagas/socket/socket.slice.ts

@@ -14,6 +14,7 @@ export const socketSlice = createSlice({
   name: StoreKeys.Socket,
   reducers: {
     startConnection: (state, _action: PayloadAction<WebsocketConnectionPayload>) => state,
+    closeConnection: state => state,
     setConnected: state => {
       state.isConnected = true
     }