portfolio2023/src/components/client/admin/PostTable.tsx

"use client";
import React from "react";
import EntityManagementTable from "../EntityManagementTable";
import toast from "react-hot-toast";
import { EditorRenderer, EditorState, PostTableCallbacks } from "./PostEditor";
import { Attributes, InferAttributes } from "@sequelize/core";
import {
	Project,
	Post,
	Bucket,
	User,
	PostAttributesWithBuckets,
} from "@/models";
import { handleActionResult } from "@/app/lib/actions/clientActionHandler";

import {
	getPostsWithBucketsAndProject,
	GetPostsAttributes,
	PostServerActions,
} from "@/app/lib/actions/entityManagement/post/postActions";

import { PostViewProps } from "@/views/admin/post";
import { aifa, StateHook } from "@/util/";

export type PostTableStateProps = {
	posts: StateHook<GetPostsAttributes[]>;
	editor: StateHook<EditorState>;
};

export type PostTableProps = PostViewProps & { state: PostTableStateProps };

export default function PostTable({
	children,
	headings,
	posts,
	projects,
	actions,
	state,
}: PostTableProps) {
	// Define editor controls
	const editorControls = {
		closeEditor: () => {
			state.editor.setState({
				isEditorOpen: false,
				editorPost: posts[0],
			});
		},
		showEditor: (entry: GetPostsAttributes) => {
			state.editor.setState({
				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;
				state.posts.state.splice(state.posts.state.indexOf(entry), 1);
				state.posts.setState([...state.posts.state]);
				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) state.posts.setState(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) state.posts.setState(result);
				})
				.then(editorControls.closeEditor)
				.then(postActions.refetch);
		},
	};

	return (
		<EntityManagementTable entityName="Post" headings={headings}>
			{state.posts.state.map((post: GetPostsAttributes) => (
				<React.Fragment key={`postrow-${post.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={state.editor.state}
						callbacks={{
							savePost: postActions.savePost,
							closeEditor: editorControls.closeEditor,
							refetch: postActions.refetch,
							uploadAttachment: () => {},
						}}
						projects={projects}
					/>
				</React.Fragment>
			))}
		</EntityManagementTable>
	);
}