Archived
feat: implement per-member reading progress tracking for shared books (#30)
Backend (apps/groups):
- ReadingGroup model: named groups linked to EBooks with creator tracking
- GroupMembership model: user-group association with member/admin roles
- MemberProgress model: per-member progress with section tracking,
percentage, time_spent, privacy toggles, and device-position preservation
- ReadingGroupViewSet: CRUD, join/leave, members list, progress endpoints
- GET /api/groups/{id}/members/progress/ — all members' progress
(public: section label only; own: full detail; private: stubbed)
- PATCH /api/groups/{id}/progress/ — update own progress with auto-
percentage calculation from section boundaries
- GET /api/groups/{id}/progress/summary/ — admin dashboard with
averages, started/finished counts, and per-member details
- Permissions: IsGroupMember, IsGroupAdmin
Frontend:
- Groups list page (/groups) with create modal and book selector
- Group detail page (/groups/:id) with progress and admin summary tabs
- Progress bar visualization per member with privacy-aware display
- Admin stat cards (total members, started, finished, avg progress, avg time)
- Navigation link from Library header
Shared:
- ReadingGroupSummary and MemberProgressPublic types
- API endpoint constants for groups routes
Closes #30
This commit is contained in:
Marko
@@ -12,6 +12,8 @@ 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 AuthPage = lazy(() => import("./pages/AuthPage"));
|
||||
|
||||
@@ -45,6 +47,8 @@ function AppRoutes() {
|
||||
<Route path="/add" element={<ProtectedRoute><AddBookPage /></ProtectedRoute>} />
|
||||
<Route path="/settings" element={<ProtectedRoute><SettingsPage /></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>
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
import api from "./client";
|
||||
import type {
|
||||
AdminProgressSummary,
|
||||
CreateGroupPayload,
|
||||
MemberProgressDetail,
|
||||
MemberProgressEntry,
|
||||
ReadingGroupDetail,
|
||||
ReadingGroupSummary,
|
||||
UpdateProgressPayload,
|
||||
} from "../types/groups";
|
||||
|
||||
export const groupsApi = {
|
||||
/* ── Groups ── */
|
||||
|
||||
async listGroups(): Promise<ReadingGroupSummary[]> {
|
||||
const { data } = await api.get<ReadingGroupSummary[]>("/groups/");
|
||||
if (Array.isArray(data)) return data;
|
||||
return (data as { results: ReadingGroupSummary[] }).results ?? [];
|
||||
},
|
||||
|
||||
async getGroup(id: number): Promise<ReadingGroupDetail> {
|
||||
const { data } = await api.get<ReadingGroupDetail>(`/groups/${id}/`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async createGroup(payload: CreateGroupPayload): Promise<ReadingGroupDetail> {
|
||||
const { data } = await api.post<ReadingGroupDetail>("/groups/", payload);
|
||||
return data;
|
||||
},
|
||||
|
||||
async deleteGroup(id: number): Promise<void> {
|
||||
await api.delete(`/groups/${id}/`);
|
||||
},
|
||||
|
||||
/* ── Membership ── */
|
||||
|
||||
async joinGroup(id: number): Promise<{ detail: string }> {
|
||||
const { data } = await api.post<{ detail: string }>(`/groups/${id}/join/`);
|
||||
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(
|
||||
groupId: number,
|
||||
payload: UpdateProgressPayload,
|
||||
): Promise<MemberProgressDetail> {
|
||||
const { data } = await api.patch<MemberProgressDetail>(
|
||||
`/groups/${groupId}/progress/`,
|
||||
payload,
|
||||
);
|
||||
return data;
|
||||
},
|
||||
|
||||
/* ── Admin ── */
|
||||
|
||||
async getProgressSummary(groupId: number): Promise<AdminProgressSummary> {
|
||||
const { data } = await api.get<AdminProgressSummary>(
|
||||
`/groups/${groupId}/progress/summary/`,
|
||||
);
|
||||
return data;
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,381 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -242,6 +242,7 @@ 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>
|
||||
</>
|
||||
@@ -249,6 +250,7 @@ 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>
|
||||
</>
|
||||
|
||||
@@ -0,0 +1,288 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
/* ── 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;
|
||||
}[];
|
||||
}
|
||||
Reference in New Issue
Block a user