Merge pull request #84 from thomassth/participation-story

participation cleanup + storybook

Author: MaanasArora

client/src/app/core/conversation.tsx

@@ -1,69 +1,14 @@
 import { useParams } from "react-router";
-import CoreBase from "./base";
 import {
   createVote,
   getConversation,
   getNextComment,
 } from "../../components/api/conversation";
-import { useEffect, useMemo, useState } from "react";
-import {
-  CheckIcon,
-  ForwardIcon,
-  PlusIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/solid";
-import { Button } from "@headlessui/react";
-import { Conversation } from "./dashboard";
+import { useEffect } from "react";
+import { Conversation, ParticipationComment } from "./dashboard";
 import { useQuery } from "@tanstack/react-query";
 import { getApi } from "../../components/api/base";
-import CommentConfig from "../../components/admin/comments/CommentConfig";
-
-type Comment = { content: string; id: string; num_votes: number };
-
-const VotingSection = ({
-  comment,
-  commentNumber,
-  onVote,
-}: {
-  comment: Comment | null;
-  commentNumber?: number;
-  onVote: (commentId: string, vote: "agree" | "disagree" | "skip") => void;
-}) => {
-  return (
-    comment && (
-      <div className="flex flex-col items-start gap-4 p-4 bg-white rounded-xl">
-        <div className="flex flex-col items-start gap-2 mb-2">
-          <h3 className="font-semibold">Comment {commentNumber}</h3>
-          <p className="text-gray-700 text-2xl font-bold">{comment.content}</p>
-          <time className="text-gray-500">(time here)</time>
-        </div>
-        <div className="flex items-center gap-2 w-full">
-          <Button
-            onClick={() => onVote(comment.id, "agree")}
-            className="border hover:bg-primary hover:text-white px-2 py-2 rounded-xl flex flex-row items-center gap-x-2"
-          >
-            <CheckIcon className="h-5 w-5" />
-            Agree
-          </Button>
-          <Button
-            onClick={() => onVote(comment.id, "disagree")}
-            className="border hover:bg-primary hover:text-white px-2 py-2 rounded-xl flex flex-row items-center gap-x-2"
-          >
-            <XMarkIcon className="h-5 w-5" />
-            Disagree
-          </Button>
-          <Button
-            onClick={() => onVote(comment.id, "skip")}
-            className="bg-background px-2 py-2 rounded-xl flex flex-row items-center gap-x-2 border border-gray-300 text-gray-700 hover:bg-primary hover:text-white ml-auto"
-          >
-            Skip
-            <ForwardIcon className="h-5 w-5" />
-          </Button>
-        </div>
-      </div>
-    )
-  );
-};
+import { ParticipationSpa } from "../../components/participation/ParticipationSpa";
 
 const ConversationPage = () => {
   const { conversationId } = useParams<{ conversationId: string }>();
@@ -73,19 +18,20 @@ const ConversationPage = () => {
     queryFn: () => getConversation(conversationId ?? ""),
   });
 
-  const currentComment = useQuery<{ comment: Comment; num_votes: number }>({
+  const currentComment = useQuery<{
+    comment: ParticipationComment;
+    num_votes: number;
+  }>({
     queryKey: ["current-comment", conversationId],
     queryFn: () => getNextComment(conversationId ?? ""),
   });
 
-  const amountOfVotedComments = useMemo(() => {
-    return currentComment.data?.num_votes ?? 0;
-  }, [currentComment]);
   const nextComment = async () => {
     if (!conversationId) return;
 
     await currentComment.refetch();
   };
+
   const fetchConversation = async () => {
     if (!conversationId) return;
     await conversation.refetch();
@@ -100,22 +46,7 @@ const ConversationPage = () => {
     fetchData();
   }, [conversationId]);
 
-  const [dialog, setDialog] = useState<HTMLDialogElement | null>(null);
-
-  useEffect(() => {
-    setDialog(document.getElementById("comment-dialog") as HTMLDialogElement);
-  }, []);
-
-  const handleEditClick = (state: boolean) => {
-    if (state) {
-      dialog?.showModal();
-    } else {
-      dialog?.close();
-    }
-  };
-
   const onFormComplete = () => {
-    handleEditClick(false);
     comments.refetch();
   };
   // end of dialog logic
@@ -136,66 +67,13 @@ const ConversationPage = () => {
     queryFn: () => getApi(`/conversations/${conversationId}/comments`),
   });
   return (
-    <CoreBase>
-      <main className="w-[95%] mx-auto">
-        <section className="p-8">
-          <h1 className="text-3xl font-bold mb-4">{conversation.data?.name}</h1>
-          <p className="mb-4">{conversation.data?.description}</p>
-        </section>
-        <section
-          className="p-8 bg-background w-full flex flex-col"
-          aria-labelledby="active-comment-header"
-        >
-          <div className="flex justify-between items-center">
-            <h2
-              id="active-comment-header"
-              className="font-semibold text-secondary mb-4"
-            >
-              Active Comments
-            </h2>
-            <Button
-              onClick={() => handleEditClick(true)}
-              className="flex mb-4 bg-white border border-gray-300 p-2 w-min whitespace-nowrap items-center justify-center gap-x-2 rounded-xl"
-            >
-              <PlusIcon height={30} width={30} /> Add Comment
-            </Button>
-          </div>
-
-          {currentComment.isSuccess ? (
-            <VotingSection
-              comment={currentComment.data?.comment}
-              commentNumber={amountOfVotedComments + 1}
-              onVote={onVote}
-            />
-          ) : (
-            <div className="flex flex-col items-center justify-center p-4 bg-white rounded-xl">
-              <p className="text-gray-500">No more comments to review.</p>
-            </div>
-          )}
-          <p className="text-center pt-6">
-            {amountOfVotedComments + 1} of {comments.data?.length} comments
-          </p>
-        </section>
-      </main>
-      {!!conversationId && (
-        <dialog
-          id="comment-dialog"
-          className="m-[revert] p-[revert] border-2 backdrop:bg-primary backdrop:opacity-80"
-        >
-          <button
-            className="border-2 px-2 py-2 rounded-xl flex flex-row items-center gap-x-2 ml-auto"
-            autoFocus
-            onClick={() => handleEditClick(false)}
-          >
-            Close
-          </button>
-          <CommentConfig
-            onComplete={onFormComplete}
-            conversationId={conversationId}
-          />
-        </dialog>
-      )}
-    </CoreBase>
+    <ParticipationSpa
+      conversation={conversation.data}
+      currentComment={currentComment.data}
+      comments={comments.data}
+      onVoteComplete={onVote}
+      onComplete={onFormComplete}
+    />
   );
 };
 

client/src/app/core/dashboard.tsx

@@ -6,7 +6,7 @@ export type Conversation = {
   id: string;
   name: string;
   description: string;
-  author: { username: string };
+  author: { id: string; username: string };
   num_participants: number;
   date_created: string;
   is_active: boolean;
@@ -18,6 +18,13 @@ export type Comment = {
   content: string;
 };
 
+export type ParticipationComment = Comment & {
+  user_id: string;
+  approved: boolean;
+  conversation_id: string;
+  date_created: string;
+};
+
 // See server\convergent\routers\moderation.py
 export type ModerationComment = Comment & {
   user_id: string;

client/src/components/participation/ParticipationSpa.stories.ts

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import {
+  withRouter,
+  reactRouterParameters,
+} from "storybook-addon-remix-react-router";
+
+import { ParticipationSpa } from "./ParticipationSpa";
+
+const meta = {
+  title: "client/participation/Conversation",
+  component: ParticipationSpa,
+  decorators: [withRouter],
+  argTypes: {
+    conversation: { control: "object" },
+    currentComment: { control: "object" },
+    comments: { control: "object" },
+  },
+  parameters: {
+    reactRouter: reactRouterParameters({}),
+  },
+} satisfies Meta<typeof ParticipationSpa>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ActiveConversation: Story = {
+  args: {
+    conversation: {
+      id: "d035d428-90c1-4ea9-99de-1d7c1f81a939",
+      name: "Title test",
+      description: "desc",
+      author: {
+        id: "162f507e-7f6e-4871-a8c8-4912c3be624c",
+        username: "gg@gg.ca",
+      },
+      num_participants: 1,
+      date_created: "2025-07-04T04:38:18.318536",
+      is_active: true,
+      display_unmoderated: false,
+    },
+    currentComment: {
+      num_votes: 0,
+      comment: {
+        user_id: "162f507e-7f6e-4871-a8c8-4912c3be624c",
+        content: "test1",
+        approved: true,
+        conversation_id: "d035d428-90c1-4ea9-99de-1d7c1f81a939",
+        id: "fbeec989-d824-410d-9577-2f235e688b01",
+        date_created: "2025-07-04T04:49:24.267970",
+      },
+    },
+    comments: [
+      { id: "fbeec989-d824-410d-9577-2f235e688b01", content: "test1" },
+      { id: "32ac0523-464e-4e11-8382-d9e3a6680db3", content: "test2" },
+      { id: "0f55d2fd-2717-4bbb-b0e9-bff72e7c83e6", content: "" },
+    ],
+    onVoteComplete: () => {},
+    onComplete: () => {},
+  },
+};