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

implement delete story and publication actions

This commit is contained in:
Andrzej Stepien 2023-09-11 18:12:19 +02:00
parent e64b7967e0
commit ca851e5347
8 changed files with 170 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/APIcalls.mjs
View File

@ -39,7 +39,8 @@ export const requestEdit = async (data,type) => {
console.error(error)
}
}
export const requestDestroy = async (data,type) => {
export const requestDelete = async (data,type) => {
console.log("requesting delete!")
try {
const res = await API.post(`/${type}/delete`,data)
return res

24
src/main.jsx
View File

@ -10,6 +10,10 @@ import Publications from './routes/publications';
import { storiesLoader,publicationsLoader,submissionsLoader } from './loaders.mjs';
import EditStory, {action as editStoryAction } from './routes/editStory';
import EditPublication, {action as editPublicationAction} from './routes/editPublication';
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 './styles/index.css'
import {
createBrowserRouter,
@ -58,6 +62,26 @@ const router = createBrowserRouter([
element: <EditPublication/>,
loader: publicationsLoader,
action: editPublicationAction
},
{
path:"/story/create",
element: <CreateStory/>,
loader: storiesLoader,
action: createStoryAction
},
{
path:"/publication/create",
element: <CreatePublication/>,
loader: publicationsLoader,
action: createPublicationAction
},
{
path:"/story/:storyId/delete",
action:deleteStoryAction
},
{
path:"/publication/:publicationId/delete",
action:deletePublicationAction
}
]
},

53
src/routes/createPublication.jsx Normal file
View File

@ -0,0 +1,53 @@
import { Form,redirect } from "react-router-dom";
import PageHeader from "../Components/PageHeader";
import { requestCreate } from "../APIcalls.mjs";
export async function action({request,params}){
const formData = await request.formData()
const data = Object.fromEntries(formData)
console.dir(data)
await requestCreate(data,'publication')
return redirect(`/publications`)
}
export default function CreatePublication(){
return(
<>
<PageHeader super={`Publication`} heading="CREATE"/>
<Form method="post" id="new-story-form">
<input
placeholder='title'
aria-label="Title"
type="text"
name="title"
defaultValue=""
/>
<input
placeholder='website'
aria-label="Website:"
type="text"
step="1"
name="link"
defaultValue=""
/>
<input
placeholder='1000'
aria-label="Query after:"
type="number"
step="1"
name="query_after_days"
defaultValue=""
/>
<button type="submit">SAVE</button>
<button type="button">CANCEL</button>
</Form>
</>
)
}

45
src/routes/createStory.jsx Normal file
View File

@ -0,0 +1,45 @@
import { Form,redirect } from "react-router-dom";
import PageHeader from "../Components/PageHeader";
import { requestCreate } from "../APIcalls.mjs";
export async function action({request,params}){
const formData = await request.formData()
const data = Object.fromEntries(formData)
console.dir(data)
await requestCreate(data,'story')
return redirect(`/stories`)
}
export default function CreateStory(){
return(
<>
<PageHeader super={`Story`} heading="CREATE"/>
<Form method="post" id="new-story-form">
<input
placeholder='title'
aria-label="Title"
type="text"
name="title"
defaultValue=""
/>
<input
placeholder='1000'
aria-label="Wordcount"
type="number"
step="1"
name="word_count"
defaultValue=""
/>
<button type="submit">SAVE</button>
<button type="button">CANCEL</button>
</Form>
</>
)
}

7
src/routes/deletePublication.jsx Normal file
View File

@ -0,0 +1,7 @@
import { redirect } from "react-router";
import { requestDelete } from "../APIcalls.mjs";
export async function action({params}){
await requestDelete({id:Number(params.publicationId)},'publication')
return redirect("/publications")
}

7
src/routes/deleteStory.jsx Normal file
View File

@ -0,0 +1,7 @@
import { redirect } from "react-router";
import { requestDelete } from "../APIcalls.mjs";
export async function action({params}){
await requestDelete({id:Number(params.storyId)},'story')
return redirect("/stories")
}

17
src/routes/publication.jsx
View File

@ -1,4 +1,4 @@
import { useLoaderData, useParams, Link } from "react-router-dom";
import { useLoaderData, useParams, Link, Form } from "react-router-dom";
import Table from "../Components/Table";
import PageHeader from "../Components/PageHeader";
import { submissionsTableOptions } from "./submissions.jsx";
@ -23,6 +23,21 @@ export default function Publication() {
header='Submissions:'
></Table>
<Link to={`/publication/${publicationData.id}/edit`}>EDIT</Link>
<Form
method="post"
action="delete"
onSubmit={(event) => {
if (
!confirm(
"Please confirm you want to delete this record."
)
) {
event.preventDefault();
}
}}
>
<button type="submit">Delete</button>
</Form>
</div>
</>
)

17
src/routes/story.jsx
View File

@ -1,4 +1,4 @@
import { useLoaderData, useParams, Link } from "react-router-dom";
import { useLoaderData, useParams, Link,Form } from "react-router-dom";
import Table from "../Components/Table";
import PageHeader from "../Components/PageHeader";
import { submissionsTableOptions } from "./submissions.jsx";
@ -24,6 +24,21 @@ export default function Story(){
header='Submissions:'
></Table>
<Link to={`/story/${storyData.id}/edit`}>EDIT</Link>
<Form
method="post"
action="delete"
onSubmit={(event) => {
if (
!confirm(
"Please confirm you want to delete this record."
)
) {
event.preventDefault();
}
}}
>
<button type="submit">Delete</button>
</Form>
</div>
</>
)