Refactoring of most components regarding props and, Lint corrections

client-solid/src/Components/Buttons/CommentsButton.tsx

@@ -1,17 +1,14 @@
 import { JSXElement } from "solid-js";
 
 import { CommentsIcon } from "../../Util/Icons";
-import { Post } from "../../Util/api";
 
-export default function CommentsBUtton({ post }: { post: Post }): JSXElement {
+export default function CommentsButton(): JSXElement {
   return (
-    <>
     <div class="flex p-1">
       <CommentsIcon />
-        <span class="text-1xl countdown text-center pt-1.5 px-1.5">
-          <p style={{ "--value": 11 }}>{post.comments}</p>
+      <span class="text-1xl countdown px-1.5 pt-1.5 text-center">
+        <p style={{ "--value": 12 }}></p>
       </span>
     </div>
-    </>
   );
 }

client-solid/src/Components/Buttons/Engegament.tsx

@@ -1,20 +1,19 @@
 import { JSXElement } from "solid-js";
 
 import { EngagementIcon } from "../../Util/Icons";
-import { Post } from "../../Util/api";
 
-export default function EngagementButton({ post }: { post: Post }): JSXElement {
+export default function EngagementButton(): JSXElement {
   return (
     <>
       <div class="flex p-1">
         <button
-          class="btn btn-xs hover:border-primary rounded-base"
+          class="rounded-base btn btn-xs hover:border-primary"
           aria-label="Show sign of engagement"
         >
           <EngagementIcon />
         </button>
-        <span class="text-1xl countdown text-center pt-1.5 px-1.5">
-          <p style={{ "--value": 46 }}>{post.votes}</p>
+        <span class="text-1xl countdown px-1.5 pt-1.5 text-center">
+          <p style={{ "--value": 46 }}></p>
         </span>
       </div>
     </>

client-solid/src/Components/Buttons/RemovePostButton.tsx

@@ -1,9 +1,8 @@
 import { JSXElement } from "solid-js";
 
 import { RemovePostIcon } from "../../Util/Icons";
-import { Post } from "../../Util/api";
 
-export default function RemovePostButton({ post }: { post: Post }): JSXElement {
+export default function RemovePostButton(): JSXElement {
   return (
     <>
       <div class="flex p-1">

client-solid/src/Components/Buttons/Reply.tsx

@@ -1,7 +1,7 @@
 import { JSXElement, Show, useContext } from "solid-js";
 
 import { LoginContext } from "../../Context/GlobalState";
-import { ReplyIcon, ReportIcon } from "../../Util/Icons";
+import { ReplyIcon } from "../../Util/Icons";
 
 export default function ReplyButton(): JSXElement {
   const login_ctx = useContext(LoginContext)!;

client-solid/src/Components/Buttons/ToPost.tsx

@@ -1,19 +1,16 @@
 import { useNavigate } from "@solidjs/router";
 import { JSXElement } from "solid-js";
 
-
-
 import { Arrow } from "../../Util/Icons";
 import { Post } from "../../Util/api";
 
-
-export default function ToPostButton({ post }: { post: Post }): JSXElement {
+export default function ToPostButton(props: { post: Post }): JSXElement {
   const nav = useNavigate();
 
   return (
     <div class="p-1">
       <button
-        onClick={(): void => nav("/post/" + post.id)}
+        onClick={(): void => nav("/post/" + props.post.id)} // Accessing props.post directly
         class="btn btn-xs hover:border-primary"
         aria-label="View post"
       >

client-solid/src/Components/Comment.tsx

@@ -7,27 +7,23 @@ interface CommentProps {
   comment: PublicComment;
 }
 
-/**
- * Comment is a component that displays a single comment.
- * @param {Object} props The properties for the Comment component.
- * @param {string} props.postId The id of the post that the comment is a reply to.
- * @returns {JSXElement} A JSXElement of a comment
- */
-export function Comment({ comment }: CommentProps): JSXElement {
+export function Comment(props: CommentProps): JSXElement {
   return (
     <>
       <div class="chat chat-start py-5">
-        <time class="text-xs opacity-50">{comment.created_at}</time>
+        <time class="text-xs opacity-50">{props.comment.created_at}</time>
       </div>
-      <div class="chat-">{comment.content}</div>
+      <div class="chat-">{props.comment.content}</div>
       <div class="divider"></div>
       <div class="chat chat-end">
         <div class="flex-col">
-        <time class="text-xs opacity-50 time-end">Reply created_at</time>
+          <time class="time-end text-xs opacity-50">Reply created_at</time>
           <div class="chat-end">Replies to parent comment if any</div>
         </div>
       </div>
-        <div class="divider divider-end"><ReplyButton/></div>
+      <div class="divider divider-end">
+        <ReplyButton />
+      </div>
     </>
   );
 }

client-solid/src/Components/CommentSection.tsx

@@ -3,17 +3,13 @@ import { For, JSXElement, createResource } from "solid-js";
 import { getComments } from "../Util/api";
 import { Comment } from "./Comment";
 
-/**
- * CommentSection is a component that displays a collection of comments.
- * @param {Object} props The properties for the CommentSection component.
- * @param {string} props.postId The id of the post that the comments are a reply to.
- * @returns {JSXElement} A JSXElement that contains a collection of comments.
- */
-export function CommentSection({ postId }: { postId: string }): JSXElement {
-  const [comments] = createResource(postId, () => getComments(postId, 10, 0));
+export function CommentSection(props: { postId: string }): JSXElement {
+  const [comments] = createResource(props.postId, () =>
+    getComments(props.postId, 10, 0)
+  );
 
   return (
-    <section class="p-5 my-5 bg-base-200 border-b-2 border-b-primary ">
+    <section class="my-5 border-b-2 border-b-primary bg-base-200 p-5 ">
       <For each={comments()!}>{(comment) => <Comment comment={comment} />}</For>
     </section>
   );

client-solid/src/Components/LoginButton.tsx

@@ -1,7 +1,6 @@
 import { JSXElement, Show, createSignal, useContext } from "solid-js";
 
 import { LoginContext, ModalContext } from "../Context/GlobalState";
-import { UserCircle } from "../Util/Icons";
 
 export function LoginButton(): JSXElement {
   const modal_ctx = useContext(ModalContext)!;
@@ -35,7 +34,7 @@ export function LoginButton(): JSXElement {
       {showLogoutModal() && (
         <div
           role="alert"
-          class="absolute top-10 z-10 flex rounded-md bg-base-200 border-2 border-info"
+          class="absolute top-10 z-10 flex rounded-md border-2 border-info bg-base-200"
         >
           <div class="relative p-5">
             <p>Do you wish to logout?</p>

client-solid/src/Components/Menu.tsx

@@ -2,7 +2,7 @@ import { A } from "@solidjs/router";
 import { JSXElement, Show, useContext } from "solid-js";
 
 import { LoginContext } from "../Context/GlobalState";
-import { Home, Plus } from "../Util/Icons";
+import { Plus } from "../Util/Icons";
 
 // Represents a single list item in the menu bar
 export function MenuItem(props: {
@@ -23,7 +23,7 @@ export function Menu(): JSXElement {
   const login_ctx = useContext(LoginContext)!;
   return (
     <Show when={login_ctx.loggedIn()}>
-      <ul class="menu menu-horizontal space-y-0 space-x-2 rounded-box md:space-x-5 md:space-y-0">
+      <ul class="menu menu-horizontal space-x-2 space-y-0 rounded-box md:space-x-5 md:space-y-0">
         <MenuItem href="/new">
           <Plus />
         </MenuItem>

client-solid/src/Components/NewComment.tsx

@@ -4,26 +4,23 @@ import { JSXElement, Show, createSignal, useContext } from "solid-js";
 import { LoginContext } from "../Context/GlobalState";
 import { NewComment, createComment } from "../Util/api";
 
-interface NewCommentInputAreaProps {
-  parentPostId: number;
-  parentCommentId: number | null;
-}
-
 /** NewCommentInputArea is a component that allows users to submit a comment on a **post or comment**.
  * @param {Object} props The properties for the NewCommentInputArea component.
  * @param {number} props.parentPostId The id of the post that the comment is a reply to.
  * @returns {JSXElement} A JSXElement that contains a textarea and a submit button.
  */
-export function NewCommentInputArea({
-  parentPostId,
-  parentCommentId,
-}: NewCommentInputAreaProps): JSXElement {
+
+interface NewCommentInputAreaProps {
+  parentPostId: number;
+  parentCommentId: number | null;
+}
+
+export function NewCommentInputArea(
+  props: NewCommentInputAreaProps
+): JSXElement {
   const [content, setContent] = createSignal("");
   const [waiting, setWaiting] = createSignal(false);
-
-  // We assumte this context is always available
   const login_ctx = useContext(LoginContext)!;
-
   const nav = useNavigate();
 
   const sendComment = (): void => {
@@ -32,15 +29,15 @@ export function NewCommentInputArea({
     const response = createComment({
       content: content(),
       user_token: login_ctx.token(),
-      parent_post_id: parentPostId,
-      parent_comment_id: parentCommentId,
+      parent_post_id: props.parentPostId,
+      parent_comment_id: props.parentCommentId,
     } as NewComment);
 
     if (response) {
       response.then(() => {
         setWaiting(false);
         setContent("");
-        nav("/post/" + parentPostId);
+        nav("/post/" + props.parentPostId);
       });
     }
   };

client-solid/src/Components/PostSegment.tsx

@@ -1,22 +1,15 @@
 import { JSXElement, Show } from "solid-js";
 
 import { Post } from "../Util/api";
-import EngagementButton from "./Buttons/Engegament";
 import CommentsBUtton from "./Buttons/CommentsButton";
+import EngagementButton from "./Buttons/Engegament";
+import RemovePostButton from "./Buttons/RemovePostButton";
 import ReportButton from "./Buttons/Report";
 import ToPostButton from "./Buttons/ToPost";
-import RemovePostButton from "./Buttons/RemovePostButton";
 
-/**
- * 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 dateOfCreation = new Date(post.createdAt).toDateString();
-  const isEdited = !(post.createdAt == post.updatedAt);
+export function PostSegment(props: { post: Post }): JSXElement {
+  const dateOfCreation = new Date(props.post.createdAt).toDateString();
+  const isEdited = !(props.post.createdAt == props.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">
@@ -25,12 +18,12 @@ export function PostSegment({ post }: { post: Post }): JSXElement {
           <p class="text-xs">{dateOfCreation}</p>
           <details class="dropdown">
             <summary class="btn m-1">...</summary>
-            <ul class="menu dropdown-content z-[1] w-26 rounded-box bg-base-100 p-2 shadow">
+            <ul class="w-26 menu dropdown-content z-[1] rounded-box bg-base-100 p-2 shadow">
               <li>
                 <ReportButton />
               </li>
               <li>
-                <RemovePostButton post={post}/>
+                <RemovePostButton post={props.post} />
               </li>
             </ul>
           </details>
@@ -38,13 +31,13 @@ export function PostSegment({ post }: { post: Post }): JSXElement {
         <Show when={isEdited}>
           <p>This post has been edited</p>
         </Show>
-        <p class="my-5 text-base">{post.content}</p>
+        <p class="my-5 text-base">{props.post.content}</p>
         <div class="card-actions justify-between">
           <div class="flex">
-            <EngagementButton post={post} />
-            <CommentsBUtton post={post} />
+            <EngagementButton post={props.post} />
+            <CommentsBUtton post={props.post} />
           </div>
-          <ToPostButton post={post} />
+          <ToPostButton post={props.post} />
         </div>
       </div>
     </div>

client-solid/src/Util/api.ts

@@ -91,9 +91,7 @@ export async function getComments(
 }
 
 /** Incomplete */
-export async function engagePost(
-  postId: string
-): Promise<void> {
+export async function engagePost(postId: string): Promise<void> {
   const res = await fetch(`/api/engage_post?post_id=${postId}`);
   const data = await res.json();
   return data;