From a2a91647c115a72d40cab6dc46f58a4c800bee3b Mon Sep 17 00:00:00 2001 From: Andrzej Stepien Date: Wed, 13 Sep 2023 15:53:00 +0200 Subject: [PATCH] improve delete functionality --- src/Components/PageHeader.jsx | 46 ++++++++++++++++++---------- src/main.jsx | 23 ++++++++++++++ src/routes/deletePublication.jsx | 7 +++-- src/routes/deletePublicationRoot.jsx | 37 ++++++++++++++++++++++ src/routes/deleteStory.jsx | 7 +++-- src/routes/deleteStoryRoot.jsx | 37 ++++++++++++++++++++++ src/routes/deleteSubmission.jsx | 7 +++-- src/routes/deleteSubmissionRoot.jsx | 39 +++++++++++++++++++++++ src/styles/PageHeader.css | 2 +- 9 files changed, 181 insertions(+), 24 deletions(-) create mode 100644 src/routes/deletePublicationRoot.jsx create mode 100644 src/routes/deleteStoryRoot.jsx create mode 100644 src/routes/deleteSubmissionRoot.jsx diff --git a/src/Components/PageHeader.jsx b/src/Components/PageHeader.jsx index d17aee3..571a5d7 100644 --- a/src/Components/PageHeader.jsx +++ b/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 (
@@ -24,22 +47,11 @@ export default function (props) { -
{ - if ( - !confirm( - "Please confirm you want to delete this record." - ) - ) { - event.preventDefault(); - } - }} - > - -
+ + diff --git a/src/main.jsx b/src/main.jsx index 8b3b503..011378c 100644 --- a/src/main.jsx +++ b/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:, + loader:storiesLoader + }, + { + path:"/publication/delete", + element:, + loader:publicationsLoader + }, + { + path:"/submission/delete", + element:, + loader:submissionsLoader } ] }, diff --git a/src/routes/deletePublication.jsx b/src/routes/deletePublication.jsx index bd1ccec..6033e46 100644 --- a/src/routes/deletePublication.jsx +++ b/src/routes/deletePublication.jsx @@ -1,7 +1,10 @@ import { redirect } from "react-router"; import { requestDelete } from "../APIcalls.mjs"; -export async function action({params}){ - await requestDelete({id:Number(params.publicationId)},'publication') +export async function action({request}){ + const formData = await request.formData() + const data = Object.fromEntries(formData) + console.dir(data) + await requestDelete({id:Number(data.id)},'publication') return redirect("/publications") } \ No newline at end of file diff --git a/src/routes/deletePublicationRoot.jsx b/src/routes/deletePublicationRoot.jsx new file mode 100644 index 0000000..40db6f6 --- /dev/null +++ b/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( + <> +
+
{ + if ( + !confirm( + "Please confirm you want to delete this record." + ) + ) { + event.preventDefault(); + } + }}> +

Which publication would you like to delete?

+ + +
+ + +
+ + ) +} \ No newline at end of file diff --git a/src/routes/deleteStory.jsx b/src/routes/deleteStory.jsx index 1058ef7..da7d0e9 100644 --- a/src/routes/deleteStory.jsx +++ b/src/routes/deleteStory.jsx @@ -1,7 +1,10 @@ import { redirect } from "react-router"; import { requestDelete } from "../APIcalls.mjs"; -export async function action({params}){ - await requestDelete({id:Number(params.storyId)},'story') +export async function action({request}){ + const formData = await request.formData() + const data = Object.fromEntries(formData) + console.dir(data) + await requestDelete({id:Number(data.id)},'story') return redirect("/stories") } \ No newline at end of file diff --git a/src/routes/deleteStoryRoot.jsx b/src/routes/deleteStoryRoot.jsx new file mode 100644 index 0000000..bd84a12 --- /dev/null +++ b/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( + <> +
+
{ + if ( + !confirm( + "Please confirm you want to delete this record." + ) + ) { + event.preventDefault(); + } + }}> +

Which story would you like to delete?

+ + +
+ + +
+ + ) +} \ No newline at end of file diff --git a/src/routes/deleteSubmission.jsx b/src/routes/deleteSubmission.jsx index 36a13c2..b7a3bf7 100644 --- a/src/routes/deleteSubmission.jsx +++ b/src/routes/deleteSubmission.jsx @@ -1,7 +1,10 @@ import { redirect } from "react-router"; import { requestDelete } from "../APIcalls.mjs"; -export async function action({params}){ - await requestDelete({id:Number(params.storyId)},'submission') +export async function action({request}){ + const formData = await request.formData() + const data = Object.fromEntries(formData) + console.dir(data) + await requestDelete({id:Number(data.id)},'submission') return redirect("/submissions") } \ No newline at end of file diff --git a/src/routes/deleteSubmissionRoot.jsx b/src/routes/deleteSubmissionRoot.jsx new file mode 100644 index 0000000..fc39e27 --- /dev/null +++ b/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( + <> +
+
{ + if ( + !confirm( + "Please confirm you want to delete this record." + ) + ) { + event.preventDefault(); + } + }}> +

Which submission would you like to delete?

+ + +
+ +
+
+ + ) +} \ No newline at end of file diff --git a/src/styles/PageHeader.css b/src/styles/PageHeader.css index 7592a2c..67542e5 100644 --- a/src/styles/PageHeader.css +++ b/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);