Changeset 7fbb91c for chapterx-frontend/src/pages

Timestamp:

03/24/26 23:03:39 (3 months ago)

Author:

kikisrbinoska <srbinoskakristina07@…>

Branches:

main

Children:

a7550ca

Parents:

73b69b2

Message:

Added functional collaboration between users

Location:

chapterx-frontend/src/pages

Files:

• story/StoryDetailPage.tsx (modified) (3 diffs)
• writer/WriterDashboard.tsx (modified) (3 diffs)

chapterx-frontend/src/pages/story/StoryDetailPage.tsx

@@ -102 +102 @@
 
   const isOwner = currentUser?.user_id === story.user_id
+  const isCollaborator = currentUser ? storyCollabs.some(c => c.user_id === currentUser.user_id) : false
 
   return (
@@ -162 +163 @@
               </Button>
             )}
-            {isOwner && (
+            {(isOwner || isCollaborator) && (
               <Button variant="ghost" size="sm" onClick={() => navigate(`/writer/edit-story/${story.story_id}`)}>
                 Edit Story
@@ -173 +174 @@
             <div className="flex items-center justify-between mb-4">
               <h2 className="font-serif text-xl font-bold text-white">Chapters</h2>
-              {isOwner && (
+              {(isOwner || isCollaborator) && (
                 <Button size="sm" onClick={() => navigate(`/writer/create-chapter/${story.story_id}`)}>
                   <Plus size={14} />

chapterx-frontend/src/pages/writer/WriterDashboard.tsx

@@ -22 +22 @@
   const navigate = useNavigate()
   const { currentUser } = useAuthStore()
-  const { stories } = useStoryStore()
+  const { stories, collaborations } = useStoryStore()
   const { notifications } = useNotificationStore()
 
   if (!currentUser) return null
 
-  const myStories = stories.filter(s => s.user_id === currentUser.user_id)
+  const ownedStories = stories.filter(s => s.user_id === currentUser.user_id)
+  const collabStoryIds = new Set(collaborations.filter(c => c.user_id === currentUser.user_id).map(c => c.story_id))
+  const collabStories = stories.filter(s => collabStoryIds.has(s.story_id))
+  const myStories = ownedStories
+  const allDashboardStories = [...ownedStories, ...collabStories]
   const published = myStories.filter(s => s.status === 'published')
   const drafts = myStories.filter(s => s.status === 'draft')
@@ -76 +80 @@
             <h2 className="font-serif text-xl font-bold text-white">My Stories</h2>
           </div>
-          {myStories.length === 0 ? (
+          {allDashboardStories.length === 0 ? (
             <div className="bg-slate-800 border border-slate-700 rounded-2xl p-12 text-center">
               <BookOpen size={40} className="mx-auto mb-4 text-slate-600" />
@@ -88 +92 @@
           ) : (
             <div className="space-y-3">
-              {myStories.map(story => (
-                <div key={story.story_id} className="flex items-center gap-4 p-4 bg-slate-800 border border-slate-700 rounded-xl hover:border-indigo-500/40 transition-colors">
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2 mb-1">
-                      <h3 className="text-white font-medium text-sm truncate">{story.title}</h3>
-                      <StatusBadge status={story.status} />
+              {allDashboardStories.map(story => {
+                const isCollab = collabStoryIds.has(story.story_id)
+                return (
+                  <div key={story.story_id} className="flex items-center gap-4 p-4 bg-slate-800 border border-slate-700 rounded-xl hover:border-indigo-500/40 transition-colors">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-1">
+                        <h3 className="text-white font-medium text-sm truncate">{story.title}</h3>
+                        <StatusBadge status={story.status} />
+                        {isCollab && (
+                          <span className="px-2 py-0.5 text-xs font-medium rounded-full bg-violet-500/20 text-violet-400 border border-violet-500/30">
+                            Collaborator
+                          </span>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-3 text-slate-500 text-xs">
+                        {isCollab && <span className="text-slate-500">by {story.author_username}</span>}
+                        <span className="flex items-center gap-1"><Eye size={11} /> {story.total_views.toLocaleString()}</span>
+                        <span className="flex items-center gap-1"><Heart size={11} /> {story.total_likes}</span>
+                        <span className="flex items-center gap-1"><MessageCircle size={11} /> {story.total_comments}</span>
+                        <span>{story.total_chapters} chapters</span>
+                      </div>
                     </div>
-                    <div className="flex items-center gap-3 text-slate-500 text-xs">
-                      <span className="flex items-center gap-1"><Eye size={11} /> {story.total_views.toLocaleString()}</span>
-                      <span className="flex items-center gap-1"><Heart size={11} /> {story.total_likes}</span>
-                      <span className="flex items-center gap-1"><MessageCircle size={11} /> {story.total_comments}</span>
-                      <span>{story.total_chapters} chapters</span>
+                    <div className="flex gap-2 flex-shrink-0">
+                      <Button size="sm" variant="ghost" onClick={() => navigate(`/story/${story.story_id}`)}>View</Button>
+                      <Button size="sm" variant="secondary" onClick={() => navigate(`/writer/edit-story/${story.story_id}`)}>Edit</Button>
                     </div>
                   </div>
-                  <div className="flex gap-2 flex-shrink-0">
-                    <Button size="sm" variant="ghost" onClick={() => navigate(`/story/${story.story_id}`)}>View</Button>
-                    <Button size="sm" variant="secondary" onClick={() => navigate(`/writer/edit-story/${story.story_id}`)}>Edit</Button>
-                  </div>
-                </div>
-              ))}
+                )
+              })}
             </div>
           )}