fix: #1065 fix loading chunk fail (#1092)

.github/workflows/purge-unused-assets-cronjob.yml

@@ -0,0 +1,45 @@
+name: Purge unused assets from s3
+
+on:
+  schedule:
+    # * is a special character in YAML so you have to quote this string
+    - cron: '0 0 * * 0'
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checks out repository to $GITHUB_WORKSPACE
+        uses: actions/checkout@v1
+
+      - name: Setup Node Environement
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+
+      - name: Cache node modules
+        id: cache
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: build-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            build-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Integrate Git credential
+        uses: webfactory/[email protected]
+        with:
+          ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: purge unused assets not belonged to two recent commits
+        run: yarn handle-purge-unsed-assets-cronjob
+
+env:
+  NPM_TOKEN: ${{secrets.NPM_TOKEN}}
+  GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+  AWS_ACCESS_KEY_ID: ${{secrets.AWS_ACCESS_KEY_ID}}
+  AWS_SECRET_ACCESS_KEY: ${{secrets.AWS_SECRET_ACCESS_KEY}}
+  AWS_REGION: ${{secrets.AWS_REGION}}

package.json

@@ -17,6 +17,7 @@
     ]
   },
   "scripts": {
+    "handle-purge-unsed-assets-cronjob": "lerna run node --stream --parallel handle-purge-unsed-assets-cronjob --",
     "build": "lerna run build:prod --stream",
     "fetch-config": "lerna run --parallel --stream fetch-config --",
     "lint": "lerna run --parallel --stream lint",
@@ -78,6 +79,7 @@
     "react-router-dom": "^5.1.2",
     "redux": "^4.0.4",
     "redux-saga": "^1.1.3",
+    "s3": "^4.4.0",
     "yargs": "^15.3.1"
   },
   "devDependencies": {

packages/aml-checklist/package.json

@@ -18,6 +18,7 @@
     "test:dev": "cross-env TZ=UTC jest --watch --verbose",
     "release:dev": "node ../../scripts/release/release-dev.js aml-checklist reapit-aml-checklist-dev",
     "release:prod": "node ../../scripts/release/release-prod.js aml-checklist reapit-aml-checklist-prod",
+    "handle-purge-unsed-assets-cronjob": "node ../../scripts/s3/purge-unused-assets-from-s3.js reapit-aml-checklist-dev reapit-aml-checklist-prod",
     "test:update-badges": "yarn test:ci && jest-coverage-badges --input src/tests/coverage/coverage-summary.json --output src/tests/badges",
     "lint": "concurrently \"tsc --noEmit\" \"eslint --cache --ext=ts,tsx,js src\"",
     "lint:fix": "eslint --cache --ext=ts,tsx,js src --fix",

packages/aml-checklist/src/core/__tests__/__snapshots__/app.tsx.snap

@@ -15,5 +15,11 @@ exports[`App should match a snapshot 1`] = `
   <Component>
     <Component />
   </Component>
+  <Component
+    message="A new version is available. Please refresh your browser or click on this notification to receive the latest update."
+    preventClose={true}
+    variant="primary"
+    visible={false}
+  />
 </Provider>
 `;

packages/aml-checklist/src/core/app.tsx

@@ -3,13 +3,26 @@ import Router from './router'
 import { Provider } from 'react-redux'
 import store from './store'
 import * as React from 'react'
+import { ToastMessage, useOfflinePLugin } from '@reapit/elements'
 
-const App = () => (
-  <Provider store={store.reduxStore}>
-    <PortalProvider>
-      <Router />
-    </PortalProvider>
-  </Provider>
-)
+const App = () => {
+  const { isNewVersionAvailable } = useOfflinePLugin()
+
+  return (
+    <Provider store={store.reduxStore}>
+      <PortalProvider>
+        <Router />
+      </PortalProvider>
+      <ToastMessage
+        preventClose={true}
+        visible={isNewVersionAvailable}
+        variant="primary"
+        onCloseToast={location.reload}
+        /* eslint-disable-next-line max-len */
+        message="A new version is available. Please refresh your browser or click on this notification to receive the latest update."
+      />
+    </Provider>
+  )
+}
 
 export default App

packages/aml-checklist/src/core/index.tsx

@@ -1,5 +1,3 @@
-import * as OfflinePluginRuntime from 'offline-plugin/runtime'
-OfflinePluginRuntime.install()
 import '../styles/index.scss'
 import * as Sentry from '@sentry/browser'
 import React from 'react'

packages/elements/src/components/ToastMessage/index.tsx

@@ -9,16 +9,18 @@ export interface ToastMessageProps {
   message: string
   variant: ToastVariant
   onCloseToast: () => void
+  preventClose?: boolean
 }
 
 export const ToastMessage: React.FC<ToastMessageProps> = ({
   visible = false,
   displayDuration = 3000,
+  preventClose = false,
   message,
   onCloseToast,
   variant,
 }) => {
-  if (visible) {
+  if (visible && !preventClose) {
     setTimeout(onCloseToast, displayDuration)
   }
 

packages/elements/src/hooks/use-offline-plugin/__tests__/use-offline-plugin.tsx

@@ -0,0 +1,30 @@
+import { renderHook, act } from '@testing-library/react-hooks'
+import { useOfflinePLugin } from '../use-offline-plugin'
+import * as runtime from 'offline-plugin/runtime'
+
+jest.mock('offline-plugin/runtime')
+
+describe('useOfflinePLugin', () => {
+  it('should call applyUpdate on event onUpdateReady of the service worker', () => {
+    renderHook(() => useOfflinePLugin())
+    const mockedInstallFn = runtime.install as jest.Mock
+
+    act(() => {
+      mockedInstallFn.mock.calls[0][0].onUpdateReady()
+    })
+
+    expect(runtime.applyUpdate).toHaveBeenCalled()
+  })
+
+  /* eslint-disable-next-line max-len */
+  it('should set isNewVersionAvailable to true when offline-plugin/runtime finish updating service worker with new contents', () => {
+    const { result } = renderHook(() => useOfflinePLugin())
+    const mockedInstallFn = runtime.install as jest.Mock
+
+    act(() => {
+      mockedInstallFn.mock.calls[0][0].onUpdated()
+    })
+
+    expect(result.current.isNewVersionAvailable).toBe(true)
+  })
+})

packages/elements/src/hooks/use-offline-plugin/index.ts

@@ -0,0 +1 @@
+export * from './use-offline-plugin'

packages/elements/src/hooks/use-offline-plugin/use-offline-plugin.tsx

@@ -0,0 +1,32 @@
+import * as runtime from 'offline-plugin/runtime'
+
+// this part will be translated by building
+runtime.install({
+  onUpdateReady: () => {
+    // Tells to new SW to take control immediately
+    runtime.applyUpdate()
+  },
+  onUpdated: () => {
+    // Have to use window to reference since hook can't be referenced in build time
+    ;(window as any).setIsNewVersionAvailable(true)
+  },
+})
+
+import { useState, useEffect } from 'react'
+
+type UseOfflinePLugin = () => {
+  isNewVersionAvailable: boolean
+}
+
+export const useOfflinePLugin: UseOfflinePLugin = () => {
+  const [isNewVersionAvailable, setIsNewVersionAvailable] = useState(false)
+  useEffect(() => {
+    ;(window as any).setIsNewVersionAvailable = setIsNewVersionAvailable
+  })
+
+  useEffect(() => {})
+
+  return {
+    isNewVersionAvailable,
+  }
+}

packages/elements/src/index.tsx

@@ -1,6 +1,7 @@
 import * as v2 from './v2'
 // Hooks
 export * from './hooks/UsePortal'
+export * from './hooks/use-offline-plugin'
 
 // Dependencies
 export * from 'formik'

packages/geo-diary/package.json

@@ -18,6 +18,7 @@
     "test:dev": "cross-env TZ=UTC jest --watch --verbose",
     "release:dev": "node ../../scripts/release/release-dev.js geo-diary reapit-geo-diary-dev",
     "release:prod": "node ../../scripts/release/release-prod.js geo-diary reapit-geo-diary-prod",
+    "handle-purge-unsed-assets-cronjob": "node ../../scripts/s3/purge-unused-assets-from-s3.js reapit-geo-diary-dev reapit-geo-diary-prod",
     "test:update-badges": "yarn test:ci && jest-coverage-badges --input src/tests/coverage/coverage-summary.json --output src/tests/badges",
     "lint": "concurrently \"tsc --noEmit\" \"eslint --cache --ext=ts,tsx,js src\"",
     "lint:fix": "eslint --cache --ext=ts,tsx,js src --fix",

packages/geo-diary/src/core/__tests__/__snapshots__/app.tsx.snap

@@ -15,5 +15,10 @@ exports[`App should match a snapshot 1`] = `
   <Component>
     <Component />
   </Component>
+  <Component
+    message="A new version is available. Please refresh your browser or click on this notification to receive the latest update."
+    variant="primary"
+    visible={false}
+  />
 </Provider>
 `;

packages/geo-diary/src/core/app.tsx

@@ -2,15 +2,27 @@ import '../styles/index.scss'
 import React from 'react'
 import { Provider } from 'react-redux'
 import Router from './router'
-import { PortalProvider } from '@reapit/elements'
+import { PortalProvider, useOfflinePLugin } from '@reapit/elements'
 import store from './store'
+import { ToastMessage as ReapitElementsToastMessage } from '@reapit/elements'
 
-const App = () => (
-  <Provider store={store.reduxStore}>
-    <PortalProvider>
-      <Router />
-    </PortalProvider>
-  </Provider>
-)
+const App = () => {
+  const { isNewVersionAvailable } = useOfflinePLugin()
+
+  return (
+    <Provider store={store.reduxStore}>
+      <PortalProvider>
+        <Router />
+      </PortalProvider>
+      <ReapitElementsToastMessage
+        visible={isNewVersionAvailable}
+        variant="primary"
+        onCloseToast={location.reload}
+        /* eslint-disable-next-line max-len */
+        message="A new version is available. Please refresh your browser or click on this notification to receive the latest update."
+      />
+    </Provider>
+  )
+}
 
 export default App

packages/geo-diary/src/core/index.tsx

@@ -1,5 +1,3 @@
-import * as OfflinePluginRuntime from 'offline-plugin/runtime'
-OfflinePluginRuntime.install()
 import React from 'react'
 import * as Sentry from '@sentry/browser'
 import { render } from 'react-dom'

packages/lifetime-legal/package.json

@@ -18,6 +18,7 @@
     "test:dev": "cross-env TZ=UTC jest --watch --verbose",
     "release:dev": "node ../../scripts/release/release-dev.js lifetime-legal reapit-lifetime-legal-dev",
     "release:prod": "node ../../scripts/release/release-prod.js lifetime-legal reapit-lifetime-legal-prod",
+    "handle-purge-unsed-assets-cronjob": "node ../../scripts/s3/purge-unused-assets-from-s3.js reapit-lifetime-legal-dev reapit-lifetime-legal-prod",
     "test:update-badges": "yarn test:ci && jest-coverage-badges --input src/tests/coverage/coverage-summary.json --output src/tests/badges",
     "lint": "concurrently \"tsc --noEmit\" \"eslint --cache --ext=ts,tsx,js src\"",
     "lint:fix": "eslint --cache --ext=ts,tsx,js src --fix",

packages/lifetime-legal/src/core/__tests__/__snapshots__/app.tsx.snap

@@ -14,6 +14,12 @@ exports[`App should match a snapshot 1`] = `
 >
   <Component>
     <Component />
+    <Component
+      message="A new version is available. Please refresh your browser or click on this notification to receive the latest update."
+      preventClose={true}
+      variant="primary"
+      visible={false}
+    />
   </Component>
 </Provider>
 `;

packages/lifetime-legal/src/core/app.tsx

@@ -1,15 +1,27 @@
-import { PortalProvider } from '@reapit/elements'
+import { PortalProvider, useOfflinePLugin, ToastMessage } from '@reapit/elements'
 import Router from './router'
 import { Provider } from 'react-redux'
 import store from './store'
 import * as React from 'react'
 
-const App = () => (
-  <Provider store={store.reduxStore}>
-    <PortalProvider>
-      <Router />
-    </PortalProvider>
-  </Provider>
-)
+const App = () => {
+  const { isNewVersionAvailable } = useOfflinePLugin()
+
+  return (
+    <Provider store={store.reduxStore}>
+      <PortalProvider>
+        <Router />
+        <ToastMessage
+          preventClose={true}
+          visible={isNewVersionAvailable}
+          variant="primary"
+          onCloseToast={location.reload}
+          /* eslint-disable-next-line max-len */
+          message="A new version is available. Please refresh your browser or click on this notification to receive the latest update."
+        />
+      </PortalProvider>
+    </Provider>
+  )
+}
 
 export default App

packages/lifetime-legal/src/core/index.tsx

@@ -1,5 +1,3 @@
-import * as OfflinePluginRuntime from 'offline-plugin/runtime'
-OfflinePluginRuntime.install()
 import '../styles/index.scss'
 import * as Sentry from '@sentry/browser'
 import React from 'react'

packages/marketplace/package.json

@@ -15,6 +15,7 @@
     "test:dev": "cross-env TZ=UTC jest --watch --verbose",
     "release:dev": "node ../../scripts/release/release-dev.js marketplace reapit-app-store",
     "release:prod": "node ../../scripts/release/release-prod.js marketplace reapit-app-store-prod",
+    "handle-purge-unsed-assets-cronjob": "node ../../scripts/s3/purge-unused-assets-from-s3.js reapit-app-store reapit-app-store-prod",
     "test-e2e:dev": "cypress open --project './src/tests'",
     "cypress:ci": "cypress run --project \"./src/tests\"",
     "test-e2e:ci": "start-server-and-test start:prod http://localhost:8080 cypress:ci",

packages/marketplace/src/core/__tests__/__snapshots__/app.tsx.snap

@@ -17,5 +17,11 @@ exports[`App should match a snapshot 1`] = `
   </Component>
   <Connect(Component) />
   <Connect(Component) />
+  <Component
+    message="A new version is available. Please refresh your browser or click on this notification to receive the latest update."
+    preventClose={true}
+    variant="primary"
+    visible={false}
+  />
 </Provider>
 `;

packages/marketplace/src/core/app.tsx

@@ -4,16 +4,28 @@ import { Provider } from 'react-redux'
 import store from './store'
 import Toast from '../components/ui/toast'
 import ToastMessage from '../components/ui/toast-message'
-import { PortalProvider } from '@reapit/elements'
+import { PortalProvider, useOfflinePLugin, ToastMessage as ReapitElementsToastMessage } from '@reapit/elements'
 
-const App = () => (
-  <Provider store={store.reduxStore}>
-    <PortalProvider>
-      <Router />
-    </PortalProvider>
-    <Toast />
-    <ToastMessage />
-  </Provider>
-)
+const App = () => {
+  const { isNewVersionAvailable } = useOfflinePLugin()
+
+  return (
+    <Provider store={store.reduxStore}>
+      <PortalProvider>
+        <Router />
+      </PortalProvider>
+      <Toast />
+      <ToastMessage />
+      <ReapitElementsToastMessage
+        preventClose={true}
+        visible={isNewVersionAvailable}
+        variant="primary"
+        onCloseToast={location.reload}
+        /* eslint-disable-next-line max-len */
+        message="A new version is available. Please refresh your browser or click on this notification to receive the latest update."
+      />
+    </Provider>
+  )
+}
 
 export default App