StanGirard/quivr
1
1
Fork 0
mirror of https://github.com/StanGirard/quivr.git synced 2024-10-26 14:00:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(brain): add a delete button

Browse Source
This commit is contained in:
iMADi-ARCH 2023-07-02 19:32:20 +05:30
parent ce18e033c1
commit c7e154fc55
2 changed files with 31 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/lib/api/brains.ts
View File

@ -50,7 +50,7 @@ export const deleteBrainFromBE = async (
brainId: UUID
): Promise<void> => {
try {
(await axiosInstance.delete(`/brain/${brainId}/`)).data;
(await axiosInstance.delete(`/brains/${brainId}/`)).data;
} catch (error) {
console.error(`Error deleting brain ${brainId}`, error);

44
frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown.tsx
View File

@ -1,19 +1,19 @@
/* eslint-disable */
import { useEffect, useRef, useState } from "react";
import { FaBrain } from "react-icons/fa";
import { IoMdAdd } from "react-icons/io";
import { IoMdAdd, IoMdTrash } from "react-icons/io";
import Button from "@/lib/components/ui/Button";
import Field from "@/lib/components/ui/Field";
import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
import { useEventTracking } from "@/services/analytics/useEventTracking";
import { AnimatePresence, motion } from "framer-motion";
import { MdCheck } from "react-icons/md";
import { MdCheck, MdDelete } from "react-icons/md";
export const BrainsDropDown = (): JSX.Element => {
const [showDropdown, setShowDropdown] = useState(false);
const [newBrainName, setNewBrainName] = useState("");
const { allBrains, createBrain, setActiveBrain, currentBrain } =
const { allBrains, createBrain, setActiveBrain, currentBrain, deleteBrain } =
useBrainContext();
const dropdownRef = useRef<HTMLDivElement | null>(null);
const { track } = useEventTracking();
@ -100,19 +100,35 @@ export const BrainsDropDown = (): JSX.Element => {
<div className="overflow-auto scrollbar flex flex-col h-full">
{/* List of brains */}
{allBrains.map((brain) => (
<button
<div
key={brain.id}
type="button"
className={`flex items-center gap-2 w-full text-left px-4 py-2 text-sm leading-5 text-gray-900 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:bg-gray-100 dark:focus:bg-gray-700 focus:outline-none`}
onClick={() => setActiveBrain({ ...brain })}
className="relative flex group items-center"
>
<span className="flex-1">{brain.name}</span>
<span>
{currentBrain?.id === brain.id && (
<MdCheck className="text-xl" width={32} height={32} />
)}
</span>
</button>
<button
type="button"
className={`flex flex-1 items-center gap-2 w-full text-left px-4 py-2 text-sm leading-5 text-gray-900 dark:text-gray-300 group-hover:bg-gray-100 dark:group-hover:bg-gray-700 group-focus:bg-gray-100 dark:group-focus:bg-gray-700 group-focus:outline-none transition-colors`}
onClick={() => setActiveBrain({ ...brain })}
>
<span>
<MdCheck
style={{
opacity: currentBrain?.id === brain.id ? 1 : 0,
}}
className="text-xl transition-opacity"
width={32}
height={32}
/>
</span>
<span className="flex-1">{brain.name}</span>
</button>
<Button
className="group-hover:opacity-100 opacity-0 absolute right-0 hover:text-red-500 transition-[colors,opacity]"
onClick={() => deleteBrain(brain.id)}
variant={"tertiary"}
>
<MdDelete className="text-xl" />
</Button>
</div>
))}
</div>
</motion.div>