Changeset a8f4a2d

Timestamp:

06/24/26 16:51:52 (11 days ago)

Author:

kikisrbinoska <srbinoskakristina07@…>

Branches:

main

Children:

3ae4bab

Parents:

99c1e45

Message:

Fixed views count

Location:

chapterx-frontend/src

Files:

• components/admin/PlatformStats.tsx (modified) (4 diffs)
• components/writer/StoryAnalytics.tsx (modified) (4 diffs)
• pages/profile/ProfilePage.tsx (modified) (3 diffs)
• pages/story/ChapterReadPage.tsx (modified) (5 diffs)
• pages/story/StoryDetailPage.tsx (modified) (1 diff)
• pages/writer/WriterDashboard.tsx (modified) (4 diffs)

chapterx-frontend/src/components/admin/PlatformStats.tsx

@@ -1 +1 @@
 import React, { useEffect } from 'react'
-import { Users, BookOpen, Heart, MessageCircle } from 'lucide-react'
+import { Users, BookOpen, Heart, MessageCircle, Eye } from 'lucide-react'
 import { useAuthStore } from '../../store/authStore'
 import { useStoryStore } from '../../store/storyStore'
@@ -12 +12 @@
   const totalLikes = stories.reduce((acc, s) => acc + s.total_likes, 0)
   const totalComments = stories.reduce((acc, s) => acc + s.total_comments, 0)
+  const totalViews = stories.reduce((acc, s) => acc + s.total_views, 0)
   const published = stories.filter(s => s.status === 'published').length
 
@@ -17 +18 @@
     { icon: <Users size={24} className="text-blue-300" />, label: 'Total Users', value: allUsers.length, color: 'bg-blue-500/20', change: `${allUsers.filter(u => u.role === 'writer').length} writers` },
     { icon: <BookOpen size={24} className="text-violet-300" />, label: 'Total Stories', value: stories.length, color: 'bg-violet-500/20', change: `${published} published` },
+    { icon: <Eye size={24} className="text-cyan-300" />, label: 'Total Views', value: totalViews.toLocaleString(), color: 'bg-cyan-500/20', change: 'Chapter reads' },
     { icon: <Heart size={24} className="text-rose-300" />, label: 'Total Likes', value: totalLikes.toLocaleString(), color: 'bg-rose-500/20', change: 'Across all stories' },
     { icon: <MessageCircle size={24} className="text-emerald-300" />, label: 'Total Comments', value: totalComments.toLocaleString(), color: 'bg-emerald-500/20', change: 'Platform-wide' },
@@ -22 +24 @@
 
   return (
-    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
       {stats.map(stat => (
         <div key={stat.label} className="bg-slate-800 border border-slate-700 rounded-2xl p-6">

chapterx-frontend/src/components/writer/StoryAnalytics.tsx

@@ -9 +9 @@
   ResponsiveContainer,
 } from 'recharts'
-import { Heart, MessageCircle, BookOpen } from 'lucide-react'
+import { Heart, MessageCircle, BookOpen, Eye } from 'lucide-react'
 import { Story } from '../../types'
 
@@ -50 +50 @@
   const totalComments = stories.reduce((a, s) => a + s.total_comments, 0)
   const totalChapters = stories.reduce((a, s) => a + s.total_chapters, 0)
+  const totalViews = stories.reduce((a, s) => a + s.total_views, 0)
 
-  // Likes per story (sorted by created_at)
-  const likesData = [...published]
-    .sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
-    .map(s => ({
-      date: new Date(s.created_at).toLocaleDateString('en-US', { month: 'short', year: '2-digit' }),
-      likes: s.total_likes,
-      story: s.title,
-    }))
+  const sortedPublished = [...published].sort(
+    (a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
+  )
+
+  const likesData = sortedPublished.map(s => ({
+    date: new Date(s.created_at).toLocaleDateString('en-US', { month: 'short', year: '2-digit' }),
+    likes: s.total_likes,
+    story: s.title,
+  }))
+
+  const viewsData = sortedPublished.map(s => ({
+    date: new Date(s.created_at).toLocaleDateString('en-US', { month: 'short', year: '2-digit' }),
+    views: s.total_views,
+    story: s.title,
+  }))
 
   if (published.length === 0) {
@@ -71 +79 @@
     <div className="space-y-6">
       {/* Stat cards */}
-      <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard icon={<Eye size={18} className="text-cyan-300" />} label="Total Views" value={totalViews} color="bg-cyan-500/20" />
         <StatCard icon={<Heart size={18} className="text-rose-300" />} label="Total Likes" value={totalLikes} color="bg-rose-500/20" />
         <StatCard icon={<MessageCircle size={18} className="text-violet-300" />} label="Total Comments" value={totalComments} color="bg-violet-500/20" />
         <StatCard icon={<BookOpen size={18} className="text-emerald-300" />} label="Total Chapters" value={totalChapters} color="bg-emerald-500/20" />
+      </div>
+
+      {/* Views chart */}
+      <div className="bg-slate-800 border border-slate-700 rounded-2xl p-6">
+        <div className="flex items-center gap-2 mb-4">
+          <Eye size={16} className="text-cyan-400" />
+          <h3 className="text-white font-semibold">Views per Story</h3>
+        </div>
+        {viewsData.length > 0 ? (
+          <ResponsiveContainer width="100%" height={200}>
+            <BarChart data={viewsData}>
+              <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
+              <XAxis dataKey="date" tick={{ fill: '#64748b', fontSize: 11 }} tickLine={false} axisLine={false} />
+              <YAxis tick={{ fill: '#64748b', fontSize: 11 }} tickLine={false} axisLine={false} />
+              <Tooltip content={<CustomTooltip />} />
+              <Bar dataKey="views" fill="#06b6d4" radius={[4, 4, 0, 0]} name="Views" />
+            </BarChart>
+          </ResponsiveContainer>
+        ) : (
+          <p className="text-slate-500 text-sm text-center py-8">No views yet</p>
+        )}
       </div>
 
@@ -109 +139 @@
                   <span className="text-slate-300 truncate max-w-xs">{s.title}</span>
                   <div className="flex items-center gap-4 text-slate-400 flex-shrink-0">
+                    <span className="flex items-center gap-1"><Eye size={12} /> {s.total_views.toLocaleString()}</span>
                     <span className="flex items-center gap-1"><Heart size={12} /> {s.total_likes}</span>
                     <span className="flex items-center gap-1"><MessageCircle size={12} /> {s.total_comments}</span>

chapterx-frontend/src/pages/profile/ProfilePage.tsx

@@ -1 +1 @@
 import React, { useState, useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
-import { BookOpen, Heart, Calendar, MessageCircle } from 'lucide-react'
+import { BookOpen, Heart, Calendar, MessageCircle, Eye } from 'lucide-react'
 import { useAuthStore } from '../../store/authStore'
 import { useStoryStore } from '../../store/storyStore'
@@ -76 +76 @@
   const totalLikes = userStories.reduce((acc, s) => acc + s.total_likes, 0)
   const totalComments = userStories.reduce((acc, s) => acc + s.total_comments, 0)
+  const totalViews = userStories.reduce((acc, s) => acc + s.total_views, 0)
   const allGenres = [...new Set(userStories.flatMap(s => s.genres))]
 
@@ -120 +121 @@
 
       {/* Stats */}
-      <div className="grid grid-cols-3 gap-4 mb-8">
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
         {[
           { icon: <BookOpen size={16} className="text-indigo-400" />, value: userStories.length, label: 'Stories' },
           { icon: <Heart size={16} className="text-rose-400" />, value: totalLikes.toLocaleString(), label: 'Likes' },
           { icon: <MessageCircle size={16} className="text-amber-400" />, value: totalComments, label: 'Comments' },
+          { icon: <Eye size={16} className="text-cyan-400" />, value: totalViews.toLocaleString(), label: 'Views' },
         ].map(s => (
           <div key={s.label} className="bg-slate-800 border border-slate-700 rounded-xl p-4 text-center">

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

@@ -1 +1 @@
 import React, { useEffect, useState } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
-import { ArrowLeft, ArrowRight, BookOpen, Eye, ChevronLeft, ChevronRight } from 'lucide-react'
+import { ArrowLeft, ChevronLeft, ChevronRight } from 'lucide-react'
+import axios from 'axios'
 import { useStoryStore } from '../../store/storyStore'
+import { Chapter } from '../../types'
 import { Button } from '../../components/ui/Button'
+
+const API = 'https://localhost:7125/api'
+
+function mapChapter(c: any): Chapter {
+  return {
+    chapter_id: c.id ?? c.chapter_id,
+    story_id: c.storyId ?? c.story_id,
+    title: c.title ?? c.name ?? '',
+    content: c.content ?? '',
+    chapter_number: c.number ?? c.chapter_number ?? 0,
+    word_count: c.wordCount ?? c.word_count ?? 0,
+    view_count: c.viewCount ?? c.view_count ?? 0,
+    is_published: true,
+    created_at: c.createdAt ?? c.created_at ?? '',
+    updated_at: c.updatedAt ?? c.updated_at ?? '',
+  }
+}
 
 export const ChapterReadPage: React.FC = () => {
@@ -11 +30 @@
   const [scrollProgress, setScrollProgress] = useState(0)
   const [viewed, setViewed] = useState(false)
+  const [chapter, setChapter] = useState<Chapter | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    setLoading(true)
+    setViewed(false)
+    setScrollProgress(0)
+    axios.get(`${API}/chapters/${chapterId}`)
+      .then(res => {
+        const data = res.data?.chapter ?? res.data
+        setChapter(mapChapter(data))
+      })
+      .catch(() => {
+        const fallback = chapters.find(c => c.chapter_id === Number(chapterId))
+        if (fallback) setChapter(fallback)
+      })
+      .finally(() => setLoading(false))
+  }, [chapterId])
 
   const story = stories.find(s => s.story_id === Number(storyId))
-  const chapter = chapters.find(c => c.chapter_id === Number(chapterId))
   const storyChapters = chapters
     .filter(c => c.story_id === Number(storyId) && c.is_published)
@@ -37 +73 @@
     return () => window.removeEventListener('scroll', handler)
   }, [chapter, viewed, incrementViewCount])
+
+  if (loading) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 py-20 text-center">
+        <p className="text-slate-400">Loading chapter...</p>
+      </div>
+    )
+  }
 
   if (!story || !chapter) {
@@ -73 +117 @@
           </div>
 
-          <div className="flex items-center gap-1 text-slate-400 text-xs">
-            <Eye size={12} />
-            {scrollProgress.toFixed(0)}%
-          </div>
+          <div />
         </div>
       </div>
@@ -90 +131 @@
             {chapter.title}
           </h1>
-          <div className="flex items-center justify-center gap-4 text-slate-500 text-sm">
-            <span className="flex items-center gap-1">
-              <BookOpen size={13} />
-              {chapter.word_count.toLocaleString()} words
-            </span>
-            <span className="flex items-center gap-1">
-              <Eye size={13} />
-              {chapter.view_count.toLocaleString()} reads
-            </span>
-          </div>
           <div className="mt-4 w-16 h-px bg-gradient-to-r from-transparent via-indigo-500 to-transparent mx-auto" />
         </div>

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

@@ -217 +217 @@
                 <span className="text-slate-400">Comments</span>
                 <span className="text-white">{liveComments ?? story.total_comments}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-slate-400">Views</span>
+                <span className="text-white">{story.total_views.toLocaleString()}</span>
               </div>
               <div className="flex justify-between">

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

@@ -1 +1 @@
 import React, { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Plus, BookOpen, Heart, MessageCircle, TrendingUp, Bell } from 'lucide-react'
+import { Plus, BookOpen, Heart, MessageCircle, TrendingUp, Bell, Eye } from 'lucide-react'
 import { useAuthStore } from '../../store/authStore'
 import { useStoryStore } from '../../store/storyStore'
@@ -37 +37 @@
   const drafts = myStories.filter(s => s.status === 'draft')
   const totalLikes = myStories.reduce((acc, s) => acc + s.total_likes, 0)
+  const totalViews = myStories.reduce((acc, s) => acc + s.total_views, 0)
 
   const recentNotifs = notifications.slice(0, 5)
@@ -57 +58 @@
 
       {/* Stats */}
-      <div className="grid grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
         {[
           { icon: <BookOpen size={20} className="text-indigo-300" />, label: 'Total Stories', value: myStories.length, sub: `${published.length} published`, color: 'bg-indigo-500/20' },
           { icon: <Heart size={20} className="text-rose-300" />, label: 'Total Likes', value: totalLikes.toLocaleString(), sub: 'Across all stories', color: 'bg-rose-500/20' },
+          { icon: <Eye size={20} className="text-cyan-300" />, label: 'Total Views', value: totalViews.toLocaleString(), sub: 'Chapter reads', color: 'bg-cyan-500/20' },
           { icon: <TrendingUp size={20} className="text-emerald-300" />, label: 'Drafts', value: drafts.length, sub: 'In progress', color: 'bg-emerald-500/20' },
         ].map(s => (
@@ -110 +112 @@
                         <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 className="flex items-center gap-1"><Eye size={11} /> {story.total_views.toLocaleString()}</span>
                         <span>{story.total_chapters} chapters</span>
                       </div>