move loaders to own module

src/loaders.mjs

@@ -0,0 +1,16 @@
+import {getStories,getPublications,getSubmissions} from './APIcalls.mjs'
+
+export async function publicationsLoader (){
+    let publications = await getPublications()
+    publications = publications.data
+    return {publications}
+}
+export async function storiesLoader(){
+    let stories = await getStories()
+    stories = stories.data
+    return {stories}
+}export async function submissionsLoader(){
+    let submissions = await getSubmissions()
+    submissions=submissions.data
+    return { submissions }
+  }

src/main.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { Root, loader as rootLoader } from './routes/root';
+import { Root } from './routes/root';
 import ErrorPage from './error-page';
-import Submissions from './routes/submissions';
+import {Submissions} from './routes/submissions';
 import Story from './routes/story';
 import Stories from './routes/stories';
 import Publication from './routes/publication';
 import Publications from './routes/publications';
+import { storiesLoader,publicationsLoader,submissionsLoader } from './loaders.mjs';
 import './styles/index.css'
 import {
   createBrowserRouter,
@@ -22,27 +23,27 @@ const router = createBrowserRouter([
       {
         path: "/stories",
         element: <Stories/>,
-        loader: rootLoader
+        loader: storiesLoader
       },
       {
         path: "/submissions",
         element: <Submissions/>,
-        loader: rootLoader
+        loader: submissionsLoader
       },
       {
         path: "/publications",
         element: <Publications/>,
-        loader: rootLoader
+        loader: publicationsLoader
       },
       {
         path: "/story/:storyId",
         element: <Story/>,
-        loader: rootLoader
+        loader: storiesLoader
       },
       {
         path: "/publication/:publicationId",
         element: <Publication/>,
-        loader: rootLoader
+        loader: publicationsLoader
       }
     ]
   },

src/routes/publication.jsx

@@ -1,15 +1,23 @@
 import { useLoaderData, useParams } from "react-router-dom";
 import Table from "../Components/Table";
 import PageHeader from "../Components/PageHeader";
-export default function Publication(){
+import { submissionsTableOptions } from "./submissions.jsx";
+
+const { filterList, highlights, clickables } = submissionsTableOptions
+export default function Publication() {
     const { publicationId } = useParams()
     const { publications } = useLoaderData()
-    const publicationsData = publications.find(row=>row.id==publicationId)
+    const publicationsData = publications.find(row => row.id == publicationId)
-    return(
+    return (
         <>
-        <PageHeader text={'Publication#'+publicationId}/>
+            <PageHeader text={'Publication#' + publicationId} />
-        {JSON.stringify(publicationsData)}
+            {JSON.stringify(publicationsData)}
-        <Table data={publicationsData.submissions}></Table>
+            <Table data={publicationsData.submissions}
+                filterList={filterList}
+                highlights={highlights}
+                clickables={clickables}
+                sortByDefault='date_submitted'
+            ></Table>
         </>
     )
 }

src/routes/publications.jsx

@@ -4,6 +4,7 @@ import Table from "../Components/Table.jsx";
 import PageHeader from "../Components/PageHeader.jsx";
 
 
+
   
 
 export default function Publications(){
@@ -25,6 +26,7 @@ export default function Publications(){
         filterList={filterList}
         links={links}
         clickables={clickables}
+        sortByDefault='title'
         />
         </>
     )

src/routes/root.jsx

@@ -1,15 +1,7 @@
 import { Outlet, Link } from "react-router-dom"
 import { getStories, getPublications, getSubmissions } from "../APIcalls.mjs"
 
-export async function loader(){
+
-  let stories = await getStories()
-  stories = stories.data
-  let publications = await getPublications()
-  publications = publications.data
-  let submissions = await getSubmissions()
-  submissions=submissions.data
-  return { stories, publications, submissions }
-}
 
 
 export function Root() {

src/routes/stories.jsx

@@ -1,7 +1,7 @@
 import { useLoaderData } from "react-router-dom"
-import { getStories } from "../APIcalls.mjs";
 import Table from "../Components/Table.jsx";
 import PageHeader from "../Components/PageHeader.jsx";
+import { getStories } from "../APIcalls.mjs";
 
 
   
@@ -17,7 +17,12 @@ export default function Stories(){
     return(
         <>
         <PageHeader text="Stories"/>
-        <Table data={stories} filterList={filterList} clickables={clickables}/>
+        <Table 
+        data={stories} 
+        filterList={filterList} 
+        clickables={clickables}
+        sortByDefault='title'
+        />
         </>
     )
 }

src/routes/story.jsx

@@ -1,15 +1,28 @@
 import { useLoaderData, useParams } from "react-router-dom";
 import Table from "../Components/Table";
 import PageHeader from "../Components/PageHeader";
+import { submissionsTableOptions } from "./submissions.jsx";
+
+const { filterList=[...filterList],highlights,clickables } = submissionsTableOptions
 export default function Story(){
     const { storyId } = useParams()
     const { stories } = useLoaderData()
     const storyData = stories.find(row=>row.id==storyId)
+    filterList.push(
+        'story',
+
+    )
     return(
         <>
         <PageHeader text={'Story#'+storyId}/>
         {JSON.stringify(storyData)}
-     <Table data={storyData.submissions}></Table>
+     <Table 
+     data={storyData.submissions} 
+     filterList={filterList}
+     highlights={highlights}
+     clickables={clickables}
+     sortByDefault='date_submitted'
+     ></Table>
         </>
     )
 }

src/routes/submissions.jsx

@@ -3,9 +3,23 @@ import { getSubmissions } from "../APIcalls.mjs";
 import Table from "../Components/Table";
 import PageHeader from "../Components/PageHeader";
 
+export const submissionsTableOptions = {
+     filterList : [
+        'response_id',
+        'pub_id',
+        'story_id'
+    ],
+     highlights : [
+        ['response','Pending']
+    ],
+     clickables : [
+        ['story',(row)=>{
+            return `../../story/${row.story_id}`}],
+        ['publication',(row)=>{return `../../publication/${row.pub_id}`}]      
+    ]
+}
 
-
+export function Submissions(){
-export default function Submissions(){
     const { submissions } = useLoaderData();
     const filterList = [
         'response_id',
@@ -28,7 +42,7 @@ export default function Submissions(){
         data={submissions} 
         filterList={filterList} 
         highlights={highlights} 
-        sortByDefault="Submitted"
+        sortByDefault="date_submitted"
         clickables={clickables}
         />
         </>