From 8749ffd0bd6930e577e22ebb238a27d9011c3758 Mon Sep 17 00:00:00 2001
From: Mamadou DICKO <63923024+mamadoudicko@users.noreply.github.com>
Date: Tue, 11 Jul 2023 14:45:18 +0200
Subject: [PATCH] Shareable Brains - 2 (#601)

* feat(brains): add fetching indicator

* feat: add brain share modal
---
 .../BrainsDropDown/BrainsDropDown.tsx         | 21 ++++-----
 .../{ => components}/AddBrainModal.tsx        |  4 +-
 .../components/BrainActions/BrainActions.tsx  | 28 +++++++++++
 .../components/BrainActions/ShareBrain.tsx    | 47 +++++++++++++++++++
 .../components/BrainActions/index.ts          |  1 +
 .../BrainsDropDown/components/index.ts        |  2 +
 .../components/BrainsDropDown/index.ts        |  5 +-
 frontend/lib/components/ui/Modal.tsx          |  4 +-
 .../BrainProvider/hooks/useBrainProvider.ts   |  1 -
 9 files changed, 93 insertions(+), 20 deletions(-)
 rename frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/{ => components}/AddBrainModal.tsx (95%)
 create mode 100644 frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/BrainActions.tsx
 create mode 100644 frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/ShareBrain.tsx
 create mode 100644 frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/index.ts
 create mode 100644 frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/index.ts

diff --git a/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/BrainsDropDown.tsx b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/BrainsDropDown.tsx
index b6ed47b6f..bdbbdbe66 100644
--- a/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/BrainsDropDown.tsx
+++ b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/BrainsDropDown.tsx
@@ -1,17 +1,17 @@
 import { useState } from "react";
 import { FaBrain } from "react-icons/fa";
-import { MdCheck, MdDelete } from "react-icons/md";
+import { MdCheck } from "react-icons/md";
 
-import Button from "@/lib/components/ui/Button";
 import Field from "@/lib/components/ui/Field";
 import Popover from "@/lib/components/ui/Popover";
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 
-import { AddBrainModal } from "./AddBrainModal";
+import { AddBrainModal } from "./components/AddBrainModal";
+import { BrainActions } from "./components/BrainActions/BrainActions";
 
 export const BrainsDropDown = (): JSX.Element => {
   const [searchQuery, setSearchQuery] = useState("");
-  const { allBrains, setActiveBrain, currentBrain, deleteBrain } =
+  const { allBrains, isFetchingBrains, setActiveBrain, currentBrain } =
     useBrainContext();
 
   return (
@@ -41,6 +41,11 @@ export const BrainsDropDown = (): JSX.Element => {
             />
             <div className="overflow-auto scrollbar flex flex-col h-48 mt-5">
               {/* List of brains */}
+              {isFetchingBrains && (
+                <div className="flex items-center justify-center h-full">
+                  <p className="text-gray-500">Loading...</p>
+                </div>
+              )}
               {allBrains.map((brain) => {
                 if (brain.name.includes(searchQuery)) {
                   return (
@@ -68,13 +73,7 @@ export const BrainsDropDown = (): JSX.Element => {
                         </span>
                         <span className="flex-1">{brain.name}</span>
                       </button>
-                      <Button
-                        className="group-hover:visible invisible absolute right-0 hover:text-red-500 transition-[colors,opacity]"
-                        onClick={() => void deleteBrain(brain.id)}
-                        variant={"tertiary"}
-                      >
-                        <MdDelete className="text-xl" />
-                      </Button>
+                      <BrainActions brainId={brain.id} />
                     </div>
                   );
                 }
diff --git a/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/AddBrainModal.tsx b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/AddBrainModal.tsx
similarity index 95%
rename from frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/AddBrainModal.tsx
rename to frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/AddBrainModal.tsx
index e0a2d4f34..1112d444a 100644
--- a/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/AddBrainModal.tsx
+++ b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/AddBrainModal.tsx
@@ -6,7 +6,7 @@ import Field from "@/lib/components/ui/Field";
 import Modal from "@/lib/components/ui/Modal";
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 
-const AddBrainModal = (): JSX.Element => {
+export const AddBrainModal = (): JSX.Element => {
   const [newBrainName, setNewBrainName] = useState("");
   const [isPending, setIsPending] = useState(false);
 
@@ -56,5 +56,3 @@ const AddBrainModal = (): JSX.Element => {
     </Modal>
   );
 };
-
-export { AddBrainModal };
diff --git a/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/BrainActions.tsx b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/BrainActions.tsx
new file mode 100644
index 000000000..4cba45a62
--- /dev/null
+++ b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/BrainActions.tsx
@@ -0,0 +1,28 @@
+import { UUID } from "crypto";
+import { MdDelete } from "react-icons/md";
+
+import Button from "@/lib/components/ui/Button";
+import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
+
+import { ShareBrain } from "./ShareBrain";
+
+type BrainActionsProps = {
+  brainId: UUID;
+};
+
+export const BrainActions = ({ brainId }: BrainActionsProps): JSX.Element => {
+  const { deleteBrain } = useBrainContext();
+
+  return (
+    <div className="absolute right-0 flex flex-row">
+      <ShareBrain brainId={brainId} />
+      <Button
+        className="group-hover:visible invisible hover:text-red-500 transition-[colors,opacity] p-1"
+        onClick={() => void deleteBrain(brainId)}
+        variant={"tertiary"}
+      >
+        <MdDelete className="text-xl" />
+      </Button>
+    </div>
+  );
+};
diff --git a/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/ShareBrain.tsx b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/ShareBrain.tsx
new file mode 100644
index 000000000..7c7eef7ef
--- /dev/null
+++ b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/ShareBrain.tsx
@@ -0,0 +1,47 @@
+import { UUID } from "crypto";
+import { MdContentPaste, MdShare } from "react-icons/md";
+
+import Button from "@/lib/components/ui/Button";
+import Modal from "@/lib/components/ui/Modal";
+import { useToast } from "@/lib/hooks";
+
+type ShareBrainModalProps = {
+  brainId: UUID;
+};
+
+export const ShareBrain = ({ brainId }: ShareBrainModalProps): JSX.Element => {
+  const { publish } = useToast();
+
+  const baseUrl = window.location.origin;
+  const brainShareLink = `${baseUrl}/brain_subscription_invitation=${brainId}`;
+
+  const handleCopyInvitationLink = async () => {
+    await navigator.clipboard.writeText(brainShareLink);
+    publish({
+      variant: "success",
+      text: "Copied to clipboard",
+    });
+  };
+
+  return (
+    <Modal
+      Trigger={
+        <Button
+          className="group-hover:visible invisible hover:text-red-500 transition-[colors,opacity] p-1"
+          onClick={() => void 0}
+          variant={"tertiary"}
+        >
+          <MdShare className="text-xl" />
+        </Button>
+      }
+      title="Share brain"
+    >
+      <div className="flex flex-row align-center my-5">
+        <p>{brainShareLink}</p>
+        <Button onClick={() => void handleCopyInvitationLink()}>
+          <MdContentPaste />
+        </Button>
+      </div>
+    </Modal>
+  );
+};
diff --git a/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/index.ts b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/index.ts
new file mode 100644
index 000000000..11fa4bb89
--- /dev/null
+++ b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/index.ts
@@ -0,0 +1 @@
+export * from "./BrainActions";
diff --git a/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/index.ts b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/index.ts
new file mode 100644
index 000000000..131f108a4
--- /dev/null
+++ b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/index.ts
@@ -0,0 +1,2 @@
+export * from "./AddBrainModal";
+export * from "./BrainActions";
diff --git a/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/index.ts b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/index.ts
index cfd7b2d6f..cd14c4a62 100644
--- a/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/index.ts
+++ b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/index.ts
@@ -1,4 +1 @@
-import { AddBrainModal } from "./AddBrainModal";
-import { BrainsDropDown } from "./BrainsDropDown";
-
-export { BrainsDropDown, AddBrainModal };
+export * from "./BrainsDropDown";
diff --git a/frontend/lib/components/ui/Modal.tsx b/frontend/lib/components/ui/Modal.tsx
index 7e3b49a86..3421695b9 100644
--- a/frontend/lib/components/ui/Modal.tsx
+++ b/frontend/lib/components/ui/Modal.tsx
@@ -12,6 +12,7 @@ interface ModalProps {
   children?: ReactNode;
   Trigger: ReactNode;
   CloseTrigger?: ReactNode;
+  opened?: boolean;
 }
 
 const Modal = ({
@@ -20,8 +21,9 @@ const Modal = ({
   children,
   Trigger,
   CloseTrigger,
+  opened = false,
 }: ModalProps): JSX.Element => {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(opened);
 
   return (
     <Dialog.Root onOpenChange={setOpen}>
diff --git a/frontend/lib/context/BrainProvider/hooks/useBrainProvider.ts b/frontend/lib/context/BrainProvider/hooks/useBrainProvider.ts
index a3067edaa..d244008b3 100644
--- a/frontend/lib/context/BrainProvider/hooks/useBrainProvider.ts
+++ b/frontend/lib/context/BrainProvider/hooks/useBrainProvider.ts
@@ -103,6 +103,5 @@ export const useBrainProvider = () => {
     setDefaultBrain,
     fetchAndSetActiveBrain,
     isFetchingBrains,
-    setIsFetchingBrains,
   };
 };