improve delete functionality

src/Components/PageHeader.jsx

@@ -1,9 +1,32 @@
 import plus from '../assets/plus.svg'
 import pencil from '../assets/pencil.svg'
 import trash from '../assets/trash.svg'
-import { Link, Form, useNavigate } from 'react-router-dom'
+import { Link, Form, useNavigate, useSubmit } from 'react-router-dom'
 export default function (props) {
     const navigate = useNavigate()
+    let submit = useSubmit()
+    const handleClickDelete = (event) => {
+        if(props?.id){
+            if (confirm("Are you sure you want to delete this record?")){
+                event.preventDefault();
+                submit({
+                    id:props.id
+                },
+                {
+                    method:"post",
+                    action: `${props.url}/${props.id}/delete`
+                })            
+                
+            }   
+        }else{
+            navigate(`${props.url}/delete`)
+        }
+        
+
+        
+      }
+
+
     return (
         <header id="page-header">
             <div id="h-container">
@@ -24,22 +47,11 @@ export default function (props) {
                     <button onClick={() => { navigate(`${props.url}${props?.id ? `/${props.id}` : ""}/edit`) }}>
                         <img src={pencil} />
                     </button>
-                    <Form
+                    <button 
-                    method="post"
+                          onClick={handleClickDelete}>
-                    action="delete"
+                        <img src={trash} />
-                    onSubmit={(event) => {
+                    </button>
-                        if (
+                   
-                            !confirm(
-                                "Please confirm you want to delete this record."
-                            )
-                        ) {
-                            event.preventDefault();
-                        }
-                    }}
-                >
-                    <button type="submit"
-                    ><img src={trash} /></button>
-                </Form>
 
 
             </span>

src/main.jsx

@@ -14,11 +14,15 @@ import CreateStory, {action as createStoryAction} from './routes/createStory';
 import CreatePublication, {action as createPublicationAction} from './routes/createPublication';
 import { action as deleteStoryAction } from './routes/deleteStory';
 import { action as deletePublicationAction } from './routes/deletePublication';
+import {action as deleteSubmissionAction} from './routes/deleteSubmission'
 import EditSubmission, {action as editSubmissionAction} from './routes/editSubmission';
 import CreateSubmission, {action as createSubmissionAction} from './routes/createSubmission';
 import EditStoryRoot from './routes/editStoryRoot';
 import EditPublicationRoot from './routes/editPublicationRoot';
 import EditSubmissionRoot from './routes/editSubmissionRoot';
+import DeleteStoryRoot from './routes/deleteStoryRoot';
+import DeletePublicationRoot from './routes/deletePublicationRoot';
+import DeleteSubmissionRoot from './routes/deleteSubmissionRoot';
 import './styles/index.css'
 import {
   createBrowserRouter,
@@ -121,6 +125,25 @@ const router = createBrowserRouter([
       {
         path:"/publication/:publicationId/delete",
         action:deletePublicationAction 
+      },
+      {
+        path:"/submission/:subId/delete",
+        action: deleteSubmissionAction
+      },
+      {
+        path:"/story/delete",
+        element:<DeleteStoryRoot/>,
+        loader:storiesLoader
+      },
+      {
+        path:"/publication/delete",
+        element:<DeletePublicationRoot/>,
+        loader:publicationsLoader
+      },
+      {
+        path:"/submission/delete",
+        element:<DeleteSubmissionRoot/>,
+        loader:submissionsLoader
       }
     ]
   },

src/routes/deletePublication.jsx

@@ -1,7 +1,10 @@
 import { redirect } from "react-router";
 import { requestDelete } from "../APIcalls.mjs";
 
-export async function action({params}){
+export async function action({request}){
-    await requestDelete({id:Number(params.publicationId)},'publication')
+    const formData = await request.formData()
+    const data = Object.fromEntries(formData)
+    console.dir(data)
+    await requestDelete({id:Number(data.id)},'publication')
     return redirect("/publications")
 }

src/routes/deletePublicationRoot.jsx

@@ -0,0 +1,37 @@
+import { Form, useLoaderData } from "react-router-dom";
+import Dropdown from "../Components/Dropdown";
+import { useState } from "react";
+export default function DeletePublicationRoot (){
+const {publications} = useLoaderData()
+const publicationsOptions = publications?.map(row=>[row.id,row.title])
+const [id,setId]=useState(1)
+const handleChange = (event) => {
+    const value = event.target.value
+    console.log(value)
+    setId(value)
+}
+    return(
+        <>
+        <div id="page-container" className="vertical-center">
+        <Form 
+        method="post"
+        action="delete"
+        onSubmit={(event) => {
+            if (
+                !confirm(
+                    "Please confirm you want to delete this record."
+                )
+            ) {
+                event.preventDefault();
+            }
+        }}>
+        <h2>Which publication would you like to delete?</h2>
+
+        <Dropdown name="id" value={id} options={publicationsOptions} handleChange={handleChange}/>
+        <br/>
+        <button type="submit">DELETE</button>
+        </Form>
+        </div>
+        </>
+    )
+}

src/routes/deleteStory.jsx

@@ -1,7 +1,10 @@
 import { redirect } from "react-router";
 import { requestDelete } from "../APIcalls.mjs";
 
-export async function action({params}){
+export async function action({request}){
-    await requestDelete({id:Number(params.storyId)},'story')
+    const formData = await request.formData()
+    const data = Object.fromEntries(formData)
+    console.dir(data)
+    await requestDelete({id:Number(data.id)},'story')
     return redirect("/stories")
 }

src/routes/deleteStoryRoot.jsx

@@ -0,0 +1,37 @@
+import { Form, Link, useLoaderData, useNavigate } from "react-router-dom";
+import Dropdown from "../Components/Dropdown";
+import { useState } from "react";
+export default function DeleteStoryRoot (){
+const {stories} = useLoaderData()
+const storiesOptions = stories?.map(row=>[row.id,row.title])
+const [id,setId]=useState(1)
+const handleChange = (event) => {
+    const value = event.target.value
+    console.log(value)
+    setId(value)
+}
+    return(
+        <>
+        <div id="page-container" className="vertical-center">
+        <Form 
+        method="post"
+        action="delete"
+        onSubmit={(event) => {
+            if (
+                !confirm(
+                    "Please confirm you want to delete this record."
+                )
+            ) {
+                event.preventDefault();
+            }
+        }}>
+        <h2>Which story would you like to delete?</h2>
+
+        <Dropdown name="id" value={id} options={storiesOptions} handleChange={handleChange}/>
+        <br/>
+        <button type="submit">DELETE</button>
+        </Form>
+        </div>
+        </>
+    )
+}

src/routes/deleteSubmission.jsx

@@ -1,7 +1,10 @@
 import { redirect } from "react-router";
 import { requestDelete } from "../APIcalls.mjs";
 
-export async function action({params}){
+export async function action({request}){
-    await requestDelete({id:Number(params.storyId)},'submission')
+    const formData = await request.formData()
+    const data = Object.fromEntries(formData)
+    console.dir(data)
+    await requestDelete({id:Number(data.id)},'submission')
     return redirect("/submissions")
 }

src/routes/deleteSubmissionRoot.jsx

@@ -0,0 +1,39 @@
+import { Form, useLoaderData } from "react-router-dom";
+import Dropdown from "../Components/Dropdown";
+import { useState } from "react";
+export default function DeleteSubmissionRoot (){
+const {submissions} = useLoaderData()
+const submissionsOptions = submissions?.map(row=>[row.id,row.date_submitted])
+const [id,setId]=useState(1)
+const handleChange = (event) => {
+    const value = event.target.value
+    console.log(value)
+    setId(value)
+}
+    return(
+        <>
+        <div id="page-container" className="vertical-center">
+        <Form 
+        method="post"
+        action="delete"
+        onSubmit={(event) => {
+            if (
+                !confirm(
+                    "Please confirm you want to delete this record."
+                )
+            ) {
+                event.preventDefault();
+            }
+        }}>
+        <h2>Which submission would you like to delete?</h2>
+        <label>Date submitted:
+        <Dropdown name="id" value={id} options={submissionsOptions} handleChange={handleChange}/>
+        </label>
+        
+        <br/>
+        <button type="submit">DELETE</button>
+        </Form>
+        </div>
+        </>
+    )
+}

src/styles/PageHeader.css

@@ -37,7 +37,7 @@ display:block;
 max-width: fit-content;
 }
 #page-header h1{
-    line-height: 1em;
+    line-height: 1.4em;
     display:block;
     font-size:6rem;
     text-shadow: var(--text-shadow-light);