From 66c6e1cdf32fdb46e036443564924a14d0f70520 Mon Sep 17 00:00:00 2001 From: Tran Manh Date: Tue, 20 Jun 2023 16:54:39 +0700 Subject: [PATCH 1/7] [#9] Create the empty dashboard --- src/components/Alert/index.tsx | 2 +- src/components/Dashboard/Empty/index.tsx | 16 +++++++++++ src/components/Dashboard/Header/index.tsx | 35 +++++++++++++++++++++++ src/screens/Dashboard/index.tsx | 22 ++++++-------- tailwind.config.js | 4 ++- 5 files changed, 64 insertions(+), 15 deletions(-) create mode 100644 src/components/Dashboard/Empty/index.tsx create mode 100644 src/components/Dashboard/Header/index.tsx diff --git a/src/components/Alert/index.tsx b/src/components/Alert/index.tsx index b9437a0..8522bc1 100644 --- a/src/components/Alert/index.tsx +++ b/src/components/Alert/index.tsx @@ -12,7 +12,7 @@ const Alert = ({ errors, ...rest }: AlertProps): JSX.Element => (

Error

-
    +
      {errors.map((error, index) => (
    • {error}
      • ))} diff --git a/src/components/Dashboard/Empty/index.tsx b/src/components/Dashboard/Empty/index.tsx new file mode 100644 index 0000000..51cd2e0 --- /dev/null +++ b/src/components/Dashboard/Empty/index.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +const DashboardEmpty = (): JSX.Element => { + return ( +
      +

      😎

      +

      + You‘ve completed all the surveys. +
      + Take a moment. +

      +
      + ); +}; + +export default DashboardEmpty; diff --git a/src/components/Dashboard/Header/index.tsx b/src/components/Dashboard/Header/index.tsx new file mode 100644 index 0000000..37f3bf2 --- /dev/null +++ b/src/components/Dashboard/Header/index.tsx @@ -0,0 +1,35 @@ +import React from 'react'; + +import { ReactComponent as NimbleLogoWhite } from 'assets/images/icons/nimble-logo-white.svg'; + +interface DashboardHeaderProps { + dateTime: string; + daysAgo: string; + profileUrl: string; + children: React.ReactNode; +} +const DashboardHeader = ({ dateTime, daysAgo, profileUrl, children }: DashboardHeaderProps): JSX.Element => { + return ( +
      +
      + + user avatar +
      +
      +
      +
      +

      {dateTime}

      +

      {daysAgo}

      +
      +
      +
      +
      +
      +
      {children}
      +
      +
      +
      + ); +}; + +export default DashboardHeader; diff --git a/src/screens/Dashboard/index.tsx b/src/screens/Dashboard/index.tsx index 65dd228..1b678de 100644 --- a/src/screens/Dashboard/index.tsx +++ b/src/screens/Dashboard/index.tsx @@ -1,20 +1,16 @@ -import React, { useEffect, useState } from 'react'; +import React from 'react'; -import { getToken } from 'helpers/authentication'; +import DashboardEmpty from 'components/Dashboard/Empty'; +import DashboardHeader from 'components/Dashboard/Header'; const DashBoardScreen = (): JSX.Element => { - // TODO This is a test. Will remove it later. - const [token, setToken] = useState(''); - - useEffect(() => { - const userToken = getToken(); - if (userToken) { - setToken(userToken.accessToken); - } - }, []); return ( -
      -

      Welcome to your Dashboard {token}

      +
      + +
      + +
      +
      ); }; diff --git a/tailwind.config.js b/tailwind.config.js index 169480f..5170301 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -11,9 +11,11 @@ module.exports = { 'black-raisin': '#252525', }, fontSize: { - xSmall: ['13px', '18px'], + 'x-small': ['13px', '18px'], small: ['15px', '20px'], regular: ['17px', '22px'], + large: ['28px', '34px'], + 'x-large': ['34px', '41px'], }, backgroundImage: { 'sign-in': "url('assets/images/illustrations/background-sign-in.png')", From cd8eccb17bc1c54fcc15b8a4d3c788001d9215ce Mon Sep 17 00:00:00 2001 From: Tran Manh Date: Wed, 21 Jun 2023 14:39:42 +0700 Subject: [PATCH 2/7] [#9] Update layout for content --- src/screens/Dashboard/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/Dashboard/index.tsx b/src/screens/Dashboard/index.tsx index 1b678de..49c72d1 100644 --- a/src/screens/Dashboard/index.tsx +++ b/src/screens/Dashboard/index.tsx @@ -7,7 +7,7 @@ const DashBoardScreen = (): JSX.Element => { return (
      -
      +
      From dc1fefd4e969cb173fbc925c57678029301d1d2e Mon Sep 17 00:00:00 2001 From: Tran Manh Date: Wed, 21 Jun 2023 14:59:53 +0700 Subject: [PATCH 3/7] [#9] Modify padding top --- src/components/Dashboard/Header/index.tsx | 2 +- src/screens/Dashboard/index.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Dashboard/Header/index.tsx b/src/components/Dashboard/Header/index.tsx index 37f3bf2..09fad3f 100644 --- a/src/components/Dashboard/Header/index.tsx +++ b/src/components/Dashboard/Header/index.tsx @@ -11,7 +11,7 @@ interface DashboardHeaderProps { const DashboardHeader = ({ dateTime, daysAgo, profileUrl, children }: DashboardHeaderProps): JSX.Element => { return (
      -
      +
      user avatar
      diff --git a/src/screens/Dashboard/index.tsx b/src/screens/Dashboard/index.tsx index 49c72d1..b02a0a2 100644 --- a/src/screens/Dashboard/index.tsx +++ b/src/screens/Dashboard/index.tsx @@ -5,9 +5,9 @@ import DashboardHeader from 'components/Dashboard/Header'; const DashBoardScreen = (): JSX.Element => { return ( -
      +
      -
      +
      From 67d9349ddf4e77c8530adf194139ffd2c6292d5b Mon Sep 17 00:00:00 2001 From: Tran Manh Date: Tue, 27 Jun 2023 17:08:38 +0700 Subject: [PATCH 4/7] [#9] Update unittest for components --- src/components/Dashboard/Empty/index.test.tsx | 17 +++++++++++ src/components/Dashboard/Empty/index.tsx | 8 +++-- .../Dashboard/Header/index.test.tsx | 30 +++++++++++++++++++ src/components/Dashboard/Header/index.tsx | 5 ++-- 4 files changed, 56 insertions(+), 4 deletions(-) create mode 100644 src/components/Dashboard/Empty/index.test.tsx create mode 100644 src/components/Dashboard/Header/index.test.tsx diff --git a/src/components/Dashboard/Empty/index.test.tsx b/src/components/Dashboard/Empty/index.test.tsx new file mode 100644 index 0000000..226a65c --- /dev/null +++ b/src/components/Dashboard/Empty/index.test.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import { render, screen } from '@testing-library/react'; + +import DashboardEmpty from '.'; + +describe('DashboardEmpty', () => { + const dataTestId = 'dashboard-empty'; + it('renders DashboardEmpty and its components', () => { + render(); + + const dashboardEmpty = screen.getByTestId(dataTestId); + + expect(dashboardEmpty).toBeVisible(); + expect(dashboardEmpty).toHaveTextContent('😎You‘ve completed all the surveys.Take a moment.'); + }); +}); diff --git a/src/components/Dashboard/Empty/index.tsx b/src/components/Dashboard/Empty/index.tsx index 51cd2e0..13a06f1 100644 --- a/src/components/Dashboard/Empty/index.tsx +++ b/src/components/Dashboard/Empty/index.tsx @@ -1,8 +1,12 @@ import React from 'react'; -const DashboardEmpty = (): JSX.Element => { +interface DashboardEmptyProps { + 'data-test-id'?: string; +} + +const DashboardEmpty = ({ ...attributes }: DashboardEmptyProps): JSX.Element => { return ( -
      +

      😎

      You‘ve completed all the surveys. diff --git a/src/components/Dashboard/Header/index.test.tsx b/src/components/Dashboard/Header/index.test.tsx new file mode 100644 index 0000000..ee05ac2 --- /dev/null +++ b/src/components/Dashboard/Header/index.test.tsx @@ -0,0 +1,30 @@ +import React from 'react'; + +import { render, screen } from '@testing-library/react'; + +import DashboardHeader from '.'; + +describe('DashboardHeader', () => { + const dataTestId = 'dashboard-header'; + it('renders DashboardHeader and its components', () => { + const dateTime = 'Monday, JUNE 15'; + const daysAgo = 'Today'; + const profileUrl = 'test url'; + render( + + Dashboard Header + + ); + + const dashboardHeader = screen.getByTestId(dataTestId); + const avatar = screen.getByAltText('user avatar'); + + expect(dashboardHeader).toBeVisible(); + expect(dashboardHeader).toHaveTextContent(dateTime); + expect(dashboardHeader).toHaveTextContent(dateTime); + expect(dashboardHeader).toHaveTextContent(dateTime); + + expect(avatar).toBeVisible(); + expect(avatar).toHaveAttribute('src', profileUrl); + }); +}); diff --git a/src/components/Dashboard/Header/index.tsx b/src/components/Dashboard/Header/index.tsx index 09fad3f..c59a538 100644 --- a/src/components/Dashboard/Header/index.tsx +++ b/src/components/Dashboard/Header/index.tsx @@ -7,10 +7,11 @@ interface DashboardHeaderProps { daysAgo: string; profileUrl: string; children: React.ReactNode; + 'data-test-id'?: string; } -const DashboardHeader = ({ dateTime, daysAgo, profileUrl, children }: DashboardHeaderProps): JSX.Element => { +const DashboardHeader = ({ dateTime, daysAgo, profileUrl, children, ...attributes }: DashboardHeaderProps): JSX.Element => { return ( -

      +
      user avatar From 81eb9bd49f35289e24796a7ca36bf527396192c7 Mon Sep 17 00:00:00 2001 From: Tran Manh Date: Wed, 19 Jul 2023 09:39:26 +0700 Subject: [PATCH 5/7] [#9] Switch div to header tag for DashboardHeader --- src/components/Dashboard/Header/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Dashboard/Header/index.tsx b/src/components/Dashboard/Header/index.tsx index c59a538..285dba3 100644 --- a/src/components/Dashboard/Header/index.tsx +++ b/src/components/Dashboard/Header/index.tsx @@ -11,7 +11,7 @@ interface DashboardHeaderProps { } const DashboardHeader = ({ dateTime, daysAgo, profileUrl, children, ...attributes }: DashboardHeaderProps): JSX.Element => { return ( -
      +
      user avatar @@ -29,7 +29,7 @@ const DashboardHeader = ({ dateTime, daysAgo, profileUrl, children, ...attribute
      {children}
      -
      + ); }; From ac950693a8137437acd64643d93730f16023b463 Mon Sep 17 00:00:00 2001 From: Tran Manh Date: Wed, 19 Jul 2023 10:54:46 +0700 Subject: [PATCH 6/7] [#9] Move once time used var to it() --- src/components/Dashboard/Empty/index.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Dashboard/Empty/index.test.tsx b/src/components/Dashboard/Empty/index.test.tsx index 226a65c..bd44ede 100644 --- a/src/components/Dashboard/Empty/index.test.tsx +++ b/src/components/Dashboard/Empty/index.test.tsx @@ -5,8 +5,8 @@ import { render, screen } from '@testing-library/react'; import DashboardEmpty from '.'; describe('DashboardEmpty', () => { - const dataTestId = 'dashboard-empty'; it('renders DashboardEmpty and its components', () => { + const dataTestId = 'dashboard-empty'; render(); const dashboardEmpty = screen.getByTestId(dataTestId); From 3ca77cbbf4f953f4cc3b23976c917a869c12cc1c Mon Sep 17 00:00:00 2001 From: Tran Manh Date: Wed, 19 Jul 2023 11:41:27 +0700 Subject: [PATCH 7/7] [#9] Remove the default flex-row --- src/components/Dashboard/Empty/index.tsx | 2 +- src/components/Dashboard/Header/index.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Dashboard/Empty/index.tsx b/src/components/Dashboard/Empty/index.tsx index 13a06f1..babb541 100644 --- a/src/components/Dashboard/Empty/index.tsx +++ b/src/components/Dashboard/Empty/index.tsx @@ -4,7 +4,7 @@ interface DashboardEmptyProps { 'data-test-id'?: string; } -const DashboardEmpty = ({ ...attributes }: DashboardEmptyProps): JSX.Element => { +const DashboardEmpty = (attributes: DashboardEmptyProps): JSX.Element => { return (

      😎

      diff --git a/src/components/Dashboard/Header/index.tsx b/src/components/Dashboard/Header/index.tsx index 285dba3..74c9b12 100644 --- a/src/components/Dashboard/Header/index.tsx +++ b/src/components/Dashboard/Header/index.tsx @@ -9,14 +9,14 @@ interface DashboardHeaderProps { children: React.ReactNode; 'data-test-id'?: string; } -const DashboardHeader = ({ dateTime, daysAgo, profileUrl, children, ...attributes }: DashboardHeaderProps): JSX.Element => { +const DashboardHeader = ({ dateTime, daysAgo, profileUrl, children, ...rest }: DashboardHeaderProps): JSX.Element => { return ( -
      -
      +
      +
      user avatar
      -
      +

      {dateTime}

      @@ -24,7 +24,7 @@ const DashboardHeader = ({ dateTime, daysAgo, profileUrl, children, ...attribute
      -
      +
      {children}