From 688c3ef6be8ac41105c523ec29f7101c925dc824 Mon Sep 17 00:00:00 2001 From: Andrzej Stepien Date: Mon, 18 Sep 2023 19:32:04 +0200 Subject: [PATCH] handle genres --- src/APIcalls.mjs | 8 +++++++ src/Components/Checkbox.jsx | 4 ++-- src/Components/Checkboxes.jsx | 6 +++-- src/Components/Table.jsx | 3 ++- src/loaders.mjs | 9 ++++++- src/main.jsx | 4 ++-- src/routes/editStory.jsx | 45 +++++++++++++++++++++++++++++++---- src/routes/stories.jsx | 13 ++++++---- 8 files changed, 76 insertions(+), 16 deletions(-) diff --git a/src/APIcalls.mjs b/src/APIcalls.mjs index 10e1adb..20a8982 100644 --- a/src/APIcalls.mjs +++ b/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) diff --git a/src/Components/Checkbox.jsx b/src/Components/Checkbox.jsx index 8fe7539..4e7f0e1 100644 --- a/src/Components/Checkbox.jsx +++ b/src/Components/Checkbox.jsx @@ -1,8 +1,8 @@ -export default ({ label, value, onChange }) => { +export default ({ label, value, name, onChange }) => { return ( ) } \ No newline at end of file diff --git a/src/Components/Checkboxes.jsx b/src/Components/Checkboxes.jsx index ee98661..e6972eb 100644 --- a/src/Components/Checkboxes.jsx +++ b/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 }) + .filter(e=>{return e!==null}) return
{props.legend} diff --git a/src/Components/Table.jsx b/src/Components/Table.jsx index 9f6a684..14550dc 100644 --- a/src/Components/Table.jsx +++ b/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

Nothing to see here...

} diff --git a/src/loaders.mjs b/src/loaders.mjs index a7cf323..4d23c62 100644 --- a/src/loaders.mjs +++ b/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() @@ -23,4 +23,11 @@ export async function editSubmissionLoader(){ let responses = await getResponses() 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} } \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index 011378c..108d702 100644 --- a/src/main.jsx +++ b/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: , - loader: storiesLoader, + loader: editStoryLoader, action: editStoryAction }, { diff --git a/src/routes/editStory.jsx b/src/routes/editStory.jsx index c51dc7b..4b92420 100644 --- a/src/routes/editStory.jsx +++ b/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(
@@ -43,6 +71,15 @@ export default function EditStory(){ defaultValue={storyData.word_count} /> +
diff --git a/src/routes/stories.jsx b/src/routes/stories.jsx index 41babff..12a06c4 100644 --- a/src/routes/stories.jsx +++ b/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 = [ - 'submissions' + const filterColumns = [ + 'submissions', + 'deleted' + ] + const filterRows = [ + {column:'deleted',value:1} ] const clickables = [ ['title',(row)=>{return `../../story/${row.id}`}] @@ -23,8 +26,10 @@ export default function Stories(){ )