implement edit story functionalitty, fix syncing

package-lock.json

@@ -17,6 +17,7 @@
         "pino": "^8.15.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router": "^6.15.0",
         "react-router-dom": "^6.15.0"
       },
       "devDependencies": {

package.json

@@ -19,6 +19,7 @@
     "pino": "^8.15.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router": "^6.15.0",
     "react-router-dom": "^6.15.0"
   },
   "devDependencies": {

src/APIcalls.mjs

@@ -31,3 +31,11 @@ export const getPublications = async () => {
         console.error(error)
     }
 }
+export const requestEdit = async (data,type) => {
+    try {
+        const res = await API.post(`/${type}/edit`,data)
+        return res
+    } catch (error) {
+        console.error(error)
+    }
+}

src/Components/Table.jsx

@@ -9,7 +9,6 @@ export default function Table(props) {
   const sort = (data,sortBy) => {
     const isDate = (str) =>{
         if(str && DateTime.fromFormat(str,'yyyy-MM-dd').isValid){
-          console.log("found a date!")
             return true
         }
         return false
@@ -36,13 +35,13 @@ export default function Table(props) {
  
     
   }
-  const data = cloneDeep(props?.data)
+  const data = props?.data ? cloneDeep(props?.data)
   .map(e=>{
     for (const filter of filterList) {
       delete e[filter]
     }
     return e
-  }) ?? []
+  }) : []
 
   if (data.length === 0) { return <p>Nothing to see here...</p> }
 

src/loaders.mjs

@@ -9,7 +9,8 @@ export async function storiesLoader(){
     let stories = await getStories()
     stories = stories.data
     return {stories}
-}export async function submissionsLoader(){
+}
+export async function submissionsLoader(){
     let submissions = await getSubmissions()
     submissions=submissions.data
     return { submissions }

src/main.jsx

@@ -8,6 +8,7 @@ import Stories from './routes/stories';
 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 './styles/index.css'
 import {
   createBrowserRouter,
@@ -44,6 +45,12 @@ const router = createBrowserRouter([
         path: "/publication/:publicationId",
         element: <Publication/>,
         loader: publicationsLoader
+      },
+      {
+        path:"/story/:storyId/edit",
+        element: <EditStory/>,
+        loader: storiesLoader,
+        action: editStoryAction
       }
     ]
   },

src/routes/editStory.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.storyId)
+    console.dir(data)
+    await requestEdit(data,'story')   
+    return redirect(`/story/${params.storyId}`)
+}
+
+
+
+export default function EditStory(){
+    const { storyId } = useParams()
+    const { stories } = useLoaderData()
+    const storyData = stories.find(row=>row.id==storyId)
+
+
+    return(
+        <>
+        <PageHeader super={`Story #${storyData.id}`} heading="EDIT"/>
+        <Form method="post" id="story-form">
+            <input
+                placeholder='title'
+                aria-label="Title"
+                type="text"
+                name="title"
+                defaultValue={storyData.title}    
+            />
+            <input
+                placeholder='1000'
+                aria-label="Wordcount"
+                type="number"
+                step="1"
+                name="word_count"
+                defaultValue={storyData.title}    
+            />
+        <button type="submit">SAVE</button>
+        <button type="button">CANCEL</button>
+        </Form>
+        
+        </>
+    )
+
+}

src/routes/publications.jsx

@@ -20,7 +20,7 @@ export default function Publications(){
     ]
     return(
         <>
-        <PageHeader text="Publications"/>
+        <PageHeader heading="Publications"/>
         <Table 
         data={publications} 
         filterList={filterList}

src/routes/stories.jsx

@@ -16,7 +16,7 @@ export default function Stories(){
     ]
     return(
         <>
-        <PageHeader text="Stories"/>
+        <PageHeader heading="Stories"/>
         <Table 
         data={stories} 
         filterList={filterList} 

src/routes/story.jsx

@@ -1,18 +1,29 @@
-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";
+import { useState, useEffect } from "react";
 
 const { filterList=[...filterList],highlights,clickables } = submissionsTableOptions
 export default function Story(){
     const { storyId } = useParams()
     const { stories } = useLoaderData()
-    const storyData = stories.find(row=>row.id==storyId)
+    const [storyData,setStoryData] = useState(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(
         <>
         <div id="page">
         <PageHeader super={'Story#'+storyId} heading={storyData.title}/>
+     <div>Wordcount: {storyData.word_count}</div>
      <Table 
      data={storyData.submissions} 
      filterList={[...filterList,'story']}
@@ -21,6 +32,7 @@ export default function Story(){
      sortByDefault='date_submitted'
      header='Submissions:'
      ></Table>
+     <Link to={`/story/${storyData.id}/edit`}>EDIT</Link>
      </div>
         </>
     )

src/routes/submissions.jsx

@@ -37,7 +37,7 @@ export function Submissions(){
   
     return(
         <>
-        <PageHeader text="Submissions"/>
+        <PageHeader heading="Submissions"/>
         <Table 
         data={submissions} 
         filterList={filterList} 

src/styles/index.css

@@ -50,6 +50,7 @@ html {
   }
   header{
     text-align: center;
+    margin:0 0 2rem 0;
   }
   button:hover{
     cursor:pointer;