feat: add navigation to sign in page after click in dashboard

hotosm · Jul 2, 2024 · 4af7417 · 4af7417
1 parent e99517f
commit 4af7417
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/src/frontend/src/components/LandingPage/SignInOverlay/index.tsx b/src/frontend/src/components/LandingPage/SignInOverlay/index.tsx
@@ -1,4 +1,5 @@
 import { useTypedDispatch } from '@Store/hooks';
+import { useNavigate } from 'react-router-dom';
 import { FlexColumn, FlexRow } from '@Components/common/Layouts';
 import { Button } from '@Components/RadixComponents/Button';
 import Image from '@Components/RadixComponents/Image';
@@ -12,6 +13,7 @@ import { slideVariants } from '@Constants/animations';
 
 export default function SignInOverlay() {
   const dispatch = useTypedDispatch();
+  const navigate = useNavigate();
 
   return (
     <motion.section
@@ -38,7 +40,14 @@ export default function SignInOverlay() {
         >
           <h5>Project Creator</h5>
           <Image src={projectCreator} />
-          <Button className="!naxatw-bg-landing-red" rightIcon="east">
+          <Button
+            className="!naxatw-bg-landing-red"
+            rightIcon="east"
+            onClick={() => {
+              dispatch(setCommonState({ signInAs: 'Project Creator' }));
+              navigate('/login');
+            }}
+          >
             I&apos;m a Project Creator
           </Button>
         </FlexColumn>
@@ -48,7 +57,14 @@ export default function SignInOverlay() {
         >
           <h5>Drone Operator</h5>
           <Image src={droneOperator} />
-          <Button className="!naxatw-bg-landing-red" rightIcon="east">
+          <Button
+            className="!naxatw-bg-landing-red"
+            rightIcon="east"
+            onClick={() => {
+              dispatch(setCommonState({ signInAs: 'Drone Operator' }));
+              navigate('/login');
+            }}
+          >
             I&apos;m a Drone Operator
           </Button>
         </FlexColumn>

diff --git a/src/frontend/src/modules/user-auth-module/src/components/Authentication/Login/index.tsx b/src/frontend/src/modules/user-auth-module/src/components/Authentication/Login/index.tsx
@@ -11,7 +11,7 @@ import { Button } from '@Components/RadixComponents/Button';
 import Icon from '@Components/common/Icon';
 import { Flex, FlexRow } from '@Components/common/Layouts';
 import Person from '@Assets/images/person.svg';
-import { useTypedDispatch } from '@Store/hooks';
+import { useTypedDispatch, useTypedSelector } from '@Store/hooks';
 import { signInGoogle, signInUser } from '@Services/common';
 import { setUserState } from '@UserModule/store/actions/user';
 import googleIcon from '@Assets/images/google-icon.svg';
@@ -32,6 +32,7 @@ export default function Login() {
   const handleShow = () => {
     return setShowPassword(prev => !prev);
   };
+  const signInAs = useTypedSelector(state => state.common.signInAs);
 
   const { mutate, isLoading } = useMutation<any, any, any, unknown>({
     mutationFn: signInUser,
@@ -72,7 +73,7 @@ export default function Login() {
         "
       >
         <Image src={Person} />
-        <h3>Sign In</h3>
+        <h3>Sign In - {signInAs}</h3>
 
         {/* google login button */}
         <div

diff --git a/src/frontend/src/store/slices/common.ts b/src/frontend/src/store/slices/common.ts
@@ -13,6 +13,7 @@ export interface CommonState {
   promptDialogContent: PromptDialogContentsType;
   showMap: boolean;
   openSignInMenu: boolean;
+  signInAs: 'Project Creator' | 'Drone Operator';
   userProfileActiveTab: number;
 }
 
@@ -23,6 +24,7 @@ const initialState: CommonState = {
   promptDialogContent: null,
   showMap: false,
   openSignInMenu: false,
+  signInAs: 'Project Creator',
   userProfileActiveTab: 1,
 };