[MPT-65] Attempt to create shareable link

components/ResetButton.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import { withSearch } from "@elastic/react-search-ui";
+
+function ClearFacets({ filters, removeFilter }) {
+  const handleClearAll = () => {
+    for (const filter of filters) {
+      removeFilter(filter.field, filter.value);
+    }
+  };
+
+  const [isHovered, setIsHovered] = useState(false);
+
+  const buttonStyle = {
+    backgroundColor: "#fff",
+    color: "#333",
+    border: "1px solid #ccc",
+    borderRadius: "4px",
+    padding: "10px 20px",
+    fontSize: "14px",
+    cursor: "pointer",
+    margin: "10px 0",
+    transition: "all 0.3s ease",
+    outline: "none",
+    width: "100%",
+    display: "block",
+  };
+
+  const buttonHoverStyle = {
+    ...buttonStyle,
+    backgroundColor: "#f8f8f8",
+    borderColor: "#bbb",
+  };
+
+  return (
+    <button
+      style={isHovered ? buttonHoverStyle : buttonStyle}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={handleClearAll}
+    >
+      Clear All Filters
+    </button>
+  );
+}
+
+export default withSearch(({ filters, removeFilter }) => ({
+  filters,
+  removeFilter,
+}))(ClearFacets);

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,33 +15,54 @@ 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
       className="sui-resultgrid"
       style={{
-        maxWidth: "165px",
         width: "100%",
         height: "auto",
         padding: "0px",

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">

next.config.js

@@ -3,8 +3,8 @@
 const path = require("path");
 
 const nextConfig = {
+  output: "export",
   reactStrictMode: true,
-
   swcMinify: true,
 
   // Disable css--modules component styling