From eed729ec345e968fa2396250f09d58763c922e7b Mon Sep 17 00:00:00 2001 From: linus345 Date: Wed, 8 Jul 2020 17:00:58 +0200 Subject: [PATCH 1/3] feat(menu): added icons to items in the hamburger menu closes #2209 --- .../shared/components/navbar/Navbar.test.tsx | 15 +++++++++++---- src/shared/components/navbar/Navbar.tsx | 1 + src/shared/components/navbar/pageMap.tsx | 11 ++++++++++- src/shared/hooks/useTranslator.ts | 7 +------ 4 files changed, 23 insertions(+), 11 deletions(-) diff --git a/src/__tests__/shared/components/navbar/Navbar.test.tsx b/src/__tests__/shared/components/navbar/Navbar.test.tsx index 36d7487247..0e856805b0 100644 --- a/src/__tests__/shared/components/navbar/Navbar.test.tsx +++ b/src/__tests__/shared/components/navbar/Navbar.test.tsx @@ -58,9 +58,14 @@ describe('Navbar', () => { const hospitalRunNavbar = wrapper.find(HospitalRunNavbar) const hamberger = hospitalRunNavbar.find('.nav-hamberger') const { children } = hamberger.first().props() as any - - expect(children[0].props.children).toEqual([undefined, 'dashboard.label']) - expect(children[1].props.children).toEqual([undefined, 'patients.newPatient']) + const [dashboardIcon, dashboardLabel] = children[0].props.children + const [newPatientIcon, newPatientLabel] = children[1].props.children + + expect(dashboardIcon.props.icon).toEqual('dashboard') + expect(dashboardLabel).toEqual('dashboard.label') + expect(newPatientIcon.props.icon).toEqual('patient-add') + expect(newPatientLabel).toEqual('patients.newPatient') + // settings doesn't have an icon which is why index 0 should be undefined expect(children[children.length - 1].props.children).toEqual([undefined, 'settings.label']) }) @@ -141,8 +146,10 @@ describe('Navbar', () => { const hospitalRunNavbar = wrapper.find(HospitalRunNavbar) const addNew = hospitalRunNavbar.find('.nav-add-new') const { children } = addNew.first().props() as any + const [icon, label] = children[0].props.children - expect(children[0].props.children).toEqual([undefined, 'patients.newPatient']) + expect(label).toEqual('patients.newPatient') + expect(icon.props.icon).toEqual('patient-add') }) it('should not show a shortcut if user does not have a permission', () => { diff --git a/src/shared/components/navbar/Navbar.tsx b/src/shared/components/navbar/Navbar.tsx index 58eed83e21..80b37abcdf 100644 --- a/src/shared/components/navbar/Navbar.tsx +++ b/src/shared/components/navbar/Navbar.tsx @@ -32,6 +32,7 @@ const Navbar = () => { .map((page) => ({ type: 'link', label: t(page.label), + icon: page.icon, onClick: () => { navigateTo(page.path) }, diff --git a/src/shared/components/navbar/pageMap.tsx b/src/shared/components/navbar/pageMap.tsx index 37c889edeb..2a98929be5 100644 --- a/src/shared/components/navbar/pageMap.tsx +++ b/src/shared/components/navbar/pageMap.tsx @@ -1,6 +1,6 @@ import Permissions from '../../model/Permissions' -type Page = { permission: Permissions | null; label: string; path: string } +type Page = { permission: Permissions | null; label: string; path: string; icon?: string } const pageMap: { [key: string]: Page @@ -9,46 +9,55 @@ const pageMap: { permission: null, label: 'dashboard.label', path: '/', + icon: 'dashboard', }, newPatient: { permission: Permissions.WritePatients, label: 'patients.newPatient', path: '/patients/new', + icon: 'patient-add', }, viewPatients: { permission: Permissions.ReadPatients, label: 'patients.patientsList', path: '/patients', + icon: 'incident', }, newAppointment: { permission: Permissions.WriteAppointments, label: 'scheduling.appointments.new', path: '/appointments/new', + icon: 'appointment-add', }, viewAppointments: { permission: Permissions.ReadAppointments, label: 'scheduling.appointments.schedule', path: '/appointments', + icon: 'incident', }, newLab: { permission: Permissions.RequestLab, label: 'labs.requests.new', path: '/labs/new', + icon: 'add', }, viewLabs: { permission: Permissions.ViewLabs, label: 'labs.requests.label', path: '/labs', + icon: 'incident', }, newIncident: { permission: Permissions.ReportIncident, label: 'incidents.reports.new', path: '/incidents/new', + icon: 'add', }, viewIncidents: { permission: Permissions.ViewIncidents, label: 'incidents.reports.label', path: '/incidents', + icon: 'incident', }, settings: { permission: null, diff --git a/src/shared/hooks/useTranslator.ts b/src/shared/hooks/useTranslator.ts index 7a55183aaf..353c81cf18 100644 --- a/src/shared/hooks/useTranslator.ts +++ b/src/shared/hooks/useTranslator.ts @@ -4,12 +4,7 @@ import { useTranslation } from 'react-i18next' export default function useTranslator() { const { t } = useTranslation() - const translate = useCallback( - (key: any): any => { - return key !== undefined ? t(key) : undefined - }, - [t], - ) + const translate = useCallback((key: any): any => (key !== undefined ? t(key) : undefined), [t]) return { t: translate, From 73a0f11ceb13217494754dfd0f3d320d872363ce Mon Sep 17 00:00:00 2001 From: linus345 Date: Wed, 8 Jul 2020 17:00:58 +0200 Subject: [PATCH 2/3] feat(menu): added icons to items in the hamburger menu closes #2209 --- .../shared/components/navbar/Navbar.test.tsx | 15 +++++++++++---- src/shared/components/navbar/Navbar.tsx | 1 + src/shared/components/navbar/pageMap.tsx | 11 ++++++++++- 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/src/__tests__/shared/components/navbar/Navbar.test.tsx b/src/__tests__/shared/components/navbar/Navbar.test.tsx index 36d7487247..0e856805b0 100644 --- a/src/__tests__/shared/components/navbar/Navbar.test.tsx +++ b/src/__tests__/shared/components/navbar/Navbar.test.tsx @@ -58,9 +58,14 @@ describe('Navbar', () => { const hospitalRunNavbar = wrapper.find(HospitalRunNavbar) const hamberger = hospitalRunNavbar.find('.nav-hamberger') const { children } = hamberger.first().props() as any - - expect(children[0].props.children).toEqual([undefined, 'dashboard.label']) - expect(children[1].props.children).toEqual([undefined, 'patients.newPatient']) + const [dashboardIcon, dashboardLabel] = children[0].props.children + const [newPatientIcon, newPatientLabel] = children[1].props.children + + expect(dashboardIcon.props.icon).toEqual('dashboard') + expect(dashboardLabel).toEqual('dashboard.label') + expect(newPatientIcon.props.icon).toEqual('patient-add') + expect(newPatientLabel).toEqual('patients.newPatient') + // settings doesn't have an icon which is why index 0 should be undefined expect(children[children.length - 1].props.children).toEqual([undefined, 'settings.label']) }) @@ -141,8 +146,10 @@ describe('Navbar', () => { const hospitalRunNavbar = wrapper.find(HospitalRunNavbar) const addNew = hospitalRunNavbar.find('.nav-add-new') const { children } = addNew.first().props() as any + const [icon, label] = children[0].props.children - expect(children[0].props.children).toEqual([undefined, 'patients.newPatient']) + expect(label).toEqual('patients.newPatient') + expect(icon.props.icon).toEqual('patient-add') }) it('should not show a shortcut if user does not have a permission', () => { diff --git a/src/shared/components/navbar/Navbar.tsx b/src/shared/components/navbar/Navbar.tsx index 5f2ddd6f7b..b50e8a147d 100644 --- a/src/shared/components/navbar/Navbar.tsx +++ b/src/shared/components/navbar/Navbar.tsx @@ -32,6 +32,7 @@ const Navbar = () => { .map((page) => ({ type: 'link', label: t(page.label), + icon: page.icon, onClick: () => { navigateTo(page.path) }, diff --git a/src/shared/components/navbar/pageMap.tsx b/src/shared/components/navbar/pageMap.tsx index 37c889edeb..2a98929be5 100644 --- a/src/shared/components/navbar/pageMap.tsx +++ b/src/shared/components/navbar/pageMap.tsx @@ -1,6 +1,6 @@ import Permissions from '../../model/Permissions' -type Page = { permission: Permissions | null; label: string; path: string } +type Page = { permission: Permissions | null; label: string; path: string; icon?: string } const pageMap: { [key: string]: Page @@ -9,46 +9,55 @@ const pageMap: { permission: null, label: 'dashboard.label', path: '/', + icon: 'dashboard', }, newPatient: { permission: Permissions.WritePatients, label: 'patients.newPatient', path: '/patients/new', + icon: 'patient-add', }, viewPatients: { permission: Permissions.ReadPatients, label: 'patients.patientsList', path: '/patients', + icon: 'incident', }, newAppointment: { permission: Permissions.WriteAppointments, label: 'scheduling.appointments.new', path: '/appointments/new', + icon: 'appointment-add', }, viewAppointments: { permission: Permissions.ReadAppointments, label: 'scheduling.appointments.schedule', path: '/appointments', + icon: 'incident', }, newLab: { permission: Permissions.RequestLab, label: 'labs.requests.new', path: '/labs/new', + icon: 'add', }, viewLabs: { permission: Permissions.ViewLabs, label: 'labs.requests.label', path: '/labs', + icon: 'incident', }, newIncident: { permission: Permissions.ReportIncident, label: 'incidents.reports.new', path: '/incidents/new', + icon: 'add', }, viewIncidents: { permission: Permissions.ViewIncidents, label: 'incidents.reports.label', path: '/incidents', + icon: 'incident', }, settings: { permission: null, From c561f890f76b214b1e1ed1263de03a2e7dc55f44 Mon Sep 17 00:00:00 2001 From: linus345 Date: Thu, 9 Jul 2020 10:54:32 +0200 Subject: [PATCH 3/3] started using the settings icon --- src/__tests__/shared/components/navbar/Navbar.test.tsx | 5 +++-- src/shared/components/navbar/pageMap.tsx | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/__tests__/shared/components/navbar/Navbar.test.tsx b/src/__tests__/shared/components/navbar/Navbar.test.tsx index 0e856805b0..f20725f8f6 100644 --- a/src/__tests__/shared/components/navbar/Navbar.test.tsx +++ b/src/__tests__/shared/components/navbar/Navbar.test.tsx @@ -60,13 +60,14 @@ describe('Navbar', () => { const { children } = hamberger.first().props() as any const [dashboardIcon, dashboardLabel] = children[0].props.children const [newPatientIcon, newPatientLabel] = children[1].props.children + const [settingsIcon, settingsLabel] = children[children.length - 1].props.children expect(dashboardIcon.props.icon).toEqual('dashboard') expect(dashboardLabel).toEqual('dashboard.label') expect(newPatientIcon.props.icon).toEqual('patient-add') expect(newPatientLabel).toEqual('patients.newPatient') - // settings doesn't have an icon which is why index 0 should be undefined - expect(children[children.length - 1].props.children).toEqual([undefined, 'settings.label']) + expect(settingsIcon.props.icon).toEqual('setting') + expect(settingsLabel).toEqual('settings.label') }) it('should not show an item if user does not have a permission', () => { diff --git a/src/shared/components/navbar/pageMap.tsx b/src/shared/components/navbar/pageMap.tsx index 2a98929be5..3a503328f7 100644 --- a/src/shared/components/navbar/pageMap.tsx +++ b/src/shared/components/navbar/pageMap.tsx @@ -63,6 +63,7 @@ const pageMap: { permission: null, label: 'settings.label', path: '/settings', + icon: 'setting', }, }