ModalDialog added

visgl · Dec 14, 2023 · 119cb65 · 119cb65
1 parent 17c366b
commit 119cb65
Show file tree

Hide file tree

Showing 7 changed files with 252 additions and 81 deletions.
diff --git a/.env → .env-template b/.env → .env-template
diff --git a/public/icons/download-2.svg b/public/icons/download-2.svg
diff --git a/src/components/layers-panel/layers-control-panel.tsx b/src/components/layers-panel/layers-control-panel.tsx
@@ -1,24 +1,20 @@
-import { Fragment, ReactEventHandler, useState, useEffect } from "react";
+import { Fragment, ReactEventHandler, useState } from "react";
 import styled from "styled-components";
-
 import { SelectionState, LayerExample, LayerViewState, ListItemType } from "../../types";
-
 import { ListItem } from "./list-item/list-item";
 import PlusIcon from "../../../public/icons/plus.svg";
 import ImportIcon from "../../../public/icons/import.svg";
 import EsriImage from "../../../public/images/esri.svg";
 import { ActionIconButton } from "../action-icon-button/action-icon-button";
 import { AcrGisUser } from "../arcgis-user/arcgis-user";
-
 import { DeleteConfirmation } from "./delete-confirmation";
 import { LayerOptionsMenu } from "./layer-options-menu/layer-options-menu";
 import { handleSelectAllLeafsInGroup } from "../../utils/layer-utils";
 import { ButtonSize } from "../../types";
 import { PanelHorizontalLine } from "../common";
-
-
 import { arcGisLogin, arcGisLogout, selectUser } from "../../redux/slices/arcgis-auth-slice";
 import { useAppDispatch, useAppSelector } from "../../redux/hooks";
+import { ModalDialog } from "../modal-dialog/modal-dialog";
 
 type LayersControlPanelProps = {
   layers: LayerExample[];
@@ -86,37 +82,18 @@ export const LayersControlPanel = ({
   deleteLayer,
 }: LayersControlPanelProps) => {
 
-  // stub {
-  // const dispatch = useAppDispatch();
-
-  // const handleArcGisLogin = () => {
-  //   dispatch(arcGisLogin());
-  // };
-
-  // const handleArcGisLogout = () => {
-  //   dispatch(arcGisLogout());
-  // };
-
-  // const username = useAppSelector(selectUser);
-  // const [showLogin, setShowLoginButton] = useState<boolean>(!username);
-  // const [showLogout, setShowLogoutButton] = useState<boolean>(!!username);
-
-  // useEffect(() => {
-  //   setShowLoginButton(!username);
-  //   setShowLogoutButton(!!username);
-  // }, [username]);
-// stub }
+  const dispatch = useAppDispatch();
 
+  const username = useAppSelector(selectUser);
+  const isLoggedIn = !!username;
+
+  const [showLogoutWarning, setShowLogoutWarning] = useState(false);
   const [settingsLayerId, setSettingsLayerId] = useState<string>("");
   const [showLayerSettings, setShowLayerSettings] = useState<boolean>(false);
   const [layerToDeleteId, setLayerToDeleteId] = useState<string>("");
 
-  /// Stab {
-  const username = 'Michael-g';
-  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
-  const onArcGisActionClick = () => { !isLoggedIn && setIsLoggedIn(true) };
-  const onArcGisLogoutClick = () => { setIsLoggedIn(false) };
-  /// Stab }
+  const onArcGisActionClick = () => { !isLoggedIn && dispatch(arcGisLogin()); };
+  const onArcGisLogoutClick = () => { setShowLogoutWarning(true); };
 
   const isListItemSelected = (
     layer: LayerExample,
@@ -150,6 +127,38 @@ export const LayersControlPanel = ({
     return selectedState;
   };
 
+  const TextQuestion = styled.div`
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 19px;
+`;
+
+  const TextInfo = styled.div`
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 19px;
+`;
+
+  const renderModalDialogContent = (): JSX.Element => {
+    return (
+      <>
+        <TextQuestion>
+          Are you sure you want to log out?
+        </TextQuestion>
+
+        <TextInfo>
+          You are logged in as
+        </TextInfo>
+
+        <TextInfo>
+          {username}
+        </TextInfo>
+      </>
+    );
+  }
+
   const renderLayers = (
     layers: LayerExample[],
     parentLayer?: LayerExample,
@@ -245,6 +254,22 @@ export const LayersControlPanel = ({
             {username}
           </AcrGisUser>
         )}
+
+        {showLogoutWarning && (
+          <ModalDialog
+            width={442}
+            height={290}
+            title={'Logout from ArcGIS'}
+            content={renderModalDialogContent}
+            onConfirm={
+              () => {
+                dispatch(arcGisLogout());
+                setShowLogoutWarning(false);
+              }}
+            onCancel={() => { setShowLogoutWarning(false); }}
+          />
+        )}
+
       </InsertButtons>
     </LayersContainer>
   );

diff --git a/src/components/modal-dialog/modal-dialog.tsx b/src/components/modal-dialog/modal-dialog.tsx
@@ -0,0 +1,142 @@
+import styled, { useTheme } from "styled-components";
+import { ActionButton } from "../action-button/action-button";
+import { ActionButtonVariant, LayoutProps } from "../../types";
+import CloseIcon from "../../../public/icons/close.svg";
+import { Popover } from "react-tiny-popover";
+
+const Overlay = styled.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 103;
+  background: #00000099;
+  `;
+
+const Container = styled.div<{ width: number, height: number }>`
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  background: ${({ theme }) => theme.colors.mainColor};
+  width: ${({ width }) => (`${width}px`)};
+  height: ${({ height }) => (`${height}px`)};
+  left: calc(50% - ${({ width }) => (`${width * 0.5}px`)} );
+  top: calc(50% - ${({ height }) => (`${height * 0.5}px`)} );
+  z-index: 104;
+  `;
+
+const IconContainer = styled.div`
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  width: 44px;
+  height: 44px;
+  top: 13px;
+  right: 14px;
+  `;
+
+const ContentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  height: 100%;
+  width: 100%;
+  margin: 32px 32px 0 32px;
+  row-gap: 16px;
+  color: ${({ theme }) => theme.colors.fontColor};
+`;
+
+const Title = styled.div`
+  font-style: normal;
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 45px;
+`;
+
+const ButtonsContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center; //space-between;
+  margin: 32px;
+  column-gap: 18px;
+  { > *
+    {
+      width: 180px;
+    }
+  }
+`;
+
+type LogoutPanelProps = {
+  title: string;
+  content: (() => JSX.Element) | JSX.Element;
+  width: number,
+  height: number,
+  onCancel: () => void;
+  onConfirm: () => void;
+};
+
+const CloseCrossButton = styled(CloseIcon)`
+  &:hover {
+    fill: ${({ theme }) => theme.colors.mainDimColorInverted};
+  }
+  `;
+
+export const ModalDialog = ({
+  title,
+  content,
+  width,
+  height,
+  onCancel,
+  onConfirm,
+}: LogoutPanelProps) => {
+  const theme = useTheme();
+
+  const renderPopoverContent = (): JSX.Element => {
+    return (
+      <>
+        <Overlay />
+        <Container width={width} height={height}>
+          <IconContainer>
+            <CloseCrossButton fill={theme.colors.fontColor} onClick={onCancel} />
+          </IconContainer>
+          <ContentContainer>
+            <Title>{title}</Title>
+            {typeof content === 'function' ? content() : content}
+          </ContentContainer>
+          <ButtonsContainer>
+            <ActionButton
+              variant={ActionButtonVariant.secondary}
+              onClick={onCancel}
+            >
+              Cancel
+            </ActionButton>
+            <ActionButton onClick={onConfirm}>Log out</ActionButton>
+          </ButtonsContainer>
+        </Container>
+      </>
+    );
+  }
+
+  const getPopoverStyle = () => {
+    return {
+      zIndex: "104",
+      width: "100%",
+      height: "100%"
+    };
+  };
+
+  return (
+    <Popover
+      isOpen={true}
+      reposition={false}
+      content={renderPopoverContent}
+      containerStyle={getPopoverStyle()}
+    >
+      <></>
+    </Popover>
+  );
+};
diff --git a/src/pages/arcgis-auth-popup/arcgis-auth-popup.tsx b/src/pages/arcgis-auth-popup/arcgis-auth-popup.tsx
@@ -5,8 +5,7 @@ import {
   useAppLayout,
 } from "../../utils/hooks/layout";
 
-import { ArcGISIdentityManager } from '@esri/arcgis-rest-request';
-import { getAuthOptions } from "../../utils/arcgis-auth";
+import { arcGisCompleteLogin } from "../../utils/arcgis-auth";
 
 export type LayoutProps = {
   layout: string;
@@ -37,22 +36,10 @@ const AuthContainer = styled.div<LayoutProps>`
 
 export const AuthApp = () => {
   const layout = useAppLayout();
-
-  const { redirectUrl, clientId } = getAuthOptions();
-  if (!clientId) {
-    console.error("The ClientId is not defined in .env file.");
-  } else {
-    const options = {
-      clientId: clientId,
-      redirectUri: redirectUrl,
-      popup: true,
-      pkce: true
-    }
-    ArcGISIdentityManager.completeOAuth2(options);
-  }
+  arcGisCompleteLogin();
   return (
     <AuthContainer id="dashboard-container" layout={layout}>
     </AuthContainer>
   );
-
-}
+  
+}
diff --git a/src/redux/store.ts b/src/redux/store.ts
@@ -22,7 +22,6 @@ const rootReducer = combineReducers({
   symbolization: symbolizationSliceReducer,
   i3sStats: i3sStatsSliceReducer,
   arcGisAuth: arcGisAuthSliceReducer,
-
 });
 
 export const setupStore = (preloadedState?: PreloadedState<RootState>) => {