fix: 🐛 Cleanup on logout (kolplattformen#6)

package.json

@@ -20,10 +20,12 @@
   },
   "dependencies": {
     "@skolplattformen/embedded-api": "^0.20.0",
-    "react": "^16.11.0",
     "react-redux": "^7.2.2",
     "redux": "^4.0.5"
   },
+  "peerDependencies": {
+    "react": "^16.11.0"
+  },
   "devDependencies": {
     "@babel/preset-env": "^7.12.13",
     "@babel/preset-react": "^7.12.13",
@@ -45,6 +47,7 @@
     "eslint-plugin-react-hooks": "^4.0.8",
     "events": "^3.2.0",
     "jest": "^26.6.3",
+    "react": "^16.11.0",
     "react-dom": "^16.11.0",
     "react-test-renderer": "^16.11.0",
     "regenerator-runtime": "^0.13.7",

src/logout.test.js

@@ -0,0 +1,72 @@
+import React from 'react'
+import { renderHook, act } from '@testing-library/react-hooks'
+import { ApiProvider } from './provider'
+import { useChildList } from './hooks'
+import store from './store'
+import init from './__mocks__/@skolplattformen/embedded-api'
+import createStorage from './__mocks__/AsyncStorage'
+import reporter from './__mocks__/reporter'
+
+const pause = (ms = 0) => new Promise((r) => setTimeout(r, ms))
+
+describe('logout - cleanup', () => {
+  let api
+  let storage
+  let response
+  const wrapper = ({ children }) => (
+    <ApiProvider
+      api={api}
+      storage={storage}
+      reporter={reporter}
+    >
+      {children}
+    </ApiProvider>
+  )
+  beforeEach(() => {
+    response = [{ id: 1 }]
+    api = init()
+    api.getChildren.mockImplementation(() => (
+      new Promise((res) => {
+        setTimeout(() => res(response), 50)
+      })
+    ))
+    storage = createStorage({
+      children: [{ id: 2 }],
+    }, 2)
+  })
+  afterEach(async () => {
+    await act(async () => {
+      await pause(70)
+      store.dispatch({ entity: 'ALL', type: 'CLEAR' })
+    })
+  })
+  it('cleans up on logout', async () => {
+    await act(async () => {
+      api.isLoggedIn = true
+      api.isFake = false
+
+      const { waitForNextUpdate: wait1 } = renderHook(() => useChildList(), { wrapper })
+
+      await wait1()
+      await wait1()
+      await wait1()
+      await pause(20)
+
+      api.isLoggedIn = false
+      api.emitter.emit('logout')
+
+      const { result } = renderHook(() => useChildList(), { wrapper })
+
+      expect(result.current.data).toHaveLength(0)
+
+      api.isLoggedIn = true
+      api.emitter.emit('login')
+
+      const { result: result2, waitForNextUpdate: wait2 } = renderHook(() => useChildList(), { wrapper })
+
+      await wait2()
+
+      expect(result2.current.data).toHaveLength(1)
+    })
+  })
+})

src/provider.tsx

@@ -7,7 +7,7 @@ import React, {
 import { Provider } from 'react-redux'
 import { ApiContext } from './context'
 import store from './store'
-import { AsyncStorage, IApiContext, Reporter } from './types'
+import { AsyncStorage, EntityAction, IApiContext, Reporter } from './types'
 
 type TApiProvider = FC<PropsWithChildren<{
   api: Api,
@@ -36,6 +36,10 @@ export const ApiProvider: TApiProvider = ({
     const handler = () => {
       setIsLoggedIn(api.isLoggedIn)
       setIsFake(api.isFake)
+
+      if (!api.isLoggedIn) {
+        store.dispatch({ type: 'CLEAR', entity: 'ALL' })
+      }
     }
 
     api.on('login', handler)

yarn.lock

@@ -4792,9 +4792,9 @@ react-test-renderer@^16.11.0:
     scheduler "^0.17.0"
 
 react@^16.11.0:
-  version "16.11.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.11.0.tgz#d294545fe62299ccee83363599bf904e4a07fdbb"
-  integrity sha512-M5Y8yITaLmU0ynd0r1Yvfq98Rmll6q8AxaEe88c8e7LxO8fZ2cNgmFt0aGAS9wzf1Ao32NKXtCl+/tVVtkxq6g==
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
+  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"