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 => { />
{/* List of brains */} + {isFetchingBrains && ( +
+

Loading...

+
+ )} {allBrains.map((brain) => { if (brain.name.includes(searchQuery)) { return ( @@ -68,13 +73,7 @@ export const BrainsDropDown = (): JSX.Element => { {brain.name} - +
); } 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 => { ); }; - -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 ( +
+ + +
+ ); +}; 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 ( + void 0} + variant={"tertiary"} + > + + + } + title="Share brain" + > +
+

{brainShareLink}

+ +
+
+ ); +}; 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 ( 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, }; };