Handlers for GET and POST engages added, renders numbers of unique engagements per post

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

@@ -1,21 +1,54 @@
-import { JSXElement } from "solid-js";
+import { JSXElement, createSignal,onMount,useContext } from "solid-js";
 
 import { EngagementIcon } from "../../Util/Icons";
+import { engage } from "../../Util/api";
+import { LoginContext } from "../../Context/GlobalState";
+import { getEngagementCount } from "../../Util/api";
+
+export default function EngagementButton({
+  postId,
+}: {
+  postId: string;
+}): JSXElement {
+  const [engagementCount, setEngagementCount] = createSignal(0);
+  const login_ctx = useContext(LoginContext)!;
+
+  onMount((): void => {
+    void setUp()
+  })
+
+  const setUp = async () => {
+    const r = await getEngagementCount(postId)
+    setEngagementCount(r)
+  }
+
+  // Function to handle engagement
+  const handleEngagement = async () => {
+    try {
+      const response = await engage(postId, login_ctx.token()) ;
+      if (response.ok) {
+        // Update engagement count if the request is successful
+        setEngagementCount(await response.json());
+      } else {
+        console.error("Failed to engage:", response.statusText);
+      }
+    } catch (error) {
+      console.error("Error engaging:", error);
+    }
+  };
 
-export default function EngagementButton(): JSXElement {
   return (
-    <>
-      <div class="flex p-1">
-        <button
-          class="rounded-base btn btn-xs hover:border-primary"
-          aria-label="Show sign of engagement"
-        >
-          <EngagementIcon />
-        </button>
-        <span class="text-1xl countdown px-1.5 pt-1.5 text-center">
-          <p style={{ "--value": 46 }}></p>
-        </span>
-      </div>
-    </>
+    <div class="flex p-1">
+      <button
+        class="rounded-base btn btn-xs hover:border-primary"
+        aria-label="Show sign of engagement"
+        onClick={handleEngagement} // Call handleEngagement function on button click
+      >
+        <EngagementIcon />
+      </button>
+      <span class="text-1xl countdown px-1.5 pt-1.5 text-center">
+        <p style={{ "--value": engagementCount() }}></p>
+      </span>
+    </div>
   );
 }

client-solid/src/Components/PostSegment.tsx

@@ -1,15 +1,15 @@
 import { JSXElement, Show } from "solid-js";
-
 import { Post } from "../Util/api";
-import CommentsBUtton from "./Buttons/CommentsButton";
+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";
 
 export function PostSegment(props: { post: Post }): JSXElement {
-  const dateOfCreation = new Date(props.post.createdAt).toDateString();
-  const isEdited = !(props.post.createdAt == props.post.updatedAt);
+  const { post } = props; // Destructuring the post object from props
+  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">
@@ -31,13 +31,13 @@ export function PostSegment(props: { post: Post }): JSXElement {
         <Show when={isEdited}>
           <p>This post has been edited</p>
         </Show>
-        <p class="my-5 text-base">{props.post.content}</p>
+        <p class="my-5 text-base">{post.content}</p>
         <div class="card-actions justify-between">
           <div class="flex">
-            <EngagementButton />
-            <CommentsBUtton />
+            <EngagementButton postId={post.id} />
+            <CommentsButton />
           </div>
-          <ToPostButton post={props.post} />
+          <ToPostButton post={post} />
         </div>
       </div>
     </div>

client-solid/src/Util/api.ts

@@ -90,9 +90,13 @@ export async function getComments(
   return data;
 }
 
-/** Incomplete */
-export async function engagePost(postId: string): Promise<void> {
-  const res = await fetch(`/api/engage_post?post_id=${postId}`);
+/** 
+ * Gets the Engagement counts for a post by postId
+ * @param postId The id of the post
+ * @returns {Promise<number>} A promise that contains number of post engages
+ */
+export async function getEngagementCount(postId: string): Promise<number> {
+  const res = await fetch(`/api/posts/${postId}/engage`);
   const data = await res.json();
   return data;
 }

server/src/routes/post.rs

@@ -101,7 +101,18 @@ pub async fn engage_post(
         }
     }
 
-    return Ok(HttpResponse::Ok().json("Engaged"));
+    // Get engagement count
+    let q = sqlx::query!("SELECT COUNT(*) FROM engagements WHERE post_id = $1", post_id)
+        .fetch_one(&state.pool)
+        .await;
+
+    match q {
+        Ok(count) => Ok(HttpResponse::Ok().json(count.count)),
+        Err(e) => {
+            info!("Error getting engagements: {}", e);
+            Ok(HttpResponse::InternalServerError().json("Error"))
+        }
+    }
 }
 
 #[get("/posts/{id}/engage")]