Minor refactors and fixes
This commit is contained in:
@@ -1,183 +1,189 @@
|
||||
'use client'
|
||||
import React, {
|
||||
ChangeEvent,
|
||||
ChangeEventHandler,
|
||||
LegacyRef,
|
||||
MouseEventHandler,
|
||||
MutableRefObject,
|
||||
ReactNode,
|
||||
useLayoutEffect,
|
||||
useRef
|
||||
} from "react";
|
||||
"use client";
|
||||
import React, { ReactNode } from "react";
|
||||
import EntityManagementTable from "../EntityManagementTable";
|
||||
import toast from "react-hot-toast";
|
||||
import PostEditor, { EditorProps, EditorRenderer } from "./PostEditor";
|
||||
import {
|
||||
Attributes,
|
||||
CreationAttributes
|
||||
} from "@sequelize/core";
|
||||
import { EditorRenderer, EditorState, PostTableCallbacks } from "./PostEditor";
|
||||
import { Attributes } from "@sequelize/core";
|
||||
import { useState } from "react";
|
||||
import { Project, Post, Bucket } from "@/models";
|
||||
import { ActionResult } from "@/app/lib/actions/ActionResult";
|
||||
import { handleActionResult } from "@/app/lib/actions/clientActionHandler";
|
||||
import { getPostsWithBucketsAndProject, GetPostsAttributes } from "@/app/lib/actions/entityManagement/postActions";
|
||||
import { PostAttributesWithBuckets } from "@/models";
|
||||
|
||||
export type PostTableActions = {
|
||||
deletePost: (id: number) => Promise<ActionResult<boolean>>
|
||||
getPosts: () => Promise<ActionResult<GetPostsAttributes[]>>
|
||||
getProjects: () => Promise<ActionResult<Attributes<Project>[]>>
|
||||
savePost: (data: Partial<Attributes<Post>>) => Promise<ActionResult<Attributes<Post>[]>>
|
||||
// uploadAttachment: ()=> Promise<ActionResult<any>>
|
||||
import {
|
||||
getPostsWithBucketsAndProject,
|
||||
GetPostsAttributes,
|
||||
} from "@/app/lib/actions/entityManagement/postActions";
|
||||
|
||||
export type PostTableServerActions = {
|
||||
deletePost: (id: number) => Promise<ActionResult<boolean>>;
|
||||
getPosts: () => Promise<ActionResult<GetPostsAttributes[]>>;
|
||||
getProjects: () => Promise<ActionResult<Attributes<Project>[]>>;
|
||||
savePost: (
|
||||
data: Partial<Attributes<Post>>
|
||||
) => Promise<ActionResult<Attributes<Post>[]>>;
|
||||
// uploadAttachment: ()=> Promise<ActionResult<any>>
|
||||
};
|
||||
|
||||
type Props = {
|
||||
children?: ReactNode;
|
||||
headings: Array<string>;
|
||||
data: GetPostsAttributes[];
|
||||
projects: Attributes<Project>[];
|
||||
actions: PostTableActions;
|
||||
type PostTableProps = {
|
||||
children?: ReactNode;
|
||||
headings: Array<string>;
|
||||
posts: GetPostsAttributes[];
|
||||
projects: Attributes<Project>[];
|
||||
actions: PostTableServerActions;
|
||||
};
|
||||
|
||||
const aifa = (a: ReactNode, b: ReactNode) => (a ? a : b);
|
||||
|
||||
export default function PostTable({
|
||||
children,
|
||||
headings,
|
||||
posts,
|
||||
projects,
|
||||
actions,
|
||||
}: PostTableProps) {
|
||||
// Init editor state. Make sure it is not opened by default
|
||||
const initEditorState: EditorState = {
|
||||
isEditorOpen: false,
|
||||
editorPost: posts[0],
|
||||
};
|
||||
// Set up required state hooks
|
||||
const [postsState, setPostsState] = useState(posts);
|
||||
const [editorState, setEditorState] = useState(initEditorState);
|
||||
|
||||
// Define editor controls
|
||||
const editorControls = {
|
||||
closeEditor: () => {
|
||||
setEditorState({
|
||||
isEditorOpen: false,
|
||||
editorPost: posts[0],
|
||||
});
|
||||
},
|
||||
showEditor: (entry: GetPostsAttributes) => {
|
||||
setEditorState({
|
||||
isEditorOpen: true,
|
||||
editorPost: entry,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
const postActions = {
|
||||
deletePost: (entry: GetPostsAttributes) => {
|
||||
if (!entry.id) return;
|
||||
actions.deletePost(entry.id).then((actionResult) => {
|
||||
const result = handleActionResult(actionResult);
|
||||
if (!result) return;
|
||||
postsState.splice(postsState.indexOf(entry), 1);
|
||||
setPostsState([...postsState]);
|
||||
toast.success("Removed Post:" + entry.id);
|
||||
});
|
||||
},
|
||||
refetch: () => {
|
||||
actions
|
||||
.getPosts() // Get Posts From Server
|
||||
.then((getPostsServerActionResult) => {
|
||||
// Handle Result and toast error on failure
|
||||
const result = handleActionResult(
|
||||
getPostsServerActionResult
|
||||
);
|
||||
// Set Posts state
|
||||
if (result) setPostsState(result);
|
||||
});
|
||||
},
|
||||
savePost: (e: Partial<Attributes<Post>>) => {
|
||||
actions
|
||||
.savePost({
|
||||
id: e.id,
|
||||
content: e.content,
|
||||
title: e.title,
|
||||
project_id: e.project_id,
|
||||
})
|
||||
.then((res) => handleActionResult(res))
|
||||
.then(getPostsWithBucketsAndProject)
|
||||
.then((res) => {
|
||||
const result = handleActionResult(res);
|
||||
if (result) setPostsState(result);
|
||||
})
|
||||
.then(editorControls.closeEditor)
|
||||
.then(postActions.refetch);
|
||||
},
|
||||
};
|
||||
|
||||
const callbacks: PostTableCallbacks = {
|
||||
savePost: postActions.savePost,
|
||||
closeEditor: editorControls.closeEditor,
|
||||
refetch: postActions.refetch,
|
||||
uploadAttachment: () => {},
|
||||
};
|
||||
|
||||
return (
|
||||
<EntityManagementTable
|
||||
entityName="Post"
|
||||
key="der-table"
|
||||
headings={headings}
|
||||
>
|
||||
{postsState.map((post: GetPostsAttributes) => (
|
||||
<React.Fragment key="postData.id">
|
||||
<tr>
|
||||
<th key={`rowheading-post-${post.id}`} scope="row">
|
||||
{post.id}
|
||||
</th>
|
||||
<td key="title">{post.title}</td>
|
||||
<td key="content">
|
||||
{!post.content
|
||||
? "No Content Found"
|
||||
: post.content.length < 255
|
||||
? post.content
|
||||
: `${post.content.substring(0, 255)}...`}
|
||||
</td>
|
||||
<td key="project">
|
||||
{aifa(
|
||||
projects.find((e) => {
|
||||
console.log(e.id);
|
||||
return e.id == post.project.id;
|
||||
})?.readableIdentifier,
|
||||
"uncategorized"
|
||||
)}
|
||||
</td>
|
||||
<td key="createdAt">{post.createdAt?.toString()}</td>
|
||||
<td key="updatedAt">{post.updatedAt?.toString()}</td>
|
||||
<td key="edit">
|
||||
{
|
||||
<button
|
||||
key="editbutton"
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={() =>
|
||||
editorControls.showEditor(post)
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
}
|
||||
</td>
|
||||
<td key="delete">
|
||||
{
|
||||
<button
|
||||
key="deletebutton"
|
||||
type="button"
|
||||
onClick={() => postActions.deletePost(post)}
|
||||
className="btn btn-danger"
|
||||
>
|
||||
{" "}
|
||||
Delete
|
||||
</button>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
<EditorRenderer
|
||||
headings={headings}
|
||||
editorPost={post}
|
||||
editorControls={editorControls}
|
||||
editorState={editorState}
|
||||
callbacks={callbacks}
|
||||
projects={projects}
|
||||
/>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</EntityManagementTable>
|
||||
);
|
||||
}
|
||||
|
||||
const aifa = (a: ReactNode, b: ReactNode) => a ? a : b
|
||||
|
||||
export default function PostTable(props: Props) {
|
||||
|
||||
const initEditorState: EditorProps = {
|
||||
...{
|
||||
editorOpenState: false
|
||||
}, ...{
|
||||
callbacks: undefined,
|
||||
openedPost: undefined,
|
||||
projects: undefined,
|
||||
}
|
||||
};
|
||||
|
||||
// Set up required state hooks
|
||||
const [posts, setPosts] = useState(props.data);
|
||||
const [editorState, setEditorState] = useState(initEditorState)
|
||||
const [projects, setProjects] = useState(props.projects);
|
||||
|
||||
// Define editor controls
|
||||
const editorControls = {
|
||||
closeEditor: () => {
|
||||
setEditorState({
|
||||
editorOpenState: false
|
||||
})
|
||||
},
|
||||
showEditor: (entry: GetPostsAttributes) => {
|
||||
setEditorState({
|
||||
editorOpenState: true,
|
||||
openedPost: entry
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function deletePost(entry: GetPostsAttributes) {
|
||||
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)
|
||||
})
|
||||
.then(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(getPostsWithBucketsAndProject)
|
||||
.then(res => {
|
||||
const result = handleActionResult(res);
|
||||
if (result) setPosts(result);
|
||||
})
|
||||
editorControls.closeEditor();
|
||||
};
|
||||
|
||||
function TableRow(props: { postData: GetPostsAttributes, headings: string[] }) {
|
||||
return <>
|
||||
<tr key={props.postData.id}>
|
||||
<th key={`rowheading-post-${props.postData.id}`} scope="row">{props.postData.id}</th>
|
||||
<td key='title'>{props.postData.title}</td>
|
||||
<td key='content'>
|
||||
{
|
||||
!props.postData.content ? "No Content Found" :
|
||||
props.postData.content.length < 255 ? props.postData.content :
|
||||
`${props.postData.content.substring(0, 255)}...`
|
||||
}
|
||||
</td>
|
||||
<td key='project'>
|
||||
{
|
||||
aifa((projects.find((e) => {
|
||||
console.log(e.id)
|
||||
return (e.id == props.postData.project.id)
|
||||
})?.readableIdentifier), 'uncategorized')
|
||||
}
|
||||
</td>
|
||||
<td key='createdAt'>
|
||||
{
|
||||
props.postData.createdAt?.toString()
|
||||
}
|
||||
</td>
|
||||
<td key='updatedAt'>
|
||||
{
|
||||
props.postData.updatedAt?.toString()
|
||||
}
|
||||
</td>
|
||||
<td key='edit'>
|
||||
{
|
||||
<button key="editbutton" type="button" className="btn btn-primary" onClick={() => editorControls.showEditor(props.postData)}>Edit</button>
|
||||
}
|
||||
</td>
|
||||
<td key='delete'>
|
||||
{
|
||||
<button key="deletebutton" type="button" className="btn btn-danger" onClick={() => deletePost(props.postData)}> Delete</button>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
<EditorRenderer headings={props.headings}
|
||||
postData={props.postData}
|
||||
editorControls={editorControls}
|
||||
editorState={editorState}
|
||||
callbacks={{
|
||||
savePost: savePost,
|
||||
closeEditor: editorControls.closeEditor,
|
||||
uploadAttachment: () => { }
|
||||
}}
|
||||
projects={projects}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
|
||||
return <>
|
||||
<EntityManagementTable entityName="Post"
|
||||
key="der-table"
|
||||
headings={props.headings}>
|
||||
{posts.map((postData: GetPostsAttributes) =>
|
||||
<TableRow headings={props.headings}
|
||||
postData={postData}
|
||||
key={postData.id} />
|
||||
)}
|
||||
</EntityManagementTable>
|
||||
</>
|
||||
}
|
||||
Reference in New Issue
Block a user