Implement dream edits

src/app/(site)/(internal)/dashboard/components/dreams/card/DreamCard.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import {FC, Fragment, useCallback, useState} from "react";
-import {Dream} from "@prisma/client";
+import {Dream, DreamCharacter, DreamTag} from "@prisma/client";
 import {CardBody, CardHeader} from "@nextui-org/card";
 import Card from "@/app/(site)/components/Card";
 import DreamModal from "@/app/(site)/(internal)/dashboard/components/dreams/card/DreamModal";
@@ -12,14 +12,16 @@ import {deleteMutator, handleAxiosError} from "@/utils/client/client-utils";
 
 type Props = {
     dream: Dream,
+    allCharacters: DreamCharacter[],
+    allTags: DreamTag[],
     optimisticRemove?: OptimisticWorker<Dream>,
 }
 
 const DeleteDream = (dreamId: string) => {
     return useSWRMutation(`/api/me/dreams/${dreamId}`, deleteMutator<Dream>())
 }
 
-const DreamCard: FC<Props> = ({dream, optimisticRemove}) => {
+const DreamCard: FC<Props> = ({dream, allTags, allCharacters, optimisticRemove}) => {
     const [modalOpen, setModalOpen] = useState(false)
     const {trigger: deleteDream} = DeleteDream(dream.id)
 
@@ -33,6 +35,8 @@ const DreamCard: FC<Props> = ({dream, optimisticRemove}) => {
         <Fragment>
             <DreamModal
                 dream={dream}
+                allCharacters={allCharacters}
+                allTags={allTags}
                 isOpen={modalOpen}
                 onClose={() => setModalOpen(false)}
                 onDelete={() => {

src/app/(site)/(internal)/dashboard/components/dreams/card/DreamModal.tsx

@@ -1,28 +1,26 @@
 "use client"
 
-import {FC, Fragment, useEffect, useMemo, useState} from "react";
+import {FC, Fragment, useState} from "react";
 import Modal from "@/app/(site)/components/Modal";
-import {Dream} from "@prisma/client";
-import useSWR from "swr";
-import {calcEstimatedReadingTime, fetcher} from "@/utils/client/client-utils";
-import {DreamWithRelations} from "@/app/api/me/dreams/dreams.dto";
-import {Chip} from "@nextui-org/chip";
+import {Dream, DreamCharacter, DreamTag} from "@prisma/client";
 import {Divider} from "@nextui-org/divider";
 import {Button} from "@nextui-org/react";
 import ConfirmationModal from "@/app/(site)/components/ConfirmationModal";
 import TrashIcon from "@/app/(site)/components/icons/TrashIcon";
-import DreamView from "@/app/(site)/(internal)/dashboard/components/dreams/card/DreamView";
+import DreamView from "@/app/(site)/(internal)/dashboard/components/dreams/card/view/DreamView";
 
 type Props = {
     dream: Dream,
+    allCharacters: DreamCharacter[],
+    allTags: DreamTag[],
     isOpen?: boolean,
     onClose?: () => void,
     onDelete?: () => void,
 }
 
 
 
-const DreamModal: FC<Props> = ({dream, isOpen, onClose, onDelete}) => {
+const DreamModal: FC<Props> = ({dream, allTags, allCharacters, isOpen, onClose, onDelete}) => {
     const [deleteModalOpen, setDeleteModalOpen] = useState(false)
 
     return (
@@ -43,7 +41,12 @@ const DreamModal: FC<Props> = ({dream, isOpen, onClose, onDelete}) => {
             >
                 <DreamView
                     dream={dream}
+                    allCharacters={allCharacters}
+                    allTags={allTags}
                     fetchDream={isOpen}
+                    onEdit={(dto) => {
+                        console.log(dto)
+                    }}
                 />
                 <Divider className="my-6"/>
                 <div className="flex justify-end">

src/app/(site)/(internal)/dashboard/components/dreams/card/view/DreamEditableAddButton.tsx

@@ -0,0 +1,56 @@
+import {DropdownMenu, DropdownTrigger} from "@nextui-org/react";
+import {Button} from "@nextui-org/button";
+import PlusIcon from "@/app/(site)/components/icons/PlusIcon";
+import Dropdown from "@/app/(site)/components/Dropdown";
+import {CollectionElement} from "@react-types/shared";
+
+type Props<T extends object> = {
+    items: T[]
+    idArray: string[],
+    editCallback: (dto: {
+        arr: string[],
+        newArr: string[]
+    }) => void,
+    renderItem: (item: T) => CollectionElement<any>
+}
+
+export default function DreamEditableAddButton<T extends object>({
+                                                                     items,
+                                                                     idArray,
+                                                                     editCallback,
+                                                                     renderItem
+                                                                 }: Props<T>) {
+    return (
+        <Dropdown
+            size="sm"
+            color="gradient"
+        >
+            <DropdownTrigger>
+                <Button
+                    color="primary"
+                    className="rounded-full"
+                    size="sm"
+                    isIconOnly
+                    variant="flat"
+                >
+                    <PlusIcon/>
+                </Button>
+            </DropdownTrigger>
+            <DropdownMenu
+                aria-label="Dream Characters"
+                items={items}
+                itemClasses={{
+                    base: "max-w-xs data-[hover=true]:bg-primary/30"
+                }}
+                onAction={(key) => {
+                    editCallback({
+                        newArr: [...idArray, key as string],
+                        arr: idArray
+                    })
+                }}
+            >
+                {(item) => renderItem(item as T)}
+            </DropdownMenu>
+        </Dropdown>
+    )
+}

src/app/(site)/(internal)/dashboard/components/dreams/card/view/DreamEditableChip.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import {FC} from "react";
+import {Chip} from "@nextui-org/chip";
+
+type Props = {
+    editMode: boolean,
+    id: string,
+    value: string,
+    idArray: string[],
+    editCallback: (dto: {
+        arr: string[],
+        newArr: string[]
+    }) => void
+}
+
+const DreamEditableChip: FC<Props> = ({editMode, id, value, idArray, editCallback}) => {
+    return (
+        <Chip
+            color="primary"
+            variant="flat"
+            onClose={editMode ? () => {
+                editCallback({
+                    arr: idArray ?? [],
+                    newArr: idArray.filter(itemId => itemId !== id)
+                })
+            } : undefined}
+            classNames={{
+                base: "gap-2"
+            }}
+            size="sm"
+        >
+            {value}
+        </Chip>
+    )
+}
+
+export default DreamEditableChip