From a52a002b0ff09b09cc0de917e8e945028ac345ac Mon Sep 17 00:00:00 2001
From: Andreas <the.hion.v@gmail.com>
Date: Thu, 27 Jun 2024 11:19:05 +0200
Subject: [PATCH] Minor refactors and fixes

---
 src/app/admin/[[...slug]]/page.tsx            | 103 ++--
 src/components/client/admin/PostEditor.tsx    | 446 ++++++++++++------
 src/components/client/admin/PostTable.tsx     | 352 +++++++-------
 .../server/admin/views/PostView.tsx           |  51 --
 src/components/server/admin/views/sidebar.tsx |  16 +-
 src/providers/providers.tsx                   |   3 +-
 src/views/admin/PostView.tsx                  |  67 +++
 .../views => views/admin}/ProjectView.tsx     |   2 +-
 src/views/index.ts                            |   0
 9 files changed, 612 insertions(+), 428 deletions(-)
 delete mode 100644 src/components/server/admin/views/PostView.tsx
 create mode 100644 src/views/admin/PostView.tsx
 rename src/{components/server/admin/views => views/admin}/ProjectView.tsx (96%)
 create mode 100644 src/views/index.ts

diff --git a/src/app/admin/[[...slug]]/page.tsx b/src/app/admin/[[...slug]]/page.tsx
index 6fc3735..c6feb31 100644
--- a/src/app/admin/[[...slug]]/page.tsx
+++ b/src/app/admin/[[...slug]]/page.tsx
@@ -1,72 +1,67 @@
-'use server'
-import { getCookieAuth } from "@/app/lib/actions/actions";
+"use server";
+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 PostView from "@/components/server/admin/views/PostView";
-import { ReactNode } from "react";
-import ProjectView from "@/components/server/admin/views/ProjectView";
-
-type Props = {
-  params: {
-    slug: string[]
-  };
-}
-
-
+import ProjectView from "@/views/admin/ProjectView";
+import PostView from "@/views/admin/PostView";
+import { redirect } from 'next/navigation'
 
 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>],
-    ['man-post', <PostView key={1}></PostView>],
-    ['man-proj', <ProjectView key={2}></ProjectView>]
-  ]);
+	return new Map([
+		["home", <Home key={0}></Home>],
+		["man-post", <PostManager key={1}></PostManager>],
+		["man-proj", <ProjectManager key={2}></ProjectManager>],
+	]);
 }
 
-
-
-
-async function getSidebarEntries(): Promise<Array<SidebarEntry>> {
-  return [
-    { label: 'Home', view: 'home' },
-    { label: 'Post Management', view: 'man-post' },
-    { label: 'Project Management', view: 'man-proj' },
-    { label: 'Tag Management', view: 'man-tags' },
-    { label: 'User Management', view: 'man-user' },
-  ]
-}
+const sidebarEntries: SidebarEntry[] = [
+  { label: "Home", view: "home" },
+  { 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);
-  return viewJSX ? viewJSX : <Home></Home>;
+	const viewMap = await getViewMap();
+	const viewJSX = viewMap.get(view || "home");
+	return viewJSX || <Home></Home>;
 }
 
-export default async function Page(props: Props) {
-  const sidebarEntries: Array<SidebarEntry> = await getSidebarEntries();
+type Props = {
+	params: {
+		slug: string[];
+	};
+};
 
-  const slug: string | string[] = props.params.slug ? props.params.slug : 'home';
-
-  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>
-        <div className="AdminPanelWrapper flex flex-col p-2">
-          {await getCurrentView(slug.toString())}
-        </div>
-      </AuthHandler>
-      {/* <section>{JSON.stringify(cookies().getAll())}</section> */}
-    </main>
-  );
-}
\ No newline at end of file
+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>
+				<div className="AdminPanelWrapper flex flex-col p-2">
+					{await getCurrentView(slug.toString())}
+				</div>
+			</AuthHandler>
+			{/* <section>{JSON.stringify(cookies().getAll())}</section> */}
+		</main>
+	);
+}
diff --git a/src/components/client/admin/PostEditor.tsx b/src/components/client/admin/PostEditor.tsx
index e443f7b..7923ad6 100644
--- a/src/components/client/admin/PostEditor.tsx
+++ b/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 { PostAttributesWithBuckets } from "@/models";
-import { DeepPartial } from "@/util/DeepPartial";
+import { Post, Project, Bucket, PostBucket, Attachment } from "@/models";
 import { Attributes } from "@sequelize/core";
 import { UUID } from "crypto";
-import { ChangeEventHandler, MouseEventHandler, useLayoutEffect, useRef, useState } from "react";
-import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from "react-bootstrap";
+import {
+	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;
-    closeEditor: ()=>any;
-    uploadAttachment : ()=>any;
-}
+	savePost: (p: Partial<Attributes<Post>>) => void;
+    refetch: () => any;
+	closeEditor: () => any;
+	uploadAttachment: () => any;
+};
+
+export type EditorState = {
+	isEditorOpen: boolean;
+	editorPost: GetPostsAttributes;
+};
 
 export type EditorProps = {
-    editorOpenState:boolean;
-    openedPost?:GetPostsAttributes;
-    projects?:Attributes<Project>[];
-    callbacks?:PostTableCallbacks;
+	editorPost: GetPostsAttributes;
+	projectList: {
+		id: number;
+		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);
+
+	// Autosize the text area
+	function textAreaAutoSize(
+		textbox: MutableRefObject<HTMLTextAreaElement>
+	): 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));
+
+	// 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
+	};
+
+	// Handle changing the selected project using the dropdown select
+	const projectSelectionChange: ChangeEventHandler<HTMLSelectElement> = (e) =>
+		setPostProjectIDState(parseInt(e.target.value));
+	// Handle clicking the save button
+	const onClickSaveButton: MouseEventHandler<HTMLButtonElement> = (e) => {
+		callbacks?.savePost({
+			id: editorPost?.id as number,
+			content: postContentState as string,
+			title: postTitleState as string,
+			project_id: postProjectIDState,
+		});
+	};
+	const onClickCancelButton: MouseEventHandler<HTMLButtonElement> = (e) => {
+		callbacks?.closeEditor();
+	};
+
+	return (
+		<>
+			<form className="bg-light w-[100%] h-content p-1">
+				<h1 key="heading-editpost" className="m-2">
+					Edit Post
+				</h1>
+				<h2 key="label-title" className="m-2">
+					Title
+				</h2>
+				<input
+					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={postContentState}
+					style={{ height: "100%" }}
+					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"
+					onChange={projectSelectionChange}
+					name="projects"
+					id="projects"
+					defaultValue={editorPost?.project?.id}
+					placeholder={editorPost?.project?.name}
+					value={postProjectIDState}
+					className="m-2"
+				>
+					<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>
+					</thead>
+					<tbody>
+						{editorPost?.buckets ? (
+							(() => {
+								let bucketMap: Map<
+									UUID,
+									Attributes<Bucket>
+								> = new Map(
+									editorPost.buckets.map((b) => [
+										b.id as UUID,
+										b,
+									])
+								);
+								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
+																		) => {
+																			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
+																		);
+																	return bucket &&
+																		bucket.attachments ? (
+																		bucket.attachments.map(
+																			(
+																				attachment
+																			) => (
+																				<li
+																					key={`listItem-file-${attachment.filename}`}
+																				>
+																					{
+																						attachment.filename
+																					}
+																				</li>
+																			)
+																		)
+																	) : (
+																		<></>
+																	);
+																})()}
+															</ul>
+														</AccordionBody>
+													</AccordionItem>
+												</Accordion>
+											</tr>
+										</>
+									);
+								});
+							})()
+						) : (
+							<></>
+						)}
+					</tbody>
+				</table>
+				<button type="button" className="m-2 btn btn-primary">
+					Preview
+				</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>
+		</>
+	);
 }
 
-
-export default function PostEditor(props:EditorProps){
-    let [content,setContent] = useState(props.openedPost?.content)
-    let [title,setTitle] = useState(props.openedPost?.title)
-    let [projectID,setProjectID] = useState(props.openedPost?.project?.id)
-    let textbox:any = useRef(undefined);
-    
-    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(adjustHeight, []);
-
-    const onTextAreaChange:ChangeEventHandler<HTMLTextAreaElement> = (e) => {setContent(e.target.value);adjustHeight()};
-    const projectSelectionChange:ChangeEventHandler<HTMLSelectElement> = (e)=>setProjectID(parseInt(e.target.value));
-    const onClickSaveButton:MouseEventHandler<HTMLButtonElement> = (e)=>{
-        props.callbacks?.savePost({
-            id: props.openedPost?.id as number,
-            content:content as string,
-            title:title as string,
-            project_id: projectID
-        });
-    }
-    const onClickCancelButton:MouseEventHandler<HTMLButtonElement> = (e)=>{props.callbacks?.closeEditor();}
-
-    return <>
-    <form className="bg-light w-[100%] h-content p-1">
-        <h1         key="heading-editpost" className="m-2">Edit Post</h1>
-        <h2         key="label-title" className="m-2">Title</h2>
-        <input      key="input-title" 
-                    value={title} 
-                    onChange={e => setTitle(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} 
-                    style={{"height" : "100%"}} 
-                    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"
-                    onChange={projectSelectionChange} 
-                    name="projects" 
-                    id="projects"  
-                    defaultValue={props.openedPost?.project?.id} 
-                    placeholder={props.openedPost?.project?.name} 
-                    value={projectID} className="m-2">
-            <option key="projectSelectionOpt-0" value={0}>unassigned</option>
-            {props.projects?.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>
-            </thead>
-            <tbody>
-                {
-                    props.openedPost?.buckets 
-                    ? (()=>{
-                        let bucketMap:Map<UUID,Attributes<Bucket>> = new Map(props.openedPost.buckets.map((b)=>[b.id as UUID,b]));
-                        let bucketList = [...props.openedPost.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)=>{
-                                                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)
-                                                return bucket && bucket.attachments 
-                                                    ? bucket.attachments.map((attachment)=><li key={`listItem-file-${attachment.filename}`}>{attachment.filename}</li>) 
-                                                    : <></>
-                                            })()}
-                                        </ul>
-                                    </AccordionBody>
-                                </AccordionItem>
-                            </Accordion></tr></>
-                        })
-                    })() 
-                    : <></>
-                }
-            </tbody>
-        </table>
-        <button type="button" className="m-2 btn btn-primary">Preview</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,
-    headings: string[],
-    editorState: EditorProps,
-    editorControls: any,
-    callbacks: any,
-    projects: any
+	editorPost: GetPostsAttributes;
+	headings: string[];
+	editorState: EditorState;
+	editorControls: any;
+	callbacks: any;
+	projects: any;
+};
+
+export function EditorRenderer({
+	editorPost,
+	headings,
+	editorState,
+	callbacks,
+	projects,
+}: EditorRendererProps) {
+	return editorState.isEditorOpen &&
+		editorState.editorPost &&
+		editorState.editorPost.id == editorPost.id ? (
+		<tr>
+			<th scope="row" colSpan={headings.length}>
+				<PostEditor
+					callbacks={callbacks}
+					editorPost={editorState.editorPost}
+					projectList={projects}
+				/>
+			</th>
+		</tr>
+	) : (
+		""
+	);
 }
-export function EditorRenderer(props:EditorRendererProps){
-    const {postData, headings, editorState, editorControls, callbacks, projects} = props
-
-    return (props.editorState.editorOpenState
-        && editorState.openedPost
-        && editorState.openedPost.id == postData.id)
-
-        ? <tr>
-            <th scope="row" colSpan={headings.length}>
-                <PostEditor callbacks={callbacks}
-                    editorOpenState={editorState.editorOpenState}
-                    openedPost={editorState.openedPost}
-                    projects={projects} />
-            </th>
-        </tr>
-
-        : ""
-}
\ No newline at end of file
diff --git a/src/components/client/admin/PostTable.tsx b/src/components/client/admin/PostTable.tsx
index 3f294dd..080d0fd 100644
--- a/src/components/client/admin/PostTable.tsx
+++ b/src/components/client/admin/PostTable.tsx
@@ -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>
-    </>
-}
\ No newline at end of file
diff --git a/src/components/server/admin/views/PostView.tsx b/src/components/server/admin/views/PostView.tsx
deleted file mode 100644
index eaf5885..0000000
--- a/src/components/server/admin/views/PostView.tsx
+++ /dev/null
@@ -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>
-    );
-}
\ No newline at end of file
diff --git a/src/components/server/admin/views/sidebar.tsx b/src/components/server/admin/views/sidebar.tsx
index a632bad..946d3e8 100644
--- a/src/components/server/admin/views/sidebar.tsx
+++ b/src/components/server/admin/views/sidebar.tsx
@@ -19,15 +19,21 @@ 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)=>{
-                    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}`}>
-                        {sidebarEntry.label}
-                    </Link></li>
+                {sidebarEntries.map((sidebarEntry)=>{
+                    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>
                 })}
             </ul>
         </div>
diff --git a/src/providers/providers.tsx b/src/providers/providers.tsx
index c64d301..b835d95 100644
--- a/src/providers/providers.tsx
+++ b/src/providers/providers.tsx
@@ -1,7 +1,6 @@
 'use client'
 
-import { Auth } from "@/model/Auth";
-import { User } from "@/model/User";
+import { Auth, User } from "@/models";
 import { ReactNode, createContext } from "react";
 import { Attributes, InferAttributes } from "@sequelize/core";
 
diff --git a/src/views/admin/PostView.tsx b/src/views/admin/PostView.tsx
new file mode 100644
index 0000000..4182cad
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/server/admin/views/ProjectView.tsx b/src/views/admin/ProjectView.tsx
similarity index 96%
rename from src/components/server/admin/views/ProjectView.tsx
rename to src/views/admin/ProjectView.tsx
index c6a8abd..192c765 100644
--- a/src/components/server/admin/views/ProjectView.tsx
+++ b/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";
diff --git a/src/views/index.ts b/src/views/index.ts
new file mode 100644
index 0000000..e69de29