Imbus/FrostByte
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Splitting PostSegment into its own file, minor refactoring

Browse source
This commit is contained in:
Imbus 2024-03-12 19:51:41 +01:00
parent 46678dfdeb
commit ac527a4b71
3 changed files with 62 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
client-solid/src/Components/PostSegment.tsx Normal file
View file

@ -0,0 +1,47 @@
import { useNavigate } from "@solidjs/router";
import { JSXElement, Show } from "solid-js";
import { Arrow, EngagementIcon } from "../Util/Icons";
import { Post } from "../Util/api";
/**
* PostSegment is used to display posts in both the main feed and the post view
*
* @param {Object} props The properties for the PostSegment component.
* @param {Post} props.post The post to display.
* @returns {JSXElement} A JSXElement of a post
*/
export function PostSegment({ post }: { post: Post }): JSXElement {
const nav = useNavigate();
const dateOfCreation = new Date(post.createdAt).toDateString();
const isEdited = !(post.createdAt == post.updatedAt);
return (
<div class="card compact w-full flex-grow border-b-2 border-b-primary bg-base-200 text-base-content transition-all hover:bg-base-300">
<div class="card-body md:mx-6">
<h3>{dateOfCreation}</h3>
<Show when={isEdited}>
<p>This post has been edited</p>
</Show>
<p class="break-words text-base-content md:pt-2">{post.content}</p>
<div class="card-actions justify-between">
<button
// onClick={(engagement)}
class="btn btn-xs hover:border-x-primary"
aria-label="Show sign of engagement"
>
<EngagementIcon />
</button>
<button
onClick={(): void => nav("/post/" + post.id)}
class="btn btn-xs"
aria-label="View post"
>
<Arrow />
</button>
</div>
</div>
</div>
);
}

48
client-solid/src/Components/Posts.tsx
View file

@ -1,9 +1,13 @@
import { useNavigate } from "@solidjs/router";
import { For, JSXElement, Show, createSignal } from "solid-js";
import { Arrow, EngagementIcon, loadSpinner } from "../Util/Icons";
import { loadSpinner } from "../Util/Icons";
import { Post, getPosts } from "../Util/api";
import { PostSegment } from "./PostSegment";
/**
* Posts is a component that displays a collection of posts.
* @returns {JSXElement} A JSXElement that contains a collection of posts.
*/
export function Posts(): JSXElement {
const [posts, setPosts] = createSignal([] as Post[]);
const [loading, setLoading] = createSignal(true);
@ -21,43 +25,3 @@ export function Posts(): JSXElement {
</Show>
);
}
// This is the card container for a post
export function PostSegment({ post } : { post: Post }): JSXElement {
const nav = useNavigate();
const dateOfCreation = new Date(post.createdAt).toDateString()
const isEdited = ! (post.createdAt == post.updatedAt)
return (
<div class="card compact w-full flex-grow border-b-2 border-b-primary bg-base-200 text-base-content transition-all hover:bg-base-300">
<div class="card-body md:mx-6">
<h3>
{dateOfCreation}
</h3>
<Show when={isEdited}>
<p>This post has been edited</p>
</Show>
<p class="break-words text-base-content md:pt-2">
{post.content}
</p>
<div class="card-actions justify-between">
<button
// onClick={(engagement)}
class="btn btn-xs hover:border-x-primary"
aria-label="Show sign of engagement"
>
<EngagementIcon />
</button>
<button
onClick={(): void => nav("/post/" + post.id)}
class="btn btn-xs"
aria-label="View post"
>
<Arrow />
</button>
</div>
</div>
</div>
);
}

11
client-solid/src/Components/SinglePost.tsx
View file

@ -12,8 +12,12 @@ import { loadSpinner } from "../Util/Icons";
import { getPost } from "../Util/api";
import { CommentSection } from "./CommentSection";
import { NewCommentInputArea } from "./NewComment";
import { PostSegment } from "./Posts";
import { PostSegment } from "./PostSegment";
/**
* This is the view for a single post along with its comments.
* @returns {JSXElement} A JSXElement
*/
export function SinglePost(): JSXElement {
const params = useParams();
const [post] = createResource(params.postid, getPost);
@ -24,7 +28,10 @@ export function SinglePost(): JSXElement {
<Show when={post()}>
<PostSegment post={post()!} />
<Show when={login_ctx.loggedIn()}>
<NewCommentInputArea parentCommentId={null} parentPostId={parseInt(params.postid)} />
<NewCommentInputArea
parentCommentId={null}
parentPostId={parseInt(params.postid)}
/>
</Show>
<CommentSection postId={params.postid} />
</Show>