From 2ffa0f3ff425526d08a63f5123e7fc7eb86975b1 Mon Sep 17 00:00:00 2001
From: Mamadou DICKO <63923024+mamadoudicko@users.noreply.github.com>
Date: Wed, 1 Nov 2023 12:18:08 +0100
Subject: [PATCH] feat: allow to share a public brain link (#1541)

Issue: https://github.com/StanGirard/quivr/issues/1539

Demo:



https://github.com/StanGirard/quivr/assets/63923024/ec0dcaa9-3c61-4a2a-a653-bceec435ad60
---
 .../PublicBrainItem/PublicBrainItem.tsx       | 14 ++++++++++---
 .../hooks/usePublicBrainItem.ts               | 20 +++++++++++++++++--
 .../utils/generatePublicBrainLink.ts          |  2 ++
 3 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 frontend/app/brains-management/library/components/PublicBrainItem/utils/generatePublicBrainLink.ts

diff --git a/frontend/app/brains-management/library/components/PublicBrainItem/PublicBrainItem.tsx b/frontend/app/brains-management/library/components/PublicBrainItem/PublicBrainItem.tsx
index 9b2e4c789..d0353af71 100644
--- a/frontend/app/brains-management/library/components/PublicBrainItem/PublicBrainItem.tsx
+++ b/frontend/app/brains-management/library/components/PublicBrainItem/PublicBrainItem.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { MdAdd } from "react-icons/md";
+import { MdAdd, MdLink } from "react-icons/md";
 
 import Button from "@/lib/components/ui/Button";
 import { Modal } from "@/lib/components/ui/Modal";
@@ -21,6 +21,7 @@ export const PublicBrainItem = ({
     subscriptionRequestPending,
     isSubscriptionModalOpened,
     setIsSubscriptionModalOpened,
+    handleCopyBrainLink,
   } = usePublicBrainItem({
     brainId: brain.id,
   });
@@ -78,14 +79,21 @@ export const PublicBrainItem = ({
         <p className={`mb-10 ${isBrainDescriptionEmpty && "text-gray-400"}`}>
           {brainDescription}
         </p>
-
         <p className="font-bold mb-5">
           <span>
             <span className="mr-2">{t("public_brain_last_update_label")}:</span>
             {formatDate(brain.last_update)}
           </span>
         </p>
-        <div className="flex flex-1 justify-end">{subscribeButton}</div>
+        <div className="flex flex-1 justify-between items-center">
+          <Button
+            onClick={() => void handleCopyBrainLink()}
+            className="p-1 bg-white border-solid border border-gray-300 rounded-md hover:bg-gray-100"
+          >
+            <MdLink size="20" color="gray" />
+          </Button>
+          {subscribeButton}
+        </div>
       </div>
     </Modal>
   );
diff --git a/frontend/app/brains-management/library/components/PublicBrainItem/hooks/usePublicBrainItem.ts b/frontend/app/brains-management/library/components/PublicBrainItem/hooks/usePublicBrainItem.ts
index 768d24403..187a9eec7 100644
--- a/frontend/app/brains-management/library/components/PublicBrainItem/hooks/usePublicBrainItem.ts
+++ b/frontend/app/brains-management/library/components/PublicBrainItem/hooks/usePublicBrainItem.ts
@@ -1,4 +1,5 @@
 import { UUID } from "crypto";
+import { useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -7,6 +8,8 @@ import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainConte
 import { getAxiosErrorParams } from "@/lib/helpers/getAxiosErrorParams";
 import { useToast } from "@/lib/hooks";
 
+import { generatePublicBrainLink } from "../utils/generatePublicBrainLink";
+
 type UseSubscribeToBrainProps = {
   brainId: UUID;
 };
@@ -19,8 +22,12 @@ export const usePublicBrainItem = ({ brainId }: UseSubscribeToBrainProps) => {
   const { publish } = useToast();
   const { allBrains, fetchAllBrains } = useBrainContext();
 
-  const [isSubscriptionModalOpened, setIsSubscriptionModalOpened] =
-    useState(false);
+  const searchParams = useSearchParams();
+  const urlBrainId = searchParams?.get("brainId");
+
+  const [isSubscriptionModalOpened, setIsSubscriptionModalOpened] = useState(
+    urlBrainId === brainId
+  );
 
   const isUserSubscribedToBrain =
     allBrains.find((brain) => brain.id === brainId) !== undefined;
@@ -56,11 +63,20 @@ export const usePublicBrainItem = ({ brainId }: UseSubscribeToBrainProps) => {
     }
   };
 
+  const handleCopyBrainLink = async () => {
+    await navigator.clipboard.writeText(generatePublicBrainLink(brainId));
+    publish({
+      variant: "success",
+      text: t("copiedToClipboard", { ns: "brain" }),
+    });
+  };
+
   return {
     handleSubscribeToBrain,
     subscriptionRequestPending,
     isUserSubscribedToBrain,
     setIsSubscriptionModalOpened,
     isSubscriptionModalOpened,
+    handleCopyBrainLink,
   };
 };
diff --git a/frontend/app/brains-management/library/components/PublicBrainItem/utils/generatePublicBrainLink.ts b/frontend/app/brains-management/library/components/PublicBrainItem/utils/generatePublicBrainLink.ts
new file mode 100644
index 000000000..caa79468f
--- /dev/null
+++ b/frontend/app/brains-management/library/components/PublicBrainItem/utils/generatePublicBrainLink.ts
@@ -0,0 +1,2 @@
+export const generatePublicBrainLink = (brainId: string): string =>
+  `${window.location.origin}/brains-management/library?brainId=${brainId}`;