implemented file upload for attachments

src/components/client/admin/PostTable.tsx

@@ -1,18 +1,21 @@
 'use client'
-import React, { ChangeEvent, LegacyRef, MutableRefObject, ReactNode, useLayoutEffect, useRef } from "react"
+import React, { ChangeEvent, ChangeEventHandler, LegacyRef, MouseEventHandler, MutableRefObject, ReactNode, useLayoutEffect, useRef } from "react"
 import TableGen from "../TableGen"
 import { Attributes, CreationAttributes } from "@sequelize/core";
 import { Post } from "@/model/Post";
 import { useState } from "react";
 import { Project } from "@/model/Project";
-import { revalidatePath } from "next/cache";
-import { usePathname } from 'next/navigation';
+import toast from "react-hot-toast"
+import { ActionResult } from "@/app/lib/actions/ActionResult";
+import { handleActionResult } from "@/app/lib/actions/clientActionHandler";
+import PostEditor, { EditorProps } from "./PostEditor";
+import { getPosts } from "@/app/lib/actions/entityManagement/postActions";
 
 type Actions = {
-    deletePost:any
-    getPosts:()=>Promise<string>
-    getProjects:()=>Promise<string>
-    savePost:(data:Partial<Attributes<Post>>)=>Promise<string>
+    deletePost:(id:number)=>Promise<ActionResult<boolean>>
+    getPosts:()=>Promise<ActionResult<Attributes<Post>[]>>
+    getProjects:()=>Promise<ActionResult<Attributes<Project>[]>>
+    savePost:(data:Partial<Attributes<Post>>)=>Promise<ActionResult<Attributes<Post>[]>>
 }
 
 type Props = {
@@ -23,61 +26,12 @@ type Props = {
     actions:Actions;
 }
 
-type EditorProps = {
-    open:boolean;
-    post:Partial<Attributes<Post>>;
-    projects?:Attributes<Project>[]
-    actionSavePost:(data:Partial<Attributes<Post>>)=>Promise<string>
-}
 
 
 
 export default function PostTable(props:Props){
-    const pathname = usePathname();
     
 
-    function RenderEditor(props:EditorProps){
-        let [content,setContent] = useState(props.post?.content)
-        let [title,setTitle] = useState(props.post?.title)
-        let [projectID,setProjectID] = useState(props.post?.project_id)
-        let textbox:any = useRef(undefined);
-
-        function adjustHeight() {
-            if(!textbox.current || !textbox.current.style) return
-                textbox.current.style.height = "fit-content";
-                textbox.current.style.height = `${textbox.current.scrollHeight}px`;
-        }
-        
-        useLayoutEffect(adjustHeight, []);
-
-        return <form className="bg-light w-[100%] h-content p-1">
-            <h1 className="m-2">Edit Post</h1>
-            <h2 className="m-2">Title</h2>
-            <input value={title} onChange={e => setTitle(e.target.value)} type='text' className="m-2"></input>
-            <h2 className="m-2">Content</h2>
-            <textarea ref={textbox} value={content} style={{"height" : "100%"}} onChange={(e) => {setContent(e.target.value);adjustHeight()}} className="w-[100%] min-h-auto h-content align-top text-start text-base line-clamp-6 m-2"></textarea>
-            <h2 className="m-2">Project</h2>
-            <select name="projects" id="projects" onChange={(e)=>setProjectID(parseInt(e.target.value))} defaultValue={props.post?.project?.id} placeholder={props.post?.project?.name} value={projectID} className="m-2">
-                <option value={0}>unassigned</option>
-                {props.projects?.map(p=><option value={p.id}>{p.readableIdentifier}</option>)}
-            </select>
-            <button type="button" className="m-2 btn btn-primary">Preview</button>
-            <button type="button" className="m-2 btn btn-success" onClick={()=>{
-                props.actionSavePost({
-                    id:props.post?.id ? props.post.id : 0,
-                    content: content ? content : "",
-                    title: title ? title : "",
-                    project_id: projectID ? projectID : 0
-                }).then(res=>console.log(res));
-                refetch();
-                closeEditor();
-            }}>Save</button>
-            <button type="button" className="m-2 btn btn-danger" onClick={()=>{
-                closeEditor();
-            }}>Cancel</button>
-        </form>
-    }
-
     function closeEditor(){
         setEditor({
             open:false
@@ -87,33 +41,60 @@ export default function PostTable(props:Props){
     function showEditor(entry:Attributes<Post>){
         setEditor({
             open: true,
-            post: entry,
-            actionSavePost: props.actions.savePost
+            post: entry
         })
     }
 
     const initEditorState:Partial<EditorProps> = {
         open: false,
-        post: {},
-        actionSavePost: props.actions.savePost
+        post: {}
     }
+
     const [posts, setPosts] = useState(props.data);
     const [editor, setEditor] = useState(initEditorState)
     const [projects, setProjects] = useState(props.projects);
     
+    
     function deletePost(entry:Attributes<Post>){
-        props.actions?.deletePost(entry.id);
-        props.actions?.getPosts().then((p)=>setPosts(JSON.parse(p)));
+        props.actions?.deletePost(entry.id)
+        .then(actionResult=>{
+            const result = handleActionResult(actionResult);
+            if (! result) return;
+            posts.splice(posts.indexOf(entry),1);
+            setPosts([...posts])
+            toast.success('Removed Post:' +entry.id);
+        });
+        
     }
     
     const aifa = (a:ReactNode,b:ReactNode) => a ? a : b
     
     function refetch(){
-        props.actions.getPosts().then(e=>setPosts(JSON.parse(e)))
-        props.actions.getProjects().then(e=>setProjects(JSON.parse(e)))
-        console.log(pathname);
+        props.actions?.getPosts().then((p)=>{
+            const result = handleActionResult(p)
+            if (result) setPosts(result)
+        });
+        props.actions.getProjects().then(e=>{
+            const result = handleActionResult(e);
+            if (result) setProjects(result)
+        })
     }
 
+    function savePost(e:Partial<Attributes<Post>>){
+        props.actions.savePost({
+            id:e.id,
+            content: e.content,
+            title: e.title,
+            project_id: e.project_id
+        })
+        .then(res=>handleActionResult(res))
+        .then(getPosts)
+        .then(res=>{
+            if (!res.error) setPosts(res.result as Attributes<Post>[]);
+        })
+        closeEditor();
+    };
+
     return <>
         <TableGen headings={props.headings}>
             {posts.map((d:Attributes<Post>)=>{
@@ -132,7 +113,7 @@ export default function PostTable(props:Props){
                     <td key='btndelete'><button type="button" className="btn btn-danger" onClick={()=>deletePost(d)}> Delete</button></td>
                 </tr>
                 {(editor.open && editor.post && editor.post.id == d.id)? 
-                <tr key={'activeEditor'}><th scope="row" colSpan={props.headings.length}><RenderEditor actionSavePost={props.actions?.savePost} open={editor.open} post={editor.post} projects={projects}></RenderEditor></th></tr>:""}
+                <tr key={'activeEditor'}><th scope="row" colSpan={props.headings.length}><PostEditor callbacks={{savePost:savePost, closeEditor:closeEditor}} open={editor.open} post={editor.post} projects={projects} ></PostEditor></th></tr>:""}
                 </>
             })}
         </TableGen>