From a4d81dc23270a8ca6962f82451b0de5d7998779f Mon Sep 17 00:00:00 2001 From: kumikokashii Date: Sun, 24 May 2020 21:09:47 -0700 Subject: [PATCH 1/9] feat(topnav): use updated icon component in topnav. add dropdown icon --- package.json | 2 +- src/components/Navbar.tsx | 20 +++++++++++++++++++- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index f8f8b7d3ee..7cc2b63d42 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "private": false, "license": "MIT", "dependencies": { - "@hospitalrun/components": "^1.5.0", + "@hospitalrun/components": "^1.6.0", "@reduxjs/toolkit": "~1.3.0", "@types/escape-string-regexp": "~2.0.1", "@types/pouchdb-find": "~6.3.4", diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index ebf576ae79..780e4e02c3 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -12,7 +12,7 @@ const Navbar = () => { variant="dark" navItems={[ { - type: 'icon', + type: 'image', src: 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53%0D%0AMy5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5r%0D%0AIiB2aWV3Qm94PSIwIDAgMjk5IDI5OSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOnVybCgjbGlu%0D%0AZWFyLWdyYWRpZW50KTt9PC9zdHlsZT48bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVu%0D%0AdCIgeDE9IjcyLjU4IiB5MT0iMTYuMDQiIHgyPSIyMjcuMzEiIHkyPSIyODQuMDIiIGdyYWRpZW50%0D%0AVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAuMDEiIHN0b3AtY29sb3I9IiM2%0D%0AMGQxYmIiLz48c3RvcCBvZmZzZXQ9IjAuNSIgc3RvcC1jb2xvcj0iIzFhYmM5YyIvPjxzdG9wIG9m%0D%0AZnNldD0iMSIgc3RvcC1jb2xvcj0iIzAwOWI5ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjx0%0D%0AaXRsZT5jcm9zcy1pY29uPC90aXRsZT48cGF0aCBpZD0iY3Jvc3MiIGNsYXNzPSJjbHMtMSIgZD0i%0D%0ATTI5Mi45NCw5Ny40NkgyMDUuM1Y3LjA2QTYuNTYsNi41NiwwLDAsMCwxOTguNzQuNUgxMDEuMjZB%0D%0ANi41Niw2LjU2LDAsMCwwLDk0LjcsNy4wNnY5MC40SDcuMDZBNi41OCw2LjU4LDAsMCwwLC41LDEw%0D%0ANFYxOTYuM2E2LjIzLDYuMjMsMCwwLDAsNi4yMyw2LjI0aDg4djkwLjRhNi41Niw2LjU2LDAsMCww%0D%0ALDYuNTYsNi41Nmg5Ny40OGE2LjU2LDYuNTYsMCwwLDAsNi41Ni02LjU2di05MC40aDg4YTYuMjMs%0D%0ANi4yMywwLDAsMCw2LjIzLTYuMjRWMTA0QTYuNTgsNi41OCwwLDAsMCwyOTIuOTQsOTcuNDZaIiB0%0D%0AcmFuc2Zvcm09InRyYW5zbGF0ZSgtMC41IC0wLjUpIi8+PC9zdmc+', onClick: () => { @@ -100,6 +100,24 @@ const Navbar = () => { onClickButton: () => undefined, onChangeInput: () => undefined, }, + { + type: 'link-list-icon', + alignRight: true, + children: [ + { + label: 'Settings', + onClick: () => { + history.push('/') // todo: to 'settings' + }, + type: 'link', + }, + ], + className: 'pl-4', + iconClassName: 'align-bottom', + label: 'Patient', + name: 'patient', + size: 'lg', + }, ]} /> ) From 43e2a5fa4dc0dedfa5acb109cde26ba371cf7d16 Mon Sep 17 00:00:00 2001 From: kumikokashii Date: Sun, 24 May 2020 23:08:12 -0700 Subject: [PATCH 2/9] feat(settings page): init settings page --- src/HospitalRun.tsx | 2 ++ src/components/Navbar.tsx | 6 +++--- src/settings/Settings.tsx | 5 +++++ 3 files changed, 10 insertions(+), 3 deletions(-) create mode 100644 src/settings/Settings.tsx diff --git a/src/HospitalRun.tsx b/src/HospitalRun.tsx index df0a8f7d43..96ce24a194 100644 --- a/src/HospitalRun.tsx +++ b/src/HospitalRun.tsx @@ -14,6 +14,7 @@ import { ButtonBarProvider } from './page-header/ButtonBarProvider' import ButtonToolBar from './page-header/ButtonToolBar' import Patients from './patients/Patients' import Appointments from './scheduling/appointments/Appointments' +import Settings from './settings/Settings' import { RootState } from './store' const HospitalRun = () => { @@ -45,6 +46,7 @@ const HospitalRun = () => { + diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 780e4e02c3..325447d18d 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -105,11 +105,11 @@ const Navbar = () => { alignRight: true, children: [ { - label: 'Settings', + type: 'link', + label: 'Settings', // todo: add to translation onClick: () => { - history.push('/') // todo: to 'settings' + history.push('/settings') }, - type: 'link', }, ], className: 'pl-4', diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx new file mode 100644 index 0000000000..5e126151da --- /dev/null +++ b/src/settings/Settings.tsx @@ -0,0 +1,5 @@ +import React from 'react' + +const Settings = () =>
Hello
+ +export default Settings From 60b877af9e7770cdd287719fa9c5b8b1ab4f0bea Mon Sep 17 00:00:00 2001 From: kumikokashii Date: Mon, 25 May 2020 13:46:07 -0700 Subject: [PATCH 3/9] feat(settings page): add title and example content to settings page --- src/settings/Settings.tsx | 61 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 59 insertions(+), 2 deletions(-) diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index 5e126151da..ab3a24e75e 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -1,5 +1,62 @@ -import React from 'react' +import React, { useState } from 'react' -const Settings = () =>
Hello
+import SelectWithLabelFormGroup from '../components/input/SelectWithLableFormGroup' +import useTitle from '../page-header/useTitle' + +const Settings = () => { + useTitle('Settings') // todo: get from translation + + // todo: pull from real file + const languageOptions = [ + { label: 'English', value: 'en' }, + { label: 'Italian', value: 'it' }, + ] + + const [language, setLanguage] = useState(languageOptions[0].value) + + const onLanguageChange = (event: React.ChangeEvent) => { + setLanguage(event.target.value) + } + + // Temp + const tempOptions = [ + { label: 'Option A', value: 'option-a' }, + { label: 'Option B', value: 'option-b' }, + ] + + const [temp, setTemp] = useState(tempOptions[0].value) + + const onTempChange = (event: React.ChangeEvent) => { + setTemp(event.target.value) + } + + return ( + <> + {/* language selection */} +
+ +
+ + {/* temp: another setting */} +
+ +
+ + ) +} export default Settings From 54c389cdb04caf4eec48efdfaa6e6e1704f00551 Mon Sep 17 00:00:00 2001 From: kumikokashii Date: Mon, 25 May 2020 16:45:11 -0700 Subject: [PATCH 4/9] feat(settings page): add language selection --- src/components/Navbar.tsx | 2 +- src/i18n.ts | 14 +++++++++- src/locales/ar/translations/index.ts | 2 ++ src/locales/ar/translations/settings/index.ts | 5 ++++ src/locales/de/translations/index.ts | 2 ++ src/locales/de/translations/settings/index.ts | 5 ++++ src/locales/enUs/translations/index.ts | 2 ++ .../enUs/translations/settings/index.ts | 8 ++++++ src/locales/es/translations/index.ts | 2 ++ src/locales/es/translations/settings/index.ts | 5 ++++ src/locales/fr/translations/index.ts | 2 ++ src/locales/fr/translations/settings/index.ts | 5 ++++ src/locales/in/translations/index.ts | 2 ++ src/locales/in/translations/settings/index.ts | 5 ++++ src/locales/it/translations/index.ts | 2 ++ src/locales/it/translations/settings/index.ts | 5 ++++ src/locales/ja/translations/index.ts | 2 ++ src/locales/ja/translations/settings/index.ts | 8 ++++++ src/locales/ptBr/translations/index.ts | 2 ++ .../ptBr/translations/settings/index.ts | 5 ++++ src/locales/ru/translations/index.ts | 2 ++ src/locales/ru/translations/settings/index.ts | 5 ++++ src/locales/zr/translations/index.ts | 2 ++ src/locales/zr/translations/settings/index.ts | 5 ++++ src/settings/Settings.tsx | 26 +++++++++++-------- 25 files changed, 112 insertions(+), 13 deletions(-) create mode 100644 src/locales/ar/translations/settings/index.ts create mode 100644 src/locales/de/translations/settings/index.ts create mode 100644 src/locales/enUs/translations/settings/index.ts create mode 100644 src/locales/es/translations/settings/index.ts create mode 100644 src/locales/fr/translations/settings/index.ts create mode 100644 src/locales/in/translations/settings/index.ts create mode 100644 src/locales/it/translations/settings/index.ts create mode 100644 src/locales/ja/translations/settings/index.ts create mode 100644 src/locales/ptBr/translations/settings/index.ts create mode 100644 src/locales/ru/translations/settings/index.ts create mode 100644 src/locales/zr/translations/settings/index.ts diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 325447d18d..2283873055 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -106,7 +106,7 @@ const Navbar = () => { children: [ { type: 'link', - label: 'Settings', // todo: add to translation + label: t('settings.label'), onClick: () => { history.push('/settings') }, diff --git a/src/i18n.ts b/src/i18n.ts index 91e580f582..553e72ef48 100644 --- a/src/i18n.ts +++ b/src/i18n.ts @@ -14,38 +14,49 @@ import translationPtBR from './locales/ptBr/translations' import translationRU from './locales/ru/translations' import translationZR from './locales/zr/translations' -const resources = { +const resources: { [language: string]: any } = { it: { + name: 'Italian', translation: translationIT, }, ar: { + name: 'Arabic', translation: translationAR, }, de: { + name: 'German', translation: translationDE, }, en: { + name: 'English, American', translation: translationEnUs, }, es: { + name: 'Spanish', translation: translationES, }, fr: { + name: 'French', translation: translationFR, }, in: { + name: 'Indonesian', translation: translationIN, }, ja: { + name: 'Japanese', translation: translationJA, }, pt: { + name: 'Portuguese', translation: translationPtBR, }, ru: { + name: 'Russian', translation: translationRU, }, zr: { + name: 'Chinese', translation: translationZR, }, } @@ -70,3 +81,4 @@ i18n }) export default i18n +export { resources } diff --git a/src/locales/ar/translations/index.ts b/src/locales/ar/translations/index.ts index e948f4340c..62cbb42d7b 100644 --- a/src/locales/ar/translations/index.ts +++ b/src/locales/ar/translations/index.ts @@ -2,10 +2,12 @@ import actions from './actions' import dashboard from './dashboard' import patient from './patient' import patients from './patients' +import settings from './settings' export default { ...actions, ...dashboard, ...patient, ...patients, + ...settings, } diff --git a/src/locales/ar/translations/settings/index.ts b/src/locales/ar/translations/settings/index.ts new file mode 100644 index 0000000000..334fa9ec29 --- /dev/null +++ b/src/locales/ar/translations/settings/index.ts @@ -0,0 +1,5 @@ +export default { + settings: { + label: '???', + }, +} diff --git a/src/locales/de/translations/index.ts b/src/locales/de/translations/index.ts index e948f4340c..62cbb42d7b 100644 --- a/src/locales/de/translations/index.ts +++ b/src/locales/de/translations/index.ts @@ -2,10 +2,12 @@ import actions from './actions' import dashboard from './dashboard' import patient from './patient' import patients from './patients' +import settings from './settings' export default { ...actions, ...dashboard, ...patient, ...patients, + ...settings, } diff --git a/src/locales/de/translations/settings/index.ts b/src/locales/de/translations/settings/index.ts new file mode 100644 index 0000000000..334fa9ec29 --- /dev/null +++ b/src/locales/de/translations/settings/index.ts @@ -0,0 +1,5 @@ +export default { + settings: { + label: '???', + }, +} diff --git a/src/locales/enUs/translations/index.ts b/src/locales/enUs/translations/index.ts index 6afd27431e..ae9f29343f 100644 --- a/src/locales/enUs/translations/index.ts +++ b/src/locales/enUs/translations/index.ts @@ -5,6 +5,7 @@ import labs from './labs' import patient from './patient' import patients from './patients' import scheduling from './scheduling' +import settings from './settings' import sex from './sex' import states from './states' @@ -18,4 +19,5 @@ export default { ...sex, ...labs, ...incidents, + ...settings, } diff --git a/src/locales/enUs/translations/settings/index.ts b/src/locales/enUs/translations/settings/index.ts new file mode 100644 index 0000000000..5b8a935324 --- /dev/null +++ b/src/locales/enUs/translations/settings/index.ts @@ -0,0 +1,8 @@ +export default { + settings: { + label: 'Settings', + language: { + label: 'Language', + }, + }, +} diff --git a/src/locales/es/translations/index.ts b/src/locales/es/translations/index.ts index 5307ce625c..0a23abd324 100644 --- a/src/locales/es/translations/index.ts +++ b/src/locales/es/translations/index.ts @@ -3,6 +3,7 @@ import dashboard from './dashboard' import labs from './labs' import patient from './patient' import patients from './patients' +import settings from './settings' export default { ...actions, @@ -10,4 +11,5 @@ export default { ...labs, ...patient, ...patients, + ...settings, } diff --git a/src/locales/es/translations/settings/index.ts b/src/locales/es/translations/settings/index.ts new file mode 100644 index 0000000000..334fa9ec29 --- /dev/null +++ b/src/locales/es/translations/settings/index.ts @@ -0,0 +1,5 @@ +export default { + settings: { + label: '???', + }, +} diff --git a/src/locales/fr/translations/index.ts b/src/locales/fr/translations/index.ts index 5235352afc..887398b139 100644 --- a/src/locales/fr/translations/index.ts +++ b/src/locales/fr/translations/index.ts @@ -4,6 +4,7 @@ import labs from './labs' import patient from './patient' import patients from './patients' import scheduling from './scheduling' +import settings from './settings' import sex from './sex' import states from './states' @@ -16,4 +17,5 @@ export default { ...states, ...sex, ...labs, + ...settings, } diff --git a/src/locales/fr/translations/settings/index.ts b/src/locales/fr/translations/settings/index.ts new file mode 100644 index 0000000000..334fa9ec29 --- /dev/null +++ b/src/locales/fr/translations/settings/index.ts @@ -0,0 +1,5 @@ +export default { + settings: { + label: '???', + }, +} diff --git a/src/locales/in/translations/index.ts b/src/locales/in/translations/index.ts index 5307ce625c..0a23abd324 100644 --- a/src/locales/in/translations/index.ts +++ b/src/locales/in/translations/index.ts @@ -3,6 +3,7 @@ import dashboard from './dashboard' import labs from './labs' import patient from './patient' import patients from './patients' +import settings from './settings' export default { ...actions, @@ -10,4 +11,5 @@ export default { ...labs, ...patient, ...patients, + ...settings, } diff --git a/src/locales/in/translations/settings/index.ts b/src/locales/in/translations/settings/index.ts new file mode 100644 index 0000000000..334fa9ec29 --- /dev/null +++ b/src/locales/in/translations/settings/index.ts @@ -0,0 +1,5 @@ +export default { + settings: { + label: '???', + }, +} diff --git a/src/locales/it/translations/index.ts b/src/locales/it/translations/index.ts index 5235352afc..887398b139 100644 --- a/src/locales/it/translations/index.ts +++ b/src/locales/it/translations/index.ts @@ -4,6 +4,7 @@ import labs from './labs' import patient from './patient' import patients from './patients' import scheduling from './scheduling' +import settings from './settings' import sex from './sex' import states from './states' @@ -16,4 +17,5 @@ export default { ...states, ...sex, ...labs, + ...settings, } diff --git a/src/locales/it/translations/settings/index.ts b/src/locales/it/translations/settings/index.ts new file mode 100644 index 0000000000..334fa9ec29 --- /dev/null +++ b/src/locales/it/translations/settings/index.ts @@ -0,0 +1,5 @@ +export default { + settings: { + label: '???', + }, +} diff --git a/src/locales/ja/translations/index.ts b/src/locales/ja/translations/index.ts index 5307ce625c..0a23abd324 100644 --- a/src/locales/ja/translations/index.ts +++ b/src/locales/ja/translations/index.ts @@ -3,6 +3,7 @@ import dashboard from './dashboard' import labs from './labs' import patient from './patient' import patients from './patients' +import settings from './settings' export default { ...actions, @@ -10,4 +11,5 @@ export default { ...labs, ...patient, ...patients, + ...settings, } diff --git a/src/locales/ja/translations/settings/index.ts b/src/locales/ja/translations/settings/index.ts new file mode 100644 index 0000000000..ea2539d3fe --- /dev/null +++ b/src/locales/ja/translations/settings/index.ts @@ -0,0 +1,8 @@ +export default { + settings: { + label: '設定', + language: { + label: '言語', + }, + }, +} diff --git a/src/locales/ptBr/translations/index.ts b/src/locales/ptBr/translations/index.ts index 5235352afc..887398b139 100644 --- a/src/locales/ptBr/translations/index.ts +++ b/src/locales/ptBr/translations/index.ts @@ -4,6 +4,7 @@ import labs from './labs' import patient from './patient' import patients from './patients' import scheduling from './scheduling' +import settings from './settings' import sex from './sex' import states from './states' @@ -16,4 +17,5 @@ export default { ...states, ...sex, ...labs, + ...settings, } diff --git a/src/locales/ptBr/translations/settings/index.ts b/src/locales/ptBr/translations/settings/index.ts new file mode 100644 index 0000000000..334fa9ec29 --- /dev/null +++ b/src/locales/ptBr/translations/settings/index.ts @@ -0,0 +1,5 @@ +export default { + settings: { + label: '???', + }, +} diff --git a/src/locales/ru/translations/index.ts b/src/locales/ru/translations/index.ts index 5307ce625c..0a23abd324 100644 --- a/src/locales/ru/translations/index.ts +++ b/src/locales/ru/translations/index.ts @@ -3,6 +3,7 @@ import dashboard from './dashboard' import labs from './labs' import patient from './patient' import patients from './patients' +import settings from './settings' export default { ...actions, @@ -10,4 +11,5 @@ export default { ...labs, ...patient, ...patients, + ...settings, } diff --git a/src/locales/ru/translations/settings/index.ts b/src/locales/ru/translations/settings/index.ts new file mode 100644 index 0000000000..334fa9ec29 --- /dev/null +++ b/src/locales/ru/translations/settings/index.ts @@ -0,0 +1,5 @@ +export default { + settings: { + label: '???', + }, +} diff --git a/src/locales/zr/translations/index.ts b/src/locales/zr/translations/index.ts index 5307ce625c..0a23abd324 100644 --- a/src/locales/zr/translations/index.ts +++ b/src/locales/zr/translations/index.ts @@ -3,6 +3,7 @@ import dashboard from './dashboard' import labs from './labs' import patient from './patient' import patients from './patients' +import settings from './settings' export default { ...actions, @@ -10,4 +11,5 @@ export default { ...labs, ...patient, ...patients, + ...settings, } diff --git a/src/locales/zr/translations/settings/index.ts b/src/locales/zr/translations/settings/index.ts new file mode 100644 index 0000000000..334fa9ec29 --- /dev/null +++ b/src/locales/zr/translations/settings/index.ts @@ -0,0 +1,5 @@ +export default { + settings: { + label: '???', + }, +} diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index ab3a24e75e..af45529eed 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -1,21 +1,25 @@ import React, { useState } from 'react' +import { useTranslation } from 'react-i18next' import SelectWithLabelFormGroup from '../components/input/SelectWithLableFormGroup' +import i18n, { resources } from '../i18n' import useTitle from '../page-header/useTitle' const Settings = () => { - useTitle('Settings') // todo: get from translation + const { t } = useTranslation() + useTitle(t('settings.label')) - // todo: pull from real file - const languageOptions = [ - { label: 'English', value: 'en' }, - { label: 'Italian', value: 'it' }, - ] - - const [language, setLanguage] = useState(languageOptions[0].value) + // Language section + const languageOptions = Object.keys(resources) + .map((abbr) => ({ + label: resources[abbr].name, + value: abbr, + })) + .sort((a, b) => (a.label > b.label ? 1 : -1)) const onLanguageChange = (event: React.ChangeEvent) => { - setLanguage(event.target.value) + const selected = event.target.value + i18n.changeLanguage(selected) } // Temp @@ -36,8 +40,8 @@ const Settings = () => {
Date: Mon, 25 May 2020 17:26:08 -0700 Subject: [PATCH 5/9] feat(settings page): removed unknown translation --- src/locales/ar/translations/settings/index.ts | 4 +--- src/locales/de/translations/settings/index.ts | 4 +--- src/locales/es/translations/settings/index.ts | 4 +--- src/locales/fr/translations/settings/index.ts | 4 +--- src/locales/in/translations/settings/index.ts | 4 +--- src/locales/it/translations/settings/index.ts | 4 +--- src/locales/ptBr/translations/settings/index.ts | 4 +--- src/locales/ru/translations/settings/index.ts | 4 +--- src/locales/zr/translations/settings/index.ts | 4 +--- 9 files changed, 9 insertions(+), 27 deletions(-) diff --git a/src/locales/ar/translations/settings/index.ts b/src/locales/ar/translations/settings/index.ts index 334fa9ec29..683884e258 100644 --- a/src/locales/ar/translations/settings/index.ts +++ b/src/locales/ar/translations/settings/index.ts @@ -1,5 +1,3 @@ export default { - settings: { - label: '???', - }, + settings: {}, } diff --git a/src/locales/de/translations/settings/index.ts b/src/locales/de/translations/settings/index.ts index 334fa9ec29..683884e258 100644 --- a/src/locales/de/translations/settings/index.ts +++ b/src/locales/de/translations/settings/index.ts @@ -1,5 +1,3 @@ export default { - settings: { - label: '???', - }, + settings: {}, } diff --git a/src/locales/es/translations/settings/index.ts b/src/locales/es/translations/settings/index.ts index 334fa9ec29..683884e258 100644 --- a/src/locales/es/translations/settings/index.ts +++ b/src/locales/es/translations/settings/index.ts @@ -1,5 +1,3 @@ export default { - settings: { - label: '???', - }, + settings: {}, } diff --git a/src/locales/fr/translations/settings/index.ts b/src/locales/fr/translations/settings/index.ts index 334fa9ec29..683884e258 100644 --- a/src/locales/fr/translations/settings/index.ts +++ b/src/locales/fr/translations/settings/index.ts @@ -1,5 +1,3 @@ export default { - settings: { - label: '???', - }, + settings: {}, } diff --git a/src/locales/in/translations/settings/index.ts b/src/locales/in/translations/settings/index.ts index 334fa9ec29..683884e258 100644 --- a/src/locales/in/translations/settings/index.ts +++ b/src/locales/in/translations/settings/index.ts @@ -1,5 +1,3 @@ export default { - settings: { - label: '???', - }, + settings: {}, } diff --git a/src/locales/it/translations/settings/index.ts b/src/locales/it/translations/settings/index.ts index 334fa9ec29..683884e258 100644 --- a/src/locales/it/translations/settings/index.ts +++ b/src/locales/it/translations/settings/index.ts @@ -1,5 +1,3 @@ export default { - settings: { - label: '???', - }, + settings: {}, } diff --git a/src/locales/ptBr/translations/settings/index.ts b/src/locales/ptBr/translations/settings/index.ts index 334fa9ec29..683884e258 100644 --- a/src/locales/ptBr/translations/settings/index.ts +++ b/src/locales/ptBr/translations/settings/index.ts @@ -1,5 +1,3 @@ export default { - settings: { - label: '???', - }, + settings: {}, } diff --git a/src/locales/ru/translations/settings/index.ts b/src/locales/ru/translations/settings/index.ts index 334fa9ec29..683884e258 100644 --- a/src/locales/ru/translations/settings/index.ts +++ b/src/locales/ru/translations/settings/index.ts @@ -1,5 +1,3 @@ export default { - settings: { - label: '???', - }, + settings: {}, } diff --git a/src/locales/zr/translations/settings/index.ts b/src/locales/zr/translations/settings/index.ts index 334fa9ec29..683884e258 100644 --- a/src/locales/zr/translations/settings/index.ts +++ b/src/locales/zr/translations/settings/index.ts @@ -1,5 +1,3 @@ export default { - settings: { - label: '???', - }, + settings: {}, } From 8f2bc8887f4b44ddd1201f3115694d499224e17f Mon Sep 17 00:00:00 2001 From: kumikokashii Date: Wed, 27 May 2020 14:52:49 -0700 Subject: [PATCH 6/9] refactor(settings page & language selector): separate language selector --- src/components/input/LanguageSelector.tsx | 34 +++++++++++++ src/settings/Settings.tsx | 60 ++++------------------- 2 files changed, 43 insertions(+), 51 deletions(-) create mode 100644 src/components/input/LanguageSelector.tsx diff --git a/src/components/input/LanguageSelector.tsx b/src/components/input/LanguageSelector.tsx new file mode 100644 index 0000000000..5fc90334b6 --- /dev/null +++ b/src/components/input/LanguageSelector.tsx @@ -0,0 +1,34 @@ +import _ from 'lodash' +import React from 'react' +import { useTranslation } from 'react-i18next' + +import i18n, { resources } from '../../i18n' +import SelectWithLabelFormGroup from './SelectWithLableFormGroup' + +const LanguageSelector = () => { + const { t } = useTranslation() + + let languageOptions = Object.keys(resources).map((abbr) => ({ + label: resources[abbr].name, + value: abbr, + })) + languageOptions = _.sortBy(languageOptions, (o) => o.label) + + const onLanguageChange = (event: React.ChangeEvent) => { + const selected = event.target.value + i18n.changeLanguage(selected) + } + + return ( + + ) +} + +export default LanguageSelector diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index af45529eed..74df245d45 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -1,64 +1,22 @@ -import React, { useState } from 'react' +import { Row, Column } from '@hospitalrun/components' +import React from 'react' import { useTranslation } from 'react-i18next' -import SelectWithLabelFormGroup from '../components/input/SelectWithLableFormGroup' -import i18n, { resources } from '../i18n' +import LanguageSelector from '../components/input/LanguageSelector' import useTitle from '../page-header/useTitle' const Settings = () => { const { t } = useTranslation() useTitle(t('settings.label')) - // Language section - const languageOptions = Object.keys(resources) - .map((abbr) => ({ - label: resources[abbr].name, - value: abbr, - })) - .sort((a, b) => (a.label > b.label ? 1 : -1)) - - const onLanguageChange = (event: React.ChangeEvent) => { - const selected = event.target.value - i18n.changeLanguage(selected) - } - - // Temp - const tempOptions = [ - { label: 'Option A', value: 'option-a' }, - { label: 'Option B', value: 'option-b' }, - ] - - const [temp, setTemp] = useState(tempOptions[0].value) - - const onTempChange = (event: React.ChangeEvent) => { - setTemp(event.target.value) - } - return ( <> - {/* language selection */} -
- -
- - {/* temp: another setting */} -
- -
+ + + + + + ) } From 494dc2e88822fbd3769199da15e608a4883b7953 Mon Sep 17 00:00:00 2001 From: kumikokashii Date: Wed, 27 May 2020 17:15:24 -0700 Subject: [PATCH 7/9] test(settings page): add tests for settings --- src/__tests__/HospitalRun.test.tsx | 22 +++++++++++++++ src/__tests__/settings/Settings.test.tsx | 34 ++++++++++++++++++++++++ 2 files changed, 56 insertions(+) create mode 100644 src/__tests__/settings/Settings.test.tsx diff --git a/src/__tests__/HospitalRun.test.tsx b/src/__tests__/HospitalRun.test.tsx index 049e966179..31a05117b3 100644 --- a/src/__tests__/HospitalRun.test.tsx +++ b/src/__tests__/HospitalRun.test.tsx @@ -17,6 +17,7 @@ import Incidents from '../incidents/Incidents' import ViewLabs from '../labs/ViewLabs' import Permissions from '../model/Permissions' import Appointments from '../scheduling/appointments/Appointments' +import Settings from '../settings/Settings' import { RootState } from '../store' const mockStore = createMockStore([thunk]) @@ -170,6 +171,27 @@ describe('HospitalRun', () => { expect(wrapper.find(Dashboard)).toHaveLength(1) }) }) + + describe('/settings', () => { + it('should render the Settings component when /settings is accessed', async () => { + const store = mockStore({ + title: 'test', + user: { permissions: [] }, + breadcrumbs: { breadcrumbs: [] }, + components: { sidebarCollapsed: false }, + } as any) + + const wrapper = mount( + + + + + , + ) + + expect(wrapper.find(Settings)).toHaveLength(1) + }) + }) }) describe('layout', () => { diff --git a/src/__tests__/settings/Settings.test.tsx b/src/__tests__/settings/Settings.test.tsx new file mode 100644 index 0000000000..2efe091091 --- /dev/null +++ b/src/__tests__/settings/Settings.test.tsx @@ -0,0 +1,34 @@ +import '../../__mocks__/matchMediaMock' + +import { mount } from 'enzyme' +import { createMemoryHistory } from 'history' +import React from 'react' +import { Provider } from 'react-redux' +import { Router } from 'react-router-dom' +import createMockStore from 'redux-mock-store' +import thunk from 'redux-thunk' + +import * as titleUtil from '../../page-header/useTitle' +import Settings from '../../settings/Settings' +import { RootState } from '../../store' + +const mockStore = createMockStore([thunk]) + +describe('Settings', () => { + const store = mockStore({ title: 'test' } as any) + const history = createMemoryHistory() + const titleSpy: any = jest.spyOn(titleUtil, 'default') + history.push('/settings') + + mount( + + + + + , + ) + + it('should have Settings as the title', () => { + expect(titleSpy).toHaveBeenCalledWith('settings.label') + }) +}) From 08e08e6e75a0a62800e36d05d2e4157193009ed6 Mon Sep 17 00:00:00 2001 From: kumikokashii Date: Wed, 27 May 2020 17:59:46 -0700 Subject: [PATCH 8/9] test(settings page): organize tests --- src/__tests__/settings/Settings.test.tsx | 39 +++++++++++++++--------- 1 file changed, 24 insertions(+), 15 deletions(-) diff --git a/src/__tests__/settings/Settings.test.tsx b/src/__tests__/settings/Settings.test.tsx index 2efe091091..d4820d513b 100644 --- a/src/__tests__/settings/Settings.test.tsx +++ b/src/__tests__/settings/Settings.test.tsx @@ -15,20 +15,29 @@ import { RootState } from '../../store' const mockStore = createMockStore([thunk]) describe('Settings', () => { - const store = mockStore({ title: 'test' } as any) - const history = createMemoryHistory() - const titleSpy: any = jest.spyOn(titleUtil, 'default') - history.push('/settings') - - mount( - - - - - , - ) - - it('should have Settings as the title', () => { - expect(titleSpy).toHaveBeenCalledWith('settings.label') + const setup = () => { + jest.spyOn(titleUtil, 'default') + + const store = mockStore({ title: 'test' } as any) + + const history = createMemoryHistory() + history.push('/settings') + + const wrapper = mount( + + + + + , + ) + + return wrapper + } + + describe('layout', () => { + it('should set the title', () => { + setup() + expect(titleUtil.default).toHaveBeenCalledWith('settings.label') + }) }) }) From cf7bb029ffb720d4b44e6fb809707c86ea4ac405 Mon Sep 17 00:00:00 2001 From: kumikokashii Date: Wed, 27 May 2020 18:14:18 -0700 Subject: [PATCH 9/9] build: ~ instead of ^ for components ver --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7cc2b63d42..8193f2552b 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "private": false, "license": "MIT", "dependencies": { - "@hospitalrun/components": "^1.6.0", + "@hospitalrun/components": "~1.6.0", "@reduxjs/toolkit": "~1.3.0", "@types/escape-string-regexp": "~2.0.1", "@types/pouchdb-find": "~6.3.4",