implement delete story and publication actions

src/APIcalls.mjs

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

src/main.jsx

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

src/routes/createPublication.jsx

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

src/routes/createStory.jsx

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

src/routes/deletePublication.jsx

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

src/routes/deleteStory.jsx

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

src/routes/publication.jsx

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

src/routes/story.jsx

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