andreas/portfolio2023
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

implemented file upload for attachments

Browse Source
This commit is contained in:
Andreas Schaafsma 2024-06-11 02:23:22 +02:00
parent e841ba8938
commit 86eb422dd5
23 changed files with 333 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/admin/[[...slug]]/page.tsx
View File

@ -1,7 +1,7 @@
'use server' 'use server'
import { getCookieAuth } from "@/app/lib/actions"; import { getCookieAuth } from "@/app/lib/actions/actions";
import AuthHandler from "@/components/server/admin/authHandler"; import AuthHandler from "@/components/server/admin/authHandler";
import Sidebar from "@/components/server/admin/views/sidebar"; import Sidebar, { SidebarEntry } from "@/components/server/admin/views/sidebar";
import { cookies } from "next/headers"; import { cookies } from "next/headers";
import PostView from "@/components/server/admin/views/PostView"; import PostView from "@/components/server/admin/views/PostView";
import { ReactNode } from "react"; import { ReactNode } from "react";
@ -12,10 +12,6 @@ type Props = {
}; };
} }
export type SidebarEntry = {
label:string;
view:string;
}
function Home(){ function Home(){

3
src/app/admin/layout.tsx
View File

@ -3,6 +3,7 @@ import { Inter } from 'next/font/google'
import StyledJsxRegistry from '../registry'; import StyledJsxRegistry from '../registry';
import Providers from '@/providers/providers'; import Providers from '@/providers/providers';
import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/css/bootstrap.css';
import { Toaster } from 'react-hot-toast';
const inter = Inter({ subsets: ['latin'], fallback: ['system-ui', 'arial'] }) const inter = Inter({ subsets: ['latin'], fallback: ['system-ui', 'arial'] })
@ -18,7 +19,7 @@ export default function RootLayout({
}) { }) {
return ( return (
<html lang="en"> <html lang="en">
<body className={inter.className}><StyledJsxRegistry><Providers>{children}</Providers></StyledJsxRegistry></body> <body className={inter.className}><Toaster position="bottom-center" /><StyledJsxRegistry><Providers>{children}</Providers></StyledJsxRegistry></body>
</html> </html>
) )
} }

59
src/app/api/attachment/route.ts
View File

@ -3,18 +3,20 @@
import { APIError, attemptAPIAction } from "@/util/api/error"; import { APIError, attemptAPIAction } from "@/util/api/error";
import { Auth, Post, PostTag, Tag, User } from "@/model/Models"; import { Auth, Post, PostTag, Tag, User } from "@/model/Models";
import { cookies } from "next/headers"; import { cookies } from "next/headers";
import { Attachment } from "@/model/Attachment";
import { randomUUID } from "crypto";
import { mkdir, mkdirSync, writeFile } from "fs";
async function tryCreateAttachment(request: Request) { async function tryCreateAttachment(request: Request) {
// Make sure the DB is ready // Make sure the DB is ready
await PostTag.sync(); await Attachment.sync();
await Tag.sync();
await Post.sync(); await Post.sync();
// Prepare data // Prepare data
const requestBody = await request.json(); const formData = await request.formData();
const authCkie = await cookies().get("auth"); const authCkie = await cookies().get("auth");
// Sanity check auth cookie // Sanity check auth cookie
@ -41,26 +43,45 @@ async function tryCreateAttachment(request: Request) {
if (!auth || !auth.user) throw new APIError({ status: 401, responseText: "Authentication Error" }); if (!auth || !auth.user) throw new APIError({ status: 401, responseText: "Authentication Error" });
// Handle incomplete data or other problems // Handle incomplete data or other problems
if (!requestBody) throw new APIError({ status: 500, responseText: "Empty request body" }); if (!formData) throw new APIError({ status: 500, responseText: "Empty request body" });
if (!requestBody.title) throw new APIError({ status: 500, responseText: "Missing post title" }); const files:any[] = formData.getAll('files')
if (!requestBody.content) throw new APIError({ status: 500, responseText: "Missing post content" });
if (!files) throw new APIError({ status: 500, responseText: "Missing file" });
if (!auth.user.id) throw new APIError({ status: 500, responseText: "Missing user id" }); if (!auth.user.id) throw new APIError({ status: 500, responseText: "Missing user id" });
if (!auth.user.perms || !auth.user.perms.isAdmin) throw new APIError({ status: 401, responseText: `Unauthorized ${JSON.stringify(auth.user)}` }); if (!auth.user.perms || !auth.user.perms.isAdmin) throw new APIError({ status: 401, responseText: `Unauthorized ${JSON.stringify(auth.user)}` });
// Create a new Post in the database // peepee
const post = await Post.create( const uuid = randomUUID()
{ const fileArray:{name:string, content:Promise<ReadableStreamReadResult<Uint8Array>>|ReadableStreamReadResult<Uint8Array>}[] = await Promise.all( files.map((file:File) => {
content: requestBody.content, return {'name':( ()=>file.name)(), 'content':file.stream().getReader().read()};
user_id: auth.user.id, }));
title: requestBody.title,
},{
include: {
association: Post.associations.user let finalFileArray:{name:string,content:ReadableStreamReadResult<Uint8Array>}[] = await (async () => {
} for(let file in fileArray){
}).then(post=>post.reload()) fileArray[file].content = await fileArray[file].content
}
return [...fileArray as {name:string,content:ReadableStreamReadResult<Uint8Array>}[]]
})() ;
mkdirSync(`./bucket/${uuid}/`)
for(let file in finalFileArray){
writeFile(`./bucket/${uuid}/${finalFileArray[file].name}`,Buffer.from(finalFileArray[file].content.value as Uint8Array),(e)=>{console.log(e)})
}
// const kanker = files.map(parseFiles)
// console.log(await kanker[0]);
return new Response(JSON.stringify({
'files': fileArray,
'uuid': uuid,
}), { status: 200 });
// Return the response
return new Response(JSON.stringify(post), { status: 200 });
} }

5
src/app/examplepage/example.mdx Normal file
View File

@ -0,0 +1,5 @@
export function Thing() {
return <>World</>
}
# Hello <Thing />

25
src/app/examplepage/page.tsx Normal file
View File

@ -0,0 +1,25 @@
import type { GetStaticProps } from 'next'
import { MDXRemote } from 'next-mdx-remote/rsc'
import ExampleComponent from './example.mdx'
const components = { ExampleComponent }
export default async function ExamplePage() {
return (
<div>
<MDXRemote
source={`# Hello World
This is from Server Components!
`}
/>
</div>
)
}
// export const getStaticProps: GetStaticProps<{
// mdxSource: MDXRemoteSerializeResult
// }> = async () => {
// const mdxSource = await serialize('some *mdx* content: <ExampleComponent />')
// return { props: { mdxSource } }}

5
src/app/lib/actions/ActionResult.ts Normal file
View File

@ -0,0 +1,5 @@
export type ActionResult<T> = {
error?:string;
result?:T;
}

9
src/app/lib/actions.ts → src/app/lib/actions/actions.ts
View File

@ -9,6 +9,7 @@ import { Attribute, Attributes } from "@sequelize/core";
import { User } from "@/model/User"; import { User } from "@/model/User";
import { AuthProps } from "@/providers/providers"; import { AuthProps } from "@/providers/providers";
import { Auth } from "@/model/Auth"; import { Auth } from "@/model/Auth";
import { ActionResult } from "./ActionResult";
type LoginReturn = { type LoginReturn = {
cookie?:unknown, cookie?:unknown,
@ -80,10 +81,10 @@ export async function serverValidateSessionCookie(koek:string):Promise<boolean>
return false return false
} }
export async function userIsAdmin(user:Partial<Attributes<User>>):Promise<boolean> export async function userIsAdmin():Promise<boolean>
{ {
const cookieAuthValue = await cookies().get('auth')?.value; const cookieAuthValue = await cookies().get('auth')?.value;
const cookieAuthSanitized = decodeURIComponent(cookieAuthValue ? cookieAuthValue: ""); const cookieAuthSanitized = cookieAuthValue? JSON.parse(JSON.stringify(cookieAuthValue)) : "";
if(!cookieAuthSanitized) return false; if(!cookieAuthSanitized) return false;
const parsedAuth = JSON.parse(cookieAuthSanitized); const parsedAuth = JSON.parse(cookieAuthSanitized);
@ -107,7 +108,8 @@ export async function userIsAdmin(user:Partial<Attributes<User>>):Promise<boolea
export async function getCookieAuth():Promise<AuthProps> export async function getCookieAuth():Promise<AuthProps>
{ {
const cookieAuthValue = await cookies().get('auth')?.value; const cookieAuthValue = await cookies().get('auth')?.value;
const cookieAuthSanitized = decodeURIComponent(cookieAuthValue ? cookieAuthValue: ""); const cookieAuthSanitized = cookieAuthValue? JSON.parse(JSON.stringify(cookieAuthValue)) : "";
console.log("kanker koek")
if(!cookieAuthSanitized) return {} if(!cookieAuthSanitized) return {}
@ -126,4 +128,3 @@ export async function getCookieAuth():Promise<AuthProps>
} }
return authObject; return authObject;
} }

11
src/app/lib/actions/clientActionHandler.ts Normal file
View File

@ -0,0 +1,11 @@
'use client'
import toast from "react-hot-toast";
import { ActionResult } from "./ActionResult";
export function handleActionResult<T>(actionResult:ActionResult<T>): T | undefined
{
if(actionResult.error) toast.error(actionResult.error,{position:"top-center",duration:10000})
else return actionResult.result;
}

33
src/app/lib/actions/entityManagement/postActions.ts Normal file
View File

@ -0,0 +1,33 @@
'use server';
import { revalidatePath, revalidateTag } from 'next/cache'
import { Post } from "@/model/Post";
import { Attributes, where } from "@sequelize/core";
import { cookies } from 'next/headers';
import { getCookieAuth, userIsAdmin } from '../actions';
import { User } from '@/model/User';
import { ActionResult } from '../ActionResult';
export async function deletePost(postID: number): Promise<ActionResult<boolean>> {
// revalidatePath("/admin/man-post","page")
if(! await userIsAdmin()) return {error:"Unauthorized, not deleting Post", result: false}
const destroy = await Post.destroy({ where: { id: postID } });
return {result: true};
}
export async function getPosts(): Promise<ActionResult<Attributes<Post>[]>> {
if(! await userIsAdmin()) return {error:"Unauthorized, not fetching Posts."}
const posts = await Post.findAll();
return {result:JSON.parse(JSON.stringify(posts))};
}
export async function updatePost(postAttributes: Partial<Attributes<Post>>): Promise<ActionResult<Attributes<Post>[]>> {
if(! await userIsAdmin()) return {error:"Unauthorized, not updating Post."}
const post = await Post.update(postAttributes, {where:{id:postAttributes.id}});
return {result:JSON.parse(JSON.stringify(post))};
}

11
src/app/lib/actions/entityManagement/projectActions.ts Normal file
View File

@ -0,0 +1,11 @@
'use server';
import { Project } from "@/model/Project";
import { ActionResult } from "../ActionResult";
import { Attributes } from "@sequelize/core";
import { userIsAdmin } from "../actions";
export async function getProjects(): Promise<ActionResult<Attributes<Project>[]>> {
if (! await userIsAdmin()) return { error: 'Unauthorized, not fetching Projects' }
const posts = await Project.findAll();
return { result: JSON.parse(JSON.stringify(posts)) };
}

24
src/app/lib/postActions.ts
View File

@ -1,24 +0,0 @@
'use server';
import { revalidatePath, revalidateTag } from 'next/cache'
import { Post } from "@/model/Post";
import { Attributes, where } from "@sequelize/core";
export async function deletePost(postID: number): Promise<boolean> {
revalidatePath("/admin/man-post","page")
const destroy = await Post.destroy({ where: { id: postID } });
return true;
}
export async function getPosts(): Promise<string> {
const posts = await Post.findAll();
return JSON.stringify(posts);
}
export async function updatePost(postAttributes: Partial<Attributes<Post>>): Promise<string> {
revalidatePath("/admin/man-post","page")
const post = await Post.update(postAttributes, {where:{id:postAttributes.id}});
return JSON.stringify(post);
}

7
src/app/lib/projectActions.ts
View File

@ -1,7 +0,0 @@
'use server';
import { Project } from "@/model/Project";
export async function getProjects(): Promise<string> {
const posts = await Project.findAll();
return JSON.stringify(posts);
}

63
src/components/client/admin/PostEditor.tsx Normal file
View File

@ -0,0 +1,63 @@
import { ActionResult } from "@/app/lib/actions/ActionResult";
import { handleActionResult } from "@/app/lib/actions/clientActionHandler";
import { Post } from "@/model/Post";
import { Project } from "@/model/Project";
import { Attributes } from "@sequelize/core";
import { ChangeEventHandler, MouseEventHandler, useLayoutEffect, useRef, useState } from "react";
export type PostTableCallbacks = {
savePost: (p:Partial<Attributes<Post>>)=>any;
closeEditor: ()=>any;
}
export type EditorProps = {
open:boolean;
post:Partial<Attributes<Post>>;
projects?:Attributes<Project>[];
callbacks:PostTableCallbacks;
}
export default function PostEditor(props:EditorProps){
let [content,setContent] = useState(props.post?.content)
let [title,setTitle] = useState(props.post?.title)
let [projectID,setProjectID] = useState(props.post?.project_id)
let textbox:any = useRef(undefined);
function adjustHeight() {
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.post.id as number,
content:content as string,
title:title as string,
});
}
const onClickCancelButton:MouseEventHandler<HTMLButtonElement> = (e)=>{props.callbacks.closeEditor();}
return <>
<form className="bg-light w-[100%] h-content p-1">
<h1 className="m-2">Edit Post</h1>
<h2 className="m-2">Title</h2>
<input value={title} onChange={e => setTitle(e.target.value)} type='text' className="m-2"></input>
<h2 className="m-2">Content</h2>
<textarea 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"></textarea>
<h2 className="m-2">Project</h2>
<select onChange={projectSelectionChange} name="projects" id="projects" defaultValue={props.post?.project?.id} placeholder={props.post?.project?.name} value={projectID} className="m-2">
<option value={0}>unassigned</option>
{props.projects?.map(p=><option value={p.id}>{p.readableIdentifier}</option>)}
</select>
<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>
</>
}

113
src/components/client/admin/PostTable.tsx
View File

@ -1,18 +1,21 @@
'use client' 'use client'
import React, { ChangeEvent, LegacyRef, MutableRefObject, ReactNode, useLayoutEffect, useRef } from "react" import React, { ChangeEvent, ChangeEventHandler, LegacyRef, MouseEventHandler, MutableRefObject, ReactNode, useLayoutEffect, useRef } from "react"
import TableGen from "../TableGen" import TableGen from "../TableGen"
import { Attributes, CreationAttributes } from "@sequelize/core"; import { Attributes, CreationAttributes } from "@sequelize/core";
import { Post } from "@/model/Post"; import { Post } from "@/model/Post";
import { useState } from "react"; import { useState } from "react";
import { Project } from "@/model/Project"; import { Project } from "@/model/Project";
import { revalidatePath } from "next/cache"; import toast from "react-hot-toast"
import { usePathname } from 'next/navigation'; import { ActionResult } from "@/app/lib/actions/ActionResult";
import { handleActionResult } from "@/app/lib/actions/clientActionHandler";
import PostEditor, { EditorProps } from "./PostEditor";
import { getPosts } from "@/app/lib/actions/entityManagement/postActions";
type Actions = { type Actions = {
deletePost:any deletePost:(id:number)=>Promise<ActionResult<boolean>>
getPosts:()=>Promise<string> getPosts:()=>Promise<ActionResult<Attributes<Post>[]>>
getProjects:()=>Promise<string> getProjects:()=>Promise<ActionResult<Attributes<Project>[]>>
savePost:(data:Partial<Attributes<Post>>)=>Promise<string> savePost:(data:Partial<Attributes<Post>>)=>Promise<ActionResult<Attributes<Post>[]>>
} }
type Props = { type Props = {
@ -23,61 +26,12 @@ type Props = {
actions:Actions; actions:Actions;
} }
type EditorProps = {
open:boolean;
post:Partial<Attributes<Post>>;
projects?:Attributes<Project>[]
actionSavePost:(data:Partial<Attributes<Post>>)=>Promise<string>
}
export default function PostTable(props:Props){ export default function PostTable(props:Props){
const pathname = usePathname();
function RenderEditor(props:EditorProps){
let [content,setContent] = useState(props.post?.content)
let [title,setTitle] = useState(props.post?.title)
let [projectID,setProjectID] = useState(props.post?.project_id)
let textbox:any = useRef(undefined);
function adjustHeight() {
if(!textbox.current || !textbox.current.style) return
textbox.current.style.height = "fit-content";
textbox.current.style.height = `${textbox.current.scrollHeight}px`;
}
useLayoutEffect(adjustHeight, []);
return <form className="bg-light w-[100%] h-content p-1">
<h1 className="m-2">Edit Post</h1>
<h2 className="m-2">Title</h2>
<input value={title} onChange={e => setTitle(e.target.value)} type='text' className="m-2"></input>
<h2 className="m-2">Content</h2>
<textarea ref={textbox} value={content} style={{"height" : "100%"}} onChange={(e) => {setContent(e.target.value);adjustHeight()}} className="w-[100%] min-h-auto h-content align-top text-start text-base line-clamp-6 m-2"></textarea>
<h2 className="m-2">Project</h2>
<select name="projects" id="projects" onChange={(e)=>setProjectID(parseInt(e.target.value))} defaultValue={props.post?.project?.id} placeholder={props.post?.project?.name} value={projectID} className="m-2">
<option value={0}>unassigned</option>
{props.projects?.map(p=><option value={p.id}>{p.readableIdentifier}</option>)}
</select>
<button type="button" className="m-2 btn btn-primary">Preview</button>
<button type="button" className="m-2 btn btn-success" onClick={()=>{
props.actionSavePost({
id:props.post?.id ? props.post.id : 0,
content: content ? content : "",
title: title ? title : "",
project_id: projectID ? projectID : 0
}).then(res=>console.log(res));
refetch();
closeEditor();
}}>Save</button>
<button type="button" className="m-2 btn btn-danger" onClick={()=>{
closeEditor();
}}>Cancel</button>
</form>
}
function closeEditor(){ function closeEditor(){
setEditor({ setEditor({
open:false open:false
@ -87,33 +41,60 @@ export default function PostTable(props:Props){
function showEditor(entry:Attributes<Post>){ function showEditor(entry:Attributes<Post>){
setEditor({ setEditor({
open: true, open: true,
post: entry, post: entry
actionSavePost: props.actions.savePost
}) })
} }
const initEditorState:Partial<EditorProps> = { const initEditorState:Partial<EditorProps> = {
open: false, open: false,
post: {}, post: {}
actionSavePost: props.actions.savePost
} }
const [posts, setPosts] = useState(props.data); const [posts, setPosts] = useState(props.data);
const [editor, setEditor] = useState(initEditorState) const [editor, setEditor] = useState(initEditorState)
const [projects, setProjects] = useState(props.projects); const [projects, setProjects] = useState(props.projects);
function deletePost(entry:Attributes<Post>){ function deletePost(entry:Attributes<Post>){
props.actions?.deletePost(entry.id); props.actions?.deletePost(entry.id)
props.actions?.getPosts().then((p)=>setPosts(JSON.parse(p))); .then(actionResult=>{
const result = handleActionResult(actionResult);
if (! result) return;
posts.splice(posts.indexOf(entry),1);
setPosts([...posts])
toast.success('Removed Post:' +entry.id);
});
} }
const aifa = (a:ReactNode,b:ReactNode) => a ? a : b const aifa = (a:ReactNode,b:ReactNode) => a ? a : b
function refetch(){ function refetch(){
props.actions.getPosts().then(e=>setPosts(JSON.parse(e))) props.actions?.getPosts().then((p)=>{
props.actions.getProjects().then(e=>setProjects(JSON.parse(e))) const result = handleActionResult(p)
console.log(pathname); if (result) setPosts(result)
});
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(getPosts)
.then(res=>{
if (!res.error) setPosts(res.result as Attributes<Post>[]);
})
closeEditor();
};
return <> return <>
<TableGen headings={props.headings}> <TableGen headings={props.headings}>
{posts.map((d:Attributes<Post>)=>{ {posts.map((d:Attributes<Post>)=>{
@ -132,7 +113,7 @@ export default function PostTable(props:Props){
<td key='btndelete'><button type="button" className="btn btn-danger" onClick={()=>deletePost(d)}> Delete</button></td> <td key='btndelete'><button type="button" className="btn btn-danger" onClick={()=>deletePost(d)}> Delete</button></td>
</tr> </tr>
{(editor.open && editor.post && editor.post.id == d.id)? {(editor.open && editor.post && editor.post.id == d.id)?
<tr key={'activeEditor'}><th scope="row" colSpan={props.headings.length}><RenderEditor actionSavePost={props.actions?.savePost} open={editor.open} post={editor.post} projects={projects}></RenderEditor></th></tr>:""} <tr key={'activeEditor'}><th scope="row" colSpan={props.headings.length}><PostEditor callbacks={{savePost:savePost, closeEditor:closeEditor}} open={editor.open} post={editor.post} projects={projects} ></PostEditor></th></tr>:""}
</> </>
})} })}
</TableGen> </TableGen>

2
src/components/client/admin/loginForm.tsx
View File

@ -1,6 +1,6 @@
'use client' 'use client'
import { serverAttemptAuthenticateUser } from "@/app/lib/actions"; import { serverAttemptAuthenticateUser } from "@/app/lib/actions/actions";
import { AuthContext } from "@/providers/providers"; import { AuthContext } from "@/providers/providers";
import { constructAPIUrl } from "@/util/Utils"; import { constructAPIUrl } from "@/util/Utils";
import { createContext, useState } from "react"; import { createContext, useState } from "react";

2
src/components/server/admin/authHandler.tsx
View File

@ -5,7 +5,7 @@ import LoginForm from "@/components/client/admin/loginForm";
import AdminPanel from "@/components/server/admin/adminPanel"; import AdminPanel from "@/components/server/admin/adminPanel";
import ClientAuthHandler from "@/components/client/admin/clientAuthHandler"; import ClientAuthHandler from "@/components/client/admin/clientAuthHandler";
import { serverValidateSessionCookie } from "@/app/lib/actions"; import { serverValidateSessionCookie } from "@/app/lib/actions/actions";
import { constructAPIUrl } from "@/util/Utils"; import { constructAPIUrl } from "@/util/Utils";
import { ReactNode } from "react"; import { ReactNode } from "react";
import { AuthContext, AuthProps } from "@/providers/providers"; import { AuthContext, AuthProps } from "@/providers/providers";

6
src/components/server/admin/views/PostView.tsx
View File

@ -1,3 +1,4 @@
cache: 'no-store'
import { tryFetchPosts } from "@/app/api/post/route"; import { tryFetchPosts } from "@/app/api/post/route";
import { Post } from "@/model/Post"; import { Post } from "@/model/Post";
@ -5,8 +6,8 @@ import { constructAPIUrl } from "@/util/Utils";
import { ReactNode, useEffect } from "react"; import { ReactNode, useEffect } from "react";
import TableGen from "../../../client/TableGen"; import TableGen from "../../../client/TableGen";
import PostTable from "@/components/client/admin/PostTable"; import PostTable from "@/components/client/admin/PostTable";
import { deletePost, getPosts, updatePost } from "@/app/lib/postActions"; import { deletePost, getPosts, updatePost } from "@/app/lib/actions/entityManagement/postActions";
import { getProjects } from "@/app/lib/projectActions"; import { getProjects } from "@/app/lib/actions/entityManagement/projectActions";
import { Project } from "@/model/Project"; import { Project } from "@/model/Project";
type Props = { type Props = {
@ -33,6 +34,7 @@ export default async function PostView(props:Props){
}; };
const posts:Post[] = await Post.findAll().then(posts=>posts.map((e)=>JSON.parse(JSON.stringify(e)))); const posts:Post[] = await Post.findAll().then(posts=>posts.map((e)=>JSON.parse(JSON.stringify(e))));
const projects = await Project.findAll().then(projects=>projects.map((e)=>JSON.parse(JSON.stringify(e)))); const projects = await Project.findAll().then(projects=>projects.map((e)=>JSON.parse(JSON.stringify(e))));
return ( return (
<div className="w-[100%] min-h-fit bg-gray-100 overflow-scroll"> <div className="w-[100%] min-h-fit bg-gray-100 overflow-scroll">
<span className="flex flex-row flex-grow w-[100%] pl-2 pr-2"><h1 className="p-2 inline-block">Post Management</h1><section className="flex-grow"></section><button className='btn btn-success h-12 mt-auto mb-auto self-end'>New</button></span> <span className="flex flex-row flex-grow w-[100%] pl-2 pr-2"><h1 className="p-2 inline-block">Post Management</h1><section className="flex-grow"></section><button className='btn btn-success h-12 mt-auto mb-auto self-end'>New</button></span>

6
src/components/server/admin/views/sidebar.tsx
View File

@ -1,13 +1,15 @@
import './sidebar.css' import './sidebar.css'
import { Button, NavLink } from 'react-bootstrap'; import { Button, NavLink } from 'react-bootstrap';
import { SidebarEntry } from '@/app/admin/page';
import React, { ReactNode, useState } from 'react'; import React, { ReactNode, useState } from 'react';
import Link from 'next/link'; import Link from 'next/link';
import { headers } from 'next/headers'; import { headers } from 'next/headers';
export type SidebarEntry = {
label:string;
view:string;
}
type Props = { type Props = {
children?:ReactNode; children?:ReactNode;

29
src/components/shared/news/article.tsx
View File

@ -1,17 +1,42 @@
import Tagbar from "@/components/shared/news/tagbar"; import Tagbar from "@/components/shared/news/tagbar";
import "/public/global.css" import "/public/global.css"
import "@/app/index.css" import "@/app/index.css"
import styles from "./article.module.css" import styles from "./article.module.css"
import { serialize } from 'next-mdx-remote/serialize'
import { MDXComponents, MDXContent } from "mdx/types";
import { MDXRemote } from 'next-mdx-remote/rsc'
export async function ExampleComponent(){
return (
<div>aaa</div>
)
}
export default async function Article(params: { id: string|undefined, title: string|undefined, content: string|undefined, date?:string|undefined } ) {
const components = { ExampleComponent }
export default function Article(params: { id: string|undefined, title: string|undefined, content: string|undefined, date?:string|undefined } ) {
return ( return (
<article id={`post-${params.id}`}> <article id={`post-${params.id}`}>
<h1 className=".article-title pl-5 pr-5">{params.title}</h1> <h1 className=".article-title pl-5 pr-5">{params.title}</h1>
<div className={`${styles.imagecontainer} m-5`}/> <div className={`${styles.imagecontainer} m-5`}/>
<div className="pl-5 pr-5"><Tagbar/></div> <div className="pl-5 pr-5"><Tagbar/></div>
<p className=".article-content p-5">{params.content}</p> <div className=".article-content p-5">
<MDXRemote
source={params.content?params.content:""} components={components}
/>
</div>
<section className=".article-date">{params.date}</section> <br/> <section className=".article-date">{params.date}</section> <br/>
</article> </article>
); );
} }
// export const getStaticProps: GetStaticProps<{
// mdxSource: MDXRemoteSerializeResult
// }> = async () => {
// const mdxSource = await serialize('some *mdx* content: <ExampleComponent />')
// return { props: { mdxSource } }
// }

7
src/mdx-components.tsx Normal file
View File

@ -0,0 +1,7 @@
import type { MDXComponents } from 'mdx/types'
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
...components,
}
}

31
src/model/Attachment.ts Normal file
View File

@ -0,0 +1,31 @@
import { Association, BelongsToGetAssociationMixin, BelongsToManyGetAssociationsMixin, DataTypes, ForeignKey, InferAttributes, InferCreationAttributes, Model, NonAttribute, Sequelize } from "@sequelize/core";
import { Post } from "./Post";
import { SqliteDialect } from '@sequelize/sqlite3';
import { Attribute, AutoIncrement, BelongsTo, BelongsToMany, NotNull, PrimaryKey, Unique } from "@sequelize/core/decorators-legacy";
export class Attachment extends Model<InferAttributes<Attachment>, InferCreationAttributes<Attachment>> {
@PrimaryKey
@AutoIncrement
@Attribute(DataTypes.INTEGER)
@Unique
declare id: number;
@Attribute(DataTypes.STRING)
declare path: string
// Associations
@Attribute(DataTypes.INTEGER)
@NotNull
declare postid: number;
@BelongsTo(()=>Post,{foreignKey: 'postid', inverse: {type: "hasMany", as: 'attachments'}})
declare post?:NonAttribute<Post>;
declare static associations: {
posts: Association<Post, Attachment>;
};
}
const sequelize = new Sequelize({
dialect: SqliteDialect,
storage: 'db.sqlite',
models: [Attachment]
})

5
src/model/Post.ts
View File

@ -5,6 +5,7 @@ import { Attribute, AutoIncrement, BelongsTo, BelongsToMany, CreatedAt, Default,
import { Tag } from "./Tag"; import { Tag } from "./Tag";
import { PostTag } from "./PostTag"; import { PostTag } from "./PostTag";
import { Project } from "./Project"; import { Project } from "./Project";
import { Attachment } from "./Attachment";
export class Post extends Model<InferAttributes<Post>, InferCreationAttributes<Post>> { export class Post extends Model<InferAttributes<Post>, InferCreationAttributes<Post>> {
@ -46,6 +47,10 @@ export class Post extends Model<InferAttributes<Post>, InferCreationAttributes<P
@BelongsToMany(()=>Tag, { through: { model: ()=>PostTag, unique: false}, inverse: {as: 'taggedPosts'} }) @BelongsToMany(()=>Tag, { through: { model: ()=>PostTag, unique: false}, inverse: {as: 'taggedPosts'} })
declare postTags?:NonAttribute<Tag[]>; declare postTags?:NonAttribute<Tag[]>;
/** Defined by {@link Attachment.post} */
declare Attachments:NonAttribute<Attachment>[];
declare getUser: BelongsToGetAssociationMixin<User>; declare getUser: BelongsToGetAssociationMixin<User>;
declare static associations: { declare static associations: {

13
src/providers/providers.tsx
View File

@ -10,20 +10,11 @@ export type AuthProps = {
auth?: Attributes<Auth> auth?: Attributes<Auth>
user?: Attributes<User> user?: Attributes<User>
} }
let p: AuthProps = {} let p: AuthProps = {}
export type AdminViewProps = {
view: string;
}
let avp: AdminViewProps = {
view: "home",
}
export const AdminViewContext = createContext(avp);
export const AuthContext = createContext(p); export const AuthContext = createContext(p);
interface Props { interface Props {
children?: ReactNode; children?: ReactNode;
params?: any; params?: any;
@ -31,6 +22,6 @@ interface Props {
export default function Providers(props:Props){ export default function Providers(props:Props){
return ( return (
<AuthContext.Provider value={{}}><AdminViewContext.Provider value={avp}>{props.children}</AdminViewContext.Provider></AuthContext.Provider> <AuthContext.Provider value={{}}>{props.children}</AuthContext.Provider>
) )
} }