show card when opening sharelink with conversationId as search parame…

…ter (#554)

src/features/auth/hooks/useAutoLogin.tsx

@@ -26,7 +26,7 @@ function useAutoLogin() {
           }),
         );
 
-        navigate(location.pathname);
+        navigate(location.pathname + location.search);
       }
     }
   }, []);

src/features/conversations/components/ConversationCard.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { Collapse, IconButton } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -24,17 +24,20 @@ interface Props {
 function ConversationCard({ conversationId, userBName, conversationState, onDeleteConversation, userARating }: Props) {
   const navigate = useNavigate();
   const location = useLocation();
+  const [searchParams, _] = useSearchParams();
 
   const cardRef = useRef<HTMLDivElement>(null);
   const { showSuccessToast } = useToastMessage();
 
   const USER_B_NAME = capitalizeFirstLetter(userBName);
-  const [expanded, setExpanded] = useState(location.state?.id === conversationId);
+
+  const focusOnCard = location.state?.id === conversationId || searchParams.get('conversation') === conversationId;
+  const [expanded, setExpanded] = useState(focusOnCard);
 
   useEffect(() => {
-    if (location.state?.id === conversationId && cardRef.current) {
+    if (focusOnCard && cardRef.current) {
       cardRef.current.scrollIntoView({ behavior: 'smooth' });
-      navigate(location.pathname, { state: {} });
+      navigate(location.pathname + location.search, { state: {} });
     }
   }, []);
 

src/pages/SharedPages/AuthorizedPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 
 import ROUTES from 'router/RouteConfig';
@@ -9,11 +9,16 @@ function AuthorizedPage() {
   const location = useLocation();
 
   const isLoggedIn = useAppSelector((state) => state.auth.userA.isLoggedIn);
+  const [lastLoggedIn, setLastLoggedIn] = useState(isLoggedIn);
 
   useEffect(() => {
-    if (!isLoggedIn) {
+    if (!isLoggedIn && lastLoggedIn) {
       navigate(ROUTES.HOME_PAGE);
+    } else if (!isLoggedIn && !lastLoggedIn) {
+      navigate(ROUTES.LOGIN_PAGE, { state: { from: location.pathname + location.search } });
     }
+
+    setLastLoggedIn(isLoggedIn);
   }, [isLoggedIn, navigate, location.pathname]);
 
   return <>{isLoggedIn ? <Outlet /> : null}</>;

src/pages/UserAAuthorizedPages/ConversationsPage.tsx

@@ -1,12 +1,14 @@
 import { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useSearchParams } from 'react-router-dom';
 import { useMediaQuery } from '@mui/material';
 
 import { CmButton, CmTextInput, CmTypography, Page, PageContent } from 'shared/components';
 import { ConversationsDrawer, CopyLinkModal, useConversationInvite } from 'features/conversations';
 
 function ConversationsPage() {
   const location = useLocation();
+  const [searchParams, _] = useSearchParams();
+
   const isSmall = useMediaQuery('(max-width: 960px)');
 
   // Logic for create link
@@ -29,7 +31,7 @@ function ConversationsPage() {
   }
 
   useEffect(() => {
-    if (location.state?.id) {
+    if (location.state?.id || searchParams.get('conversation')) {
       setConversationDrawerOpen(true);
     }
   }, []);

src/pages/UserAUnauthorizedPages/LoginPage.tsx

@@ -1,12 +1,13 @@
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import ROUTES from 'router/RouteConfig';
 import { CmTypography, Page, PageContent } from 'shared/components';
 import { LoginForm, RequestPasswordResetModal, useLogin, useResetPassword } from 'features/auth';
 
 function LoginPage() {
   const navigate = useNavigate();
+  const location = useLocation();
 
   // Logic for login
   const [isLoading, setIsLoading] = useState(false);
@@ -15,7 +16,14 @@ function LoginPage() {
   async function handleSubmit(email: string, password: string, recaptchaToken?: string) {
     setIsLoading(true);
     const isSuccessful = await loginUserA(email, password, recaptchaToken);
-    if (isSuccessful) navigate(ROUTES.CLIMATE_FEED_PAGE);
+    if (isSuccessful) {
+      if (location.state && 'from' in location.state) {
+        navigate(location.state.from);
+      } else {
+        navigate(ROUTES.CLIMATE_FEED_PAGE);
+      }
+    }
+
     setIsLoading(false);
   }