Merge pull request #50 from manh-t/feature/9-ui-dashboard-empty

[#9] [UI] As a user, I can see the empty Dashboard page

src/components/Alert/index.tsx

@@ -12,7 +12,7 @@ const Alert = ({ errors, ...rest }: AlertProps): JSX.Element => (
       <AlertIcon className="mr-[19px] text-white" />
       <div>
         <p className="text-small text-white font-extrabold mb-2">Error</p>
-        <ul className="list-disc list-inside text-white opacity-60 text-xSmall">
+        <ul className="list-disc list-inside text-white opacity-60 text-x-small">
           {errors.map((error, index) => (
             <li key={`${index}${error}`}>{error}</li>
           ))}

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', () => {
+  it('renders DashboardEmpty and its components', () => {
+    const dataTestId = 'dashboard-empty';
+    render(<DashboardEmpty data-test-id={dataTestId} />);
+
+    const dashboardEmpty = screen.getByTestId(dataTestId);
+
+    expect(dashboardEmpty).toBeVisible();
+    expect(dashboardEmpty).toHaveTextContent('😎You‘ve completed all the surveys.Take a moment.');
+  });
+});

src/components/Dashboard/Empty/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface DashboardEmptyProps {
+  'data-test-id'?: string;
+}
+
+const DashboardEmpty = (attributes: DashboardEmptyProps): JSX.Element => {
+  return (
+    <div className="flex flex-col items-center" {...attributes}>
+      <p className="text-[64px]">😎</p>
+      <p className="text-white text-large font-[850] text-center mt-8">
+        You&lsquo;ve completed all the surveys.
+        <br />
+        Take a moment.
+      </p>
+    </div>
+  );
+};
+
+export default DashboardEmpty;

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(
+      <DashboardHeader dateTime={dateTime} daysAgo={daysAgo} profileUrl={profileUrl} data-test-id={dataTestId}>
+        Dashboard Header
+      </DashboardHeader>
+    );
+
+    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);
+  });
+});

src/components/Dashboard/Header/index.tsx

@@ -0,0 +1,36 @@
+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;
+  'data-test-id'?: string;
+}
+const DashboardHeader = ({ dateTime, daysAgo, profileUrl, children, ...rest }: DashboardHeaderProps): JSX.Element => {
+  return (
+    <header className="flex flex-col min-h-screen" {...rest}>
+      <div className="flex justify-between pt-8">
+        <NimbleLogoWhite />
+        <img className="w-[36px] h-[36px] rounded-full" src={profileUrl} alt="user avatar" />
+      </div>
+      <div className="flex justify-between">
+        <div className="w-1/5"></div>
+        <div className="flex flex-col text-white mt-10 flex-1">
+          <p className="text-x-small font-extrabold">{dateTime}</p>
+          <p className="text-x-large font-extrabold mt-1">{daysAgo}</p>
+        </div>
+        <div className="w-1/5"></div>
+      </div>
+      <div className="flex justify-between mt-8 grow">
+        <div className="w-1/5"></div>
+        <div className="flex-1">{children}</div>
+        <div className="w-1/5"></div>
+      </div>
+    </header>
+  );
+};
+
+export default DashboardHeader;

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 (
-    <div>
-      <p>Welcome to your Dashboard {token}</p>
+    <div className="bg-black w-full h-full pl-8 pr-8">
+      <DashboardHeader dateTime="Monday, JUNE 15" daysAgo="Today" profileUrl="https://i.pravatar.cc/150?img=3">
+        <div className="w-full flex justify-center mt-36">
+          <DashboardEmpty />
+        </div>
+      </DashboardHeader>
     </div>
   );
 };

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')",