add edit publication functionality

src/main.jsx

@@ -9,6 +9,7 @@ import Publication from './routes/publication';
 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 './styles/index.css'
 import {
   createBrowserRouter,
@@ -51,6 +52,12 @@ const router = createBrowserRouter([
         element: <EditStory/>,
         loader: storiesLoader,
         action: editStoryAction
+      },
+      {
+        path:"/publication/:publicationId/edit",
+        element: <EditPublication/>,
+        loader: publicationsLoader,
+        action: editPublicationAction
       }
     ]
   },

src/routes/editPublication.jsx

@@ -0,0 +1,48 @@
+import { Form, useLoaderData, useParams, redirect } from "react-router-dom";
+import PageHeader from "../Components/PageHeader";
+import { requestEdit } from "../APIcalls.mjs";
+
+export async function action({request,params}){
+    const formData = await request.formData()
+    const data = Object.fromEntries(formData)
+    data.id=parseInt(params.publicationId)
+    console.dir(data)
+    await requestEdit(data,'publication')   
+    return redirect(`/publication/${params.publicationId}`)
+}
+
+
+
+export default function EditPublication(){
+    const { publicationId } = useParams()
+    const { publications } = useLoaderData()
+    const publicationData = publications.find(row=>row.id==publicationId)
+
+
+    return(
+        <>
+        <PageHeader super={`Publication #${publicationData.id}`} heading="EDIT"/>
+        <Form method="post" id="publication-form">
+            <input
+                placeholder='title'
+                aria-label="Title"
+                type="text"
+                name="title"
+                defaultValue={publicationData.title}    
+            />
+            <input
+                placeholder='1000'
+                aria-label="Website:"
+                type="text"
+                step="1"
+                name="link"
+                defaultValue={publicationData.link}    
+            />
+        <button type="submit">SAVE</button>
+        <button type="button">CANCEL</button>
+        </Form>
+        
+        </>
+    )
+
+}

src/routes/editStory.jsx

@@ -36,7 +36,7 @@ export default function EditStory(){
                 type="number"
                 step="1"
                 name="word_count"
-                defaultValue={storyData.title}    
+                defaultValue={storyData.word_count}    
             />
         <button type="submit">SAVE</button>
         <button type="button">CANCEL</button>

src/routes/publication.jsx

@@ -1,4 +1,4 @@
-import { useLoaderData, useParams } from "react-router-dom";
+import { useLoaderData, useParams, Link } from "react-router-dom";
 import Table from "../Components/Table";
 import PageHeader from "../Components/PageHeader";
 import { submissionsTableOptions } from "./submissions.jsx";
@@ -22,6 +22,7 @@ export default function Publication() {
                 sortByDefault='date_submitted'
                 header='Submissions:'
             ></Table>
+            <Link to={`/publication/${publicationData.id}/edit`}>EDIT</Link>
             </div>
         </>
     )

src/routes/story.jsx

@@ -8,16 +8,7 @@ const { filterList=[...filterList],highlights,clickables } = submissionsTableOpt
 export default function Story(){
     const { storyId } = useParams()
     const { stories } = useLoaderData()
-    const [storyData,setStoryData] = useState(stories.find(row=>row.id==storyId))
+    const storyData = stories.find(row=>row.id==storyId)
-    useEffect(()=>{
-        setStoryData(stories.find(row=>row.id==storyId))
-        console.log("stories updated!")
-        console.dir(stories)
-    },[stories])
-    useEffect(()=>{
-        // console.log("storyData updated!")
-        // console.dir(storyData)
-    },[storyData])
    
     return(
         <>