create-bluecopa-react-app 1.0.11 → 1.0.12

package/templates/latest/app/routes/comments.tsx

@@ -0,0 +1,552 @@
+import React, { useState } from 'react';
+import { AppSidebar } from "~/components/app-sidebar";
+import { SiteHeader } from "~/components/site-header";
+import { SidebarInset, SidebarProvider } from "~/components/ui/sidebar";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select";
+import { Badge } from "~/components/ui/badge";
+import { Separator } from "~/components/ui/separator";
+import { Avatar, AvatarFallback } from "~/components/ui/avatar";
+import { Skeleton } from "~/components/ui/skeleton";
+import { toast } from "sonner";
+import {
+  useCreateThread,
+  useGetCommentsByThreadId,
+  usePostComment,
+  useUpdateComment,
+  useDeleteComment,
+  useSubscribeUser,
+  useUnsubscribeUser,
+  useCheckSubscriptionStatus,
+  copaApi
+} from '@bluecopa/react';
+import { MessageSquare, Plus, Send, Edit, Trash2, Bell, BellOff, Users } from 'lucide-react';
+
+// Mock user data - in real app this would come from auth context
+const MOCK_USER = {
+  id: 'user-123',
+  name: 'John Doe',
+  email: 'john@example.com'
+};
+
+// Component types for better organization
+interface ThreadFormProps {
+  onThreadCreated: (threadId: string) => void;
+}
+
+interface CommentFormProps {
+  threadId: string;
+  onCommentPosted: () => void;
+}
+
+interface CommentItemProps {
+  comment: any;
+  onCommentUpdated: () => void;
+  onCommentDeleted: () => void;
+}
+
+interface SubscriptionControlsProps {
+  userId: string;
+  threadId: string;
+}
+
+// Thread Creation Form Component
+function ThreadForm({ onThreadCreated }: ThreadFormProps) {
+  const [componentId, setComponentId] = useState('');
+  const [componentType, setComponentType] = useState<string>('');
+
+  const createThreadMutation = useCreateThread({
+    onSuccess: (data) => {
+      toast.success('Thread created successfully!');
+      onThreadCreated(data.data.id || '');
+      setComponentId('');
+      setComponentType('');
+    },
+    onError: (error) => {
+      toast.error(`Failed to create thread: ${error.message}`);
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!componentId || !componentType) {
+      toast.error('Please fill in all fields');
+      return;
+    }
+
+    createThreadMutation.mutate({
+      data: {
+        forComponentId: componentId,
+        forComponentType: componentType as any,
+      },
+    });
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Plus className="h-5 w-5" />
+          Create New Thread
+        </CardTitle>
+        <CardDescription>
+          Start a new discussion thread for a component
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <Label htmlFor="componentId">Component ID</Label>
+            <Input
+              id="componentId"
+              value={componentId}
+              onChange={(e) => setComponentId(e.target.value)}
+              placeholder="Enter component ID (e.g., workbook-123)"
+            />
+          </div>
+          <div>
+            <Label htmlFor="componentType">Component Type</Label>
+            <Select value={componentType} onValueChange={setComponentType}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select component type" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="WORKBOOK">Workbook</SelectItem>
+                <SelectItem value="DASHBOARD">Dashboard</SelectItem>
+                <SelectItem value="WORKSHEET">Worksheet</SelectItem>
+                <SelectItem value="DATASET">Dataset</SelectItem>
+                <SelectItem value="PROCESS">Process</SelectItem>
+                <SelectItem value="FORM">Form</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <Button 
+            type="submit" 
+            disabled={createThreadMutation.isPending}
+            className="w-full"
+          >
+            {createThreadMutation.isPending ? 'Creating...' : 'Create Thread'}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
+
+// Comment Form Component
+function CommentForm({ threadId, onCommentPosted }: CommentFormProps) {
+  const [comment, setComment] = useState('');
+
+  const postCommentMutation = usePostComment({
+    onSuccess: () => {
+      toast.success('Comment posted successfully!');
+      setComment('');
+      onCommentPosted();
+    },
+    onError: (error) => {
+      toast.error(`Failed to post comment: ${error.message}`);
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!comment.trim()) {
+      toast.error('Please enter a comment');
+      return;
+    }
+
+    postCommentMutation.mutate({
+      data: {
+        chatThreadId: threadId,
+        comment: comment.trim(),
+        parentId: threadId
+      },
+    });
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Send className="h-5 w-5" />
+          Add Comment
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <Label htmlFor="comment">Your Comment</Label>
+            <Input
+              id="comment"
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+              placeholder="Enter your comment..."
+              className="min-h-[80px]"
+            />
+          </div>
+          <Button 
+            type="submit" 
+            disabled={postCommentMutation.isPending}
+            className="w-full"
+          >
+            {postCommentMutation.isPending ? 'Posting...' : 'Post Comment'}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
+
+// Individual Comment Component
+function CommentItem({ comment, onCommentUpdated, onCommentDeleted }: CommentItemProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editText, setEditText] = useState(comment.comment || '');
+
+  const updateCommentMutation = useUpdateComment({
+    onSuccess: () => {
+      toast.success('Comment updated successfully!');
+      setIsEditing(false);
+      onCommentUpdated();
+    },
+    onError: (error) => {
+      toast.error(`Failed to update comment: ${error.message}`);
+    },
+  });
+
+  const deleteCommentMutation = useDeleteComment({
+    onSuccess: () => {
+      toast.success('Comment deleted successfully!');
+      onCommentDeleted();
+    },
+    onError: (error) => {
+      toast.error(`Failed to delete comment: ${error.message}`);
+    },
+  });
+
+  const handleUpdate = () => {
+    if (!editText.trim()) {
+      toast.error('Comment cannot be empty');
+      return;
+    }
+
+    updateCommentMutation.mutate({
+      data: {
+        ...comment,
+        comment: editText.trim(),
+      },
+      commentId: comment.id,
+    });
+  };
+
+  const handleDelete = () => {
+    if (window.confirm('Are you sure you want to delete this comment?')) {
+      deleteCommentMutation.mutate(comment.id);
+    }
+  };
+
+  return (
+    <div className="border rounded-lg p-4 space-y-3">
+      <div className="flex items-start justify-between">
+        <div className="flex items-center gap-3">
+          <Avatar className="h-8 w-8">
+            <AvatarFallback>
+              {comment.createdBy?.charAt(0)?.toUpperCase() || 'U'}
+            </AvatarFallback>
+          </Avatar>
+          <div>
+            <p className="font-medium text-sm">{comment.createdBy || 'Unknown User'}</p>
+            <p className="text-xs text-muted-foreground">
+              {comment.createdDate ? new Date(comment.createdDate).toLocaleString() : 'Just now'}
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setIsEditing(!isEditing)}
+            disabled={updateCommentMutation.isPending}
+          >
+            <Edit className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleDelete}
+            disabled={deleteCommentMutation.isPending}
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {isEditing ? (
+        <div className="space-y-2">
+          <Input
+            value={editText}
+            onChange={(e) => setEditText(e.target.value)}
+            className="min-h-[60px]"
+          />
+          <div className="flex gap-2">
+            <Button
+              size="sm"
+              onClick={handleUpdate}
+              disabled={updateCommentMutation.isPending}
+            >
+              {updateCommentMutation.isPending ? 'Saving...' : 'Save'}
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => {
+                setIsEditing(false);
+                setEditText(comment.comment || '');
+              }}
+            >
+              Cancel
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <p className="text-sm">{comment.comment}</p>
+      )}
+    </div>
+  );
+}
+
+// Subscription Controls Component
+function SubscriptionControls({ userId, threadId }: SubscriptionControlsProps) {
+  const { data: subscriptionStatus, isLoading } = useCheckSubscriptionStatus(userId, threadId);
+
+  const subscribeUserMutation = useSubscribeUser({
+    onSuccess: () => {
+      toast.success('Successfully subscribed to thread!');
+    },
+    onError: (error) => {
+      toast.error(`Failed to subscribe: ${error.message}`);
+    },
+  });
+
+  const unsubscribeUserMutation = useUnsubscribeUser({
+    onSuccess: () => {
+      toast.success('Successfully unsubscribed from thread!');
+    },
+    onError: (error) => {
+      toast.error(`Failed to unsubscribe: ${error.message}`);
+    },
+  });
+
+  const handleSubscribe = () => {
+    subscribeUserMutation.mutate({
+      params: { userId, threadId },
+    });
+  };
+
+  const handleUnsubscribe = () => {
+    unsubscribeUserMutation.mutate({
+      params: { userId, threadId },
+    });
+  };
+
+  if (isLoading) {
+    return <Skeleton className="h-10 w-32" />;
+  }
+
+  const isSubscribed = subscriptionStatus?.data?.isSubscribed;
+
+  return (
+    <div className="flex items-center gap-2">
+      <Button
+        variant={isSubscribed ? "outline" : "default"}
+        size="sm"
+        onClick={isSubscribed ? handleUnsubscribe : handleSubscribe}
+        disabled={subscribeUserMutation.isPending || unsubscribeUserMutation.isPending}
+      >
+        {isSubscribed ? (
+          <>
+            <BellOff className="h-4 w-4 mr-2" />
+            Unsubscribe
+          </>
+        ) : (
+          <>
+            <Bell className="h-4 w-4 mr-2" />
+            Subscribe
+          </>
+        )}
+      </Button>
+      <Badge variant={isSubscribed ? "default" : "secondary"}>
+        {isSubscribed ? "Subscribed" : "Not Subscribed"}
+      </Badge>
+    </div>
+  );
+}
+
+// Main Comments Page Component
+export default function CommentsPage() {
+  const [selectedThreadId, setSelectedThreadId] = useState<string>('');
+
+  const { 
+    data: commentsData, 
+    isLoading: commentsLoading, 
+    refetch: refetchComments 
+  } = useGetCommentsByThreadId(selectedThreadId, {
+    enabled: !!selectedThreadId,
+  });
+
+  const handleThreadCreated = (threadId: string) => {
+    setSelectedThreadId(threadId);
+  };
+
+  const handleCommentAction = () => {
+    refetchComments();
+  };
+
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "calc(var(--spacing) * 72)",
+          "--header-height": "calc(var(--spacing) * 12)",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar variant="inset" />
+      <SidebarInset>
+        <SiteHeader />
+        <div className="flex flex-1 flex-col">
+          <div className="@container/main flex flex-1 flex-col gap-6 p-6">
+            {/* Page Header */}
+            <div className="flex items-center justify-between">
+              <div>
+                <h1 className="text-3xl font-bold tracking-tight flex items-center gap-2">
+                  <MessageSquare className="h-8 w-8" />
+                  Comments API Demo
+                </h1>
+                <p className="text-muted-foreground">
+                  Comprehensive example of the chat/comments API functionality
+                </p>
+              </div>
+              {selectedThreadId && (
+                <Badge variant="outline" className="text-sm">
+                  Thread: {selectedThreadId.slice(0, 8)}...
+                </Badge>
+              )}
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              {/* Left Column - Thread Creation */}
+              <div className="space-y-6">
+                <ThreadForm onThreadCreated={handleThreadCreated} />
+                
+                {selectedThreadId && (
+                  <>
+                    <CommentForm 
+                      threadId={selectedThreadId} 
+                      onCommentPosted={handleCommentAction} 
+                    />
+                    
+                    <Card>
+                      <CardHeader>
+                        <CardTitle className="flex items-center gap-2">
+                          <Users className="h-5 w-5" />
+                          Subscription Controls
+                        </CardTitle>
+                        <CardDescription>
+                          Manage your subscription to this thread
+                        </CardDescription>
+                      </CardHeader>
+                      <CardContent>
+                        <SubscriptionControls 
+                          userId={MOCK_USER.id} 
+                          threadId={selectedThreadId} 
+                        />
+                      </CardContent>
+                    </Card>
+                  </>
+                )}
+              </div>
+
+              {/* Right Column - Comments Display */}
+              <div className="space-y-6">
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Comments</CardTitle>
+                    <CardDescription>
+                      {selectedThreadId 
+                        ? `Comments for thread ${selectedThreadId.slice(0, 8)}...`
+                        : 'Create a thread to see comments'
+                      }
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    {!selectedThreadId ? (
+                      <div className="text-center py-8 text-muted-foreground">
+                        <MessageSquare className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                        <p>Create a thread to start the conversation</p>
+                      </div>
+                    ) : commentsLoading ? (
+                      <div className="space-y-4">
+                        {[1, 2, 3].map((i) => (
+                          <div key={i} className="space-y-2">
+                            <Skeleton className="h-4 w-32" />
+                            <Skeleton className="h-16 w-full" />
+                          </div>
+                        ))}
+                      </div>
+                    ) : commentsData?.data?.length === 0 ? (
+                      <div className="text-center py-8 text-muted-foreground">
+                        <MessageSquare className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                        <p>No comments yet. Be the first to comment!</p>
+                      </div>
+                    ) : (
+                      <div className="space-y-4 max-h-96 overflow-y-auto">
+                        {commentsData?.data?.map((comment: any) => (
+                          <CommentItem
+                            key={comment.id}
+                            comment={comment}
+                            onCommentUpdated={handleCommentAction}
+                            onCommentDeleted={handleCommentAction}
+                          />
+                        ))}
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+
+                {/* API Status Card */}
+                <Card>
+                  <CardHeader>
+                    <CardTitle>API Status</CardTitle>
+                  </CardHeader>
+                  <CardContent className="space-y-2">
+                    <div className="flex justify-between items-center">
+                      <span className="text-sm">Thread Selected:</span>
+                      <Badge variant={selectedThreadId ? "default" : "secondary"}>
+                        {selectedThreadId ? "Yes" : "No"}
+                      </Badge>
+                    </div>
+                    <div className="flex justify-between items-center">
+                      <span className="text-sm">Comments Loading:</span>
+                      <Badge variant={commentsLoading ? "default" : "secondary"}>
+                        {commentsLoading ? "Yes" : "No"}
+                      </Badge>
+                    </div>
+                    <div className="flex justify-between items-center">
+                      <span className="text-sm">Comments Count:</span>
+                      <Badge variant="outline">
+                        {commentsData?.data?.length || 0}
+                      </Badge>
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+            </div>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

package/templates/latest/app/routes/home.tsx

@@ -4,7 +4,7 @@ import { DataTable } from "~/components/data-table";
 import { SectionCards } from "~/components/section-cards";
 import { SiteHeader } from "~/components/site-header";
 import { SidebarInset, SidebarProvider } from "~/components/ui/sidebar";
-import data from "~/dashboard/data.json";
+import data from "~/data/data.json";
 
 export default function Page() {
   return (