[MPT-65] Attempt to create shareable link

components/ResultView.tsx

@@ -96,6 +96,8 @@ type DisplayResult = {
   displaySchool: string | null;
   industryColors: Map<string, string>;
   thumbnailImageUrl?: string;
+  uuid: string;
+  searchName: string | null;
 };
 
 const ResultView = ({ result }: { result: SearchResult }) => {
@@ -108,6 +110,7 @@ const ResultView = ({ result }: { result: SearchResult }) => {
     role,
     school,
     thumbnail_image_url,
+    id,
   } = result;
 
   const displayName =
@@ -148,6 +151,9 @@ const ResultView = ({ result }: { result: SearchResult }) => {
       ? fillHighlights(fullBio.snippet, fullBio.raw)
       : null;
 
+  const uuid = id.raw;
+  const searchName = name.raw;
+
   const displayResult: DisplayResult = {
     displayCourseOfStudy,
     displayFullBio,
@@ -159,6 +165,8 @@ const ResultView = ({ result }: { result: SearchResult }) => {
     displayShortBio,
     industryColors,
     thumbnailImageUrl,
+    searchName,
+    uuid,
   };
 
   return (

components/ResultViewGrid.tsx

@@ -15,27 +15,49 @@ const ResultViewGrid = ({
 }: {
   displayResult: DisplayResult;
 }) => {
-  const { displayName, displayOrganisation, displayRole, thumbnailImageUrl } =
-    displayResult;
+  const {
+    displayName,
+    displayOrganisation,
+    displayRole,
+    thumbnailImageUrl,
+    uuid,
+  } = displayResult;
 
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleOpen = () => {
-    window.history.pushState({}, "");
+    const newUrl = `${window.location.origin}${window.location.pathname}?uid=${uuid}`;
+    window.history.pushState({ uuid }, "", newUrl);
     setIsModalOpen(true);
   };
 
   const handleClose = () => {
-    window.history.back();
+    window.history.pushState({}, "", window.location.pathname);
+    setIsModalOpen(false);
   };
 
   useEffect(() => {
-    if (isModalOpen) {
-      window.onpopstate = () => {
-        setIsModalOpen(false);
-      };
+    const searchParams = new URLSearchParams(window.location.search);
+    const uidFromUrl = searchParams.get("uid");
+    if (uidFromUrl === uuid) {
+      setIsModalOpen(true);
+    } else {
+      setIsModalOpen(false);
     }
-  });
+
+    const handlePopState = () => {
+      const searchParams = new URLSearchParams(window.location.search);
+      const uidFromUrl = searchParams.get("uid");
+      if (uidFromUrl !== uuid) {
+        setIsModalOpen(false);
+      }
+    };
+
+    window.addEventListener("popstate", handlePopState);
+    return () => {
+      window.removeEventListener("popstate", handlePopState);
+    };
+  }, [uuid]);
 
   return (
     <Card

components/ResultViewList.tsx

@@ -2,6 +2,14 @@ import React, { Fragment, useState } from "react";
 import { Chip } from "@mui/material";
 
 import type { DisplayResult } from "./ResultView";
+import {
+  Snackbar,
+  SpeedDial,
+  SpeedDialIcon,
+  SpeedDialAction,
+} from "@mui/material";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import ShareIcon from "@mui/icons-material/Share";
 
 const ResultViewList = ({
   displayResult,
@@ -19,8 +27,22 @@ const ResultViewList = ({
     displaySchool,
     industryColors,
     thumbnailImageUrl,
+    uuid,
+    searchName,
   } = displayResult;
 
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+
+  const handleCopyLink = () => {
+    const link = `${window.location.origin}${
+      window.location.pathname
+    }?uid=${uuid}&q=${encodeURIComponent(searchName || "")}`;
+    navigator.clipboard.writeText(link).then(() => {
+      setSnackbarOpen(true);
+      setTimeout(() => setSnackbarOpen(false), 1000);
+    });
+  };
+
   return (
     <div className="sui-result">
       <div className="sui-result__image">
@@ -39,6 +61,19 @@ const ResultViewList = ({
               }}
             />
           )}
+          <SpeedDial
+            ariaLabel="Share options"
+            icon={<SpeedDialIcon icon={<ShareIcon />} />}
+            direction="left"
+          >
+            <SpeedDialAction
+              key="copyLink"
+              icon={<ContentCopyIcon />}
+              tooltipTitle="Copy link"
+              onClick={handleCopyLink}
+            />
+          </SpeedDial>
+          <Snackbar open={snackbarOpen} message="Link copied to clipboard" />
         </div>
         <ul className="sui-result__details">
           <li className="sui-result__industries">