From e089457c1a2ab1423d7568f0ddb3ea387b0245c7 Mon Sep 17 00:00:00 2001
From: Ricardo Campos <ricardo.campos@encora.com>
Date: Wed, 15 May 2024 13:49:40 -0300
Subject: [PATCH] chore: react warnings and login issues (#307)

---
 .../src/components/BCHeaderwSide/index.tsx    | 14 +----
 .../src/components/BarChartGrouped/index.jsx  | 17 +++++-
 .../src/components/DonutChartView/index.jsx   | 16 +++++-
 .../src/components/FavouriteCard/index.tsx    |  8 +--
 .../OpeningScreenDataTable/index.jsx          | 55 ++++++++-----------
 frontend/src/screens/Landing/index.tsx        | 20 ++++++-
 frontend/src/screens/Opening/index.tsx        |  8 +--
 frontend/src/services/AuthService.ts          | 24 ++++----
 8 files changed, 90 insertions(+), 72 deletions(-)

diff --git a/frontend/src/components/BCHeaderwSide/index.tsx b/frontend/src/components/BCHeaderwSide/index.tsx
index e1771927..8a9d3117 100644
--- a/frontend/src/components/BCHeaderwSide/index.tsx
+++ b/frontend/src/components/BCHeaderwSide/index.tsx
@@ -74,8 +74,6 @@ const BCHeaderwSide = () => {
 
   const [myProfile, setMyProfile] = useState<boolean>(false);
   const [notifications, setNotifications] = useState<boolean>(false);
-  const [goToURL, setGoToURL] = useState<string>('');
-  const [goTo, setGoTo] = useState<boolean>(false);
 
   const handleNotificationsPanel = useCallback((): void => {
     if (notifications) {
@@ -105,13 +103,6 @@ const BCHeaderwSide = () => {
 
   const navigate = useNavigate();
 
-  useEffect(() => {
-    if (goTo) {
-      setGoTo(false);
-      navigate(goToURL);
-    }
-  }, [goTo, goToURL, navigate]);
-
   return (
     <HeaderContainer
       render={({ isSideNavExpanded, onClickSideNavExpand }: any) => (
@@ -164,10 +155,7 @@ const BCHeaderwSide = () => {
                       <SideNavLink
                         key={subItem.name}
                         renderIcon={IconComponent || ''}
-                        onClick={() => {
-                          setGoToURL(subItem.link);
-                          setGoTo(true);
-                        }}
+                        onClick={() => navigate(subItem.link)}
                         isActive={window.location.pathname === subItem.link}
                       >
                         {subItem.name}
diff --git a/frontend/src/components/BarChartGrouped/index.jsx b/frontend/src/components/BarChartGrouped/index.jsx
index 2d19b90e..863a6069 100644
--- a/frontend/src/components/BarChartGrouped/index.jsx
+++ b/frontend/src/components/BarChartGrouped/index.jsx
@@ -132,10 +132,22 @@ const BarChartGrouped = () => {
     <div className="px-3">
       <div className="row gy-2 pb-3">
         <div className="col-md-4 p-0">
-          <Dropdown id="default" label={windowWidth<=1584?"District":"Filter by district"} items={items} itemToString={item => item ? item.text : ''} />
+          <Dropdown
+            id="default1"
+            label={windowWidth<=1584?"District":"Filter by district"}
+            items={items}
+            itemToString={item => item ? item.text : ''}
+            titleText={windowWidth<=1584?"District":"Filter by district"}
+          />
         </div>
         <div className="col-md-4 p-0 px-md-1">
-          <Dropdown id="default" label={windowWidth<=1584?"Status":"Filter by status"} items={items} itemToString={item => item ? item.text : ''} />
+          <Dropdown
+            id="default2"
+            label={windowWidth<=1584?"Status":"Filter by status"}
+            items={items}
+            itemToString={item => item ? item.text : ''}
+            titleText={windowWidth<=1584?"Status":"Filter by status"}
+          />
         </div>
         <div className="col-4 p-0 d-none d-md-block">
           <DatePicker datePickerType="single">
@@ -143,6 +155,7 @@ const BarChartGrouped = () => {
               id="date-picker-input-id"
               placeholder="mm/dd/yyyy"
               size="md"
+              labelText="Label text"
             />
           </DatePicker>
         </div>
diff --git a/frontend/src/components/DonutChartView/index.jsx b/frontend/src/components/DonutChartView/index.jsx
index 61b566f0..1514dadd 100644
--- a/frontend/src/components/DonutChartView/index.jsx
+++ b/frontend/src/components/DonutChartView/index.jsx
@@ -66,10 +66,22 @@ const DonutChartView = () => {
     <div className="px-3">
       <div className="row gy-2 pb-3">
         <div className="col-md-4 p-0">
-          <Dropdown id="default"  label={windowWidth<=1584?"District":"Filter by district"} items={items} itemToString={item => item ? item.text : ''} />
+          <Dropdown
+            id="default3"
+            label={windowWidth<=1584?"District":"Filter by district"}
+            items={items}
+            itemToString={item => item ? item.text : ''}
+            titleText={windowWidth<=1584?"District":"Filter by district"}
+          />
         </div>
         <div className="col-md-4 p-0 px-md-1">
-          <Dropdown id="default"  label={windowWidth<=1584?"Client Number":"Filter by client number"} items={items} itemToString={item => item ? item.text : ''} />
+          <Dropdown
+            id="default4"
+            label={windowWidth<=1584?"Client Number":"Filter by client number"}
+            items={items}
+            itemToString={item => item ? item.text : ''}
+            titleText={windowWidth<=1584?"Client Number":"Filter by client number"}
+          />
         </div>
         <div className="col-4 p-0 d-none d-md-block">
           <DatePicker datePickerType="single">
diff --git a/frontend/src/components/FavouriteCard/index.tsx b/frontend/src/components/FavouriteCard/index.tsx
index 65dcf6c2..8c273e7d 100644
--- a/frontend/src/components/FavouriteCard/index.tsx
+++ b/frontend/src/components/FavouriteCard/index.tsx
@@ -8,9 +8,9 @@ import './styles.scss';
 
 interface FavouriteCardProps {
   index: number,
-  title: String,
-  link: String,
-  icon:String,
+  title: string,
+  link: string,
+  icon: string,
   description:String
 }
 
@@ -29,7 +29,7 @@ const FavouriteCard = ({
     <Tile
       className={'fav-card-main' }
       tabIndex={index}
-      onClick={() => navigate('/')}
+      onClick={() => navigate(link)}
     >
       <div className="fav-card-header">
         <Icon className="fav-card-icon" />
diff --git a/frontend/src/components/OpeningScreenDataTable/index.jsx b/frontend/src/components/OpeningScreenDataTable/index.jsx
index 4fda603c..4d3022f3 100644
--- a/frontend/src/components/OpeningScreenDataTable/index.jsx
+++ b/frontend/src/components/OpeningScreenDataTable/index.jsx
@@ -33,26 +33,26 @@ export const batchActionClick = (selectedRows) => () => {
 
 export const buttonsCol = (
   <>
-  <Button
-    hasIconOnly
-    iconDescription="View"
-    tooltipPosition="bottom"
-    kind="ghost"
-    onClick={() => clickFn(item.id)}
-    renderIcon={Icons.DataViewAlt}
-    size="md"
-  />
-  <Button
-    hasIconOnly
-    iconDescription="Download"
-    tooltipPosition="bottom"
-    kind="ghost"
-    onClick={() => null}
-    renderIcon={Icons.Download}
-    size="md"
-  />
+    <Button
+      hasIconOnly
+      iconDescription="View"
+      tooltipposition="bottom"
+      kind="ghost"
+      onClick={() => clickFn(item.id)}
+      renderIcon={Icons.DataViewAlt}
+      size="md"
+    />
+    <Button
+      hasIconOnly
+      iconDescription="Download"
+      tooltipposition="bottom"
+      kind="ghost"
+      onClick={() => null}
+      renderIcon={Icons.Download}
+      size="md"
+    />
   </>
-)
+);
 
 // A custom hook to handle pagination logic
 const usePagination = (data, initialItemsPerPage) => {
@@ -73,7 +73,6 @@ const usePagination = (data, initialItemsPerPage) => {
   const handlePageChange = ({ page }) => {
     setCurrentPage(page);
   };
-  
 
   // Update the items per page when the user changes the value
   const handleItemsPerPageChange = (event) => {
@@ -81,8 +80,6 @@ const usePagination = (data, initialItemsPerPage) => {
     setItemsPerPage(event.pageSize);
   };
 
-  
-
   return {
     currentData,
     currentPage,
@@ -93,8 +90,6 @@ const usePagination = (data, initialItemsPerPage) => {
   };
 };
 
-
-
 export default function OpeningScreenDataTable({ rows, headers, error }) {
   const [filteredRows, setFilteredRows] = useState(rows);
   const {
@@ -149,7 +144,7 @@ export default function OpeningScreenDataTable({ rows, headers, error }) {
                   placeholder="Filter by opening ID, File ID, timber mark, cut block, status..."
                   persistent
                 />
-                <TableToolbarMenu iconDescription="More" tooltipPosition="bottom" renderIcon={Icons.OverflowMenuVertical} tabIndex={batchActionProps.shouldShowBatchActions ? -1 : 0} className="d-block d-sm-none">
+                <TableToolbarMenu iconDescription="More" tooltipposition="bottom" renderIcon={Icons.OverflowMenuVertical} tabIndex={batchActionProps.shouldShowBatchActions ? -1 : 0} className="d-block d-sm-none">
                   <TableToolbarAction onClick={() => console.log('Download Click')} disabled={selectedRows.length === 0}>
                     Print
                   </TableToolbarAction>
@@ -167,7 +162,7 @@ export default function OpeningScreenDataTable({ rows, headers, error }) {
                   <Button
                     hasIconOnly
                     iconDescription="Download"
-                    tooltipPosition="bottom"
+                    tooltipposition="bottom"
                     kind="ghost"
                     onClick={() => console.log('Download Click')}
                     disabled={selectedRows.length === 0}
@@ -177,7 +172,7 @@ export default function OpeningScreenDataTable({ rows, headers, error }) {
                   <Button
                     hasIconOnly
                     iconDescription="Print"
-                    tooltipPosition="bottom"
+                    tooltipposition="bottom"
                     kind="ghost"
                     onClick={() => {
                       batchActionClick(selectedRows);
@@ -253,10 +248,6 @@ export default function OpeningScreenDataTable({ rows, headers, error }) {
           }}
         />
         ) : null}
-
-
-    
-
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/screens/Landing/index.tsx b/frontend/src/screens/Landing/index.tsx
index 4c1e5654..7141871f 100644
--- a/frontend/src/screens/Landing/index.tsx
+++ b/frontend/src/screens/Landing/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback } from "react";
 import BCGovLogo from "../../components/BCGovLogo";
 import { Button, InlineNotification } from "@carbon/react";
 import { Login } from '@carbon/icons-react';
@@ -8,6 +8,7 @@ import '../../custom.scss';
 import { useLottie } from "lottie-react";
 import silvaLottie from "../../assets/lotties/silva-logo-lottie-1.json"
 import ThemeToggle from "../../components/ThemeToggle";
+import { useNavigate } from "react-router-dom";
 
 const Landing: React.FC = () => {
     // Adding the Lottie Loader and loading the View for lottie with initial options
@@ -16,6 +17,19 @@ const Landing: React.FC = () => {
       loop: true
     };
     const { View } = useLottie(options);
+    const navigate = useNavigate();
+    const login = useCallback(async (provider: string) => {
+      try {
+        await signIn(provider)
+      } catch(e) {
+        if (e && typeof e === "object" && "message" in e) {
+          const messageError = e.message as string;
+          if (messageError === 'There is already a signed in user.') {
+            navigate('/dashboard');
+          }
+        }
+      }
+    }, []);
     return (
       <>
         <div className="container-fluid">
@@ -67,7 +81,7 @@ const Landing: React.FC = () => {
               <div className="row gy-3">
                 <div className="col-xl-5 col-lg-6">
                   <Button
-                    onClick={()=>signIn('idir')}
+                    onClick={() => login('idir')}
                     renderIcon={Login}
                     data-testid="landing-button__idir"
                     className="btn-landing"
@@ -78,7 +92,7 @@ const Landing: React.FC = () => {
                 <div className="col-xl-5 col-lg-6 ">
                   <Button
                     kind="tertiary"
-                    onClick={() => {signIn('bceid')}}
+                    onClick={() => {login('bceid')}}
                     renderIcon={Login}
                     data-testid="landing-button__bceid"
                     className="btn-landing"
diff --git a/frontend/src/screens/Opening/index.tsx b/frontend/src/screens/Opening/index.tsx
index 0d0b432d..2fdc3ac7 100644
--- a/frontend/src/screens/Opening/index.tsx
+++ b/frontend/src/screens/Opening/index.tsx
@@ -43,16 +43,16 @@ const Opening: React.FC = () => {
       <div className="favourite-activities">
         <div className="row gy-0 gy-sm-4 ">
           <div className="col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-3">
-            <FavouriteCard index={1} title={'Search opening'} link={'/'} icon={'SearchLocate'} description={'Search for a opening to update or consult using advance filters such as activities, standards, codes or links'}/>
+            <FavouriteCard index={1} title={'Search opening'} link="#" icon={'SearchLocate'} description={'Search for a opening to update or consult using advance filters such as activities, standards, codes or links'}/>
           </div>
           <div className="col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-3">
-            <FavouriteCard index={1} title={'Create a new opening'} link={'/'} icon={'MapBoundary'} description={'Register a opening for tracking silviculture treatments'}/>
+            <FavouriteCard index={1} title={'Create a new opening'} link="#" icon={'MapBoundary'} description={'Register a opening for tracking silviculture treatments'}/>
           </div>
           <div className="col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-3">
-            <FavouriteCard index={1} title={'Reports'} link={'/'} icon={'ReportData'} description={'Consult and manage opening reports'}/>
+            <FavouriteCard index={1} title={'Reports'} link="#" icon={'ReportData'} description={'Consult and manage opening reports'}/>
           </div>
           <div className="col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-3">
-            <FavouriteCard index={1} title={'Upcoming activities'} link={'/'} icon={'Activity'} description={'Track opening activities and milestones'}/>
+            <FavouriteCard index={1} title={'Upcoming activities'} link="#" icon={'Activity'} description={'Track opening activities and milestones'}/>
           </div>
         </div>
       </div>
diff --git a/frontend/src/services/AuthService.ts b/frontend/src/services/AuthService.ts
index fd4e2583..f7be3f36 100644
--- a/frontend/src/services/AuthService.ts
+++ b/frontend/src/services/AuthService.ts
@@ -32,18 +32,18 @@ export const getAuthIdToken = () => {
 export const signIn = async (provider: string): Promise<any> => {
   const appEnv = env.VITE_ZONE ?? 'DEV';
 
-  if (provider.localeCompare('idir') === 0) {
-    signInWithRedirect({
-      provider: { custom: `${(appEnv).toLocaleUpperCase()}-IDIR` }
-    });
-  } else if (provider.localeCompare('bceid') === 0) {
-    signInWithRedirect({
-      provider: { custom: `${(appEnv).toLocaleUpperCase()}-BCEIDBUSINESS` }
-    });
-  }
-  // else if invalid option passed logout the user
-  else {
-    logout();
+  try {
+    if (provider.localeCompare('idir') === 0) {
+      await signInWithRedirect({
+        provider: { custom: `${(appEnv).toLocaleUpperCase()}-IDIR` }
+      });
+    } else if (provider.localeCompare('bceid') === 0) {
+      await signInWithRedirect({
+        provider: { custom: `${(appEnv).toLocaleUpperCase()}-BCEIDBUSINESS` }
+      });
+    }
+  } catch (e) {
+    return Promise.reject(e);
   }
 };