Minor refactors and fixes

src/app/admin/[[...slug]]/page.tsx

@@ -1,67 +1,62 @@
-'use server'
+"use server";
-import { getCookieAuth } from "@/app/lib/actions/actions";
+cache: "no-store";
 import AuthHandler from "@/components/server/admin/authHandler";
 import Sidebar, { SidebarEntry } from "@/components/server/admin/views/sidebar";
-import { cookies } from "next/headers";
+import ProjectView from "@/views/admin/ProjectView";
-import PostView from "@/components/server/admin/views/PostView";
+import PostView from "@/views/admin/PostView";
-import { ReactNode } from "react";
+import { redirect } from 'next/navigation'
-import ProjectView from "@/components/server/admin/views/ProjectView";
-
-type Props = {
-  params: {
-    slug: string[]
-  };
-}
-
-
 
 function Home() {
-  return <div>home</div>
+	return <div>home</div>;
 }
 function PostManager() {
-  return <div>posts</div>
+	return <PostView></PostView>;
 }
 function ProjectManager() {
-  return <div>projects</div>
+	return <ProjectView></ProjectView>;
 }
 
-
 async function getViewMap(): Promise<Map<string, JSX.Element>> {
 	return new Map([
-    ['home', <Home key={0}></Home>],
+		["home", <Home key={0}></Home>],
-    ['man-post', <PostView key={1}></PostView>],
+		["man-post", <PostManager key={1}></PostManager>],
-    ['man-proj', <ProjectView key={2}></ProjectView>]
+		["man-proj", <ProjectManager key={2}></ProjectManager>],
 	]);
 }
 
-
+const sidebarEntries: SidebarEntry[] = [
-
+  { label: "Home", view: "home" },
-
+  { label: "Post Management", view: "man-post" },
-async function getSidebarEntries(): Promise<Array<SidebarEntry>> {
+  { label: "Project Management", view: "man-proj" },
-  return [
+  { label: "Tag Management", view: "man-tags" },
-    { label: 'Home', view: 'home' },
+  { label: "User Management", view: "man-user" },
-    { label: 'Post Management', view: 'man-post' },
+];
-    { label: 'Project Management', view: 'man-proj' },
-    { label: 'Tag Management', view: 'man-tags' },
-    { label: 'User Management', view: 'man-user' },
-  ]
-}
 
 async function getCurrentView(view: string): Promise<JSX.Element> {
 	const viewMap = await getViewMap();
-  const viewJSX = viewMap.get(view);
+	const viewJSX = viewMap.get(view || "home");
-  return viewJSX ? viewJSX : <Home></Home>;
+	return viewJSX || <Home></Home>;
 }
 
-export default async function Page(props: Props) {
+type Props = {
-  const sidebarEntries: Array<SidebarEntry> = await getSidebarEntries();
+	params: {
-
+		slug: string[];
-  const slug: string | string[] = props.params.slug ? props.params.slug : 'home';
+	};
+};
 
+export default async function Page({ params: { slug = ["home"] } }: Props) {
+	if (
+		(await sidebarEntries)
+			.map((entry) => entry.view)
+			.indexOf(slug.toString()) < 0
+	) redirect("/admin/")
 	return (
 		<main className="h-screen w-screen flex flex-col p-0 bg-gray-300 box-border m-0">
 			<AuthHandler params={null}>
-        <Sidebar sidebarEntries={sidebarEntries} slug={slug.toString()}></Sidebar>
+				<Sidebar
+					sidebarEntries={sidebarEntries}
+					slug={slug.toString()}
+				></Sidebar>
 				<div className="AdminPanelWrapper flex flex-col p-2">
 					{await getCurrentView(slug.toString())}
 				</div>

src/components/client/admin/PostEditor.tsx

@@ -1,153 +1,315 @@
-import { ActionResult } from "@/app/lib/actions/ActionResult";
-import { handleActionResult } from "@/app/lib/actions/clientActionHandler";
 import { GetPostsAttributes } from "@/app/lib/actions/entityManagement/postActions";
-import { Post, Project, Bucket, PostBucket, Attachment } from "@/models"
+import { Post, Project, Bucket, PostBucket, Attachment } from "@/models";
-import { PostAttributesWithBuckets } from "@/models";
-import { DeepPartial } from "@/util/DeepPartial";
 import { Attributes } from "@sequelize/core";
 import { UUID } from "crypto";
-import { ChangeEventHandler, MouseEventHandler, useLayoutEffect, useRef, useState } from "react";
+import {
-import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from "react-bootstrap";
+	ChangeEventHandler,
+	MouseEventHandler,
+	MutableRefObject,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from "react";
+import {
+	Accordion,
+	AccordionBody,
+	AccordionHeader,
+	AccordionItem,
+} from "react-bootstrap";
 
 export type PostTableCallbacks = {
-    savePost: (p:Partial<Attributes<Post>>)=>void;
+	savePost: (p: Partial<Attributes<Post>>) => void;
-    closeEditor: ()=>any;
+    refetch: () => any;
-    uploadAttachment : ()=>any;
+	closeEditor: () => any;
-}
+	uploadAttachment: () => any;
+};
+
+export type EditorState = {
+	isEditorOpen: boolean;
+	editorPost: GetPostsAttributes;
+};
 
 export type EditorProps = {
-    editorOpenState:boolean;
+	editorPost: GetPostsAttributes;
-    openedPost?:GetPostsAttributes;
+	projectList: {
-    projects?:Attributes<Project>[];
+		id: number;
-    callbacks?:PostTableCallbacks;
+		readableIdentifier: string;
-}
+	}[];
+	callbacks: PostTableCallbacks;
+};
 
+export default function PostEditor({
+	editorPost,
+	projectList,
+	callbacks,
+}: EditorProps) {
+	// Setup State Hooks
+	let [postContentState, setPostContentState] = useState(editorPost.content);
+	let [postTitleState, setPostTitleState] = useState(editorPost.title);
+	let [postProjectIDState, setPostProjectIDState] = useState(
+		editorPost.project.id
+	);
+	let textbox: any = useRef(undefined);
 
-export default function PostEditor(props:EditorProps){
+	// Autosize the text area
-    let [content,setContent] = useState(props.openedPost?.content)
+	function textAreaAutoSize(
-    let [title,setTitle] = useState(props.openedPost?.title)
+		textbox: MutableRefObject<HTMLTextAreaElement>
-    let [projectID,setProjectID] = useState(props.openedPost?.project?.id)
+	): void {
-    let textbox:any = useRef(undefined);
+		if (!textbox.current || !textbox.current.style) return;
-    
-    function adjustHeight(): void {
-        if(!textbox.current || !textbox.current.style) return
 		textbox.current.style.height = "fit-content";
 		textbox.current.style.height = `${textbox.current.scrollHeight}px`;
 	}
+	useLayoutEffect(() => textAreaAutoSize(textbox));
 
-    useLayoutEffect(adjustHeight, []);
+	// Handle user input on the text area by updating state and autosizing the textfield
+	const onTextAreaChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
+		setPostContentState(e.target.value); // Update State
+		textAreaAutoSize(textbox); // Autosize the text area
+	};
 
-    const onTextAreaChange:ChangeEventHandler<HTMLTextAreaElement> = (e) => {setContent(e.target.value);adjustHeight()};
+	// Handle changing the selected project using the dropdown select
-    const projectSelectionChange:ChangeEventHandler<HTMLSelectElement> = (e)=>setProjectID(parseInt(e.target.value));
+	const projectSelectionChange: ChangeEventHandler<HTMLSelectElement> = (e) =>
-    const onClickSaveButton:MouseEventHandler<HTMLButtonElement> = (e)=>{
+		setPostProjectIDState(parseInt(e.target.value));
-        props.callbacks?.savePost({
+	// Handle clicking the save button
-            id: props.openedPost?.id as number,
+	const onClickSaveButton: MouseEventHandler<HTMLButtonElement> = (e) => {
-            content:content as string,
+		callbacks?.savePost({
-            title:title as string,
+			id: editorPost?.id as number,
-            project_id: projectID
+			content: postContentState as string,
+			title: postTitleState as string,
+			project_id: postProjectIDState,
 		});
-    }
+	};
-    const onClickCancelButton:MouseEventHandler<HTMLButtonElement> = (e)=>{props.callbacks?.closeEditor();}
+	const onClickCancelButton: MouseEventHandler<HTMLButtonElement> = (e) => {
+		callbacks?.closeEditor();
+	};
 
-    return <>
+	return (
+		<>
 			<form className="bg-light w-[100%] h-content p-1">
-        <h1         key="heading-editpost" className="m-2">Edit Post</h1>
+				<h1 key="heading-editpost" className="m-2">
-        <h2         key="label-title" className="m-2">Title</h2>
+					Edit Post
-        <input      key="input-title" 
+				</h1>
-                    value={title} 
+				<h2 key="label-title" className="m-2">
-                    onChange={e => setTitle(e.target.value)} 
+					Title
-                    type='text' className="m-2"/>
+				</h2>
-        <h2         key="label-content" className="m-2">Content</h2>
+				<input
-        <textarea   key="input-content"   onChange={onTextAreaChange} 
+					key="input-title"
+					value={postTitleState}
+					onChange={(e) => setPostTitleState(e.target.value)}
+					type="text"
+					className="m-2"
+				/>
+				<h2 key="label-content" className="m-2">
+					Content
+				</h2>
+				<textarea
+					key="input-content"
+					onChange={onTextAreaChange}
 					ref={textbox}
-                    value={content} 
+					value={postContentState}
-                    style={{"height" : "100%"}} 
+					style={{ height: "100%" }}
-                    className="w-[100%] min-h-auto h-content align-top text-start text-base line-clamp-6 m-2"/>
+					className="w-[100%] min-h-auto h-content align-top text-start text-base line-clamp-6 m-2"
-        <h2         key="label-project" className="m-2">Project</h2>
+				/>
-        <select     key="input-project"
+				<h2 key="label-project" className="m-2">
+					Project
+				</h2>
+				<select
+					key="input-project"
 					onChange={projectSelectionChange}
 					name="projects"
 					id="projects"
-                    defaultValue={props.openedPost?.project?.id} 
+					defaultValue={editorPost?.project?.id}
-                    placeholder={props.openedPost?.project?.name} 
+					placeholder={editorPost?.project?.name}
-                    value={projectID} className="m-2">
+					value={postProjectIDState}
-            <option key="projectSelectionOpt-0" value={0}>unassigned</option>
+					className="m-2"
-            {props.projects?.map(p=><option key={`projectSelectionOpt-${p.id}`} value={p.id}>{p.readableIdentifier}</option>)}
+				>
+					<option key="projectSelectionOpt-0" value={0}>
+						unassigned
+					</option>
+					{projectList?.map((p) => (
+						<option
+							key={`projectSelectionOpt-${p.id}`}
+							value={p.id}
+						>
+							{p.readableIdentifier}
+						</option>
+					))}
 				</select>
 				<h2 key="label-attachments">Attachments</h2>
 				<table key="table-buckets" className="table table-striped">
 					<thead>
-                <tr><td>Buckets</td></tr>
+						<tr>
+							<td>Buckets</td>
+						</tr>
 					</thead>
 					<tbody>
-                {
+						{editorPost?.buckets ? (
-                    props.openedPost?.buckets 
+							(() => {
-                    ? (()=>{
+								let bucketMap: Map<
-                        let bucketMap:Map<UUID,Attributes<Bucket>> = new Map(props.openedPost.buckets.map((b)=>[b.id as UUID,b]));
+									UUID,
-                        let bucketList = [...props.openedPost.buckets.map((b)=>b.id)];
+									Attributes<Bucket>
-                        return bucketList.map((e)=>{
+								> = new Map(
-                            return <>
+									editorPost.buckets.map((b) => [
-                            <tr key={`bucketAccordionRow-${bucketList.indexOf(e).toString()}`}><Accordion>
+										b.id as UUID,
-                                <AccordionItem eventKey={bucketList.indexOf(e).toString()}>
+										b,
-                                    <AccordionHeader>{e}</AccordionHeader>
+									])
+								);
+								let bucketList = [
+									...editorPost.buckets.map((b) => b.id),
+								];
+								return bucketList.map((e) => {
+									return (
+										<>
+											<tr
+												key={`bucketAccordionRow-${bucketList
+													.indexOf(e)
+													.toString()}`}
+											>
+												<Accordion>
+													<AccordionItem
+														eventKey={bucketList
+															.indexOf(e)
+															.toString()}
+													>
+														<AccordionHeader>
+															{e}
+														</AccordionHeader>
 														<AccordionBody>
-                                        
 															<ul>
-                                            <li><input type="file" className='btn btn-success' onChange={(e)=>{
+																<li>
-                                                for (let index = 0; index < ((e.target.files as FileList).length as number); index++) {
+																	<input
-                                                    const element = (e.target.files as FileList)[index];
+																		type="file"
-                                                    const fReader = new FileReader()
+																		className="btn btn-success"
-                                                    fReader.readAsDataURL(element)
+																		onChange={(
-                                                    fReader.onloadend = (event)=>{
+																			e
-                                                        console.log(event.target?.result);
+																		) => {
+																			for (
+																				let index = 0;
+																				index <
+																				((
+																					e
+																						.target
+																						.files as FileList
+																				)
+																					.length as number);
+																				index++
+																			) {
+																				const element =
+																					(
+																						e
+																							.target
+																							.files as FileList
+																					)[
+																						index
+																					];
+																				const fReader =
+																					new FileReader();
+																				fReader.readAsDataURL(
+																					element
+																				);
+																				fReader.onloadend =
+																					(
+																						event
+																					) => {
+																						console.log(
+																							event
+																								.target
+																								?.result
+																						);
 																					};
 																			}
-                                            }}/></li>
+																		}}
-                                            {(()=>{
+																	/>
-                                                const bucket = bucketMap.get(e as UUID)
+																</li>
-                                                return bucket && bucket.attachments 
+																{(() => {
-                                                    ? bucket.attachments.map((attachment)=><li key={`listItem-file-${attachment.filename}`}>{attachment.filename}</li>) 
+																	const bucket =
-                                                    : <></>
+																		bucketMap.get(
+																			e as UUID
+																		);
+																	return bucket &&
+																		bucket.attachments ? (
+																		bucket.attachments.map(
+																			(
+																				attachment
+																			) => (
+																				<li
+																					key={`listItem-file-${attachment.filename}`}
+																				>
+																					{
+																						attachment.filename
+																					}
+																				</li>
+																			)
+																		)
+																	) : (
+																		<></>
+																	);
 																})()}
 															</ul>
 														</AccordionBody>
 													</AccordionItem>
-                            </Accordion></tr></>
+												</Accordion>
-                        })
+											</tr>
+										</>
+									);
+								});
 							})()
-                    : <></>
+						) : (
-                }
+							<></>
+						)}
 					</tbody>
 				</table>
-        <button type="button" className="m-2 btn btn-primary">Preview</button>
+				<button type="button" className="m-2 btn btn-primary">
-        <button type="button" className="m-2 btn btn-success" onClick={onClickSaveButton}>Save</button>
+					Preview
-        <button type="button" className="m-2 btn btn-danger" onClick={onClickCancelButton}>Cancel</button>
+				</button>
+				<button
+					type="button"
+					className="m-2 btn btn-success"
+					onClick={onClickSaveButton}
+				>
+					Save
+				</button>
+				<button
+					type="button"
+					className="m-2 btn btn-danger"
+					onClick={onClickCancelButton}
+				>
+					Cancel
+				</button>
 			</form>
 		</>
+	);
 }
+
 type EditorRendererProps = {
-    postData: GetPostsAttributes,
+	editorPost: GetPostsAttributes;
-    headings: string[],
+	headings: string[];
-    editorState: EditorProps,
+	editorState: EditorState;
-    editorControls: any,
+	editorControls: any;
-    callbacks: any,
+	callbacks: any;
-    projects: any
+	projects: any;
-}
+};
-export function EditorRenderer(props:EditorRendererProps){
-    const {postData, headings, editorState, editorControls, callbacks, projects} = props
 
-    return (props.editorState.editorOpenState
+export function EditorRenderer({
-        && editorState.openedPost
+	editorPost,
-        && editorState.openedPost.id == postData.id)
+	headings,
-
+	editorState,
-        ? <tr>
+	callbacks,
+	projects,
+}: EditorRendererProps) {
+	return editorState.isEditorOpen &&
+		editorState.editorPost &&
+		editorState.editorPost.id == editorPost.id ? (
+		<tr>
 			<th scope="row" colSpan={headings.length}>
-                <PostEditor callbacks={callbacks}
+				<PostEditor
-                    editorOpenState={editorState.editorOpenState}
+					callbacks={callbacks}
-                    openedPost={editorState.openedPost}
+					editorPost={editorState.editorPost}
-                    projects={projects} />
+					projectList={projects}
+				/>
 			</th>
 		</tr>
-
+	) : (
-        : ""
+		""
+	);
 }

src/components/client/admin/PostTable.tsx

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

src/components/server/admin/views/PostView.tsx

@@ -1,51 +0,0 @@
-cache: 'no-store'
-
-import { tryFetchPosts } from "@/app/api/post/route";
-import { constructAPIUrl } from "@/util/Utils";
-import { ReactNode, useEffect } from "react";
-import EntityManagementTable from "../../../client/EntityManagementTable";
-import PostTable, { PostTableActions } from "@/components/client/admin/PostTable";
-import { deletePost, getPostsWithBucketsAndProject, GetPostsAttributes, updatePost } from "@/app/lib/actions/entityManagement/postActions";
-import { getProjects } from "@/app/lib/actions/entityManagement/projectActions";
-import { Bucket, Project, Post, dbSync, Attachment } from "@/models";
-import { tryCreateAttachment } from "@/app/api/attachment/route";
-import { handleActionResult } from '../../../../app/lib/actions/clientActionHandler';
-
-type Props = {
-    children?:ReactNode
-}
-
-async function getHeadings(){
-    let headings:string[] = ['#', 'Title', 'Content', 'Project', 'CreatedAt', 'UpdatedAt']
-    
-    return headings
-}
-
-export default async function PostView(props:Props){
-    const sync = await dbSync;
-
-    const headings = await getHeadings();
-
-    const actions:PostTableActions = {
-        deletePost: deletePost, 
-        getPosts:getPostsWithBucketsAndProject, 
-        getProjects:getProjects, 
-        savePost:updatePost,
-        // uploadAttachment:tryCreateAttachment
-    };
-
-    const posts:GetPostsAttributes[]| undefined = handleActionResult(await getPostsWithBucketsAndProject());
-    const projects = await Project.findAll().then(projects=>projects.map((e)=>JSON.parse(JSON.stringify(e))));
-    
-    return (
-        <div className="w-[100%] min-h-fit bg-gray-100 overflow-scroll">
-            <div className="w-[100%] m-auto">
-                <PostTable  data={posts ? posts : []} 
-                projects={projects} 
-                headings={headings} 
-                actions={actions}>
-                </PostTable>
-            </div>
-        </div>
-    );
-}

src/components/server/admin/views/sidebar.tsx

@@ -19,13 +19,19 @@ type Props = {
 
 
 
-export default async function Sidebar(props:Props){
+export default async function Sidebar({children, sidebarEntries, slug}:Props){
     
     return (
         <div className='w-fit h[100%] drop-shadow-2xl shadow-xl'>
             <ul className={`navbar-light bg-light nav nav-pills flex-column mb-auto container-fluid h-[100%] items-start justify-start p-0 w-fit`}>
-                {props.sidebarEntries.map((sidebarEntry)=>{
+                {sidebarEntries.map((sidebarEntry)=>{
-                    return <li key={sidebarEntry.view} className='nav-item w-[100%]'><Link className={`nav-link m-2 whitespace-nowrap outline outline-1 ${(props.slug == sidebarEntry.view) ? 'active' : ''}`} href={`/admin/${sidebarEntry.view}`}>
+                    const activeClass:string = (slug == sidebarEntry.view) ? 'active' : '';
+                    return <li 
+                    key={sidebarEntry.view} 
+                    className='nav-item w-[100%]'>
+                        <Link 
+                            href={`/admin/${sidebarEntry.view}`}
+                            className={`${activeClass} nav-link m-2 whitespace-nowrap outline outline-1`}>
                             {sidebarEntry.label}
                         </Link></li>
                 })}

src/providers/providers.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { Auth } from "@/model/Auth";
+import { Auth, User } from "@/models";
-import { User } from "@/model/User";
 import { ReactNode, createContext } from "react";
 import { Attributes, InferAttributes } from "@sequelize/core";
 

src/views/admin/PostView.tsx

@@ -0,0 +1,67 @@
+'use server'
+cache: "no-store";
+
+import { ReactNode, useEffect } from "react";
+import PostTable, {
+  PostTableServerActions,
+} from "@/components/client/admin/PostTable";
+import {
+  deletePost,
+  getPostsWithBucketsAndProject,
+  GetPostsAttributes,
+  updatePost,
+} from "@/app/lib/actions/entityManagement/postActions";
+import { getProjects } from "@/app/lib/actions/entityManagement/projectActions";
+import { Bucket, Project, Post, dbSync, Attachment } from "@/models";
+import { handleActionResult } from "../../app/lib/actions/clientActionHandler";
+
+type Props = {
+  children?: ReactNode;
+};
+
+async function getHeadings() {
+  let headings: string[] = [
+    "#",
+    "Title",
+    "Content",
+    "Project",
+    "CreatedAt",
+    "UpdatedAt",
+  ];
+
+  return headings;
+}
+
+export default async function PostView(props: Props) {
+  const sync = await dbSync;
+
+  const headings = await getHeadings();
+
+  const actions: PostTableServerActions = {
+    deletePost: deletePost,
+    getPosts: getPostsWithBucketsAndProject,
+    getProjects: getProjects,
+    savePost: updatePost,
+    // uploadAttachment:tryCreateAttachment
+  };
+
+  const posts: GetPostsAttributes[] | undefined = handleActionResult(
+    await getPostsWithBucketsAndProject()
+  );
+  const projects = await Project.findAll().then((projects) =>
+    projects.map((e) => JSON.parse(JSON.stringify(e)))
+  );
+
+  return (
+    <div className="w-[100%] min-h-fit bg-gray-100 overflow-scroll">
+      <div className="w-[100%] m-auto">
+        <PostTable
+          posts={posts ? posts : []}
+          projects={projects}
+          headings={headings}
+          actions={actions}
+        ></PostTable>
+      </div>
+    </div>
+  );
+}

src/views/admin/ProjectView.tsx

@@ -3,7 +3,7 @@ cache: 'no-store'
 import { tryFetchPosts } from "@/app/api/post/route";
 import { constructAPIUrl } from "@/util/Utils";
 import { ReactNode, useEffect } from "react";
-import EntityManagementTable from "../../../client/EntityManagementTable";
+import EntityManagementTable from "../../components/client/EntityManagementTable";
 import PostTable from "@/components/client/admin/PostTable";
 import { deletePost, getPostsWithBucketsAndProject, updatePost } from "@/app/lib/actions/entityManagement/postActions";
 import { getProjects } from "@/app/lib/actions/entityManagement/projectActions";