feat(pwa): adds pwa support

fix #1711

package.json

@@ -91,6 +91,7 @@
     "commit": "npx git-cz",
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "start:serve": "npm run build && serve -s build",
     "prepublishOnly": "npm run build",
     "test": "react-scripts test --detectOpenHandles",
     "test:ci": "cross-env CI=true react-scripts test",

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#1abc9c" />
     <meta
       name="description"
       content="HospitalRun"

public/manifest.json

@@ -16,10 +16,10 @@
       "src": "logo.png",
       "type": "image/png",
       "sizes": "512x512"
-    }	 
+    }
   ],
   "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "display": "fullscreen",
+  "theme_color": "#1abc9c",
+  "background_color": "#fdfffc"
 }

src/__tests__/patients/patients-slice.test.ts

@@ -3,13 +3,10 @@ import { AnyAction } from 'redux'
 import { createMemoryHistory } from 'history'
 import { mocked } from 'ts-jest/utils'
 import * as components from '@hospitalrun/components'
-import { useTranslation } from 'react-i18next'
 import * as patientsSlice from '../../patients/patients-slice'
 import Patient from '../../model/Patient'
 import PatientRepository from '../../clients/db/PatientRepository'
 
-const { t } = useTranslation()
-
 describe('patients slice', () => {
   beforeEach(() => {
     jest.resetAllMocks()
@@ -130,7 +127,7 @@ describe('patients slice', () => {
       expect(mockedComponents.Toast).toHaveBeenCalledWith(
         'success',
         'Success!',
-        `patients.successfullyCreated ${expectedGivenName} ${expectedFamilyName} ${expectedSuffix}`,
+        `Successfully created patient ${expectedGivenName} ${expectedFamilyName} ${expectedSuffix}`,
       )
     })
   })

src/i18n.js

@@ -1,12 +1,16 @@
 import i18n from 'i18next'
-import Backend from 'i18next-xhr-backend'
 import LanguageDetector from 'i18next-browser-languagedetector'
 import { initReactI18next } from 'react-i18next'
 
+import translationEN from './locales/en-US/translation'
+
+const resources = {
+  en: {
+    translation: translationEN,
+  },
+}
+
 i18n
-  // load translation using xhr -> see /public/locales
-  // learn more: https://github.com/i18next/i18next-xhr-backend
-  .use(Backend)
   // detect user language
   // learn more: https://github.com/i18next/i18next-browser-languageDetector
   .use(LanguageDetector)
@@ -17,7 +21,7 @@ i18n
   .init({
     fallbackLng: 'en',
     debug: true,
-
+    resources,
     interpolation: {
       escapeValue: false, // not needed for react as it escapes by default
     },

src/index.tsx

@@ -11,4 +11,5 @@ ReactDOM.render(<App />, document.getElementById('root'))
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister()
+serviceWorker.register()
+serviceWorker.register({})

public/locales/en/translation.json → src/locales/en-US/translation.json

@@ -7,7 +7,7 @@
     "viewPatients": "View Patients",
     "viewPatient": "View Patient",
     "newPatient": "New Patient",
-    "successfullyCreated": "Successfully created patient "
+    "successfullyCreated": "Successfully created patient"
   },
   "patient": {
     "suffix": "Suffix",