Splitting PostSegment into its own file, minor refactoring

client-solid/src/Components/PostSegment.tsx

@@ -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>
+  );
+}

client-solid/src/Components/Posts.tsx

@@ -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>
-  );
-}

client-solid/src/Components/SinglePost.tsx

@@ -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>