Refactoring
This commit is contained in:
@@ -1,13 +1,25 @@
|
||||
'use client'
|
||||
import React, { ChangeEvent, ChangeEventHandler, LegacyRef, MouseEventHandler, MutableRefObject, ReactNode, useLayoutEffect, useRef } from "react"
|
||||
import TableGen from "../TableGen"
|
||||
import { Attributes, CreationAttributes } from "@sequelize/core";
|
||||
import React, {
|
||||
ChangeEvent,
|
||||
ChangeEventHandler,
|
||||
LegacyRef,
|
||||
MouseEventHandler,
|
||||
MutableRefObject,
|
||||
ReactNode,
|
||||
useLayoutEffect,
|
||||
useRef
|
||||
} from "react";
|
||||
import TableGen from "../TableGen";
|
||||
import toast from "react-hot-toast";
|
||||
import PostEditor, { EditorProps } from "./PostEditor";
|
||||
import {
|
||||
Attributes,
|
||||
CreationAttributes
|
||||
} from "@sequelize/core";
|
||||
import { useState } from "react";
|
||||
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 { getPostsWithBuckets } from "@/app/lib/actions/entityManagement/postActions";
|
||||
import { PostAttributesWithBuckets } from "@/model/Post";
|
||||
|
||||
@@ -17,7 +29,7 @@ type Actions = {
|
||||
getProjects: () => Promise<ActionResult<Attributes<Project>[]>>
|
||||
savePost: (data: Partial<Attributes<Post>>) => Promise<ActionResult<Attributes<Post>[]>>
|
||||
// uploadAttachment: ()=> Promise<ActionResult<any>>
|
||||
}
|
||||
};
|
||||
|
||||
type Props = {
|
||||
children?: ReactNode;
|
||||
@@ -27,53 +39,57 @@ type Props = {
|
||||
actions: Actions;
|
||||
}
|
||||
|
||||
const aifa = (a: ReactNode, b: ReactNode) => a ? a : b
|
||||
|
||||
export default function PostTable(props: Props) {
|
||||
|
||||
function closeEditor(): void {
|
||||
setEditor({
|
||||
open: false
|
||||
})
|
||||
}
|
||||
|
||||
function showEditor(entry: Partial<PostAttributesWithBuckets>): void {
|
||||
setEditor({
|
||||
open: true,
|
||||
post: entry
|
||||
})
|
||||
}
|
||||
|
||||
const initEditorState: Partial<EditorProps> = {
|
||||
open: false
|
||||
editorOpenState: false
|
||||
}
|
||||
|
||||
// Set up required state hooks
|
||||
const [posts, setPosts] = useState(props.data);
|
||||
const [editor, setEditor] = useState(initEditorState)
|
||||
const [projects, setProjects] = useState(props.projects);
|
||||
|
||||
// Define editor controls
|
||||
|
||||
function deletePost(entry: Partial<PostAttributesWithBuckets>) {
|
||||
if(! entry.id) return;
|
||||
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);
|
||||
});
|
||||
function closeEditor(): void {
|
||||
setEditor({
|
||||
editorOpenState: false
|
||||
})
|
||||
}
|
||||
function showEditor(entry: Partial<PostAttributesWithBuckets>): void {
|
||||
setEditor({
|
||||
editorOpenState: true,
|
||||
openedPost: entry
|
||||
})
|
||||
}
|
||||
|
||||
const aifa = (a: ReactNode, b: ReactNode) => a ? a : b
|
||||
function deletePost(entry: Partial<PostAttributesWithBuckets>) {
|
||||
if (!entry.id) return;
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
function refetch() {
|
||||
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)
|
||||
})
|
||||
props.actions.getPosts()
|
||||
.then((p) => {
|
||||
const result = handleActionResult(p)
|
||||
if (result) setPosts(result)
|
||||
}).then(props.actions.getProjects)
|
||||
.then(e => {
|
||||
const result = handleActionResult(e);
|
||||
if (result) setProjects(result)
|
||||
})
|
||||
}
|
||||
|
||||
function savePost(e: Partial<PostAttributesWithBuckets>) {
|
||||
@@ -83,37 +99,80 @@ export default function PostTable(props: Props) {
|
||||
title: e.title,
|
||||
project_id: e.project_id
|
||||
})
|
||||
.then(res => handleActionResult(res))
|
||||
.then(getPostsWithBuckets)
|
||||
.then(res => {
|
||||
if (!res.error && res.result) setPosts(res.result);
|
||||
})
|
||||
.then(res => handleActionResult(res))
|
||||
.then(getPostsWithBuckets)
|
||||
.then(res => {
|
||||
if (!res.error && res.result) setPosts(res.result);
|
||||
})
|
||||
closeEditor();
|
||||
};
|
||||
|
||||
return <>
|
||||
<TableGen headings={props.headings}>
|
||||
{posts.map((d: Partial<PostAttributesWithBuckets>) => <>
|
||||
<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? (d.content.length < 255 ? d.content : `${d.content.substring(0, 255)}...`) : "No Content Found"}</td>
|
||||
<td key='project'>{
|
||||
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>
|
||||
function TableFields({ postData }: { postData: Partial<PostAttributesWithBuckets> }) {
|
||||
return [
|
||||
{
|
||||
key: 'post-title',
|
||||
content: postData.title
|
||||
}, {
|
||||
key: 'post-content',
|
||||
content:
|
||||
!postData.content ? "No Content Found" :
|
||||
postData.content.length < 255 ? postData.content :
|
||||
`${postData.content.substring(0, 255)}...`
|
||||
|
||||
}, {
|
||||
key: 'post-project',
|
||||
content: aifa((projects.find((e) => {
|
||||
return (e.id == postData.project_id)
|
||||
})?.readableIdentifier), 'uncategorized')
|
||||
}, {
|
||||
key: 'post-createdat',
|
||||
content: postData.createdAt?.toString()
|
||||
}, {
|
||||
key: 'post-updatedat',
|
||||
content: postData.updatedAt?.toString()
|
||||
}, {
|
||||
key: 'post-editbutton',
|
||||
content: <button key="editbutton" type="button" className="btn btn-primary" onClick={() => showEditor(postData)}>Edit</button>
|
||||
}, {
|
||||
key: 'post-deletebutton',
|
||||
content: <button key="deletebutton" type="button" className="btn btn-danger" onClick={() => deletePost(postData)}> Delete</button>
|
||||
}
|
||||
].map(field =>
|
||||
<td key={field.key}>{field.content}</td>
|
||||
);
|
||||
}
|
||||
|
||||
function TableRow(props: {postData: Partial<PostAttributesWithBuckets>, headings: string | any[]}){
|
||||
return <><tr key={props.postData.id}>
|
||||
<th key={`rowheading-post-${props.postData.id}`} scope="row">{props.postData.id}</th>
|
||||
<TableFields key={`tableFields-${props.postData.id}`} postData={props.postData} />
|
||||
</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, uploadAttachment: ()=>{} }} open={editor.open} post={editor.post} projects={projects} ></PostEditor></th></tr>
|
||||
: ""
|
||||
}
|
||||
</>)}
|
||||
{(editor.editorOpenState
|
||||
&& editor.openedPost
|
||||
&& editor.openedPost.id == props.postData.id)
|
||||
|
||||
? <tr>
|
||||
<th scope="row" colSpan={props.headings.length}>
|
||||
<PostEditor callbacks={{
|
||||
savePost: savePost,
|
||||
closeEditor: closeEditor,
|
||||
uploadAttachment: () => { }
|
||||
}}
|
||||
editorOpenState={editor.editorOpenState}
|
||||
openedPost={editor.openedPost}
|
||||
projects={projects} />
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
: ""}
|
||||
</>
|
||||
}
|
||||
|
||||
return <>
|
||||
<TableGen key="der-table" headings={props.headings}>
|
||||
{posts.map((postData: Partial<PostAttributesWithBuckets>) => <TableRow headings={props.headings}
|
||||
postData={postData}
|
||||
key={postData.id}/> )}
|
||||
</TableGen>
|
||||
</>
|
||||
}
|
||||
Reference in New Issue
Block a user