feat: enhance hackathon discussions with registration checks

- Updated HackathonDiscussions component to accept isRegistered prop.
- Modified rendering logic in CommentsEmptyState and CommentInput to conditionally display content based on registration status.
- Added registration prompts for unregistered users in discussions and comments sections.
- Ensured consistent handling of registration state across discussion components.

Author: 0xdevcollins

app/(landing)/hackathons/[slug]/page.tsx

@@ -244,7 +244,10 @@ export default function HackathonPage() {
         )}
 
         {activeTab === 'discussions' && (
-          <HackathonDiscussions hackathonId={hackathonId} />
+          <HackathonDiscussions
+            hackathonId={hackathonId}
+            isRegistered={isRegistered}
+          />
         )}
 
         {activeTab === 'team-formation' && (

components/hackathons/discussion/comment.tsx

@@ -11,10 +11,12 @@ import { Loader2 } from 'lucide-react';
 interface HackathonDiscussionsProps {
   hackathonId: string;
   organizationId?: string;
+  isRegistered?: boolean;
 }
 export function HackathonDiscussions({
   hackathonId,
   organizationId,
+  isRegistered = false,
 }: HackathonDiscussionsProps) {
   const [sortBy, setSortBy] = useState<
     'createdAt' | 'updatedAt' | 'totalReactions'
@@ -132,7 +134,12 @@ export function HackathonDiscussions({
     );
 
   if (discussions.length === 0)
-    return <CommentsEmptyState onAddComment={handleAddDiscussion} />;
+    return (
+      <CommentsEmptyState
+        onAddComment={handleAddDiscussion}
+        isRegistered={isRegistered}
+      />
+    );
 
   return (
     <div className='w-full'>
@@ -156,13 +163,24 @@ export function HackathonDiscussions({
             onUpdate={handleUpdateDiscussion}
             onDelete={handleDeleteDiscussion}
             onReport={handleReportDiscussion}
+            isRegistered={isRegistered}
           />
         ))}
       </div>
 
-      <div className='mt-10 px-4 md:px-0'>
-        <CommentInput onSubmit={handleAddDiscussion} />
-      </div>
+      {isRegistered && (
+        <div className='mt-10 px-4 md:px-0'>
+          <CommentInput onSubmit={handleAddDiscussion} />
+        </div>
+      )}
+
+      {!isRegistered && discussions.length > 0 && (
+        <div className='mt-8 rounded-lg border border-gray-800 bg-gray-900/50 px-4 py-6 text-center md:px-6'>
+          <p className='text-sm text-gray-400'>
+            Register for this hackathon to join the discussion
+          </p>
+        </div>
+      )}
 
       {error && discussions.length > 0 && (
         <div className='mx-4 mt-4 rounded-md border border-red-500/50 bg-red-500/10 p-3 md:mx-0'>

components/project-details/comment-section/comment-input.tsx

@@ -32,7 +32,7 @@ export function CommentInput({
   return (
     <form
       onSubmit={handleSubmit}
-      className='flex items-center gap-4 rounded-lg border border-neutral-800 bg-black px-6 py-5'
+      className='flex items-center gap-4 rounded-lg border border-neutral-800 bg-black px-6 py-2'
     >
       <div className='shrink-0'>
         <Smile className='size-10 text-neutral-500' />

components/project-details/comment-section/comment-item.tsx

@@ -23,6 +23,7 @@ interface CommentItemProps {
   onDelete?: (commentId: string) => void;
   onReport?: (commentId: string, reason: string, description?: string) => void;
   currentUserId?: string;
+  isRegistered?: boolean;
 }
 
 export function CommentItem({
@@ -33,6 +34,7 @@ export function CommentItem({
   onDelete,
   onReport,
   currentUserId,
+  isRegistered = false,
 }: CommentItemProps) {
   const [isLiked, setIsLiked] = useState(false);
   const [showReplies, setShowReplies] = useState(false);
@@ -158,14 +160,16 @@ export function CommentItem({
           <span className='text-xs text-zinc-400 md:text-sm'>
             {new Date(comment.createdAt).toLocaleDateString()}
           </span>
-          <Button
-            variant='ghost'
-            size='sm'
-            onClick={() => setShowReplyInput(!showReplyInput)}
-            className='h-auto p-0 text-xs text-zinc-400 hover:bg-transparent hover:text-white md:text-sm'
-          >
-            Reply
-          </Button>
+          {isRegistered && (
+            <Button
+              variant='ghost'
+              size='sm'
+              onClick={() => setShowReplyInput(!showReplyInput)}
+              className='h-auto p-0 text-xs text-zinc-400 hover:bg-transparent hover:text-white md:text-sm'
+            >
+              Reply
+            </Button>
+          )}
           {canEdit && (
             <Button
               variant='ghost'
@@ -304,6 +308,7 @@ export function CommentItem({
                     onDelete={onDelete}
                     onReport={onReport}
                     currentUserId={currentUserId}
+                    isRegistered={isRegistered}
                   />
                 ))}
               </div>

components/project-details/comment-section/comments-empty-state.tsx

@@ -5,9 +5,13 @@ import LottieAnimation from '@/components/LottieAnimation';
 
 interface CommentsEmptyStateProps {
   onAddComment: (content: string) => void;
+  isRegistered?: boolean;
 }
 
-export function CommentsEmptyState({ onAddComment }: CommentsEmptyStateProps) {
+export function CommentsEmptyState({
+  onAddComment,
+  isRegistered = false,
+}: CommentsEmptyStateProps) {
   return (
     <div className='flex w-full flex-col'>
       <div className='flex flex-col items-center justify-center px-4 py-16 md:py-20'>
@@ -18,7 +22,15 @@ export function CommentsEmptyState({ onAddComment }: CommentsEmptyStateProps) {
           Be the first to Leave a Comment
         </h3>
       </div>
-      <CommentInput onSubmit={onAddComment} />
+      {isRegistered ? (
+        <CommentInput onSubmit={onAddComment} />
+      ) : (
+        <div className='rounded-lg border border-gray-800 bg-gray-900/50 px-4 py-6 text-center md:px-6'>
+          <p className='text-sm text-gray-400'>
+            Register for this hackathon to start the discussion
+          </p>
+        </div>
+      )}
     </div>
   );
 }