Compare commits

..
Author SHA1 Message Date
Marko 1b3b709ba5 feat: implement group EPUB upload and section splitting (US #29)
Backend:
- Create hermes Django app with models: ReadingGroup, GroupBook, Section, ReadingSchedule, MemberProgress
- EPUB section splitting service with automatic detection and reading time estimation
- Section recommendation engine for 4-week meeting schedule
- REST API endpoints for groups, books, sections, schedule, and member progress
- Manual section adjustment (merge/split) support

Frontend:
- GroupsPage: list/create reading groups
- GroupDetailPage: manage members, upload EPUB to group, view group books
- GroupBookPage: section breakdown with merge/split controls, reading schedule, member progress
- API client and TypeScript types for all group operations
- i18n keys for English and Spanish

Shared:
- Group-related types and API endpoint constants in packages/shared
2026-06-20 19:30:11 +00:00
26 changed files with 2229 additions and 1308 deletions
+34 -11
View File
@@ -1,23 +1,46 @@
from django.contrib import admin
from apps.groups.models import GroupMembership, MemberProgress, ReadingGroup
from apps.groups.models import (
GroupBook,
MemberProgress,
ReadingGroup,
ReadingGroupMembership,
ReadingSchedule,
Section,
)
@admin.register(ReadingGroup)
class ReadingGroupAdmin(admin.ModelAdmin):
list_display = ["name", "ebook", "created_by", "created_at"]
search_fields = ["name", "ebook__title", "created_by__email"]
list_display = ["name", "admin", "created_at"]
search_fields = ["name", "admin__email"]
@admin.register(GroupMembership)
class GroupMembershipAdmin(admin.ModelAdmin):
list_display = ["group", "user", "role", "joined_at"]
list_filter = ["role"]
search_fields = ["user__email", "group__name"]
@admin.register(ReadingGroupMembership)
class ReadingGroupMembershipAdmin(admin.ModelAdmin):
list_display = ["user", "group", "role", "joined_at"]
list_filter = ["role", "group"]
@admin.register(GroupBook)
class GroupBookAdmin(admin.ModelAdmin):
list_display = ["title", "group", "status", "uploaded_by", "created_at"]
list_filter = ["status"]
search_fields = ["title", "group__name"]
@admin.register(Section)
class SectionAdmin(admin.ModelAdmin):
list_display = ["title", "group_book", "order", "estimated_reading_minutes"]
ordering = ["group_book", "order"]
@admin.register(ReadingSchedule)
class ReadingScheduleAdmin(admin.ModelAdmin):
list_display = ["group_book", "meeting_number", "week_date"]
ordering = ["group_book", "meeting_number"]
@admin.register(MemberProgress)
class MemberProgressAdmin(admin.ModelAdmin):
list_display = ["user", "group", "current_section", "percentage", "time_spent_seconds", "is_public", "updated_at"]
list_filter = ["is_public"]
search_fields = ["user__email", "group__name"]
list_display = ["user", "group_book", "current_section", "updated_at"]
+100 -21
View File
@@ -23,8 +23,7 @@ class Migration(migrations.Migration):
('description', models.TextField(blank=True, default='')),
('created_at', models.DateTimeField(auto_now_add=True)),
('updated_at', models.DateTimeField(auto_now=True)),
('created_by', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='created_groups', to=settings.AUTH_USER_MODEL)),
('ebook', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='reading_groups', to='books.ebook')),
('admin', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='administered_groups', to=settings.AUTH_USER_MODEL)),
],
options={
'verbose_name': 'Reading Group',
@@ -34,42 +33,122 @@ class Migration(migrations.Migration):
},
),
migrations.CreateModel(
name='GroupMembership',
name='GroupBook',
fields=[
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('role', models.CharField(choices=[('member', 'Member'), ('admin', 'Admin')], default='member', max_length=16)),
('joined_at', models.DateTimeField(auto_now_add=True)),
('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='group_memberships', to=settings.AUTH_USER_MODEL)),
('group', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='memberships', to='groups.readinggroup')),
('title', models.CharField(db_index=True, max_length=512)),
('status', models.CharField(choices=[('active', 'Active'), ('replaced', 'Replaced')], db_index=True, default='active', max_length=16)),
('created_at', models.DateTimeField(auto_now_add=True)),
('updated_at', models.DateTimeField(auto_now=True)),
('ebook', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='group_books', to='books.ebook')),
('uploaded_by', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='uploaded_group_books', to=settings.AUTH_USER_MODEL)),
('group', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='group_books', to='groups.readinggroup')),
],
options={
'verbose_name': 'Group Membership',
'verbose_name_plural': 'Group Memberships',
'verbose_name': 'Group Book',
'verbose_name_plural': 'Group Books',
'db_table': 'groups_group_book',
'ordering': ['-created_at'],
},
),
migrations.CreateModel(
name='ReadingGroupMembership',
fields=[
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('role', models.CharField(choices=[('admin', 'Admin'), ('member', 'Member')], default='member', max_length=16)),
('joined_at', models.DateTimeField(auto_now_add=True)),
('group', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='memberships', to='groups.readinggroup')),
('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
],
options={
'verbose_name': 'Reading Group Membership',
'verbose_name_plural': 'Reading Group Memberships',
'db_table': 'groups_membership',
'ordering': ['joined_at'],
'unique_together': {('group', 'user')},
},
),
migrations.AddField(
model_name='readinggroup',
name='members',
field=models.ManyToManyField(related_name='reading_groups', through='groups.ReadingGroupMembership', to=settings.AUTH_USER_MODEL),
),
migrations.CreateModel(
name='ReadingSchedule',
fields=[
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('meeting_number', models.PositiveIntegerField()),
('week_date', models.DateField()),
('section_ids', models.JSONField(default=list, help_text='Ordered list of Section IDs for this meeting')),
('created_at', models.DateTimeField(auto_now_add=True)),
('group_book', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='schedules', to='groups.groupbook')),
],
options={
'verbose_name': 'Reading Schedule',
'verbose_name_plural': 'Reading Schedules',
'db_table': 'groups_reading_schedule',
'ordering': ['meeting_number'],
},
),
migrations.CreateModel(
name='Section',
fields=[
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('title', models.CharField(max_length=512)),
('order', models.PositiveIntegerField(db_index=True)),
('start_chapter_index', models.PositiveIntegerField(default=0)),
('end_chapter_index', models.PositiveIntegerField(default=0)),
('estimated_reading_minutes', models.PositiveIntegerField(default=0)),
('created_at', models.DateTimeField(auto_now_add=True)),
('group_book', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='sections', to='groups.groupbook')),
],
options={
'verbose_name': 'Section',
'verbose_name_plural': 'Sections',
'db_table': 'groups_section',
'ordering': ['order'],
},
),
migrations.CreateModel(
name='MemberProgress',
fields=[
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('current_section', models.PositiveIntegerField(default=0)),
('percentage', models.FloatField(default=0.0)),
('time_spent_seconds', models.PositiveIntegerField(default=0)),
('last_position', models.JSONField(blank=True, default=dict)),
('is_public', models.BooleanField(default=True)),
('completed_sections', models.JSONField(default=list, help_text='Ordered list of completed Section IDs')),
('updated_at', models.DateTimeField(auto_now=True)),
('membership', models.OneToOneField(on_delete=django.db.models.deletion.CASCADE, related_name='progress', to='groups.groupmembership')),
('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='member_progress', to=settings.AUTH_USER_MODEL)),
('group', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='member_progress', to='groups.readinggroup')),
('group_book', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='member_progress', to='groups.groupbook')),
('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='group_progress', to=settings.AUTH_USER_MODEL)),
('current_section', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='current_readers', to='groups.section')),
],
options={
'verbose_name': 'Member Progress',
'verbose_name_plural': 'Member Progress',
'db_table': 'groups_member_progress',
'indexes': [models.Index(fields=['group', '-percentage'], name='groups_memb_group_i_42e333_idx'), models.Index(fields=['group', 'user'], name='groups_memb_group_i_f50793_idx')],
'unique_together': {('group', 'user')},
},
),
migrations.AddIndex(
model_name='groupbook',
index=models.Index(fields=['group', 'status'], name='groups_grou_group_i_afdbf7_idx'),
),
migrations.AlterUniqueTogether(
name='readinggroupmembership',
unique_together={('user', 'group')},
),
migrations.AddIndex(
model_name='readingschedule',
index=models.Index(fields=['group_book', 'meeting_number'], name='groups_read_group_b_2fc416_idx'),
),
migrations.AlterUniqueTogether(
name='readingschedule',
unique_together={('group_book', 'meeting_number')},
),
migrations.AddIndex(
model_name='section',
index=models.Index(fields=['group_book', 'order'], name='groups_sect_group_b_e2810a_idx'),
),
migrations.AlterUniqueTogether(
name='section',
unique_together={('group_book', 'order')},
),
migrations.AlterUniqueTogether(
name='memberprogress',
unique_together={('user', 'group_book')},
),
]
+113 -90
View File
@@ -1,22 +1,24 @@
from django.conf import settings
from django.db import models
from apps.books.models import EBook
class ReadingGroup(models.Model):
"""A group of users reading the same book together."""
"""A reading group with an admin and members."""
name = models.CharField(max_length=256, db_index=True)
ebook = models.ForeignKey(
"books.EBook",
on_delete=models.CASCADE,
related_name="reading_groups",
)
created_by = models.ForeignKey(
description = models.TextField(blank=True, default="")
admin = models.ForeignKey(
settings.AUTH_USER_MODEL,
on_delete=models.CASCADE,
related_name="created_groups",
related_name="administered_groups",
)
members = models.ManyToManyField(
settings.AUTH_USER_MODEL,
through="ReadingGroupMembership",
related_name="reading_groups",
)
description = models.TextField(blank=True, default="")
created_at = models.DateTimeField(auto_now_add=True)
updated_at = models.DateTimeField(auto_now=True)
@@ -29,110 +31,131 @@ class ReadingGroup(models.Model):
def __str__(self) -> str:
return self.name
@property
def total_sections(self) -> int:
return self.ebook.chapters.count()
class GroupMembership(models.Model):
class ReadingGroupMembership(models.Model):
class Role(models.TextChoices):
MEMBER = "member", "Member"
ADMIN = "admin", "Admin"
MEMBER = "member", "Member"
group = models.ForeignKey(
ReadingGroup,
on_delete=models.CASCADE,
related_name="memberships",
)
user = models.ForeignKey(
settings.AUTH_USER_MODEL,
on_delete=models.CASCADE,
related_name="group_memberships",
)
role = models.CharField(
max_length=16,
choices=Role.choices,
default=Role.MEMBER,
)
user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
group = models.ForeignKey(ReadingGroup, on_delete=models.CASCADE, related_name="memberships")
role = models.CharField(max_length=16, choices=Role.choices, default=Role.MEMBER)
joined_at = models.DateTimeField(auto_now_add=True)
class Meta:
db_table = "groups_membership"
verbose_name = "Group Membership"
verbose_name_plural = "Group Memberships"
unique_together = [("group", "user")]
ordering = ["joined_at"]
unique_together = [("user", "group")]
verbose_name = "Reading Group Membership"
verbose_name_plural = "Reading Group Memberships"
def __str__(self) -> str:
return f"{self.user} in {self.group.name} ({self.role})"
class MemberProgress(models.Model):
"""Per-member reading progress within a reading group."""
class GroupBook(models.Model):
"""Links an uploaded EBook to a reading group."""
class Status(models.TextChoices):
ACTIVE = "active", "Active"
REPLACED = "replaced", "Replaced"
membership = models.OneToOneField(
GroupMembership,
on_delete=models.CASCADE,
related_name="progress",
)
group = models.ForeignKey(
ReadingGroup,
on_delete=models.CASCADE,
related_name="member_progress",
ReadingGroup, on_delete=models.CASCADE, related_name="group_books"
)
ebook = models.ForeignKey(
EBook, on_delete=models.CASCADE, related_name="group_books"
)
uploaded_by = models.ForeignKey(
settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name="uploaded_group_books"
)
title = models.CharField(max_length=512, db_index=True)
status = models.CharField(
max_length=16, choices=Status.choices, default=Status.ACTIVE, db_index=True
)
created_at = models.DateTimeField(auto_now_add=True)
updated_at = models.DateTimeField(auto_now=True)
class Meta:
db_table = "groups_group_book"
verbose_name = "Group Book"
verbose_name_plural = "Group Books"
ordering = ["-created_at"]
indexes = [models.Index(fields=["group", "status"])]
def __str__(self) -> str:
return f"{self.group.name}{self.title}"
class Section(models.Model):
"""A section/chunk of a GroupBook for group reading."""
group_book = models.ForeignKey(
GroupBook, on_delete=models.CASCADE, related_name="sections"
)
title = models.CharField(max_length=512)
order = models.PositiveIntegerField(db_index=True)
start_chapter_index = models.PositiveIntegerField(default=0)
end_chapter_index = models.PositiveIntegerField(default=0)
estimated_reading_minutes = models.PositiveIntegerField(default=0)
created_at = models.DateTimeField(auto_now_add=True)
class Meta:
db_table = "groups_section"
verbose_name = "Section"
verbose_name_plural = "Sections"
ordering = ["order"]
unique_together = [("group_book", "order")]
indexes = [models.Index(fields=["group_book", "order"])]
def __str__(self) -> str:
return f"{self.group_book.title} — Section {self.order}: {self.title}"
class ReadingSchedule(models.Model):
"""Reading schedule mapping sections to weekly meetings."""
group_book = models.ForeignKey(
GroupBook, on_delete=models.CASCADE, related_name="schedules"
)
meeting_number = models.PositiveIntegerField()
week_date = models.DateField()
section_ids = models.JSONField(default=list, help_text="Ordered list of Section IDs for this meeting")
created_at = models.DateTimeField(auto_now_add=True)
class Meta:
db_table = "groups_reading_schedule"
verbose_name = "Reading Schedule"
verbose_name_plural = "Reading Schedules"
ordering = ["meeting_number"]
unique_together = [("group_book", "meeting_number")]
indexes = [models.Index(fields=["group_book", "meeting_number"])]
def __str__(self) -> str:
return f"{self.group_book.title} — Meeting {self.meeting_number}"
class MemberProgress(models.Model):
"""Tracks a member's progress through sections of a group book."""
user = models.ForeignKey(
settings.AUTH_USER_MODEL,
on_delete=models.CASCADE,
related_name="member_progress",
settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name="group_progress"
)
group_book = models.ForeignKey(
GroupBook, on_delete=models.CASCADE, related_name="member_progress"
)
current_section = models.ForeignKey(
Section, on_delete=models.SET_NULL, null=True, blank=True, related_name="current_readers"
)
completed_sections = models.JSONField(
default=list, help_text="Ordered list of completed Section IDs"
)
current_section = models.PositiveIntegerField(default=0)
percentage = models.FloatField(default=0.0)
time_spent_seconds = models.PositiveIntegerField(default=0)
last_position = models.JSONField(blank=True, default=dict)
is_public = models.BooleanField(default=True)
updated_at = models.DateTimeField(auto_now=True)
class Meta:
db_table = "groups_member_progress"
verbose_name = "Member Progress"
verbose_name_plural = "Member Progress"
unique_together = [("group", "user")]
indexes = [
models.Index(fields=["group", "-percentage"]),
models.Index(fields=["group", "user"]),
]
unique_together = [("user", "group_book")]
def __str__(self) -> str:
return f"{self.user}{self.group.name} ({self.percentage:.0f}%)"
def total_sections(self) -> int:
return self.group.total_sections
def update_progress(
self,
current_section: int,
percentage: float | None = None,
time_spent_delta: int = 0,
last_position: dict | None = None,
) -> None:
"""Update progress with computed percentage if not provided."""
self.current_section = current_section
if percentage is not None:
self.percentage = min(100.0, max(0.0, percentage))
elif (ts := self.total_sections()) > 0:
self.percentage = min(100.0, (current_section / ts) * 100.0)
else:
self.percentage = 0.0
if time_spent_delta > 0:
self.time_spent_seconds += time_spent_delta
if last_position is not None:
self.last_position = last_position
self.save(
update_fields=[
"current_section",
"percentage",
"time_spent_seconds",
"last_position",
"updated_at",
]
)
return f"{self.user}{self.group_book.title}"
-28
View File
@@ -1,28 +0,0 @@
from rest_framework import permissions
from rest_framework.request import Request
from apps.groups.models import GroupMembership
class IsGroupMember(permissions.BasePermission):
"""Allow access only to members of the group."""
def has_permission(self, request: Request, view: object) -> bool:
group_id = view.kwargs.get("group_pk") or view.kwargs.get("pk")
if not group_id:
return False
return GroupMembership.objects.filter(
group_id=group_id, user=request.user
).exists()
class IsGroupAdmin(permissions.BasePermission):
"""Allow access only to group admins."""
def has_permission(self, request: Request, view: object) -> bool:
group_id = view.kwargs.get("group_pk") or view.kwargs.get("pk")
if not group_id:
return False
return GroupMembership.objects.filter(
group_id=group_id, user=request.user, role=GroupMembership.Role.ADMIN
).exists()
+154 -152
View File
@@ -1,183 +1,185 @@
from __future__ import annotations
from rest_framework import serializers
from apps.groups.models import GroupMembership, MemberProgress, ReadingGroup
from apps.groups.models import (
GroupBook,
MemberProgress,
ReadingGroup,
ReadingGroupMembership,
ReadingSchedule,
Section,
)
from apps.books.serializers import EBookListSerializer
class GroupMembershipSerializer(serializers.ModelSerializer):
class ReadingGroupMembershipSerializer(serializers.ModelSerializer):
user_email = serializers.CharField(source="user.email", read_only=True)
user_id = serializers.IntegerField(source="user.id", read_only=True)
role = serializers.CharField(read_only=True)
user_username = serializers.CharField(source="user.username", read_only=True)
class Meta:
model = GroupMembership
fields = ["id", "user_id", "user_email", "role", "joined_at"]
class MemberProgressSerializer(serializers.ModelSerializer):
user_email = serializers.CharField(source="user.email", read_only=True)
user_id = serializers.IntegerField(source="user.id", read_only=True)
total_sections = serializers.SerializerMethodField()
section_label = serializers.SerializerMethodField()
class Meta:
model = MemberProgress
model = ReadingGroupMembership
fields = [
"id",
"user_id",
"user_email",
"current_section",
"total_sections",
"section_label",
"percentage",
"time_spent_seconds",
"last_position",
"is_public",
"updated_at",
"id", "user", "user_email", "user_username",
"role", "joined_at",
]
read_only_fields = ["id", "user_id", "user_email", "updated_at"]
extra_kwargs = {
"percentage": {"required": False, "min_value": 0.0, "max_value": 100.0},
}
def get_total_sections(self, obj: MemberProgress) -> int:
return obj.total_sections()
def get_section_label(self, obj: MemberProgress) -> str:
ts = obj.total_sections()
if ts:
return f"Section {obj.current_section} of {ts}"
return "No sections"
def validate_percentage(self, value: float) -> float:
if value < 0.0 or value > 100.0:
raise serializers.ValidationError("Percentage must be between 0.0 and 100.0.")
return value
class MemberProgressPublicSerializer(serializers.ModelSerializer):
"""Limited view for other group members — section label only, no exact position."""
user_email = serializers.CharField(source="user.email", read_only=True)
user_id = serializers.IntegerField(source="user.id", read_only=True)
total_sections = serializers.SerializerMethodField()
section_label = serializers.SerializerMethodField()
class Meta:
model = MemberProgress
fields = [
"user_id",
"user_email",
"current_section",
"total_sections",
"section_label",
"percentage",
"time_spent_seconds",
"updated_at",
]
def get_total_sections(self, obj: MemberProgress) -> int:
return obj.total_sections()
def get_section_label(self, obj: MemberProgress) -> str:
ts = obj.total_sections()
if ts:
return f"Section {obj.current_section} of {ts}"
return "No sections"
class MemberProgressUpdateSerializer(serializers.Serializer):
current_section = serializers.IntegerField(min_value=0)
percentage = serializers.FloatField(required=False, min_value=0.0, max_value=100.0)
time_spent_delta = serializers.IntegerField(default=0, min_value=0)
last_position = serializers.JSONField(required=False, default=dict)
is_public = serializers.BooleanField(required=False)
read_only_fields = ["id", "joined_at"]
class ReadingGroupListSerializer(serializers.ModelSerializer):
created_by_email = serializers.CharField(source="created_by.email", read_only=True)
ebook_title = serializers.CharField(source="ebook.title", read_only=True)
ebook_author = serializers.CharField(source="ebook.author", read_only=True)
member_count = serializers.SerializerMethodField()
my_progress = serializers.SerializerMethodField()
admin_email = serializers.CharField(source="admin.email", read_only=True)
class Meta:
model = ReadingGroup
fields = [
"id",
"name",
"ebook",
"ebook_title",
"ebook_author",
"created_by_email",
"description",
"member_count",
"my_progress",
"created_at",
"updated_at",
"id", "name", "description", "admin", "admin_email",
"member_count", "created_at", "updated_at",
]
def get_member_count(self, obj: ReadingGroup) -> int:
return obj.memberships.count()
def get_my_progress(self, obj: ReadingGroup) -> dict | None:
request = self.context.get("request")
if not request or not request.user.is_authenticated:
return None
try:
mp = MemberProgress.objects.get(group=obj, user=request.user)
except MemberProgress.DoesNotExist:
return None
return {
"current_section": mp.current_section,
"percentage": mp.percentage,
"time_spent_seconds": mp.time_spent_seconds,
"section_label": MemberProgressSerializer().get_section_label(mp),
}
class ReadingGroupDetailSerializer(serializers.ModelSerializer):
admin_email = serializers.CharField(source="admin.email", read_only=True)
members = ReadingGroupMembershipSerializer(source="memberships", many=True, read_only=True)
class ReadingGroupDetailSerializer(ReadingGroupListSerializer):
members = serializers.SerializerMethodField()
class Meta(ReadingGroupListSerializer.Meta):
fields = ReadingGroupListSerializer.Meta.fields + ["members"]
def get_members(self, obj: ReadingGroup) -> list[dict]:
memberships = obj.memberships.select_related("user").prefetch_related("progress")
result: list[dict] = []
for m in memberships:
entry: dict = {
"id": m.id,
"user_id": m.user.id,
"user_email": m.user.email,
"role": m.role,
"joined_at": m.joined_at,
}
try:
mp = m.progress
except MemberProgress.DoesNotExist:
entry["progress"] = None
else:
if mp.is_public:
entry["progress"] = MemberProgressPublicSerializer(mp).data
else:
entry["progress"] = {"is_public": False, "note": "Private"}
result.append(entry)
return result
class Meta:
model = ReadingGroup
fields = [
"id", "name", "description", "admin", "admin_email",
"members", "created_at", "updated_at",
]
class ReadingGroupCreateSerializer(serializers.ModelSerializer):
class Meta:
model = ReadingGroup
fields = ["name", "ebook", "description"]
fields = ["name", "description"]
class AdminProgressSummarySerializer(serializers.Serializer):
group_id = serializers.IntegerField()
group_name = serializers.CharField()
ebook_title = serializers.CharField()
total_members = serializers.IntegerField()
members_started = serializers.IntegerField()
members_finished = serializers.IntegerField()
average_percentage = serializers.FloatField()
average_time_spent_hours = serializers.FloatField()
member_details = serializers.ListField(child=serializers.JSONField())
class AddMemberSerializer(serializers.Serializer):
user_id = serializers.IntegerField()
def validate_user_id(self, value: int) -> int:
from django.conf import settings
User = settings.AUTH_USER_MODEL
if not User.objects.filter(id=value).exists():
raise serializers.ValidationError("User not found.")
return value
class SectionSerializer(serializers.ModelSerializer):
class Meta:
model = Section
fields = [
"id", "title", "order", "start_chapter_index",
"end_chapter_index", "estimated_reading_minutes", "created_at",
]
read_only_fields = ["id", "created_at"]
class SectionAdjustSerializer(serializers.Serializer):
"""Payload for manual section adjustments (merge/split)."""
operation = serializers.ChoiceField(choices=["merge", "split"])
section_ids = serializers.ListField(
child=serializers.IntegerField(), min_length=1,
help_text="For merge: list of section IDs to merge. For split: [section_id] to split."
)
split_at = serializers.IntegerField(
required=False, default=2, min_value=2,
help_text="Number of new sections when splitting"
)
class ReadingScheduleSerializer(serializers.ModelSerializer):
section_details = serializers.SerializerMethodField()
class Meta:
model = ReadingSchedule
fields = [
"id", "meeting_number", "week_date", "section_ids",
"section_details", "created_at",
]
read_only_fields = ["id", "created_at"]
def get_section_details(self, obj: ReadingSchedule) -> list[dict]:
sections = Section.objects.filter(
id__in=obj.section_ids, group_book=obj.group_book
).order_by("order")
return SectionSerializer(sections, many=True).data
class MemberProgressSerializer(serializers.ModelSerializer):
user_email = serializers.CharField(source="user.email", read_only=True)
user_username = serializers.CharField(source="user.username", read_only=True)
current_section_title = serializers.SerializerMethodField()
class Meta:
model = MemberProgress
fields = [
"id", "user", "user_email", "user_username",
"current_section", "current_section_title",
"completed_sections", "updated_at",
]
read_only_fields = ["id", "updated_at"]
def get_current_section_title(self, obj: MemberProgress) -> str | None:
if obj.current_section:
return obj.current_section.title
return None
class GroupBookListSerializer(serializers.ModelSerializer):
ebook = EBookListSerializer(read_only=True)
uploaded_by_email = serializers.CharField(source="uploaded_by.email", read_only=True)
section_count = serializers.SerializerMethodField()
class Meta:
model = GroupBook
fields = [
"id", "title", "status", "ebook", "uploaded_by",
"uploaded_by_email", "section_count", "created_at", "updated_at",
]
def get_section_count(self, obj: GroupBook) -> int:
return obj.sections.count()
class GroupBookDetailSerializer(serializers.ModelSerializer):
ebook = EBookListSerializer(read_only=True)
uploaded_by_email = serializers.CharField(source="uploaded_by.email", read_only=True)
sections = SectionSerializer(many=True, read_only=True)
schedules = ReadingScheduleSerializer(source="schedules", many=True, read_only=True)
class Meta:
model = GroupBook
fields = [
"id", "group", "title", "status", "ebook",
"uploaded_by", "uploaded_by_email",
"sections", "schedules", "created_at", "updated_at",
]
class GroupBookCreateSerializer(serializers.Serializer):
ebook_id = serializers.IntegerField()
title = serializers.CharField(max_length=512, required=False)
def validate_ebook_id(self, value: int) -> int:
from apps.books.models import EBook
if not EBook.objects.filter(id=value).exists():
raise serializers.ValidationError("EBook not found.")
# Check format is EPUB
ebook = EBook.objects.get(id=value)
if ebook.format != "epub":
raise serializers.ValidationError("Only EPUB format is supported for group books.")
return value
def validate(self, data: dict) -> dict:
request = self.context.get("request")
if request and not data.get("title"):
from apps.books.models import EBook
ebook = EBook.objects.get(id=data["ebook_id"])
data["title"] = ebook.title
return data
@@ -0,0 +1,241 @@
"""Automatic section detection and meeting recommendation for group books."""
from __future__ import annotations
import logging
from datetime import date, timedelta
from typing import Any
from django.db.models import QuerySet
from apps.books.models import BookChapter, EBook
from apps.groups.models import GroupBook, ReadingSchedule, Section
logger = logging.getLogger(__name__)
WORDS_PER_MINUTE = 250 # Average reading speed
def _fetch_chapter_text(ebook: EBook, chapter: BookChapter) -> str:
"""Extract plain text from a chapter for word counting."""
try:
from ebooklib import epub
from bs4 import BeautifulSoup
except ImportError:
return ""
try:
book = epub.read_epub(ebook.file.path)
href = chapter.href or ""
for item in book.get_items():
item_name = item.get_name() or ""
if href and (item_name.endswith(href) or href.endswith(item_name)):
content = item.get_content()
soup = BeautifulSoup(content, "html.parser")
body = soup.find("body")
if body:
return body.get_text(separator=" ", strip=True)
return soup.get_text(separator=" ", strip=True)
return ""
except Exception:
logger.exception("Failed to extract text for chapter %s", chapter.id)
return ""
def _estimate_reading_minutes(text: str) -> int:
"""Estimate reading time based on word count at WORDS_PER_MINUTE."""
word_count = len(text.split())
if word_count == 0:
return 1
return max(1, round(word_count / WORDS_PER_MINUTE))
def detect_sections(group_book: GroupBook) -> list[dict[str, Any]]:
"""Auto-detect sections from a GroupBook's chapters.
Groups consecutive chapters into logical sections based on TOC structure.
Top-level TOC entries become sections; if there are very few (< 3),
groups of ~5 chapters become sections instead.
"""
ebook = group_book.ebook
chapters = list(
BookChapter.objects.filter(ebook=ebook).order_by("index").select_related("ebook")
)
if not chapters:
return []
top_level = [ch for ch in chapters if not ch.children or len(ch.children) == 0]
has_children = [ch for ch in chapters if ch.children and len(ch.children) > 0]
sections: list[dict[str, Any]] = []
if len(has_children) >= 3:
# Use TOC structure: each top-level chapter (with children) is a section
for idx, ch in enumerate(has_children):
# Find all child chapters belonging to this parent
child_indices = _collect_child_indices(chapters, ch, idx)
start_idx = ch.index
end_idx = child_indices[-1] if child_indices else start_idx
section_chapters = [c for c in chapters if start_idx <= c.index <= end_idx]
total_text = ""
for sc in section_chapters:
total_text += " " + _fetch_chapter_text(ebook, sc)
sections.append({
"title": ch.title,
"order": idx + 1,
"start_chapter_index": start_idx,
"end_chapter_index": end_idx + 1,
"estimated_reading_minutes": _estimate_reading_minutes(total_text),
})
else:
# Group chapters into chunks of ~5
chunk_size = max(1, len(top_level) // 6 if len(top_level) > 6 else 5)
chunk_size = max(3, min(chunk_size, 10))
group_start = 0
section_order = 1
total = len(top_level) or len(chapters)
source = top_level or chapters
while group_start < total:
group_end = min(group_start + chunk_size, total)
chunk = source[group_start:group_end]
total_text = ""
for ch in chunk:
total_text += " " + _fetch_chapter_text(ebook, ch)
first_title = chunk[0].title if chunk else "Section"
last_title = chunk[-1].title if len(chunk) > 1 else ""
title = f"{first_title}" if not last_title or first_title == last_title else f"{first_title}{last_title}"
sections.append({
"title": title,
"order": section_order,
"start_chapter_index": chunk[0].index,
"end_chapter_index": chunk[-1].index + 1,
"estimated_reading_minutes": _estimate_reading_minutes(total_text),
})
group_start = group_end
section_order += 1
return sections
def _collect_child_indices(chapters: list[BookChapter], parent: BookChapter, parent_idx: int) -> list[int]:
"""Collect indices of all chapters that are children of the given parent TOC entry."""
indices: list[int] = [parent.index]
child_hrefs: set[str] = set()
for child in parent.children:
if isinstance(child, dict):
child_hrefs.add(child.get("href", ""))
elif hasattr(child, "href"):
child_hrefs.add(getattr(child, "href", ""))
for ch in chapters:
if ch.index == parent.index:
continue
if ch.href in child_hrefs or any(
ch.href.endswith(h) or h.endswith(ch.href) for h in child_hrefs
):
indices.append(ch.index)
# Also include chapters between this parent and the next parent
if parent_idx + 1 < len(chapters):
next_parent = chapters[parent_idx + 1]
for ch in chapters:
if parent.index < ch.index < next_parent.index:
indices.append(ch.index)
return sorted(set(indices))
def apply_sections(group_book: GroupBook) -> list[Section]:
"""Detect sections and persist them to the database, replacing existing ones."""
Section.objects.filter(group_book=group_book).delete()
sections_data = detect_sections(group_book)
created: list[Section] = []
for data in sections_data:
section = Section.objects.create(
group_book=group_book,
title=data["title"],
order=data["order"],
start_chapter_index=data["start_chapter_index"],
end_chapter_index=data["end_chapter_index"],
estimated_reading_minutes=data["estimated_reading_minutes"],
)
created.append(section)
return created
def recommend_meetings(group_book: GroupBook, num_meetings: int = 4) -> list[dict[str, Any]]:
"""Recommend which sections to assign to each weekly meeting.
Distributes sections across meetings, trying to balance total reading time.
Returns a list of meeting assignments ready for schedule creation.
"""
sections = list(
Section.objects.filter(group_book=group_book).order_by("order")
)
if not sections:
return []
# Calculate total minutes to distribute
total_minutes = sum(s.estimated_reading_minutes for s in sections)
target_per_meeting = total_minutes / num_meetings
meetings: list[dict[str, Any]] = []
current_meeting: list[int] = []
current_minutes = 0
for section in sections:
if current_meeting and current_minutes + section.estimated_reading_minutes > target_per_meeting * 1.4:
# Start new meeting if adding this section would overshoot too much
if len(meetings) < num_meetings - 1:
meetings.append({
"meeting_number": len(meetings) + 1,
"section_ids": current_meeting,
"total_minutes": current_minutes,
})
current_meeting = []
current_minutes = 0
current_meeting.append(section.id)
current_minutes += section.estimated_reading_minutes
# Add the last meeting
if current_meeting:
meetings.append({
"meeting_number": len(meetings) + 1,
"section_ids": current_meeting,
"total_minutes": current_minutes,
})
# If we have fewer than num_meetings, we could split the largest one
# For now, just return what we have
return meetings
def apply_schedule(group_book: GroupBook, num_meetings: int = 4) -> list[ReadingSchedule]:
"""Generate and persist a reading schedule."""
ReadingSchedule.objects.filter(group_book=group_book).delete()
recommendations = recommend_meetings(group_book, num_meetings)
today = date.today()
created: list[ReadingSchedule] = []
for rec in recommendations:
week_date = today + timedelta(weeks=rec["meeting_number"] - 1)
schedule = ReadingSchedule.objects.create(
group_book=group_book,
meeting_number=rec["meeting_number"],
week_date=week_date,
section_ids=rec["section_ids"],
)
created.append(schedule)
return created
+34 -2
View File
@@ -1,11 +1,43 @@
from django.urls import include, path
from rest_framework.routers import DefaultRouter
from apps.groups.views import ReadingGroupViewSet
from apps.groups.views import GroupBookViewSet, ReadingGroupViewSet
# ReadingGroup routes (standard ViewSet)
router = DefaultRouter()
router.register(r"", ReadingGroupViewSet, basename="reading-group")
router.register(r"", ReadingGroupViewSet, basename="group")
urlpatterns = [
path("", include(router.urls)),
# Nested GroupBook routes under a group
path(
"<int:group_pk>/books/",
GroupBookViewSet.as_view({"get": "list", "post": "create"}),
name="group-book-list",
),
path(
"<int:group_pk>/books/<int:pk>/",
GroupBookViewSet.as_view({"get": "retrieve", "delete": "destroy"}),
name="group-book-detail",
),
path(
"<int:group_pk>/books/<int:pk>/detect-sections/",
GroupBookViewSet.as_view({"post": "detect_sections_action"}),
name="group-book-detect-sections",
),
path(
"<int:group_pk>/books/<int:pk>/adjust-sections/",
GroupBookViewSet.as_view({"post": "adjust_sections"}),
name="group-book-adjust-sections",
),
path(
"<int:group_pk>/books/<int:pk>/schedule/",
GroupBookViewSet.as_view({"get": "schedule", "post": "schedule", "delete": "schedule"}),
name="group-book-schedule",
),
path(
"<int:group_pk>/books/<int:pk>/progress/",
GroupBookViewSet.as_view({"get": "progress", "patch": "progress"}),
name="group-book-progress",
),
]
+300 -154
View File
@@ -1,39 +1,82 @@
from __future__ import annotations
from django.db import models
import logging
from typing import Any
from django.db.models import QuerySet
from django.shortcuts import get_object_or_404
from rest_framework import permissions, status, viewsets
from rest_framework.decorators import action
from rest_framework.request import Request
from rest_framework.response import Response
from apps.groups.models import GroupMembership, MemberProgress, ReadingGroup
from apps.groups.permissions import IsGroupAdmin, IsGroupMember
from apps.books.models import EBook
from apps.groups.models import (
GroupBook,
MemberProgress,
ReadingGroup,
ReadingGroupMembership,
ReadingSchedule,
Section,
)
from apps.groups.serializers import (
AdminProgressSummarySerializer,
GroupMembershipSerializer,
MemberProgressPublicSerializer,
AddMemberSerializer,
GroupBookCreateSerializer,
GroupBookDetailSerializer,
GroupBookListSerializer,
MemberProgressSerializer,
MemberProgressUpdateSerializer,
ReadingGroupCreateSerializer,
ReadingGroupDetailSerializer,
ReadingGroupListSerializer,
ReadingScheduleSerializer,
SectionAdjustSerializer,
SectionSerializer,
)
from apps.groups.services.section_splitting import (
apply_schedule,
apply_sections,
detect_sections,
)
import logging
logger = logging.getLogger(__name__)
class ReadingGroupViewSet(viewsets.ModelViewSet):
permission_classes = [permissions.IsAuthenticated]
class IsGroupAdmin(permissions.BasePermission):
"""Only the group admin can modify group resources."""
def get_queryset(self):
return (
ReadingGroup.objects.filter(memberships__user=self.request.user)
.select_related("ebook", "created_by")
.prefetch_related("memberships", "memberships__progress")
.distinct()
)
def has_permission(self, request: Request, view: object) -> bool:
if not request.user.is_authenticated:
return False
if view.action in ("list", "retrieve"):
return True
group_id = view.kwargs.get("pk") or view.kwargs.get("group_pk")
if group_id:
return ReadingGroup.objects.filter(id=group_id, admin=request.user).exists()
return True
def has_object_permission(self, request: Request, view: object, obj: ReadingGroup) -> bool:
if request.method in permissions.SAFE_METHODS:
return True
return obj.admin == request.user
class IsGroupMember(permissions.BasePermission):
"""Only group members (including admin) can view group content."""
def has_permission(self, request: Request, view: object) -> bool:
if not request.user.is_authenticated:
return False
group_id = view.kwargs.get("pk") or view.kwargs.get("group_pk")
if group_id:
return ReadingGroupMembership.objects.filter(
group_id=group_id, user=request.user
).exists()
return True
class ReadingGroupViewSet(viewsets.ModelViewSet):
permission_classes = [permissions.IsAuthenticated, IsGroupAdmin]
queryset = ReadingGroup.objects.prefetch_related("memberships__user")
def get_serializer_class(self):
if self.action == "create":
@@ -42,162 +85,265 @@ class ReadingGroupViewSet(viewsets.ModelViewSet):
return ReadingGroupDetailSerializer
return ReadingGroupListSerializer
def perform_create(self, serializer):
group = serializer.save(created_by=self.request.user)
# Creator automatically becomes admin member
GroupMembership.objects.create(
group=group,
user=self.request.user,
role=GroupMembership.Role.ADMIN,
def get_queryset(self) -> QuerySet[ReadingGroup]:
user = self.request.user
return ReadingGroup.objects.filter(
memberships__user=user
).prefetch_related("memberships__user").distinct()
def perform_create(self, serializer: ReadingGroupCreateSerializer) -> ReadingGroup:
group = serializer.save(admin=self.request.user)
ReadingGroupMembership.objects.create(
user=self.request.user, group=group, role=ReadingGroupMembership.Role.ADMIN
)
return group
# ── Membership ───────────────────────────────────────────────────────
@action(detail=True, methods=["post"], permission_classes=[IsGroupMember])
def join(self, request: Request, pk: int | None = None) -> Response:
"""Join a reading group (public join link)."""
@action(detail=True, methods=["post"], permission_classes=[IsGroupAdmin])
def add_member(self, request: Request, pk: int | None = None) -> Response:
group = self.get_object()
membership, created = GroupMembership.objects.get_or_create(
group=group, user=request.user
)
if not created:
return Response({"detail": "Already a member."}, status=status.HTTP_200_OK)
MemberProgress.objects.get_or_create(
membership=membership,
group=group,
user=request.user,
defaults={"current_section": 0, "percentage": 0.0},
)
return Response({"detail": "Joined successfully."}, status=status.HTTP_201_CREATED)
member_serializer = AddMemberSerializer(data=request.data)
member_serializer.is_valid(raise_exception=True)
@action(detail=True, methods=["post"], permission_classes=[IsGroupMember])
def leave(self, request: Request, pk: int | None = None) -> Response:
"""Leave a reading group."""
group = self.get_object()
if group.created_by == request.user:
user_id = member_serializer.validated_data["user_id"]
from django.conf import settings
User = settings.AUTH_USER_MODEL
new_member = get_object_or_404(User, id=user_id)
if ReadingGroupMembership.objects.filter(group=group, user=new_member).exists():
return Response(
{"error": "Group creator cannot leave. Transfer ownership or delete the group."},
{"detail": "User is already a member of this group."},
status=status.HTTP_409_CONFLICT,
)
membership = ReadingGroupMembership.objects.create(
user=new_member, group=group, role=ReadingGroupMembership.Role.MEMBER
)
from apps.groups.serializers import ReadingGroupMembershipSerializer
return Response(
ReadingGroupMembershipSerializer(membership).data,
status=status.HTTP_201_CREATED,
)
@action(detail=True, methods=["post"], permission_classes=[IsGroupAdmin])
def remove_member(self, request: Request, pk: int | None = None) -> Response:
group = self.get_object()
member_serializer = AddMemberSerializer(data=request.data)
member_serializer.is_valid(raise_exception=True)
user_id = member_serializer.validated_data["user_id"]
if user_id == group.admin_id:
return Response(
{"detail": "Cannot remove the group admin."},
status=status.HTTP_400_BAD_REQUEST,
)
GroupMembership.objects.filter(group=group, user=request.user).delete()
deleted, _ = ReadingGroupMembership.objects.filter(
group=group, user_id=user_id
).delete()
if not deleted:
return Response(
{"detail": "User is not a member of this group."},
status=status.HTTP_404_NOT_FOUND,
)
return Response(status=status.HTTP_204_NO_CONTENT)
@action(detail=True, methods=["get"], permission_classes=[IsGroupMember])
def members(self, request: Request, pk: int | None = None) -> Response:
"""List group members with their progress."""
group = self.get_object()
memberships = (
group.memberships.select_related("user")
.prefetch_related("progress")
.all()
class GroupBookViewSet(viewsets.ModelViewSet):
permission_classes = [permissions.IsAuthenticated, IsGroupAdmin]
def get_serializer_class(self):
if self.action == "create":
return GroupBookCreateSerializer
if self.action == "retrieve":
return GroupBookDetailSerializer
return GroupBookListSerializer
def get_queryset(self) -> QuerySet[GroupBook]:
group_id = self.kwargs.get("group_pk")
return GroupBook.objects.filter(
group_id=group_id
).select_related("ebook", "ebook__user", "uploaded_by").prefetch_related(
"sections", "schedules"
)
serializer = GroupMembershipSerializer(memberships, many=True)
return Response(serializer.data)
# ── Progress ─────────────────────────────────────────────────────────
def perform_create(self, serializer: GroupBookCreateSerializer) -> GroupBook:
group = get_object_or_404(ReadingGroup, id=self.kwargs["group_pk"])
ebook = get_object_or_404(EBook, id=serializer.validated_data["ebook_id"])
title = serializer.validated_data.get("title") or ebook.title
@action(detail=True, methods=["get"], permission_classes=[IsGroupMember],
url_path="members/progress")
def members_progress(self, request: Request, pk: int | None = None) -> Response:
"""Get progress for all group members.
Other members' progress shows section label only (no last_position).
Your own progress shows full detail.
"""
group = self.get_object()
progress_qs = (
MemberProgress.objects.filter(group=group)
.select_related("user")
.order_by("-percentage")
# Mark existing active books as replaced
GroupBook.objects.filter(group=group, status=GroupBook.Status.ACTIVE).update(
status=GroupBook.Status.REPLACED
)
result: list[dict] = []
for mp in progress_qs:
if mp.user == request.user:
result.append(MemberProgressSerializer(mp).data)
elif mp.is_public:
result.append(MemberProgressPublicSerializer(mp).data)
else:
result.append({
"user_id": mp.user.id,
"user_email": mp.user.email,
"is_public": False,
"note": "Private",
})
return Response(result)
@action(detail=True, methods=["get", "patch"], permission_classes=[IsGroupMember],
url_path="progress")
def my_progress(self, request: Request, pk: int | None = None) -> Response:
"""Get or update my own progress in the group."""
group = self.get_object()
membership = GroupMembership.objects.get(group=group, user=request.user)
progress_obj, _created = MemberProgress.objects.get_or_create(
membership=membership,
group_book = GroupBook.objects.create(
group=group,
user=request.user,
ebook=ebook,
uploaded_by=self.request.user,
title=title,
status=GroupBook.Status.ACTIVE,
)
# Auto-detect sections
try:
apply_sections(group_book)
except Exception:
logger.exception("Auto-section detection failed for group_book %s", group_book.id)
# Auto-generate schedule
try:
apply_schedule(group_book)
except Exception:
logger.exception("Schedule generation failed for group_book %s", group_book.id)
return group_book
@action(detail=True, methods=["post"], url_path="detect-sections")
def detect_sections_action(self, request: Request, group_pk: int | None = None, pk: int | None = None) -> Response:
group_book = self.get_object()
try:
sections = apply_sections(group_book)
except Exception as exc:
logger.exception("Section detection failed for group_book %s", group_book.id)
return Response({"error": str(exc)}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
return Response(SectionSerializer(sections, many=True).data)
@action(detail=True, methods=["post"], url_path="adjust-sections")
def adjust_sections(self, request: Request, group_pk: int | None = None, pk: int | None = None) -> Response:
group_book = self.get_object()
adjust_serializer = SectionAdjustSerializer(data=request.data)
adjust_serializer.is_valid(raise_exception=True)
operation = adjust_serializer.validated_data["operation"]
section_ids: list[int] = adjust_serializer.validated_data["section_ids"]
if operation == "merge":
if len(section_ids) < 2:
return Response(
{"error": "At least 2 section IDs required for merge."},
status=status.HTTP_400_BAD_REQUEST,
)
sections = list(
Section.objects.filter(id__in=section_ids, group_book=group_book).order_by("order")
)
if len(sections) < 2:
return Response(
{"error": "Not enough valid sections found."},
status=status.HTTP_400_BAD_REQUEST,
)
merged_title = "".join(s.title for s in sections)
merged_minutes = sum(s.estimated_reading_minutes for s in sections)
merged_start = sections[0].start_chapter_index
merged_end = sections[-1].end_chapter_index
merged_order = sections[0].order
# Delete old sections
Section.objects.filter(id__in=section_ids, group_book=group_book).delete()
# Create merged section
merged = Section.objects.create(
group_book=group_book,
title=merged_title,
order=merged_order,
start_chapter_index=merged_start,
end_chapter_index=merged_end,
estimated_reading_minutes=merged_minutes,
)
# Reorder remaining sections
_renumber_sections(group_book)
return Response(SectionSerializer(merged).data)
if operation == "split":
if len(section_ids) != 1:
return Response(
{"error": "Exactly 1 section ID required for split."},
status=status.HTTP_400_BAD_REQUEST,
)
split_at = adjust_serializer.validated_data.get("split_at", 2)
section = get_object_or_404(Section, id=section_ids[0], group_book=group_book)
chapters = section.end_chapter_index - section.start_chapter_index
if chapters < split_at:
return Response(
{"error": f"Section only has {chapters} chapters, cannot split into {split_at}."},
status=status.HTTP_400_BAD_REQUEST,
)
# Delete original
orig_order = section.order
orig_title = section.title
section.delete()
# Create split sections
chunk_size = max(1, chapters // split_at)
new_sections: list[Section] = []
for i in range(split_at):
start_idx = section.start_chapter_index + i * chunk_size
end_idx = start_idx + chunk_size if i < split_at - 1 else section.end_chapter_index
minutes_each = max(1, section.estimated_reading_minutes // split_at)
new_sec = Section.objects.create(
group_book=group_book,
title=f"{orig_title} (Part {i + 1})",
order=orig_order + i,
start_chapter_index=start_idx,
end_chapter_index=end_idx,
estimated_reading_minutes=minutes_each,
)
new_sections.append(new_sec)
_renumber_sections(group_book)
return Response(SectionSerializer(new_sections, many=True).data)
return Response({"error": "Invalid operation."}, status=status.HTTP_400_BAD_REQUEST)
@action(detail=True, methods=["get", "post", "delete"], url_path="schedule")
def schedule(self, request: Request, group_pk: int | None = None, pk: int | None = None) -> Response:
group_book = self.get_object()
if request.method == "GET":
serializer = MemberProgressSerializer(progress_obj)
return Response(serializer.data)
schedules = ReadingSchedule.objects.filter(group_book=group_book).order_by("meeting_number")
return Response(ReadingScheduleSerializer(schedules, many=True).data)
# PATCH — update progress
update_serializer = MemberProgressUpdateSerializer(data=request.data)
update_serializer.is_valid(raise_exception=True)
data = update_serializer.validated_data
if request.method == "POST":
ReadingSchedule.objects.filter(group_book=group_book).delete()
num_meetings = int(request.data.get("num_meetings", 4))
try:
schedules = apply_schedule(group_book, num_meetings=num_meetings)
except Exception as exc:
logger.exception("Schedule generation failed for group_book %s", group_book.id)
return Response({"error": str(exc)}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
return Response(
ReadingScheduleSerializer(schedules, many=True).data,
status=status.HTTP_201_CREATED,
)
progress_obj.update_progress(
current_section=data["current_section"],
percentage=data.get("percentage"),
time_spent_delta=data.get("time_spent_delta", 0),
last_position=data.get("last_position"),
if request.method == "DELETE":
ReadingSchedule.objects.filter(group_book=group_book).delete()
return Response(status=status.HTTP_204_NO_CONTENT)
@action(detail=True, methods=["get", "patch"], url_path="progress")
def progress(self, request: Request, group_pk: int | None = None, pk: int | None = None) -> Response:
group_book = self.get_object()
if request.method == "GET":
progress_records = MemberProgress.objects.filter(
group_book=group_book
).select_related("user", "current_section")
return Response(MemberProgressSerializer(progress_records, many=True).data)
# PATCH: update own progress
progress_obj, _created = MemberProgress.objects.get_or_create(
user=request.user, group_book=group_book,
)
if "is_public" in data:
progress_obj.is_public = data["is_public"]
progress_obj.save(update_fields=["is_public"])
serializer = MemberProgressSerializer(progress_obj)
return Response(serializer.data)
# ── Admin ────────────────────────────────────────────────────────────
@action(detail=True, methods=["get"], permission_classes=[IsGroupAdmin],
url_path="progress/summary")
def progress_summary(self, request: Request, pk: int | None = None) -> Response:
"""Admin summary of all member progress."""
group = self.get_object()
progress_qs = MemberProgress.objects.filter(group=group).select_related("user")
total_members = group.memberships.count()
members_started = progress_qs.filter(current_section__gt=0).count()
members_finished = progress_qs.filter(percentage__gte=100.0).count()
avg_pct = progress_qs.aggregate(avg=models.Avg("percentage"))["avg"] or 0.0
avg_time = progress_qs.aggregate(avg=models.Avg("time_spent_seconds"))["avg"] or 0.0
member_details: list[dict] = []
for mp in progress_qs:
member_details.append({
"user_id": mp.user.id,
"user_email": mp.user.email,
"current_section": mp.current_section,
"percentage": mp.percentage,
"time_spent_seconds": mp.time_spent_seconds,
"is_public": mp.is_public,
"updated_at": mp.updated_at,
})
summary_data = {
"group_id": group.id,
"group_name": group.name,
"ebook_title": group.ebook.title,
"total_members": total_members,
"members_started": members_started,
"members_finished": members_finished,
"average_percentage": round(avg_pct, 1),
"average_time_spent_hours": round(avg_time / 3600.0, 1) if avg_time else 0.0,
"member_details": member_details,
}
serializer = AdminProgressSummarySerializer(data=summary_data)
serializer = MemberProgressSerializer(progress_obj, data=request.data, partial=True)
serializer.is_valid(raise_exception=True)
serializer.save()
return Response(serializer.data)
def _renumber_sections(group_book: GroupBook) -> None:
"""Re-number sections sequentially by their current order."""
sections = list(Section.objects.filter(group_book=group_book).order_by("order"))
for idx, section in enumerate(sections):
if section.order != idx + 1:
section.order = idx + 1
section.save(update_fields=["order"])
+1 -1
View File
@@ -39,9 +39,9 @@ INSTALLED_APPS = [
# Local apps
"apps.users",
"apps.books",
"apps.groups",
"apps.annotations",
"apps.reader",
"apps.groups",
]
MIDDLEWARE = [
+1 -1
View File
@@ -6,9 +6,9 @@ urlpatterns = [
path("admin/", admin.site.urls),
path("api/auth/", include("apps.users.urls")),
path("api/books/", include("apps.books.urls")),
path("api/groups/", include("apps.groups.urls")),
path("api/annotations/", include("apps.annotations.urls")),
path("api/reader/", include("apps.reader.urls")),
path("api/groups/", include("apps.groups.urls")),
]
if settings.DEBUG:
+6 -4
View File
@@ -12,8 +12,9 @@ const AddBookPage = lazy(() => import("./pages/AddBook").then((m) => ({ default:
const SettingsPage = lazy(() => import("./pages/Settings").then((m) => ({ default: m.SettingsPage })));
const BookmarksNotesPage = lazy(() => import("./components/annotations/BookmarksNotesPage").then((m) => ({ default: m.BookmarksNotesPage })));
const ReadingPage = lazy(() => import("./pages/ReadingPage").then((m) => ({ default: m.default })));
const ReadingGroupsPage = lazy(() => import("./pages/ReadingGroups").then((m) => ({ default: m.ReadingGroupsPage })));
const GroupDetailPage = lazy(() => import("./pages/GroupDetail").then((m) => ({ default: m.GroupDetailPage })));
const GroupsPage = lazy(() => import("./pages/GroupsPage").then((m) => ({ default: m.GroupsPage })));
const GroupDetailPage = lazy(() => import("./pages/GroupDetailPage").then((m) => ({ default: m.GroupDetailPage })));
const GroupBookPage = lazy(() => import("./pages/GroupBookPage").then((m) => ({ default: m.GroupBookPage })));
const AuthPage = lazy(() => import("./pages/AuthPage"));
@@ -46,9 +47,10 @@ function AppRoutes() {
<Route path="/reader/:id" element={<ProtectedRoute><ReaderRedirect /></ProtectedRoute>} />
<Route path="/add" element={<ProtectedRoute><AddBookPage /></ProtectedRoute>} />
<Route path="/settings" element={<ProtectedRoute><SettingsPage /></ProtectedRoute>} />
<Route path="/groups" element={<ProtectedRoute><GroupsPage /></ProtectedRoute>} />
<Route path="/groups/:groupId" element={<ProtectedRoute><GroupDetailPage /></ProtectedRoute>} />
<Route path="/groups/:groupId/books/:bookId" element={<ProtectedRoute><GroupBookPage /></ProtectedRoute>} />
<Route path="/bookmarks-notes/:bookId?" element={<ProtectedRoute><BookmarksNotesPage /></ProtectedRoute>} />
<Route path="/groups" element={<ProtectedRoute><ReadingGroupsPage /></ProtectedRoute>} />
<Route path="/groups/:id" element={<ProtectedRoute><GroupDetailPage /></ProtectedRoute>} />
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
</Suspense>
+115 -45
View File
@@ -1,21 +1,27 @@
import api from "./client";
import type {
AdminProgressSummary,
AddMemberPayload,
AdjustSectionsPayload,
CreateGroupBookPayload,
CreateGroupPayload,
MemberProgressDetail,
MemberProgressEntry,
GroupBook,
GroupBookDetail,
MemberProgress,
ReadingGroup,
ReadingGroupDetail,
ReadingGroupSummary,
UpdateProgressPayload,
} from "../types/groups";
ReadingSchedule,
Section,
} from "../types/group";
export const groupsApi = {
/* ── Groups ── */
// ---- Reading Groups ----
async listGroups(): Promise<ReadingGroupSummary[]> {
const { data } = await api.get<ReadingGroupSummary[]>("/groups/");
async listGroups(): Promise<ReadingGroup[]> {
const { data } = await api.get<{ count: number; results: ReadingGroup[] } | ReadingGroup[]>(
"/groups/"
);
if (Array.isArray(data)) return data;
return (data as { results: ReadingGroupSummary[] }).results ?? [];
return data.results ?? [];
},
async getGroup(id: number): Promise<ReadingGroupDetail> {
@@ -23,8 +29,8 @@ export const groupsApi = {
return data;
},
async createGroup(payload: CreateGroupPayload): Promise<ReadingGroupDetail> {
const { data } = await api.post<ReadingGroupDetail>("/groups/", payload);
async createGroup(payload: CreateGroupPayload): Promise<ReadingGroup> {
const { data } = await api.post<ReadingGroup>("/groups/", payload);
return data;
},
@@ -32,49 +38,113 @@ export const groupsApi = {
await api.delete(`/groups/${id}/`);
},
/* ── Membership ── */
async addMember(groupId: number, payload: AddMemberPayload): Promise<void> {
await api.post(`/groups/${groupId}/add_member/`, payload);
},
async joinGroup(id: number): Promise<{ detail: string }> {
const { data } = await api.post<{ detail: string }>(`/groups/${id}/join/`);
async removeMember(groupId: number, payload: AddMemberPayload): Promise<void> {
await api.post(`/groups/${groupId}/remove_member/`, payload);
},
// ---- Group Books ----
async listGroupBooks(groupId: number): Promise<GroupBook[]> {
const { data } = await api.get<GroupBook[]>(`/groups/${groupId}/books/`);
return Array.isArray(data) ? data : (data as { results: GroupBook[] }).results ?? [];
},
async getGroupBook(groupId: number, bookId: number): Promise<GroupBookDetail> {
const { data } = await api.get<GroupBookDetail>(`/groups/${groupId}/books/${bookId}/`);
return data;
},
async leaveGroup(id: number): Promise<void> {
await api.post(`/groups/${id}/leave/`);
},
/* ── Progress ── */
async getMembersProgress(groupId: number): Promise<MemberProgressEntry[]> {
const { data } = await api.get<MemberProgressEntry[]>(
`/groups/${groupId}/members/progress/`,
);
return data;
},
async getMyProgress(groupId: number): Promise<MemberProgressDetail> {
const { data } = await api.get<MemberProgressDetail>(
`/groups/${groupId}/progress/`,
);
return data;
},
async updateMyProgress(
async createGroupBook(
groupId: number,
payload: UpdateProgressPayload,
): Promise<MemberProgressDetail> {
const { data } = await api.patch<MemberProgressDetail>(
`/groups/${groupId}/progress/`,
payload,
payload: CreateGroupBookPayload
): Promise<GroupBookDetail> {
const { data } = await api.post<GroupBookDetail>(
`/groups/${groupId}/books/`,
payload
);
return data;
},
/* ── Admin ── */
async deleteGroupBook(groupId: number, bookId: number): Promise<void> {
await api.delete(`/groups/${groupId}/books/${bookId}/`);
},
async getProgressSummary(groupId: number): Promise<AdminProgressSummary> {
const { data } = await api.get<AdminProgressSummary>(
`/groups/${groupId}/progress/summary/`,
// ---- Sections ----
async detectSections(
groupId: number,
bookId: number
): Promise<Section[]> {
const { data } = await api.post<Section[]>(
`/groups/${groupId}/books/${bookId}/detect-sections/`
);
return data;
},
async adjustSections(
groupId: number,
bookId: number,
payload: AdjustSectionsPayload
): Promise<Section | Section[]> {
const { data } = await api.post<Section | Section[]>(
`/groups/${groupId}/books/${bookId}/adjust-sections/`,
payload
);
return data;
},
// ---- Schedule ----
async getSchedule(
groupId: number,
bookId: number
): Promise<ReadingSchedule[]> {
const { data } = await api.get<ReadingSchedule[]>(
`/groups/${groupId}/books/${bookId}/schedule/`
);
return data;
},
async generateSchedule(
groupId: number,
bookId: number,
numMeetings: number = 4
): Promise<ReadingSchedule[]> {
const { data } = await api.post<ReadingSchedule[]>(
`/groups/${groupId}/books/${bookId}/schedule/`,
{ num_meetings: numMeetings }
);
return data;
},
async deleteSchedule(groupId: number, bookId: number): Promise<void> {
await api.delete(`/groups/${groupId}/books/${bookId}/schedule/`);
},
// ---- Progress ----
async getProgress(
groupId: number,
bookId: number
): Promise<MemberProgress[]> {
const { data } = await api.get<MemberProgress[]>(
`/groups/${groupId}/books/${bookId}/progress/`
);
return data;
},
async updateProgress(
groupId: number,
bookId: number,
payload: { current_section?: number; completed_sections?: number[] }
): Promise<MemberProgress> {
const { data } = await api.patch<MemberProgress>(
`/groups/${groupId}/books/${bookId}/progress/`,
payload
);
return data;
},
+48
View File
@@ -245,6 +245,54 @@ const enUS = {
home: "Home",
bookmarksNotes: "Bookmarks & Notes",
},
groups: {
title: "Reading Groups",
createGroup: "Create Group",
create: "Create",
cancel: "Cancel",
groupName: "Group Name",
groupNamePlaceholder: "Enter group name",
description: "Description",
descriptionPlaceholder: "What is this group about?",
optional: "Optional",
noGroups: "No groups yet",
noGroupsHint: "Create a reading group to start reading together!",
members: "Members",
admin: "Admin",
addMember: "Add Member",
memberIdPlaceholder: "Enter user ID",
add: "Add",
remove: "Remove",
books: "Group Books",
uploadEpub: "Upload EPUB",
selectEbook: "Select an EPUB to share with the group",
noEpubBooks: "No EPUB files uploaded yet",
uploadFirst: "Upload an EPUB first",
confirmUpload: "Confirm Upload",
noBooks: "No books in this group yet",
sections: "Sections",
schedule: "Schedule",
progress: "Progress",
detectSections: "Auto-Detect Sections",
mergeSections: "Merge Sections",
selectSectionsHint: "Click sections to select for merging",
merge: "Merge",
clear: "Clear",
split: "Split",
splitInto: "Split into",
parts: "parts",
splitBtn: "Split",
noSections: "No sections detected yet",
noSectionsHint: 'Click "Auto-Detect Sections" to parse the EPUB chapters into reading sections.',
readingSchedule: "Reading Schedule",
generateSchedule: "Generate Schedule",
noSchedule: "No schedule generated yet",
noScheduleHint: "Detect sections first, then generate a reading schedule for your group.",
meeting: "Meeting",
memberProgress: "Member Progress",
noProgress: "No progress data yet",
noProgressHint: "Members will show progress once they start reading.",
},
} as const;
export default enUS;
+48
View File
@@ -247,6 +247,54 @@ const esES: Locale = {
home: "Inicio",
bookmarksNotes: "Marcadores y notas",
},
groups: {
title: "Grupos de Lectura",
createGroup: "Crear Grupo",
create: "Crear",
cancel: "Cancelar",
groupName: "Nombre del Grupo",
groupNamePlaceholder: "Ingresa el nombre del grupo",
description: "Descripción",
descriptionPlaceholder: "¿De qué trata este grupo?",
optional: "Opcional",
noGroups: "Aún no hay grupos",
noGroupsHint: "¡Crea un grupo de lectura para leer juntos!",
members: "Miembros",
admin: "Admin",
addMember: "Agregar Miembro",
memberIdPlaceholder: "Ingresa ID de usuario",
add: "Agregar",
remove: "Eliminar",
books: "Libros del Grupo",
uploadEpub: "Subir EPUB",
selectEbook: "Selecciona un EPUB para compartir con el grupo",
noEpubBooks: "No hay archivos EPUB subidos aún",
uploadFirst: "Sube un EPUB primero",
confirmUpload: "Confirmar Subida",
noBooks: "No hay libros en este grupo aún",
sections: "Secciones",
schedule: "Calendario",
progress: "Progreso",
detectSections: "Auto-Detectar Secciones",
mergeSections: "Fusionar Secciones",
selectSectionsHint: "Haz clic en las secciones para seleccionar y fusionar",
merge: "Fusionar",
clear: "Limpiar",
split: "Dividir",
splitInto: "Dividir en",
parts: "partes",
splitBtn: "Dividir",
noSections: "No se detectaron secciones",
noSectionsHint: 'Haz clic en "Auto-Detectar Secciones" para analizar los capítulos del EPUB.',
readingSchedule: "Calendario de Lectura",
generateSchedule: "Generar Calendario",
noSchedule: "No hay calendario generado",
noScheduleHint: "Detecta secciones primero, luego genera un calendario de lectura para tu grupo.",
meeting: "Reunión",
memberProgress: "Progreso de Miembros",
noProgress: "Sin datos de progreso",
noProgressHint: "Los miembros mostrarán progreso cuando comiencen a leer.",
},
};
export default esES;
+426
View File
@@ -0,0 +1,426 @@
import React, { useCallback, useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useTranslation } from "react-i18n-lite";
import { groupsApi } from "../api/groups";
import { getApiErrorMessage } from "../api/errors";
import type {
GroupBookDetail,
ReadingSchedule,
Section,
MemberProgress,
} from "../types/group";
export function GroupBookPage() {
const { t } = useTranslation();
const navigate = useNavigate();
const { groupId, bookId } = useParams<{ groupId: string; bookId: string }>();
const [book, setBook] = useState<GroupBookDetail | null>(null);
const [sections, setSections] = useState<Section[]>([]);
const [schedules, setSchedules] = useState<ReadingSchedule[]>([]);
const [progress, setProgress] = useState<MemberProgress[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [tab, setTab] = useState<"sections" | "schedule" | "progress">("sections");
// Merge state
const [selectedForMerge, setSelectedForMerge] = useState<number[]>([]);
const [splitSectionId, setSplitSectionId] = useState<number | null>(null);
const [splitAt, setSplitAt] = useState(2);
const gId = Number(groupId);
const bId = Number(bookId);
const loadData = useCallback(async () => {
if (!gId || !bId) return;
setLoading(true);
try {
const [bookData, schedData, progData] = await Promise.all([
groupsApi.getGroupBook(gId, bId),
groupsApi.getSchedule(gId, bId).catch(() => [] as ReadingSchedule[]),
groupsApi.getProgress(gId, bId).catch(() => [] as MemberProgress[]),
]);
setBook(bookData);
setSections(bookData.sections ?? []);
setSchedules(schedData);
setProgress(progData);
} catch (err) {
setError(getApiErrorMessage(err, "Failed to load book"));
} finally {
setLoading(false);
}
}, [gId, bId]);
useEffect(() => {
loadData();
}, [loadData]);
const handleDetectSections = async () => {
if (!gId || !bId) return;
try {
const newSections = await groupsApi.detectSections(gId, bId);
setSections(newSections);
} catch (err) {
setError(getApiErrorMessage(err, "Failed to detect sections"));
}
};
const handleMerge = async () => {
if (selectedForMerge.length < 2 || !gId || !bId) return;
try {
await groupsApi.adjustSections(gId, bId, {
operation: "merge",
section_ids: selectedForMerge,
});
setSelectedForMerge([]);
await loadData();
} catch (err) {
setError(getApiErrorMessage(err, "Failed to merge sections"));
}
};
const handleSplit = async () => {
if (!splitSectionId || !gId || !bId) return;
try {
await groupsApi.adjustSections(gId, bId, {
operation: "split",
section_ids: [splitSectionId],
split_at: splitAt,
});
setSplitSectionId(null);
await loadData();
} catch (err) {
setError(getApiErrorMessage(err, "Failed to split section"));
}
};
const handleGenerateSchedule = async () => {
if (!gId || !bId) return;
try {
const newSched = await groupsApi.generateSchedule(gId, bId, 4);
setSchedules(newSched);
} catch (err) {
setError(getApiErrorMessage(err, "Failed to generate schedule"));
}
};
const toggleMergeSelect = (id: number) => {
setSelectedForMerge((prev) =>
prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id]
);
};
const formatMinutes = (mins: number): string => {
if (mins < 60) return `${mins}m`;
const h = Math.floor(mins / 60);
const m = mins % 60;
return m > 0 ? `${h}h ${m}m` : `${h}h`;
};
if (loading) {
return (
<div style={{ maxWidth: 800, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
<p style={{ textAlign: "center", color: "#888", padding: 40 }}>{t("common.loading")}</p>
</div>
);
}
if (!book) {
return (
<div style={{ maxWidth: 800, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
<p style={{ textAlign: "center", color: "#e74c3c", padding: 40 }}>Book not found</p>
<button onClick={() => navigate(`/groups/${groupId}`)} style={{ display: "block", margin: "0 auto" }}> Back</button>
</div>
);
}
return (
<div style={{ maxWidth: 800, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
{/* Header */}
<header style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "16px 0", borderBottom: "1px solid #eee", marginBottom: 20 }}>
<div>
<h1 style={{ fontSize: 24, fontWeight: 700, color: "#1a1a2e", margin: 0 }}>{book.title}</h1>
<p style={{ margin: 4, fontSize: 13, color: "#888" }}>
{book.ebook.author && `by ${book.ebook.author} · `}
{book.ebook.page_count} chapters · {book.ebook.format.toUpperCase()}
</p>
</div>
<button onClick={() => navigate(`/groups/${groupId}`)} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>
{t("common.back")}
</button>
</header>
{error && (
<div style={{ background: "#fde8e8", padding: 12, borderRadius: 6, color: "#e74c3c", fontSize: 14, marginBottom: 16 }}>
{error}
<button onClick={() => setError(null)} style={{ marginLeft: 12, background: "none", border: "none", cursor: "pointer", fontWeight: 600 }}></button>
</div>
)}
{/* Tabs */}
<div style={{ display: "flex", gap: 4, marginBottom: 20, background: "#eee", borderRadius: 8, padding: 4 }}>
{(["sections", "schedule", "progress"] as const).map((t) => (
<button
key={t}
onClick={() => setTab(t)}
style={{
flex: 1, padding: "10px 16px", borderRadius: 6, border: "none",
fontSize: 14, fontWeight: 600, cursor: "pointer",
background: tab === t ? "#fff" : "transparent",
color: tab === t ? "#1a1a2e" : "#888",
boxShadow: tab === t ? "0 1px 4px rgba(0,0,0,0.1)" : "none",
}}
>
{t === "sections" ? t("groups.sections") : t === "schedule" ? t("groups.schedule") : t("groups.progress")}
</button>
))}
</div>
{/* Sections Tab */}
{tab === "sections" && (
<section>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
<h2 style={{ fontSize: 18, fontWeight: 600, color: "#1a1a2e", margin: 0 }}>
{sections.length} {t("groups.sections")}
</h2>
<div style={{ display: "flex", gap: 8 }}>
<button
onClick={handleDetectSections}
style={{ padding: "8px 16px", borderRadius: 6, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 13, fontWeight: 600, cursor: "pointer" }}
>
{t("groups.detectSections")}
</button>
</div>
</div>
{/* Merge controls */}
<div style={{ background: "#fff", padding: 16, borderRadius: 10, marginBottom: 12, boxShadow: "0 1px 4px rgba(0,0,0,0.06)" }}>
<div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
<span style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>{t("groups.mergeSections")}:</span>
<span style={{ fontSize: 13, color: "#888" }}>
{selectedForMerge.length === 0
? t("groups.selectSectionsHint")
: `${selectedForMerge.length} selected`}
</span>
{selectedForMerge.length >= 2 && (
<button
onClick={handleMerge}
style={{ padding: "6px 14px", borderRadius: 6, border: "none", background: "#27ae60", color: "#fff", fontSize: 13, fontWeight: 600, cursor: "pointer" }}
>
{t("groups.merge")}
</button>
)}
{selectedForMerge.length > 0 && (
<button
onClick={() => setSelectedForMerge([])}
style={{ padding: "6px 12px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", fontSize: 13, cursor: "pointer" }}
>
{t("groups.clear")}
</button>
)}
</div>
</div>
{sections.length === 0 ? (
<div style={{ textAlign: "center", padding: 40, color: "#888" }}>
<p style={{ fontSize: 16 }}>{t("groups.noSections")}</p>
<p style={{ fontSize: 14 }}>{t("groups.noSectionsHint")}</p>
</div>
) : (
<div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
{sections.map((section) => (
<div
key={section.id}
style={{
background: selectedForMerge.includes(section.id) ? "#e8f0fe" : "#fff",
border: selectedForMerge.includes(section.id) ? "2px solid #1a1a2e" : "1px solid #eee",
padding: 16, borderRadius: 10, cursor: "pointer",
boxShadow: "0 1px 4px rgba(0,0,0,0.06)",
transition: "all 0.15s",
}}
onClick={() => toggleMergeSelect(section.id)}
>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
<div style={{ flex: 1 }}>
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
<span style={{
background: "#1a1a2e", color: "#fff", borderRadius: 20,
width: 26, height: 26, display: "flex", alignItems: "center", justifyContent: "center",
fontSize: 13, fontWeight: 700, flexShrink: 0,
}}>
{section.order}
</span>
<h3 style={{ margin: 0, fontSize: 15, fontWeight: 600, color: "#1a1a2e" }}>{section.title}</h3>
</div>
<p style={{ margin: "6px 0 0 34px", fontSize: 13, color: "#888" }}>
Ch. {section.start_chapter_index}{section.end_chapter_index - 1} · ~{formatMinutes(section.estimated_reading_minutes)} reading time
</p>
</div>
<button
onClick={(e) => {
e.stopPropagation();
setSplitSectionId(splitSectionId === section.id ? null : section.id);
}}
style={{
padding: "4px 10px", borderRadius: 4, border: "1px solid #ddd",
background: splitSectionId === section.id ? "#1a1a2e" : "#fff",
color: splitSectionId === section.id ? "#fff" : "#666",
fontSize: 12, cursor: "pointer", flexShrink: 0,
}}
>
{t("groups.split")}
</button>
</div>
{splitSectionId === section.id && (
<div
style={{ marginTop: 10, padding: 10, background: "#f8f9fa", borderRadius: 6, display: "flex", alignItems: "center", gap: 8 }}
onClick={(e) => e.stopPropagation()}
>
<span style={{ fontSize: 13 }}>{t("groups.splitInto")}</span>
<input
type="number"
value={splitAt}
min={2}
max={10}
onChange={(e) => setSplitAt(Number(e.target.value))}
style={{ width: 50, padding: "4px 8px", borderRadius: 4, border: "1px solid #ddd", fontSize: 13, textAlign: "center" }}
/>
<span style={{ fontSize: 13 }}>{t("groups.parts")}</span>
<button
onClick={handleSplit}
style={{ padding: "4px 12px", borderRadius: 4, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 12, cursor: "pointer" }}
>
{t("groups.splitBtn")}
</button>
</div>
)}
</div>
))}
</div>
)}
</section>
)}
{/* Schedule Tab */}
{tab === "schedule" && (
<section>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
<h2 style={{ fontSize: 18, fontWeight: 600, color: "#1a1a2e", margin: 0 }}>
{t("groups.readingSchedule")}
</h2>
<button
onClick={handleGenerateSchedule}
style={{ padding: "8px 16px", borderRadius: 6, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 13, fontWeight: 600, cursor: "pointer" }}
>
{t("groups.generateSchedule")}
</button>
</div>
{schedules.length === 0 ? (
<div style={{ textAlign: "center", padding: 40, color: "#888" }}>
<p style={{ fontSize: 16 }}>{t("groups.noSchedule")}</p>
<p style={{ fontSize: 14 }}>{t("groups.noScheduleHint")}</p>
</div>
) : (
<div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
{schedules.map((s) => (
<div
key={s.id}
style={{ background: "#fff", padding: 20, borderRadius: 12, boxShadow: "0 2px 8px rgba(0,0,0,0.06)" }}
>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
<div>
<h3 style={{ margin: 0, fontSize: 17, fontWeight: 700, color: "#1a1a2e" }}>
{t("groups.meeting")} {s.meeting_number}
</h3>
<p style={{ margin: "4px 0 0", fontSize: 13, color: "#888" }}>
Week of {new Date(s.week_date).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}
</p>
</div>
<span style={{
background: "#f0f0f0", padding: "6px 12px", borderRadius: 20,
fontSize: 13, fontWeight: 600, color: "#555",
}}>
{s.section_details.reduce((sum, sec) => sum + sec.estimated_reading_minutes, 0) > 0
? `~${formatMinutes(s.section_details.reduce((sum, sec) => sum + sec.estimated_reading_minutes, 0))}`
: ""}
</span>
</div>
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
{s.section_details.map((sec) => (
<div
key={sec.id}
style={{
display: "flex", alignItems: "center", gap: 10, padding: "8px 12px",
background: "#f8f9fa", borderRadius: 6, fontSize: 14,
}}
>
<span style={{
background: "#1a1a2e", color: "#fff", borderRadius: 12,
width: 22, height: 22, display: "flex", alignItems: "center", justifyContent: "center",
fontSize: 11, fontWeight: 700, flexShrink: 0,
}}>
{sec.order}
</span>
<span style={{ flex: 1 }}>{sec.title}</span>
<span style={{ fontSize: 12, color: "#999" }}>{formatMinutes(sec.estimated_reading_minutes)}</span>
</div>
))}
</div>
</div>
))}
</div>
)}
</section>
)}
{/* Progress Tab */}
{tab === "progress" && (
<section>
<h2 style={{ fontSize: 18, fontWeight: 600, color: "#1a1a2e", margin: "0 0 16px" }}>
{t("groups.memberProgress")}
</h2>
{progress.length === 0 ? (
<div style={{ textAlign: "center", padding: 40, color: "#888" }}>
<p style={{ fontSize: 16 }}>{t("groups.noProgress")}</p>
<p style={{ fontSize: 14 }}>{t("groups.noProgressHint")}</p>
</div>
) : (
<div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
{progress.map((p) => {
const totalSections = sections.length;
const completed = p.completed_sections.length;
const pct = totalSections > 0 ? Math.round((completed / totalSections) * 100) : 0;
return (
<div
key={p.id}
style={{ background: "#fff", padding: 16, borderRadius: 10, boxShadow: "0 1px 4px rgba(0,0,0,0.06)" }}
>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
<span style={{ fontSize: 15, fontWeight: 600 }}>{p.user_email}</span>
<span style={{ fontSize: 13, color: "#888" }}>{completed}/{totalSections} · {pct}%</span>
</div>
<div style={{ height: 6, background: "#eee", borderRadius: 3, overflow: "hidden" }}>
<div
style={{
height: "100%", borderRadius: 3,
background: "linear-gradient(90deg, #27ae60, #2ecc71)",
width: `${pct}%`, transition: "width 0.3s",
}}
/>
</div>
{p.current_section_title && (
<p style={{ margin: "8px 0 0", fontSize: 13, color: "#888" }}>
Currently: {p.current_section_title}
</p>
)}
</div>
);
})}
</div>
)}
</section>
)}
</div>
);
}
-381
View File
@@ -1,381 +0,0 @@
import React, { useCallback, useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useTranslation } from "react-i18n-lite";
import { groupsApi } from "../api/groups";
import type {
AdminProgressSummary,
MemberProgressEntry,
ReadingGroupDetail,
} from "../types/groups";
import { useMediaQuery, BREAKPOINTS } from "../hooks/useMediaQuery";
function isDetail(entry: MemberProgressEntry): entry is { user_id: number; is_public: boolean; id: number } {
return "id" in entry && "is_public" in entry;
}
export function GroupDetailPage() {
const { t } = useTranslation();
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const isMobile = useMediaQuery(BREAKPOINTS.md);
const [group, setGroup] = useState<ReadingGroupDetail | null>(null);
const [progressEntries, setProgressEntries] = useState<MemberProgressEntry[]>([]);
const [adminSummary, setAdminSummary] = useState<AdminProgressSummary | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [tab, setTab] = useState<"progress" | "admin">("progress");
const isAdmin = group?.members.some(
(m) => m.user_id === (group as ReadingGroupDetail & { _myUserId?: number })._myUserId && m.role === "admin",
);
const loadGroup = useCallback(async () => {
if (!id) return;
setLoading(true);
setError(null);
try {
const groupId = Number(id);
if (Number.isNaN(groupId)) {
setError(t("groupDetail.invalidId") ?? "Invalid group ID");
return;
}
const [groupData, progressData] = await Promise.all([
groupsApi.getGroup(groupId),
groupsApi.getMembersProgress(groupId).catch(() => [] as MemberProgressEntry[]),
]);
setGroup(groupData);
setProgressEntries(progressData);
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to load group");
} finally {
setLoading(false);
}
}, [id, t]);
const loadAdminSummary = useCallback(async () => {
if (!id || !isAdmin) return;
try {
const summary = await groupsApi.getProgressSummary(Number(id));
setAdminSummary(summary);
} catch {
// Admin summary is optional
}
}, [id, isAdmin]);
useEffect(() => {
void loadGroup();
}, [loadGroup]);
useEffect(() => {
if (tab === "admin") {
void loadAdminSummary();
}
}, [tab, loadAdminSummary]);
const handleJoin = useCallback(async () => {
if (!id) return;
try {
await groupsApi.joinGroup(Number(id));
void loadGroup();
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to join");
}
}, [id, loadGroup]);
const handleLeave = useCallback(async () => {
if (!id) return;
try {
await groupsApi.leaveGroup(Number(id));
navigate("/groups");
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to leave");
}
}, [id, navigate]);
const containerStyle: React.CSSProperties = {
maxWidth: 720,
margin: "0 auto",
padding: isMobile ? 16 : 24,
minHeight: "100vh",
background: "#f8f9fa",
};
const backButtonStyle: React.CSSProperties = {
display: "inline-flex",
alignItems: "center",
gap: 4,
padding: isMobile ? "10px 16px" : "8px 16px",
borderRadius: 8,
border: "1px solid #e5e7eb",
background: "#fff",
color: "#374151",
fontSize: isMobile ? 15 : 14,
cursor: "pointer",
marginBottom: 20,
minHeight: 44,
};
const tabBarStyle: React.CSSProperties = {
display: "flex",
gap: 0,
marginBottom: 20,
borderBottom: "2px solid #e5e7eb",
};
const tabStyle = (active: boolean): React.CSSProperties => ({
padding: "10px 20px",
fontSize: 14,
fontWeight: active ? 600 : 400,
color: active ? "#4f46e5" : "#6b7280",
background: "transparent",
border: "none",
borderBottom: active ? "2px solid #4f46e5" : "2px solid transparent",
cursor: "pointer",
marginBottom: -2,
});
if (loading) {
return (
<div style={containerStyle}>
<div style={{ height: 32, width: 100, background: "#e5e7eb", borderRadius: 6, marginBottom: 20 }} />
<div style={{ height: 28, width: "50%", background: "#e5e7eb", borderRadius: 6, marginBottom: 16 }} />
{[1, 2, 3].map((i) => (
<div key={i} style={{ height: 60, background: "#e5e7eb", borderRadius: 8, marginBottom: 8 }} />
))}
</div>
);
}
if (error || !group) {
return (
<div style={containerStyle}>
<button onClick={() => navigate("/groups")} style={backButtonStyle}>
{t("groupDetail.back") ?? "Back"}
</button>
<div style={{ textAlign: "center", padding: "60px 20px" }}>
<div style={{ fontSize: 48, marginBottom: 16 }}>😕</div>
<p style={{ color: "#6b7280", fontSize: 16 }}>
{error ?? (t("groupDetail.notFound") ?? "Group not found")}
</p>
</div>
</div>
);
}
const isMember = group.members.some((m) => {
// Determine membership by matching progress data — user_id can come from members list
// We check if there's a progress entry with an "id" (indicates own data)
return progressEntries.some((e) => "id" in e);
});
return (
<div style={containerStyle}>
<button onClick={() => navigate("/groups")} style={backButtonStyle}>
{t("groupDetail.back") ?? "Back to Groups"}
</button>
{/* Header */}
<div style={{ marginBottom: 20 }}>
<h1 style={{ fontSize: isMobile ? 20 : 24, fontWeight: 700, color: "#1f2937", margin: "0 0 4px" }}>
{group.name}
</h1>
<p style={{ fontSize: 14, color: "#6b7280", margin: 0 }}>
{group.ebook_title} {group.ebook_author ? `${group.ebook_author}` : ""}
</p>
</div>
{/* Group actions */}
<div style={{ display: "flex", gap: 10, marginBottom: 20, flexWrap: "wrap" }}>
{!isMember ? (
<button
onClick={() => void handleJoin()}
style={{
padding: "10px 20px", borderRadius: 10, border: "none", background: "#4f46e5",
color: "#fff", fontSize: 14, fontWeight: 600, cursor: "pointer",
}}
>
{t("groupDetail.join") ?? "Join Group"}
</button>
) : (
<>
<span style={{
fontSize: 13, color: "#16a34a", background: "#dcfce7",
padding: "4px 12px", borderRadius: 999, display: "inline-flex", alignItems: "center",
}}>
{t("groupDetail.member") ?? "Member"}
</span>
{group.created_by_email !== undefined /* can't check identity here, but leave is always available for non-creators */ && (
<button
onClick={() => void handleLeave()}
style={{
padding: "10px 20px", borderRadius: 10, border: "1px solid #fca5a5",
background: "#fff", color: "#b91c1c", fontSize: 14, cursor: "pointer",
}}
>
{t("groupDetail.leave") ?? "Leave Group"}
</button>
)}
</>
)}
</div>
{group.description && (
<p style={{ fontSize: 14, color: "#4b5563", marginBottom: 20, lineHeight: 1.6, background: "#fff", padding: isMobile ? 12 : 16, borderRadius: 10, border: "1px solid #e5e7eb" }}>
{group.description}
</p>
)}
{/* Tabs */}
<div style={tabBarStyle}>
<button style={tabStyle(tab === "progress")} onClick={() => setTab("progress")}>
{t("groupDetail.progressTab") ?? "Progress"}
</button>
{isAdmin && (
<button style={tabStyle(tab === "admin")} onClick={() => setTab("admin")}>
{t("groupDetail.adminTab") ?? "Admin Summary"}
</button>
)}
</div>
{/* Progress tab */}
{tab === "progress" && (
<div>
{progressEntries.length === 0 ? (
<div style={{ textAlign: "center", padding: "40px 20px", color: "#9ca3af" }}>
<p>{t("groupDetail.noProgress") ?? "No progress data yet."}</p>
</div>
) : (
progressEntries.map((entry) => {
const isPrivate = "is_public" in entry && entry.is_public === false && "note" in entry;
const hasDetail = isDetail(entry);
return (
<div
key={entry.user_id}
style={{
background: "#fff", borderRadius: 10, padding: isMobile ? 12 : 16,
marginBottom: 10, border: "1px solid #e5e7eb",
boxShadow: "0 1px 3px rgba(0,0,0,0.04)",
}}
>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
<span style={{ fontSize: 15, fontWeight: 600, color: "#1f2937" }}>
{entry.user_email}
{hasDetail && " (you)"}
</span>
{isPrivate ? (
<span style={{ fontSize: 12, color: "#9ca3af", fontStyle: "italic" }}>
🔒 {t("groupDetail.private") ?? "Private"}
</span>
) : "section_label" in entry && (
<span style={{ fontSize: 13, color: "#4f46e5", fontWeight: 500 }}>
{entry.section_label}
</span>
)}
</div>
{!isPrivate && "percentage" in entry && (
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>
<div style={{
flex: 1, height: 8, borderRadius: 4, background: "#e5e7eb", overflow: "hidden",
}}>
<div style={{
height: "100%",
width: `${Math.min(100, entry.percentage)}%`,
background: hasDetail ? "#4f46e5" : "#818cf8",
borderRadius: 4,
transition: "width 0.3s ease",
}} />
</div>
<span style={{ fontSize: 13, fontWeight: 600, color: "#374151", whiteSpace: "nowrap" }}>
{Math.round(entry.percentage)}%
</span>
</div>
)}
{hasDetail && entry.last_position && Object.keys(entry.last_position).length > 0 && (
<div style={{ marginTop: 8, fontSize: 12, color: "#9ca3af" }}>
{t("groupDetail.lastPosition") ?? "Last position"}: {JSON.stringify(entry.last_position)}
</div>
)}
</div>
);
})
)}
</div>
)}
{/* Admin tab */}
{tab === "admin" && adminSummary && (
<div>
<div style={{
display: "grid",
gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))",
gap: 12,
marginBottom: 24,
}}>
<StatCard
label={t("groupDetail.totalMembers") ?? "Members"}
value={String(adminSummary.total_members)}
/>
<StatCard
label={t("groupDetail.started") ?? "Started"}
value={String(adminSummary.members_started)}
/>
<StatCard
label={t("groupDetail.finished") ?? "Finished"}
value={String(adminSummary.members_finished)}
/>
<StatCard
label={t("groupDetail.avgProgress") ?? "Avg Progress"}
value={`${Math.round(adminSummary.average_percentage)}%`}
/>
<StatCard
label={t("groupDetail.avgTime") ?? "Avg Time"}
value={`${adminSummary.average_time_spent_hours}h`}
/>
</div>
<h3 style={{ fontSize: 15, fontWeight: 600, color: "#1f2937", marginBottom: 12 }}>
{t("groupDetail.memberDetails") ?? "Member Details"}
</h3>
{adminSummary.member_details.map((m) => (
<div
key={m.user_id}
style={{
background: "#fff", borderRadius: 10, padding: isMobile ? 12 : 14,
marginBottom: 8, border: "1px solid #e5e7eb",
display: "flex", justifyContent: "space-between", alignItems: "center",
}}
>
<div>
<span style={{ fontSize: 14, fontWeight: 500, color: "#1f2937" }}>{m.user_email}</span>
<span style={{ fontSize: 12, color: "#9ca3af", marginLeft: 8 }}>
{m.is_public ? "👁" : "🔒"}
</span>
</div>
<div style={{ display: "flex", gap: 16, fontSize: 13, color: "#6b7280" }}>
<span>Section {m.current_section}</span>
<span style={{ fontWeight: 600, color: "#4f46e5" }}>{Math.round(m.percentage)}%</span>
<span> {Math.round(m.time_spent_seconds / 60)}m</span>
</div>
</div>
))}
</div>
)}
</div>
);
}
function StatCard({ label, value }: { label: string; value: string }) {
return (
<div style={{
background: "#fff", borderRadius: 10, padding: "14px 16px",
border: "1px solid #e5e7eb", textAlign: "center",
}}>
<div style={{ fontSize: 22, fontWeight: 700, color: "#4f46e5" }}>{value}</div>
<div style={{ fontSize: 12, color: "#6b7280", marginTop: 2 }}>{label}</div>
</div>
);
}
+300
View File
@@ -0,0 +1,300 @@
import React, { useCallback, useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useTranslation } from "react-i18n-lite";
import { groupsApi } from "../api/groups";
import { booksApi } from "../api/books";
import { getApiErrorMessage } from "../api/errors";
import type { ReadingGroupDetail, GroupBook, GroupBookDetail } from "../types/group";
import type { EBookListItem } from "../types/book";
export function GroupDetailPage() {
const { t } = useTranslation();
const navigate = useNavigate();
const { groupId } = useParams<{ groupId: string }>();
const [group, setGroup] = useState<ReadingGroupDetail | null>(null);
const [books, setBooks] = useState<GroupBook[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
// Upload state
const [showUpload, setShowUpload] = useState(false);
const [ebooks, setEbooks] = useState<EBookListItem[]>([]);
const [selectedEbookId, setSelectedEbookId] = useState<number | null>(null);
const [uploading, setUploading] = useState(false);
// Add member state
const [showAddMember, setShowAddMember] = useState(false);
const [memberEmail, setMemberEmail] = useState("");
const [adding, setAdding] = useState(false);
const id = Number(groupId);
const loadData = useCallback(async () => {
if (!id) return;
setLoading(true);
try {
const [groupData, bookData] = await Promise.all([
groupsApi.getGroup(id),
groupsApi.listGroupBooks(id),
]);
setGroup(groupData);
setBooks(bookData);
} catch (err) {
setError(getApiErrorMessage(err, "Failed to load group"));
} finally {
setLoading(false);
}
}, [id]);
useEffect(() => {
loadData();
}, [loadData]);
const handleUploadClick = async () => {
setShowUpload(true);
try {
const ebookList = await booksApi.getEBooks();
setEbooks(ebookList.filter((e) => e.format === "epub"));
} catch {
// Ebook list fetch failed silently
}
};
const handleUpload = async () => {
if (!selectedEbookId || !id) return;
setUploading(true);
try {
const created = await groupsApi.createGroupBook(id, { ebook_id: selectedEbookId });
setShowUpload(false);
setSelectedEbookId(null);
await loadData();
} catch (err) {
setError(getApiErrorMessage(err, "Failed to upload book to group"));
} finally {
setUploading(false);
}
};
const handleAddMember = async (e: React.FormEvent) => {
e.preventDefault();
if (!memberEmail.trim() || !id) return;
setAdding(true);
try {
// Note: In a real implementation, we'd look up user by email.
// For now this requires user_id. Email lookup would be an enhancement.
await groupsApi.addMember(id, { user_id: Number(memberEmail) });
setShowAddMember(false);
setMemberEmail("");
await loadData();
} catch (err) {
setError(getApiErrorMessage(err, "Failed to add member. Please use a valid user ID."));
} finally {
setAdding(false);
}
};
const handleRemoveMember = async (userId: number) => {
if (!id) return;
try {
await groupsApi.removeMember(id, { user_id: userId });
await loadData();
} catch (err) {
setError(getApiErrorMessage(err, "Failed to remove member"));
}
};
if (loading) {
return (
<div style={{ maxWidth: 700, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
<p style={{ textAlign: "center", color: "#888", padding: 40 }}>{t("common.loading")}</p>
</div>
);
}
if (!group) {
return (
<div style={{ maxWidth: 700, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
<p style={{ textAlign: "center", color: "#e74c3c", padding: 40 }}>Group not found</p>
<button onClick={() => navigate("/groups")} style={{ display: "block", margin: "0 auto" }}> Back to Groups</button>
</div>
);
}
return (
<div style={{ maxWidth: 700, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
<header style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "16px 0", borderBottom: "1px solid #eee", marginBottom: 20 }}>
<div>
<h1 style={{ fontSize: 24, fontWeight: 700, color: "#1a1a2e", margin: 0 }}>{group.name}</h1>
{group.description && <p style={{ margin: "4px 0 0", fontSize: 14, color: "#666" }}>{group.description}</p>}
</div>
<button onClick={() => navigate("/groups")} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>
{t("common.back")}
</button>
</header>
{error && (
<div style={{ background: "#fde8e8", padding: 12, borderRadius: 6, color: "#e74c3c", fontSize: 14, marginBottom: 16 }}>
{error}
<button onClick={() => setError(null)} style={{ marginLeft: 12, background: "none", border: "none", cursor: "pointer", fontWeight: 600 }}></button>
</div>
)}
{/* Members Section */}
<section style={{ background: "#fff", padding: 20, borderRadius: 12, marginBottom: 20, boxShadow: "0 2px 8px rgba(0,0,0,0.06)" }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
<h2 style={{ fontSize: 18, fontWeight: 600, color: "#1a1a2e", margin: 0 }}>{t("groups.members")} ({group.members.length})</h2>
<button
onClick={() => setShowAddMember(!showAddMember)}
style={{ padding: "6px 14px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 13 }}
>
{showAddMember ? t("groups.cancel") : `+ ${t("groups.addMember")}`}
</button>
</div>
{showAddMember && (
<form onSubmit={handleAddMember} style={{ display: "flex", gap: 8, marginBottom: 12 }}>
<input
type="text"
value={memberEmail}
onChange={(e) => setMemberEmail(e.target.value)}
placeholder={t("groups.memberIdPlaceholder")}
style={{ flex: 1, padding: "8px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 14, outline: "none" }}
/>
<button
type="submit"
disabled={adding}
style={{ padding: "8px 16px", borderRadius: 6, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 14, cursor: "pointer", opacity: adding ? 0.6 : 1 }}
>
{t("groups.add")}
</button>
</form>
)}
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
{group.members.map((m) => (
<div key={m.id} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", borderBottom: "1px solid #f0f0f0" }}>
<div>
<span style={{ fontSize: 14, fontWeight: 500 }}>{m.user_email}</span>
<span style={{ marginLeft: 8, fontSize: 12, color: m.role === "admin" ? "#e67e22" : "#999", background: m.role === "admin" ? "#fef3e2" : "#f0f0f0", padding: "2px 8px", borderRadius: 4 }}>
{m.role}
</span>
</div>
{m.role !== "admin" && (
<button
onClick={() => handleRemoveMember(m.user)}
style={{ background: "none", border: "none", color: "#e74c3c", cursor: "pointer", fontSize: 13 }}
>
{t("groups.remove")}
</button>
)}
</div>
))}
</div>
</section>
{/* Books Section */}
<section style={{ background: "#fff", padding: 20, borderRadius: 12, boxShadow: "0 2px 8px rgba(0,0,0,0.06)" }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
<h2 style={{ fontSize: 18, fontWeight: 600, color: "#1a1a2e", margin: 0 }}>{t("groups.books")} ({books.length})</h2>
<button
onClick={handleUploadClick}
style={{ padding: "8px 18px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 14, fontWeight: 600, cursor: "pointer" }}
>
{t("groups.uploadEpub")}
</button>
</div>
{showUpload && (
<div style={{ background: "#f8f9fa", padding: 16, borderRadius: 8, marginBottom: 16 }}>
<h3 style={{ fontSize: 15, fontWeight: 600, margin: "0 0 12px" }}>{t("groups.selectEbook")}</h3>
{ebooks.length === 0 ? (
<div style={{ textAlign: "center", padding: 20, color: "#888" }}>
<p>{t("groups.noEpubBooks")}</p>
<button onClick={() => navigate("/add")} style={{ marginTop: 8, padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 13 }}>
{t("groups.uploadFirst")}
</button>
</div>
) : (
<div>
<div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 12, maxHeight: 200, overflowY: "auto" }}>
{ebooks.map((eb) => (
<label
key={eb.id}
style={{
display: "flex", alignItems: "center", gap: 10, padding: "10px 12px",
borderRadius: 8, cursor: "pointer", fontSize: 14,
background: selectedEbookId === eb.id ? "#e8f0fe" : "#fff",
border: selectedEbookId === eb.id ? "2px solid #1a1a2e" : "1px solid #eee",
}}
>
<input
type="radio"
name="ebook"
value={eb.id}
checked={selectedEbookId === eb.id}
onChange={() => setSelectedEbookId(eb.id)}
style={{ accentColor: "#1a1a2e" }}
/>
<div>
<strong>{eb.title}</strong>
{eb.author && <span style={{ color: "#888", marginLeft: 8 }}>by {eb.author}</span>}
<span style={{ marginLeft: 8, fontSize: 12, color: "#aaa" }}>({eb.filename})</span>
</div>
</label>
))}
</div>
<div style={{ display: "flex", gap: 8 }}>
<button
onClick={handleUpload}
disabled={!selectedEbookId || uploading}
style={{ padding: "10px 20px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 14, fontWeight: 600, cursor: uploading ? "default" : "pointer", opacity: uploading ? 0.6 : 1 }}
>
{uploading ? t("common.loading") : t("groups.confirmUpload")}
</button>
<button
onClick={() => setShowUpload(false)}
style={{ padding: "10px 20px", borderRadius: 8, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}
>
{t("groups.cancel")}
</button>
</div>
</div>
)}
</div>
)}
{books.length === 0 ? (
<p style={{ textAlign: "center", color: "#888", padding: 30 }}>{t("groups.noBooks")}</p>
) : (
<div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
{books.map((book) => (
<div
key={book.id}
onClick={() => navigate(`/groups/${groupId}/books/${book.id}`)}
style={{
display: "flex", justifyContent: "space-between", alignItems: "center",
padding: 16, borderRadius: 10, cursor: "pointer", transition: "background 0.2s",
background: book.status === "active" ? "#f0faf0" : "#fafafa",
border: book.status === "active" ? "2px solid #27ae60" : "1px solid #eee",
}}
onMouseEnter={(e) => (e.currentTarget.style.background = book.status === "active" ? "#e8f5e9" : "#f5f5f5")}
onMouseLeave={(e) => (e.currentTarget.style.background = book.status === "active" ? "#f0faf0" : "#fafafa")}
>
<div>
<h3 style={{ margin: 0, fontSize: 16, fontWeight: 600, color: "#1a1a2e" }}>
{book.title}
{book.status === "active" && (
<span style={{ marginLeft: 8, fontSize: 11, color: "#27ae60", background: "#e8f5e9", padding: "2px 8px", borderRadius: 4 }}>Active</span>
)}
</h3>
<p style={{ margin: "4px 0 0", fontSize: 13, color: "#888" }}>
{book.section_count} sections · {book.ebook.page_count} chapters · uploaded by {book.uploaded_by_email}
</p>
</div>
<span style={{ fontSize: 20, color: "#ccc" }}></span>
</div>
))}
</div>
)}
</section>
</div>
);
}
+162
View File
@@ -0,0 +1,162 @@
import React, { useCallback, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18n-lite";
import { groupsApi } from "../api/groups";
import { getApiErrorMessage } from "../api/errors";
import type { ReadingGroup } from "../types/group";
export function GroupsPage() {
const { t } = useTranslation();
const navigate = useNavigate();
const [groups, setGroups] = useState<ReadingGroup[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [showCreate, setShowCreate] = useState(false);
const [newName, setNewName] = useState("");
const [newDesc, setNewDesc] = useState("");
const [creating, setCreating] = useState(false);
const loadGroups = useCallback(async () => {
setLoading(true);
try {
const data = await groupsApi.listGroups();
setGroups(data);
} catch (err) {
setError(getApiErrorMessage(err, "Failed to load groups"));
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
loadGroups();
}, [loadGroups]);
const handleCreate = async (e: React.FormEvent) => {
e.preventDefault();
if (!newName.trim()) return;
setCreating(true);
try {
await groupsApi.createGroup({ name: newName.trim(), description: newDesc.trim() });
setShowCreate(false);
setNewName("");
setNewDesc("");
await loadGroups();
} catch (err) {
setError(getApiErrorMessage(err, "Failed to create group"));
} finally {
setCreating(false);
}
};
return (
<div style={{ maxWidth: 700, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
<header style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "16px 0", borderBottom: "1px solid #eee", marginBottom: 20 }}>
<h1 style={{ fontSize: 24, fontWeight: 700, color: "#1a1a2e", margin: 0 }}>{t("groups.title")}</h1>
<button
type="button"
onClick={() => navigate("/")}
style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}
>
{t("common.back")}
</button>
</header>
{error && (
<div style={{ background: "#fde8e8", padding: 12, borderRadius: 6, color: "#e74c3c", fontSize: 14, marginBottom: 16 }}>
{error}
<button onClick={() => setError(null)} style={{ marginLeft: 12, background: "none", border: "none", cursor: "pointer", fontWeight: 600 }}></button>
</div>
)}
<div style={{ marginBottom: 20 }}>
<button
type="button"
onClick={() => setShowCreate(!showCreate)}
style={{
padding: "12px 24px", borderRadius: 8, border: "none",
background: "#1a1a2e", color: "#fff", fontSize: 15, fontWeight: 600, cursor: "pointer",
}}
>
{showCreate ? t("groups.cancel") : t("groups.createGroup")}
</button>
</div>
{showCreate && (
<form onSubmit={handleCreate} style={{
background: "#fff", padding: 20, borderRadius: 12, marginBottom: 24,
boxShadow: "0 2px 8px rgba(0,0,0,0.06)", display: "flex", flexDirection: "column", gap: 14,
}}>
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>{t("groups.groupName")}</label>
<input
type="text"
value={newName}
onChange={(e) => setNewName(e.target.value)}
placeholder={t("groups.groupNamePlaceholder")}
style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, outline: "none" }}
required
/>
</div>
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>{t("groups.description")} ({t("common.optional")})</label>
<textarea
value={newDesc}
onChange={(e) => setNewDesc(e.target.value)}
placeholder={t("groups.descriptionPlaceholder")}
rows={3}
style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 15, outline: "none", resize: "vertical" }}
/>
</div>
<button
type="submit"
disabled={creating || !newName.trim()}
style={{
padding: "10px 20px", borderRadius: 8, border: "none",
background: "#1a1a2e", color: "#fff", fontSize: 15, fontWeight: 600,
cursor: creating ? "default" : "pointer", opacity: creating ? 0.6 : 1, alignSelf: "flex-start",
}}
>
{creating ? t("common.loading") : t("groups.create")}
</button>
</form>
)}
{loading ? (
<p style={{ textAlign: "center", color: "#888", padding: 40 }}>{t("common.loading")}</p>
) : groups.length === 0 ? (
<div style={{ textAlign: "center", padding: 40, color: "#888" }}>
<p style={{ fontSize: 16, marginBottom: 8 }}>{t("groups.noGroups")}</p>
<p style={{ fontSize: 14 }}>{t("groups.noGroupsHint")}</p>
</div>
) : (
<div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
{groups.map((group) => (
<div
key={group.id}
onClick={() => navigate(`/groups/${group.id}`)}
style={{
background: "#fff", padding: 20, borderRadius: 12, cursor: "pointer",
boxShadow: "0 2px 8px rgba(0,0,0,0.06)", transition: "box-shadow 0.2s",
display: "flex", justifyContent: "space-between", alignItems: "center",
}}
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "0 4px 16px rgba(0,0,0,0.1)")}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "0 2px 8px rgba(0,0,0,0.06)")}
>
<div>
<h3 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: "#1a1a2e" }}>{group.name}</h3>
{group.description && (
<p style={{ margin: "6px 0 0", fontSize: 14, color: "#666" }}>{group.description}</p>
)}
<p style={{ margin: "8px 0 0", fontSize: 13, color: "#999" }}>
{group.member_count} {t("groups.members")} · {t("groups.admin")}: {group.admin_email}
</p>
</div>
<span style={{ fontSize: 20, color: "#ccc" }}></span>
</div>
))}
</div>
)}
</div>
);
}
-2
View File
@@ -242,7 +242,6 @@ export function LibraryPage() {
<>
<button onClick={() => navigate("/add")} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title={t("library.addBook")}></button>
<button onClick={() => navigate("/bookmarks-notes")} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title={t("library.bookmarks")}>🔖</button>
<button onClick={() => navigate("/groups")} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title="Reading Groups">👥</button>
<button onClick={() => navigate("/settings")} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title={t("library.settings")}></button>
<button onClick={logout} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title={t("library.logout")}>🚪</button>
</>
@@ -250,7 +249,6 @@ export function LibraryPage() {
<>
<button onClick={() => navigate("/add")} className="btn">+ {t("library.addBook")}</button>
<button onClick={() => navigate("/bookmarks-notes")} className="btn btn-secondary">{t("library.bookmarks")}</button>
<button onClick={() => navigate("/groups")} className="btn btn-secondary">👥 Reading Groups</button>
<button onClick={() => navigate("/settings")} className="btn btn-secondary">{t("library.settings")}</button>
<button onClick={logout} className="btn btn-danger">{t("library.logout")}</button>
</>
-288
View File
@@ -1,288 +0,0 @@
import React, { useCallback, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18n-lite";
import { groupsApi } from "../api/groups";
import { booksApi } from "../api/books";
import type { ReadingGroupSummary } from "../types/groups";
import type { EBookListItem } from "../types/book";
import { useMediaQuery, BREAKPOINTS } from "../hooks/useMediaQuery";
export function ReadingGroupsPage() {
const { t } = useTranslation();
const navigate = useNavigate();
const isMobile = useMediaQuery(BREAKPOINTS.md);
const [groups, setGroups] = useState<ReadingGroupSummary[]>([]);
const [ebooks, setEbooks] = useState<EBookListItem[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [showCreate, setShowCreate] = useState(false);
const [createName, setCreateName] = useState("");
const [createEbook, setCreateEbook] = useState<number | null>(null);
const [createDesc, setCreateDesc] = useState("");
const [creating, setCreating] = useState(false);
const loadGroups = useCallback(async () => {
try {
const data = await groupsApi.listGroups();
setGroups(data);
setError(null);
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to load groups");
} finally {
setLoading(false);
}
}, []);
const loadEbooks = useCallback(async () => {
try {
const data = await booksApi.getEBooks();
setEbooks(data);
} catch {
// Ebook list is optional; groups page still works without it
}
}, []);
useEffect(() => {
void loadGroups();
void loadEbooks();
}, [loadGroups, loadEbooks]);
const handleCreate = useCallback(async () => {
if (!createName.trim() || createEbook === null) return;
setCreating(true);
try {
await groupsApi.createGroup({
name: createName.trim(),
ebook: createEbook,
description: createDesc.trim(),
});
setShowCreate(false);
setCreateName("");
setCreateEbook(null);
setCreateDesc("");
void loadGroups();
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to create group");
} finally {
setCreating(false);
}
}, [createName, createEbook, createDesc, loadGroups]);
const containerStyle: React.CSSProperties = {
maxWidth: 720,
margin: "0 auto",
padding: isMobile ? 16 : 24,
minHeight: "100vh",
background: "#f8f9fa",
};
const headerBar: React.CSSProperties = {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 24,
};
const cardStyle: React.CSSProperties = {
background: "#fff",
borderRadius: 12,
padding: isMobile ? 14 : 18,
marginBottom: 12,
cursor: "pointer",
boxShadow: "0 1px 4px rgba(0,0,0,0.06)",
border: "1px solid #e5e7eb",
};
if (loading) {
return (
<div style={containerStyle}>
<div style={{ height: 24, width: 200, background: "#e5e7eb", borderRadius: 6, marginBottom: 24 }} />
{[1, 2, 3].map((i) => (
<div key={i} style={{ ...cardStyle, cursor: "default" }}>
<div style={{ height: 20, width: "60%", background: "#e5e7eb", borderRadius: 4, marginBottom: 8 }} />
<div style={{ height: 14, width: "40%", background: "#e5e7eb", borderRadius: 4 }} />
</div>
))}
</div>
);
}
return (
<div style={containerStyle}>
<div style={headerBar}>
<h1 style={{ fontSize: isMobile ? 20 : 24, fontWeight: 700, color: "#1f2937", margin: 0 }}>
📚 {t("readingGroups.title") ?? "Reading Groups"}
</h1>
<button
onClick={() => setShowCreate(true)}
style={{
padding: isMobile ? "10px 18px" : "8px 18px",
borderRadius: 10,
border: "none",
background: "#4f46e5",
color: "#fff",
fontSize: 14,
fontWeight: 600,
cursor: "pointer",
minHeight: 40,
}}
>
+ {t("readingGroups.create") ?? "New Group"}
</button>
</div>
{error && (
<div style={{ padding: "12px 16px", background: "#fef2f2", borderRadius: 8, color: "#b91c1c", marginBottom: 16, fontSize: 14 }}>
{error}
</div>
)}
{/* Create modal */}
{showCreate && (
<div style={{
position: "fixed", inset: 0, background: "rgba(0,0,0,0.4)",
display: "flex", alignItems: "center", justifyContent: "center", zIndex: 100,
}}>
<div style={{
background: "#fff", borderRadius: 16, padding: 24, maxWidth: 420, width: "90%",
boxShadow: "0 10px 40px rgba(0,0,0,0.15)",
}}>
<h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, color: "#1f2937" }}>
{t("readingGroups.createTitle") ?? "Create Reading Group"}
</h2>
<label style={{ fontSize: 13, color: "#6b7280", display: "block", marginBottom: 4 }}>
{t("readingGroups.groupName") ?? "Group Name"}
</label>
<input
type="text"
value={createName}
onChange={(e) => setCreateName(e.target.value)}
placeholder={t("readingGroups.namePlaceholder") ?? "e.g., Book Club June"}
style={{
width: "100%", padding: "10px 14px", borderRadius: 8, border: "1px solid #d1d5db",
fontSize: 14, marginBottom: 14, boxSizing: "border-box",
}}
/>
<label style={{ fontSize: 13, color: "#6b7280", display: "block", marginBottom: 4 }}>
{t("readingGroups.selectBook") ?? "Select Book"}
</label>
<select
value={createEbook ?? ""}
onChange={(e) => setCreateEbook(e.target.value ? Number(e.target.value) : null)}
style={{
width: "100%", padding: "10px 14px", borderRadius: 8, border: "1px solid #d1d5db",
fontSize: 14, marginBottom: 14, boxSizing: "border-box", background: "#fff",
}}
>
<option value="">-- {t("readingGroups.choose") ?? "Choose"} --</option>
{ebooks.map((eb) => (
<option key={eb.id} value={eb.id}>
{eb.title} {eb.author ? `${eb.author}` : ""}
</option>
))}
</select>
<label style={{ fontSize: 13, color: "#6b7280", display: "block", marginBottom: 4 }}>
{t("readingGroups.description") ?? "Description"} ({t("common.optional") ?? "optional"})
</label>
<textarea
value={createDesc}
onChange={(e) => setCreateDesc(e.target.value)}
rows={3}
style={{
width: "100%", padding: "10px 14px", borderRadius: 8, border: "1px solid #d1d5db",
fontSize: 14, marginBottom: 18, boxSizing: "border-box", resize: "vertical",
}}
/>
<div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
<button
onClick={() => setShowCreate(false)}
style={{
padding: "10px 20px", borderRadius: 8, border: "1px solid #d1d5db",
background: "#fff", color: "#374151", fontSize: 14, cursor: "pointer",
}}
>
{t("common.cancel") ?? "Cancel"}
</button>
<button
onClick={() => void handleCreate()}
disabled={creating || !createName.trim() || createEbook === null}
style={{
padding: "10px 20px", borderRadius: 8, border: "none",
background: (!createName.trim() || createEbook === null) ? "#9ca3af" : "#4f46e5",
color: "#fff", fontSize: 14, fontWeight: 600, cursor: (!createName.trim() || createEbook === null) ? "not-allowed" : "pointer",
}}
>
{creating ? (t("common.creating") ?? "Creating...") : (t("readingGroups.create") ?? "Create")}
</button>
</div>
</div>
</div>
)}
{/* Group list */}
{groups.length === 0 ? (
<div style={{ textAlign: "center", padding: "60px 20px", color: "#6b7280" }}>
<div style={{ fontSize: 48, marginBottom: 12 }}>📖</div>
<p style={{ fontSize: 16, marginBottom: 16 }}>
{t("readingGroups.empty") ?? "No reading groups yet. Create one to read together!"}
</p>
</div>
) : (
groups.map((g) => (
<div
key={g.id}
style={cardStyle}
onClick={() => navigate(`/groups/${g.id}`)}
>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
<div>
<h2 style={{ fontSize: isMobile ? 16 : 17, fontWeight: 600, color: "#1f2937", margin: "0 0 4px" }}>
{g.name}
</h2>
<p style={{ fontSize: 13, color: "#6b7280", margin: "0 0 6px" }}>
{g.ebook_title} {g.ebook_author ? `${g.ebook_author}` : ""}
</p>
</div>
<span style={{
fontSize: 12, color: "#4f46e5", background: "#eef2ff",
padding: "2px 10px", borderRadius: 999, whiteSpace: "nowrap",
minHeight: 24, display: "inline-flex", alignItems: "center",
}}>
{g.member_count} {g.member_count === 1
? (t("readingGroups.member") ?? "member")
: (t("readingGroups.members") ?? "members")}
</span>
</div>
{g.my_progress && (
<div style={{ marginTop: 8, display: "flex", alignItems: "center", gap: 8 }}>
<div style={{
flex: 1, height: 6, borderRadius: 3, background: "#e5e7eb", overflow: "hidden",
}}>
<div style={{
height: "100%", width: `${Math.min(100, g.my_progress.percentage)}%`,
background: "#4f46e5", borderRadius: 3, transition: "width 0.3s ease",
}} />
</div>
<span style={{ fontSize: 12, color: "#6b7280", whiteSpace: "nowrap" }}>
{g.my_progress.section_label}
</span>
</div>
)}
{g.description && (
<p style={{ fontSize: 13, color: "#9ca3af", margin: "8px 0 0", lineHeight: 1.5 }}>
{g.description}
</p>
)}
</div>
))
)}
</div>
);
}
+109
View File
@@ -0,0 +1,109 @@
/** Types for reading groups, group books, sections, and schedules */
export interface ReadingGroup {
id: number;
name: string;
description: string;
admin: number;
admin_email: string;
member_count: number;
created_at: string;
updated_at: string;
}
export interface ReadingGroupDetail {
id: number;
name: string;
description: string;
admin: number;
admin_email: string;
members: GroupMembership[];
created_at: string;
updated_at: string;
}
export interface GroupMembership {
id: number;
user: number;
user_email: string;
user_username: string;
role: "admin" | "member";
joined_at: string;
}
export interface GroupBook {
id: number;
title: string;
status: "active" | "replaced";
ebook: {
id: number;
title: string;
author: string;
filename: string;
format: string;
page_count: number;
file_size: number;
cover_image: string | null;
created_at: string;
};
uploaded_by: number;
uploaded_by_email: string;
section_count: number;
created_at: string;
updated_at: string;
}
export interface Section {
id: number;
title: string;
order: number;
start_chapter_index: number;
end_chapter_index: number;
estimated_reading_minutes: number;
created_at: string;
}
export interface GroupBookDetail extends GroupBook {
sections: Section[];
schedules: ReadingSchedule[];
}
export interface ReadingSchedule {
id: number;
meeting_number: number;
week_date: string;
section_ids: number[];
section_details: Section[];
created_at: string;
}
export interface MemberProgress {
id: number;
user: number;
user_email: string;
user_username: string;
current_section: number | null;
current_section_title: string | null;
completed_sections: number[];
updated_at: string;
}
export interface CreateGroupPayload {
name: string;
description?: string;
}
export interface AddMemberPayload {
user_id: number;
}
export interface CreateGroupBookPayload {
ebook_id: number;
title?: string;
}
export interface AdjustSectionsPayload {
operation: "merge" | "split";
section_ids: number[];
split_at?: number;
}
-104
View File
@@ -1,104 +0,0 @@
/* ── Reading Groups ── */
export interface MemberProgressPublic {
user_id: number;
user_email: string;
current_section: number;
total_sections: number;
section_label: string;
percentage: number;
time_spent_seconds: number;
updated_at: string;
}
export interface MemberProgressDetail {
id: number;
user_id: number;
user_email: string;
current_section: number;
total_sections: number;
section_label: string;
percentage: number;
time_spent_seconds: number;
last_position: Record<string, unknown>;
is_public: boolean;
updated_at: string;
}
export interface MemberProgressPrivateStub {
user_id: number;
user_email: string;
is_public: false;
note: string;
}
export type MemberProgressEntry =
| MemberProgressDetail
| MemberProgressPublic
| MemberProgressPrivateStub;
export interface GroupMember {
id: number;
user_id: number;
user_email: string;
role: "member" | "admin";
joined_at: string;
progress: MemberProgressPublic | { is_public: false; note: string } | null;
}
export interface ReadingGroupSummary {
id: number;
name: string;
ebook: number;
ebook_title: string;
ebook_author: string;
created_by_email: string;
description: string;
member_count: number;
my_progress: {
current_section: number;
percentage: number;
time_spent_seconds: number;
section_label: string;
} | null;
created_at: string;
updated_at: string;
}
export interface ReadingGroupDetail extends ReadingGroupSummary {
members: GroupMember[];
}
export interface CreateGroupPayload {
name: string;
ebook: number;
description?: string;
}
export interface UpdateProgressPayload {
current_section: number;
percentage?: number;
time_spent_delta?: number;
last_position?: Record<string, unknown>;
is_public?: boolean;
}
export interface AdminProgressSummary {
group_id: number;
group_name: string;
ebook_title: string;
total_members: number;
members_started: number;
members_finished: number;
average_percentage: number;
average_time_spent_hours: number;
member_details: {
user_id: number;
user_email: string;
current_section: number;
percentage: number;
time_spent_seconds: number;
is_public: boolean;
updated_at: string;
}[];
}
+31 -19
View File
@@ -219,32 +219,44 @@ export interface ApiError {
// ---- Reading Groups ----
export interface ReadingGroupSummary {
export interface ReadingGroup {
id: number;
name: string;
ebook: number;
ebook_title: string;
ebook_author: string;
created_by_email: string;
description: string;
admin: number;
admin_email: string;
member_count: number;
my_progress: {
current_section: number;
percentage: number;
time_spent_seconds: number;
section_label: string;
} | null;
created_at: string;
updated_at: string;
}
export interface MemberProgressPublic {
user_id: number;
export interface GroupMembership {
id: number;
user: number;
user_email: string;
current_section: number;
total_sections: number;
section_label: string;
percentage: number;
time_spent_seconds: number;
updated_at: string;
user_username: string;
role: "admin" | "member";
joined_at: string;
}
export interface GroupBookSummary {
id: number;
title: string;
status: "active" | "replaced";
section_count: number;
created_at: string;
}
export interface SectionSummary {
id: number;
title: string;
order: number;
estimated_reading_minutes: number;
}
export interface ReadingScheduleEntry {
id: number;
meeting_number: number;
week_date: string;
section_ids: number[];
}
+6 -5
View File
@@ -117,10 +117,11 @@ export const API_ENDPOINTS = {
groups: {
list: "/api/groups/",
detail: (id: number) => `/api/groups/${id}/`,
membersProgress: (id: number) => `/api/groups/${id}/members/progress/`,
myProgress: (id: number) => `/api/groups/${id}/progress/`,
progressSummary: (id: number) => `/api/groups/${id}/progress/summary/`,
join: (id: number) => `/api/groups/${id}/join/`,
leave: (id: number) => `/api/groups/${id}/leave/`,
books: (groupId: number) => `/api/groups/${groupId}/books/`,
bookDetail: (groupId: number, bookId: number) => `/api/groups/${groupId}/books/${bookId}/`,
detectSections: (groupId: number, bookId: number) => `/api/groups/${groupId}/books/${bookId}/detect-sections/`,
adjustSections: (groupId: number, bookId: number) => `/api/groups/${groupId}/books/${bookId}/adjust-sections/`,
schedule: (groupId: number, bookId: number) => `/api/groups/${groupId}/books/${bookId}/schedule/`,
progress: (groupId: number, bookId: number) => `/api/groups/${groupId}/books/${bookId}/progress/`,
},
} as const;