Resume
/
sub-manager-frontend
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve delete functionality

This commit is contained in:
Andrzej Stepien 2023-09-13 15:53:00 +02:00
parent 558d7ce770
commit a2a91647c1
9 changed files with 181 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/Components/PageHeader.jsx
View File

@ -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
method="post"
action="delete"
onSubmit={(event) => {
if (
!confirm(
"Please confirm you want to delete this record."
)
) {
event.preventDefault();
}
}}
>
<button type="submit"
><img src={trash} /></button>
</Form>
<button
onClick={handleClickDelete}>
<img src={trash} />
</button>
</span>

23
src/main.jsx
View File

@ -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
}
]
},

7
src/routes/deletePublication.jsx
View File

@ -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")
}

37
src/routes/deletePublicationRoot.jsx Normal file
View File

@ -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>
</>
)
}

7
src/routes/deleteStory.jsx
View File

@ -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")
}

37
src/routes/deleteStoryRoot.jsx Normal file
View File

@ -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>
</>
)
}

7
src/routes/deleteSubmission.jsx
View File

@ -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")
}

39
src/routes/deleteSubmissionRoot.jsx Normal file
View File

@ -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>
</>
)
}

2
src/styles/PageHeader.css
View File

@ -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);