Archived
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
This commit is contained in:
Marko
@@ -12,6 +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 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"));
|
||||
|
||||
@@ -44,6 +47,9 @@ 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="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
|
||||
@@ -0,0 +1,151 @@
|
||||
import api from "./client";
|
||||
import type {
|
||||
AddMemberPayload,
|
||||
AdjustSectionsPayload,
|
||||
CreateGroupBookPayload,
|
||||
CreateGroupPayload,
|
||||
GroupBook,
|
||||
GroupBookDetail,
|
||||
MemberProgress,
|
||||
ReadingGroup,
|
||||
ReadingGroupDetail,
|
||||
ReadingSchedule,
|
||||
Section,
|
||||
} from "../types/group";
|
||||
|
||||
export const groupsApi = {
|
||||
// ---- Reading Groups ----
|
||||
|
||||
async listGroups(): Promise<ReadingGroup[]> {
|
||||
const { data } = await api.get<{ count: number; results: ReadingGroup[] } | ReadingGroup[]>(
|
||||
"/groups/"
|
||||
);
|
||||
if (Array.isArray(data)) return data;
|
||||
return data.results ?? [];
|
||||
},
|
||||
|
||||
async getGroup(id: number): Promise<ReadingGroupDetail> {
|
||||
const { data } = await api.get<ReadingGroupDetail>(`/groups/${id}/`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async createGroup(payload: CreateGroupPayload): Promise<ReadingGroup> {
|
||||
const { data } = await api.post<ReadingGroup>("/groups/", payload);
|
||||
return data;
|
||||
},
|
||||
|
||||
async deleteGroup(id: number): Promise<void> {
|
||||
await api.delete(`/groups/${id}/`);
|
||||
},
|
||||
|
||||
async addMember(groupId: number, payload: AddMemberPayload): Promise<void> {
|
||||
await api.post(`/groups/${groupId}/add_member/`, payload);
|
||||
},
|
||||
|
||||
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 createGroupBook(
|
||||
groupId: number,
|
||||
payload: CreateGroupBookPayload
|
||||
): Promise<GroupBookDetail> {
|
||||
const { data } = await api.post<GroupBookDetail>(
|
||||
`/groups/${groupId}/books/`,
|
||||
payload
|
||||
);
|
||||
return data;
|
||||
},
|
||||
|
||||
async deleteGroupBook(groupId: number, bookId: number): Promise<void> {
|
||||
await api.delete(`/groups/${groupId}/books/${bookId}/`);
|
||||
},
|
||||
|
||||
// ---- 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;
|
||||
},
|
||||
};
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user