issue-159 Add delete button to part profile (for part owner)

schema had to be update to add a deleted boolean to part.
Easier than setting up cascading deletes for comments and reactions.
resolves #159

web/src/components/PartProfile/PartProfile.js

@@ -4,6 +4,7 @@ import { Link, navigate, routes } from '@redwoodjs/router'
 import Editor from 'rich-markdown-editor'
 
 import ImageUploader from 'src/components/ImageUploader'
+import ConfirmDialog from 'src/components/ConfirmDialog'
 import Breadcrumb from 'src/components/Breadcrumb'
 import EmojiReaction from 'src/components/EmojiReaction'
 import Button from 'src/components/Button'
@@ -14,14 +15,15 @@ const PartProfile = ({
   userPart,
   isEditable,
   onSave,
+  onDelete,
   onReaction,
   onComment,
 }) => {
   const [comment, setComment] = useState('')
+  const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false)
   const { currentUser } = useAuth()
   const canEdit = currentUser?.sub === userPart.id
   const part = userPart?.Part
-  console.log(part)
   const emotes = countEmotes(part?.Reaction)
   const userEmotes = part?.userReactions.map(({ emote }) => emote)
   useEffect(() => {
@@ -100,7 +102,7 @@ const PartProfile = ({
             })}
           >
             <Button
-              className="mt-4 ml-auto shadow-md hover:shadow-lg bg-indigo-200"
+              className="mt-4 ml-auto shadow-md hover:shadow-lg bg-indigo-200 w-full justify-end"
               shouldAnimateHover
               iconName="terminal"
               onClick={() => {}}
@@ -109,15 +111,27 @@ const PartProfile = ({
             </Button>
           </Link>
           {canEdit && (
-            <Button
-              className="mt-4 ml-auto shadow-md hover:shadow-lg bg-indigo-200 relative z-20"
-              shouldAnimateHover
-              iconName={isEditable ? 'save' : 'pencil'}
-              onClick={onEditSaveClick}
-            >
-              {isEditable ? 'Save Details' : 'Edit Details'}
-            </Button>
+            <>
+              <Button
+                className="mt-4 ml-auto shadow-md hover:shadow-lg bg-indigo-200 relative z-20 w-full justify-end"
+                shouldAnimateHover
+                iconName={isEditable ? 'save' : 'pencil'}
+                onClick={onEditSaveClick}
+              >
+                {isEditable ? 'Save Details' : 'Edit Details'}
+              </Button>
+              <Button
+                className="mt-4 ml-auto shadow-md hover:shadow-lg bg-red-200 relative z-20 w-full justify-end"
+                shouldAnimateHover
+                iconName={'trash'}
+                onClick={() => setIsConfirmDialogOpen(true)}
+                type="danger"
+              >
+                Delete
+              </Button>
+            </>
           )}
+          {/* gray overlay */}
           {isEditable && (
             <div className="absolute inset-0 bg-gray-300 opacity-75 z-10 transform scale-x-110 -ml-1 -mt-2" />
           )}
@@ -216,6 +230,12 @@ const PartProfile = ({
           )}
         </section>
       </div>
+      <ConfirmDialog
+        open={isConfirmDialogOpen}
+        onClose={() => setIsConfirmDialogOpen(false)}
+        onConfirm={onDelete}
+        message="Are you sure you want to delete? This action cannot be undone."
+      />
     </>
   )
 }