Added the User Profile sidebar with test data and cleaned up the Dash…

…board (#78)
bcgov · Aug 31, 2023 · 70ad032 · 70ad032
1 parent bd79083
commit 70ad032
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 85 deletions.
diff --git a/frontend/src/components/AvatarImage/AvatarImage.scss b/frontend/src/components/AvatarImage/AvatarImage.scss
@@ -0,0 +1,13 @@
+.profile-image {
+  border-radius: 50%;
+}
+
+.small {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.large {
+  width: 4rem;
+  height: 4rem;
+}
diff --git a/frontend/src/components/AvatarImage/index.tsx b/frontend/src/components/AvatarImage/index.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import emptyUser from '../../assets/img/emptyUser.jpg';
+import './AvatarImage.scss';
+
+type Size = 'small' | 'large';
+
+interface AvatarImageProps {
+  userName: string;
+  source?: string;
+  size: Size;
+}
+
+const AvatarImage = ({ userName, source, size }: AvatarImageProps) => (
+  <img src={source || emptyUser} alt={`${userName}`} className={`profile-image ${size}`} />
+);
+
+export default AvatarImage;
diff --git a/frontend/src/components/BCHeaderwSide/index.tsx b/frontend/src/components/BCHeaderwSide/index.tsx
@@ -21,6 +21,7 @@ import './BCHeaderwSide.scss';
 import RightPanelTitle from '../RightPanelTitle';
 import { env } from '../../env';
 import ThemeToggle from '../ThemeToggle';
+import MyProfile from '../MyProfile';
 
 interface ListItem {
   name: string;
@@ -43,60 +44,6 @@ const listItems = [
         link: '/dashboard',
         disabled: false
       },
-      {
-        name: 'Seedlots',
-        icon: 'SoilMoistureField',
-        link: '/seedlot',
-        disabled: true
-      },
-      {
-        name: 'Seedlings',
-        icon: 'CropGrowth',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Nurseries',
-        icon: 'CropHealth',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Orchards',
-        icon: 'MapBoundaryVegetation',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Reports',
-        icon: 'Report',
-        link: '/reports',
-        disabled: true
-      },
-      {
-        name: 'Tests',
-        icon: 'Chemistry',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Parent tree',
-        icon: 'Tree',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Tree seed center',
-        icon: 'Enterprise',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Financial',
-        icon: 'Money',
-        link: '#',
-        disabled: true
-      }
     ]
   },
   {
@@ -211,7 +158,7 @@ const BCHeaderwSide = () => {
               title="My Profile"
               closeFn={closeMyProfilePanel}
             />
-            <Button kind='secondary' onClick={()=>console.log('Hi Jazz')} >Log Out</Button>
+            <MyProfile/>
           </HeaderPanel>
           <SideNav isChildOfHeader expanded={isSideNavExpanded} aria-label="Side menu" className="bcheaderwside-sidenav">
             <SideNavItems>

diff --git a/frontend/src/components/MyProfile/MyProfile.scss b/frontend/src/components/MyProfile/MyProfile.scss
@@ -0,0 +1,29 @@
+@use '@bcgov-nr/nr-fsa-theme/design-tokens/variables.scss' as vars;
+
+.user-info-section {
+  padding: 1rem;
+  display: flex;
+}
+
+.user-data {
+  margin-left: 2rem;
+}
+
+.user-name {
+  font-weight: bold;
+}
+
+.divisory {
+  background-color: var(--#{vars.$bcgov-prefix}-border-subtle-01);
+  border: 0;
+  height: 1px;
+}
+
+.account-nav a {
+  width: 100%;
+  font-weight: bold;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
diff --git a/frontend/src/components/MyProfile/index.tsx b/frontend/src/components/MyProfile/index.tsx
@@ -0,0 +1,79 @@
+import React, { useCallback, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import {
+  SideNavLink
+} from '@carbon/react';
+import * as Icons from '@carbon/icons-react';
+
+
+import AvatarImage from '../AvatarImage';
+
+import { useThemePreference } from '../../utils/ThemePreference';
+
+import './MyProfile.scss';
+import { logout } from '../../services/AuthService';
+
+const MyProfile = () => {
+  const { theme, setTheme } = useThemePreference();
+  const userData = {firstName:'Jazz', lastName:"Grewal", idirUsername:"Jasgrewal", email:"[email protected]"};
+
+  const [goToURL, setGoToURL] = useState<string>('');
+  const [goTo, setGoTo] = useState<boolean>(false);
+
+  const navigate = useNavigate();
+
+  const changeTheme = () => {
+    if (theme === 'g10') {
+      setTheme('g100');
+      localStorage.setItem('mode', 'dark');
+    }
+    if (theme === 'g100') {
+      setTheme('g10');
+      localStorage.setItem('mode', 'light');
+    }
+  };
+
+  useEffect(() => {
+    if (goTo) {
+      setGoTo(false);
+      navigate(goToURL);
+    }
+  }, [goTo]);
+
+  return (
+    <>
+      <div className="user-info-section">
+        <div className="user-image">
+          <AvatarImage userName={`${userData.firstName} ${userData.lastName}`} size="large" />
+        </div>
+        <div className="user-data">
+          <p className="user-name">{`${userData.firstName} ${userData.lastName}`}</p>
+          <p>{`IDIR: ${userData.idirUsername}`}</p>
+          <p>{userData.email}</p>
+        </div>
+      </div>
+      <hr className="divisory" />
+      <nav className="account-nav">
+        <ul>
+          <SideNavLink
+            className="cursor-pointer"
+            renderIcon={theme === 'g10'?Icons.Asleep:Icons.Light}
+            onClick={() => { changeTheme(); }}
+          >
+            Change theme
+          </SideNavLink>
+          <SideNavLink
+            className="cursor-pointer"
+            renderIcon={Icons.UserFollow}
+            onClick={()=>{logout()}}
+          >
+            Log out
+          </SideNavLink>
+        </ul>
+      </nav>
+    </>
+  );
+};
+
+export default MyProfile;
diff --git a/frontend/src/screens/Dashboard/index.tsx b/frontend/src/screens/Dashboard/index.tsx
@@ -1,9 +1,5 @@
 import React from "react";
-import { logout } from "../../services/AuthService";
-import { Button } from "@carbon/react";
-import { Asleep, Light } from '@carbon/icons-react';
 import { useThemePreference } from "../../utils/ThemePreference";
-import { toggleTheme } from "../../utils/ThemeFunction";
 
 
 const Dashboard: React.FC = () => {
@@ -14,35 +10,10 @@ const Dashboard: React.FC = () => {
       <>
         <div className="container">
           <div className="row">
-            <div className="col-md-6 border border-primary">
-              <div className="display-2">Hi There </div>
-            </div>
             <div className="col-md-6">
-              <div className="display-4">Welcome to the Dashboard Page</div>
-            </div>
-          </div>
-
-          <div className="row my-3">
-            <div className="col-6 col-lg-4 border border-primary p-5 bg-primary ">
-              Column 1
-            </div>
-            <div className="col-6 col-lg-4 border border-primary p-5 bg-secondary text-white">
-              Column 2
-            </div>
-            <div className="col-6 col-lg-4 border border-primary p-5 bg-success text-white">
-              Column 3
+              <div className="display-6">Hi There, <br/>Welcome to Main Screen</div>
             </div>
           </div>
-          <div className="row">
-            <div className="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui cupiditate nulla dolor debitis harum dignissimos velit, molestias cumque magni laborum explicabo eaque minima. Quos incidunt cupiditate id eveniet sed. Assumenda quia eveniet animi maiores harum.</div>
-          </div>
-
-          <div className="mt-5">
-            <Button kind='secondary' renderIcon={theme === 'g10'?Asleep:Light}  onClick={()=>toggleTheme(theme,setTheme)} >Toggle Theme</Button>
-          </div>
-          <div className="mt-5">
-            <Button kind='secondary'  onClick={()=>logout()} >Logout</Button>
-          </div>
         </div>
       </>
     );