Frontend: link "Pending" friend-request button to My Connections

app/web/features/connections/friends/FriendRequestsReceived.tsx

@@ -5,6 +5,7 @@ import { CONNECTIONS } from "i18n/namespaces";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
 import { FriendRequest } from "proto/api_pb";
+import { useEffect, useRef } from "react";
 import { useIsMounted, useSafeState } from "utils/hooks";
 
 import type { SetMutationError } from ".";
@@ -81,6 +82,17 @@ function FriendRequestsReceived() {
     data !== undefined &&
     !data.some((req) => req.userId === fromUserId);
 
+  // Scroll to the user id from the URL parameter
+  const highlightedCardRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (highlightedCardRef.current) {
+      highlightedCardRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }
+  }, [fromUserId, data]);
+
   return (
     <>
       {requestNotFound && (
@@ -102,6 +114,11 @@ function FriendRequestsReceived() {
             <FriendSummaryView
               key={friendRequest.friendRequestId}
               friend={friendRequest.friend}
+              cardRef={
+                friendRequest.userId === fromUserId
+                  ? highlightedCardRef
+                  : undefined
+              }
             >
               <RespondToFriendRequestAction
                 friendRequest={friendRequest}

app/web/features/connections/friends/FriendSummaryView.tsx

@@ -7,6 +7,7 @@ interface FriendSummaryViewProps {
   children?: React.ReactNode;
   friend?: LiteUser.AsObject | BlockedUser.AsObject;
   isProfileLink?: boolean;
+  cardRef?: React.Ref<HTMLDivElement>;
 }
 
 export const FRIEND_ITEM_TEST_ID = "friend-item";
@@ -33,10 +34,11 @@ function FriendSummaryView({
   children,
   friend,
   isProfileLink,
+  cardRef,
 }: FriendSummaryViewProps) {
   return friend ? (
     <>
-      <StyledFriendItem data-testid={FRIEND_ITEM_TEST_ID}>
+      <StyledFriendItem ref={cardRef} data-testid={FRIEND_ITEM_TEST_ID}>
         <UserSummary
           headlineComponent="h3"
           user={friend}

app/web/features/profile/actions/FriendActions.tsx

@@ -24,12 +24,7 @@ export default function FriendActions({
     user.pendingFriendRequest &&
     user.pendingFriendRequest.sent === false
   ) {
-    return (
-      <PendingFriendReqButton
-        friendRequest={user.pendingFriendRequest}
-        setMutationError={setMutationError}
-      />
-    );
+    return <PendingFriendReqButton friendRequest={user.pendingFriendRequest} />;
   } else {
     return null;
   }

app/web/features/profile/actions/PendingFriendReqButton.tsx

@@ -1,91 +1,29 @@
 import Button from "components/Button";
-import { CheckIcon, CloseIcon, PersonAddIcon } from "components/Icons";
-import Menu, { MenuItem } from "components/Menu";
-import type { SetMutationError } from "features/connections/friends";
-import useRespondToFriendRequest from "features/connections/friends/useRespondToFriendRequest";
+import { PersonAddIcon } from "components/Icons";
 import { PROFILE } from "i18n/namespaces";
+import Link from "next/link";
 import { useTranslation } from "next-i18next";
 import { FriendRequest } from "proto/api_pb";
-import React, { useRef, useState } from "react";
+import React from "react";
+import { connectionsRoute } from "routes";
 
 interface PendingFriendReqButtonProps {
   friendRequest: FriendRequest.AsObject;
-  setMutationError: SetMutationError;
 }
 
-const RESPOND_TO_FRIEND_REQUEST_MENU_ID =
-  "respond-to-friend-request-actions-menu";
-
 function PendingFriendReqButton({
   friendRequest,
-  setMutationError,
 }: PendingFriendReqButtonProps) {
-  const [isOpen, setIsOpen] = useState({
-    accepted: false,
-    declined: false,
-    menu: false,
-  });
-  const { isPending, isSuccess, respondToFriendRequest } =
-    useRespondToFriendRequest();
-  const menuAnchor = useRef<HTMLButtonElement>(null);
-
-  const handleClick = (item: keyof typeof isOpen) => () => {
-    if (item === "accepted") {
-      setIsOpen((prevState) => ({ ...prevState, menu: false }));
-      respondToFriendRequest({
-        accept: true,
-        friendRequest,
-        setMutationError,
-      });
-    } else if (item === "declined") {
-      setIsOpen((prevState) => ({ ...prevState, menu: false }));
-      respondToFriendRequest({
-        accept: false,
-        friendRequest,
-        setMutationError,
-      });
-    } else {
-      setIsOpen((prevState) => ({ ...prevState, menu: true }));
-    }
-  };
-
-  const handleClose = (item: keyof typeof isOpen) => () => {
-    setIsOpen((prevState) => ({ ...prevState, [item]: false }));
-  };
-
   const { t } = useTranslation([PROFILE]);
 
   return (
-    <>
-      {isSuccess ? null : (
-        <>
-          <Button
-            startIcon={<PersonAddIcon />}
-            ref={menuAnchor}
-            onClick={handleClick("menu")}
-            aria-controls={RESPOND_TO_FRIEND_REQUEST_MENU_ID}
-            loading={isPending}
-          >
-            {t("profile:connection_pending")}
-          </Button>
-          <Menu
-            anchorEl={menuAnchor.current}
-            id={RESPOND_TO_FRIEND_REQUEST_MENU_ID}
-            onClose={handleClose("menu")}
-            open={isOpen.menu}
-          >
-            <MenuItem onClick={handleClick("accepted")}>
-              <CheckIcon />
-              {t("profile:actions.accept_friend_label")}
-            </MenuItem>
-            <MenuItem onClick={handleClick("declined")}>
-              <CloseIcon />
-              {t("profile:actions.dismiss_friend_request_menuitem")}
-            </MenuItem>
-          </Menu>
-        </>
-      )}
-    </>
+    <Button
+      component={Link}
+      startIcon={<PersonAddIcon />}
+      href={`${connectionsRoute}?from=${friendRequest.userId}`}
+    >
+      {t("profile:connection_pending")}
+    </Button>
   );
 }
 

app/web/features/profile/locales/en.json

@@ -5,8 +5,6 @@
     "add_friend": "Add friend",
     "back_to_dashboard": "Back to dashboard",
     "message_label": "Message",
-    "accept_friend_label": "Accept",
-    "dismiss_friend_request_menuitem": "Dismiss",
     "request": "Request"
   },
   "heading": {