handle genres

src/APIcalls.mjs

@@ -39,6 +39,14 @@ export const getResponses = async () => {
         console.error(error)
     }
 }
+export const getGenres = async () => {
+    try {
+        const res = await API.get("genres")
+        return res
+    } catch (error) {
+        console.error(error)
+    }
+}
 export const requestEdit = async (data,type) => {
     try {
         const res = await API.post(`/${type}/edit`,data)

src/Components/Checkbox.jsx

@@ -1,8 +1,8 @@
-export default ({ label, value, onChange }) => {
+export default ({ label, value, name, onChange }) => {
   return (
     <label>
       {label}
-      <input type="checkbox" checked={value} onChange={()=>{onChange(label)}} />
+      <input type="checkbox" name={name} checked={value} onChange={()=>{onChange(label)}} />
     </label>
   )
 }

src/Components/Checkboxes.jsx

@@ -1,16 +1,18 @@
+import { isNull } from "lodash"
 import Checkbox from "./Checkbox"
 export default (props) => {
     
-    console.dir(props.options)
     const optionsRendered = props.options?.map((e,i)=>{
-    console.log(props.values)
+        if(e===null){return}
         return <Checkbox
                 onChange={props.onChange} 
                 label={e}
+                name={`${props.name}${i}`}
                 key={e+i}
                 value={props?.values[e]}
             />
     })
+    .filter(e=>{return e!==null})
 
     return <fieldset>
         <legend>{props.legend}</legend>

src/Components/Table.jsx

@@ -52,7 +52,8 @@ export default function Table(props) {
       }
     }
     return e
-  }) : []
+  })
+  .filter(e=>{return e!==null}) : []
 
   if (data.length === 0) { return <p>Nothing to see here...</p> }
 

src/loaders.mjs

@@ -1,4 +1,4 @@
-import {getStories,getPublications,getSubmissions, getResponses} from './APIcalls.mjs'
+import {getStories,getGenres,getPublications,getSubmissions, getResponses} from './APIcalls.mjs'
 
 export async function publicationsLoader (){
     let publications = await getPublications()
@@ -24,3 +24,10 @@ export async function editSubmissionLoader(){
     responses = responses.data
     return { stories, publications, submissions, responses}
 }
+
+export async function editStoryLoader(){
+    const {stories} = await storiesLoader()
+    let genres = await getGenres()
+    genres=genres.data
+    return {stories,genres}
+}

src/main.jsx

@@ -7,7 +7,7 @@ import Story from './routes/story';
 import Stories from './routes/stories';
 import Publication from './routes/publication';
 import Publications from './routes/publications';
-import { storiesLoader,publicationsLoader,submissionsLoader, editSubmissionLoader } from './loaders.mjs';
+import { storiesLoader,publicationsLoader,submissionsLoader, editSubmissionLoader, editStoryLoader } 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';
@@ -70,7 +70,7 @@ const router = createBrowserRouter([
       {
         path:"/story/:storyId/edit",
         element: <EditStory/>,
-        loader: storiesLoader,
+        loader: editStoryLoader,
         action: editStoryAction
       },
       {

src/routes/editStory.jsx

@@ -1,25 +1,53 @@
 import { Form, useLoaderData, useParams, redirect, useNavigate } from "react-router-dom";
 import PageHeader from "../Components/PageHeader";
 import { requestEdit } from "../APIcalls.mjs";
+import Checkboxes from "../Components/Checkboxes"
+import { useState,useEffect } from "react";
+import { forIn } from "lodash";
 
 export async function action({request,params}){
     const formData = await request.formData()
-    const data = Object.fromEntries(formData)
+    console.dir(formData)
+    let data = Object.fromEntries(formData)
     data.id=parseInt(params.storyId)
+    data = packageGenres(data)
     console.dir(data)
     await requestEdit(data,'story')   
     return redirect(`/story/${params.storyId}`)
 }
 
+export const packageGenres = (data) => {
+    const array = []
+    for (const key in data) {
+        if(/genres/.test(key)){
+            array.push(key.slice(6))
+            delete data[key]
+        }
+    }
+    data.genres=array
+    return data
+}
+
+
 
 
 export default function EditStory(){
     const navigate = useNavigate()
     const { storyId } = useParams()
-    const { stories } = useLoaderData()
+    const { stories, genres } = useLoaderData()
     const storyData = stories.find(row=>row.id==storyId)
-
+    const [toggledGenres,setToggledGenres]=useState({})
-
+    const handleToggle = (target) => {
+        setToggledGenres(prev => {
+            return {
+                ...prev,
+                [target]: !prev[target]
+            }
+        })
+    }
+    useEffect(()=>{
+        console.dir(toggledGenres)
+    },[toggledGenres])
     return(
         <div id="page-container">
         <PageHeader super={`Story #${storyData.id}`} heading="EDIT" url="/story" id={storyId}/>
@@ -43,6 +71,15 @@ export default function EditStory(){
                 defaultValue={storyData.word_count}    
             />
             </label>
+            <label>
+                <Checkboxes
+                name="genres"
+                options={genres}
+                onChange={handleToggle}
+                values={genres}
+                legend="Genres:"
+                />
+            </label>
         <div id="bottom-button-container">
         <button type="submit">SAVE</button>
         <button type="button" onClick={()=>{navigate("/stories")}}>CANCEL</button>

src/routes/stories.jsx

@@ -1,15 +1,18 @@
 import { useLoaderData } from "react-router-dom"
 import Table from "../Components/Table.jsx";
 import PageHeader from "../Components/PageHeader.jsx";
-import { getStories } from "../APIcalls.mjs";
+
-import magGlass from "../assets/magnifying-glass.svg"
 
   
 
 export default function Stories(){
     const { stories } = useLoaderData();
-    const filterList = [
+    const filterColumns = [
-        'submissions'
+        'submissions',
+        'deleted'
+    ]
+    const filterRows = [
+        {column:'deleted',value:1}
     ]
     const clickables = [
         ['title',(row)=>{return `../../story/${row.id}`}]    
@@ -23,8 +26,10 @@ export default function Stories(){
         <Table 
         data={stories} 
         filterColumns={filterColumns} 
+        filterRows={filterRows}
         clickables={clickables}
         sortByDefault='title'
+        badges={badges}
         />
         </div>
     )