From 7fd4b8d3e24ac7fe8184de37c559d4a36d1a0ab1 Mon Sep 17 00:00:00 2001
From: Andreas <the.hion.v@gmail.com>
Date: Sun, 23 Jun 2024 23:28:04 +0200
Subject: [PATCH] Refactoring

---
 src/components/client/admin/PostEditor.tsx |  17 +++-
 src/components/client/admin/PostTable.tsx  | 110 ++++++++++-----------
 2 files changed, 66 insertions(+), 61 deletions(-)

diff --git a/src/components/client/admin/PostEditor.tsx b/src/components/client/admin/PostEditor.tsx
index 75ea623..28be387 100644
--- a/src/components/client/admin/PostEditor.tsx
+++ b/src/components/client/admin/PostEditor.tsx
@@ -14,7 +14,7 @@ type PostEditorBucket = Partial<Attributes<Bucket>> & {
     attachments:Partial<Attributes<Attachment>>[]
 }
 
-type PostEditorPost = Partial<Attributes<Post>> & {
+export type PostEditorPost = Attributes<Post> & {
     buckets:PostEditorBucket[]
 }
 
@@ -32,7 +32,7 @@ export default function PostEditor(props:EditorProps){
     let [projectID,setProjectID] = useState(props.post?.project_id)
     let textbox:any = useRef(undefined);
     
-    function adjustHeight() {
+    function adjustHeight(): void {
         if(!textbox.current || !textbox.current.style) return
             textbox.current.style.height = "fit-content";
             textbox.current.style.height = `${textbox.current.scrollHeight}px`;
@@ -57,9 +57,18 @@ export default function PostEditor(props:EditorProps){
         <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 onChange={onTextAreaChange} ref={textbox} value={content} style={{"height" : "100%"}} className="w-[100%] min-h-auto h-content align-top text-start text-base line-clamp-6 m-2"></textarea>
+        <textarea   onChange={onTextAreaChange} 
+                    ref={textbox} 
+                    value={content} 
+                    style={{"height" : "100%"}} 
+                    className="w-[100%] min-h-auto h-content align-top text-start text-base line-clamp-6 m-2"/>
         <h2 className="m-2">Project</h2>
-        <select onChange={projectSelectionChange} name="projects" id="projects"  defaultValue={props.post?.project?.id} placeholder={props.post?.project?.name} value={projectID} className="m-2">
+        <select onChange={projectSelectionChange} 
+                name="projects" 
+                id="projects"  
+                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 key={`projectSelectionOpt-${p.id}`} value={p.id}>{p.readableIdentifier}</option>)}
         </select>
diff --git a/src/components/client/admin/PostTable.tsx b/src/components/client/admin/PostTable.tsx
index d2124f5..249bd06 100644
--- a/src/components/client/admin/PostTable.tsx
+++ b/src/components/client/admin/PostTable.tsx
@@ -2,120 +2,116 @@
 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 { Project, Post, Bucket } from "@/model/Models";
 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 PostEditor, { EditorProps, PostEditorPost } from "./PostEditor";
 import { getPosts } from "@/app/lib/actions/entityManagement/postActions";
 
 type Actions = {
-    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>[]>>
+    deletePost: (id: number) => Promise<ActionResult<boolean>>
+    getPosts: () => Promise<ActionResult<PostEditorPost[]>>
+    getProjects: () => Promise<ActionResult<Attributes<Project>[]>>
+    savePost: (data: Partial<Attributes<Post>>) => Promise<ActionResult<Attributes<Post>[]>>
 }
 
 type Props = {
-    children?:ReactNode;
-    headings:Array<string>;
-    data:Attributes<Post>[];
-    projects:Attributes<Project>[];
-    actions:Actions;
+    children?: ReactNode;
+    headings: Array<string>;
+    data: PostEditorPost[];
+    projects: Attributes<Project>[];
+    actions: Actions;
 }
 
+export default function PostTable(props: Props) {
 
-
-
-export default function PostTable(props:Props){
-    
-
-    function closeEditor(){
+    function closeEditor(): void {
         setEditor({
-            open:false
+            open: false
         })
     }
 
-    function showEditor(entry:Attributes<Post>){
+    function showEditor(entry: PostEditorPost): void {
         setEditor({
             open: true,
             post: entry
         })
     }
 
-    const initEditorState:Partial<EditorProps> = {
-        open: false,
-        post: {}
+    const initEditorState: Partial<EditorProps> = {
+        open: false
     }
 
     const [posts, setPosts] = useState(props.data);
     const [editor, setEditor] = useState(initEditorState)
     const [projects, setProjects] = useState(props.projects);
-    
-    
-    function deletePost(entry:Attributes<Post>){
+
+
+    function deletePost(entry: PostEditorPost) {
         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);
-        });
-        
+            .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((p)=>{
+
+    const aifa = (a: ReactNode, b: ReactNode) => a ? a : b
+
+    function refetch() {
+        props.actions?.getPosts().then((p) => {
             const result = handleActionResult(p)
             if (result) setPosts(result)
         });
-        props.actions.getProjects().then(e=>{
+        props.actions.getProjects().then(e => {
             const result = handleActionResult(e);
             if (result) setProjects(result)
         })
     }
 
-    function savePost(e:Partial<Attributes<Post>>){
+    function savePost(e: Partial<PostEditorPost>) {
         props.actions.savePost({
-            id:e.id,
+            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>[]);
-        })
+            .then(res => handleActionResult(res))
+            .then(getPosts)
+            .then(res => {
+                1
+                if (!res.error) setPosts(res.result as PostEditorPost[]);
+            })
         closeEditor();
     };
 
     return <>
         <TableGen headings={props.headings}>
-            {posts.map((d:Attributes<Post>)=>{
-                return <><tr key={d.id}>
+            {posts.map((d: PostEditorPost) => <>
+                <tr key={d.id}>
                     <th key={`row${d.id}`} scope="row">{d.id}</th>
                     <td key='titlefield'>{d.title}</td>
-                    <td key='contentfield'>{d.content.length<255 ? d.content :`${d.content.substring(0,255)}...`}</td>
+                    <td key='contentfield'>{d.content.length < 255 ? d.content : `${d.content.substring(0, 255)}...`}</td>
                     <td key='project'>{
-                        aifa((projects.find((e)=>{
+                        aifa((projects.find((e) => {
                             return (e.id == d.project_id)
                         })?.readableIdentifier), 'uncategorized')
                     }</td>
                     <td key='createdatfield'>{d.createdAt?.toString()}</td>
                     <td key='updatedatfield'>{d.updatedAt?.toString()}</td>
-                    <td key='btnedit'><button type="button" className="btn btn-primary" onClick={()=>showEditor(d)}>Edit</button></td>
-                    <td key='btndelete'><button type="button" className="btn btn-danger" onClick={()=>deletePost(d)}> Delete</button></td>
+                    <td key='btnedit'><button type="button" className="btn btn-primary" onClick={() => showEditor(d)}>Edit</button></td>
+                    <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}><PostEditor callbacks={{savePost:savePost, closeEditor:closeEditor}} open={editor.open} post={editor.post} projects={projects} ></PostEditor></th></tr>:""}
-                </>
-            })}
+                {
+                    (editor.open && editor.post && editor.post.id == d.id) 
+                    ?<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>
     </>
 }
\ No newline at end of file