qwertyasdfgh
/
imageboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

redirect to home page when thread not found, make thread page more responsive, prevent users from filling the page up with a very huge image

This commit is contained in:
Joonas 2023-01-14 16:05:47 +02:00
parent ba363da685
commit b73338a0f3
2 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/routes/index.jsx
View File

@ -90,7 +90,7 @@ export default function Index() {
<li className="bg-ctp-mantle shadow-xl outline shadow-ctp-pink rounded-xl p-4 m-4 hover:shadow-xl scale-100 hover:scale-110 duration-500" key={thread.id}>
<Link className="space-y-4 flex flex-col" to={`threads/${thread.id}`}>
<div className="flex items-center justify-center">
<img className="w-48 rounded-xl " src={`/uploads/${thread.imageName}`} alt="" />
<img className="w-48 h-48 rounded-xl " src={`/uploads/${thread.imageName}`} alt="" />
</div>
<div>
<h2 className="text-2xl font-semibold text-center tracking-tighter ">{thread.title}</h2>

16
app/routes/threads/$threadId.jsx
View File

@ -46,7 +46,7 @@ export async function action({ request, params }) {
},
});
return redirect(`/threads/${threadId}`);
return createPost;
};
export async function loader({ params }) {
@ -64,6 +64,10 @@ export async function loader({ params }) {
},
});
if (!thread) {
return redirect('/')
}
return thread;
}
@ -74,12 +78,12 @@ export default function Thread() {
return (
<Overlay>
<div className="flex flex-col p-12 bg-ctp-crust outline rounded">
<div className="flex flex-col p-12 bg-ctp-crust border outline rounded shadow-ctp-green shadow-lg">
<div className="bg-ctp-base rounded p-4">
<span><strong>{data.title}</strong> Post id: <strong>{data.id}</strong> Created at: <strong>{new Date(data.createdAt).toLocaleString()}</strong> Reply count: <strong>{data.posts.length}</strong></span>
<br />
<div className="flex flex-col">
<img className="" src={`/uploads/${data.imageName}`} alt="post image" width={240} />
<img className="w-60 h-60" src={`/uploads/${data.imageName}`} alt="post image" />
<Link className=" text-xs text-ctp-surface0" to={`/uploads/${data.imageName}`} target="_blank" referrerPolicy="no-referrer">Click to show full image</Link>
</div>
<p>{data.post}</p>
@ -87,7 +91,7 @@ export default function Thread() {
<ul className="flex flex-col m-8 ">
{data.posts.map(post =>
<li id={`${post.id}`} className="rounded shadow p-4 m-4 odd:bg-ctp-mantle even:bg-ctp-base" key={post.id}>
<div className="flex">
<div className="flex flex-wrap">
<span>Reply id: <strong>{post.id}</strong> Replied at: <strong>{new Date(post.createdAt).toLocaleString()} </strong></span>
<Link className="mx-2 text-ctp-rosewater hover:text-ctp-maroon hover:underline" onClick={(event) => {
event.preventDefault();
@ -113,7 +117,7 @@ export default function Thread() {
}} className="font-semibold text-sm hover:underline" to={`#${post.replyingTo}`}>Replying to id: {post.replyingTo}</Link> : ''}
{post.imageName !== null ?
<div className="flex flex-col">
<img className="" src={`/uploads/${post.imageName}`} alt="post image" width={240} />
<img className="w-60 h-60" src={`/uploads/${post.imageName}`} alt="post image" />
<Link className=" text-xs text-ctp-surface0" to={`/uploads/${post.imageName}`} target="_blank" referrerPolicy="no-referrer">Click to show full image</Link>
</div> : ''}
<p>{post.comment}</p>
@ -121,7 +125,7 @@ export default function Thread() {
)}
</ul>
</div>
<Form id="bottom" className=" bg-ctp-crust p-4 space-y-2 shadow-ctp-flamingo shadow-lg outline m-16 rounded flex flex-col justify-center items-center" method="post" encType="multipart/form-data">
<Form id="bottom" className="outline bg-ctp-crust p-4 space-y-2 shadow-ctp-flamingo shadow-lg m-16 rounded flex flex-col justify-center items-center" method="post" encType="multipart/form-data">
<label className="flex flex-col m-2 space-y-2" htmlFor="text-input">
{replying ? <p className="text-center font-semibold text-ctp-black" >Replying to reply id: {replying}</p> : ''}
<span className="font-semibold text-center text-ctp-subtext0" >Post</span> <textarea className=" bg-ctp-surface0 m-1 p-1 rounded shadow shadow-ctp-overlay0" required minLength={3} name="post" type="text" />