Archived
feat: implement group creation and management (US #28)
Backend: - Add groups Django app with models: Group, GroupMember, GroupInvite, JoinRequest - Create serializers with business rule validation - Implement GroupViewSet with full CRUD + custom actions (members, invites, roles, leave, join requests) - Add JoinGroupViewSet for invite-based joining flow - Register app in Django config and URL routing Frontend: - Add shared types for groups to @cloud-reader/shared - Create groups API client (groupsApi) - Build GroupsListPage, GroupDetailPage (member mgmt, invites, role transfer) - Build CreateGroupPage and JoinGroupPage - Add lazy-loaded routes to App.tsx with ProtectedRoute - Add navigation links to Library header Ref: #28
This commit is contained in:
Marko
@@ -12,6 +12,10 @@ 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 GroupsListPage = lazy(() => import("./pages/GroupsListPage").then((m) => ({ default: m.GroupsListPage })));
|
||||
const GroupDetailPage = lazy(() => import("./pages/GroupDetailPage").then((m) => ({ default: m.GroupDetailPage })));
|
||||
const CreateGroupPage = lazy(() => import("./pages/CreateGroupPage").then((m) => ({ default: m.CreateGroupPage })));
|
||||
const JoinGroupPage = lazy(() => import("./pages/JoinGroupPage").then((m) => ({ default: m.JoinGroupPage })));
|
||||
|
||||
const AuthPage = lazy(() => import("./pages/AuthPage"));
|
||||
|
||||
@@ -45,6 +49,10 @@ 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><GroupsListPage /></ProtectedRoute>} />
|
||||
<Route path="/groups/create" element={<ProtectedRoute><CreateGroupPage /></ProtectedRoute>} />
|
||||
<Route path="/groups/join/:code" element={<ProtectedRoute><JoinGroupPage /></ProtectedRoute>} />
|
||||
<Route path="/groups/:id" element={<ProtectedRoute><GroupDetailPage /></ProtectedRoute>} />
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
</Suspense>
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
import api from "./client";
|
||||
import type {
|
||||
CreateGroupPayload,
|
||||
CreateInvitePayload,
|
||||
GroupDetail,
|
||||
GroupInvite,
|
||||
GroupListItem,
|
||||
InviteValidation,
|
||||
JoinRequest,
|
||||
UpdateGroupPayload,
|
||||
} from "../../packages/shared/src/types";
|
||||
|
||||
export const groupsApi = {
|
||||
// ---- Group CRUD ----
|
||||
|
||||
async listGroups(): Promise<GroupListItem[]> {
|
||||
const { data } = await api.get<{ count: number; results: GroupListItem[] } | GroupListItem[]>("/groups/");
|
||||
if (Array.isArray(data)) return data;
|
||||
return data.results ?? [];
|
||||
},
|
||||
|
||||
async getGroup(id: number): Promise<GroupDetail> {
|
||||
const { data } = await api.get<GroupDetail>(`/groups/${id}/`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async createGroup(payload: CreateGroupPayload): Promise<GroupDetail> {
|
||||
const { data } = await api.post<GroupDetail>("/groups/", payload);
|
||||
return data;
|
||||
},
|
||||
|
||||
async updateGroup(id: number, payload: UpdateGroupPayload): Promise<GroupDetail> {
|
||||
const { data } = await api.patch<GroupDetail>(`/groups/${id}/`, payload);
|
||||
return data;
|
||||
},
|
||||
|
||||
async deleteGroup(id: number): Promise<void> {
|
||||
await api.delete(`/groups/${id}/`);
|
||||
},
|
||||
|
||||
// ---- Members ----
|
||||
|
||||
async removeMember(groupId: number, userId: number): Promise<void> {
|
||||
await api.delete(`/groups/${groupId}/members/${userId}/`);
|
||||
},
|
||||
|
||||
async updateMemberRole(groupId: number, userId: number, role: "admin" | "member"): Promise<void> {
|
||||
await api.patch(`/groups/${groupId}/members/${userId}/role/`, { role });
|
||||
},
|
||||
|
||||
async leaveGroup(groupId: number): Promise<{ detail: string }> {
|
||||
const { data } = await api.post<{ detail: string }>(`/groups/${groupId}/leave/`);
|
||||
return data;
|
||||
},
|
||||
|
||||
// ---- Invites ----
|
||||
|
||||
async listInvites(groupId: number): Promise<GroupInvite[]> {
|
||||
const { data } = await api.get<GroupInvite[]>(`/groups/${groupId}/invites/`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async createInvite(groupId: number, payload: CreateInvitePayload = {}): Promise<GroupInvite> {
|
||||
const { data } = await api.post<GroupInvite>(`/groups/${groupId}/invites/`, payload);
|
||||
return data;
|
||||
},
|
||||
|
||||
async revokeInvite(groupId: number, inviteId: number): Promise<void> {
|
||||
await api.delete(`/groups/${groupId}/invites/${inviteId}/`);
|
||||
},
|
||||
|
||||
// ---- Join Requests ----
|
||||
|
||||
async listJoinRequests(groupId: number): Promise<JoinRequest[]> {
|
||||
const { data } = await api.get<JoinRequest[]>(`/groups/${groupId}/requests/`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async approveRequest(groupId: number, requestId: number): Promise<JoinRequest> {
|
||||
const { data } = await api.post<JoinRequest>(`/groups/${groupId}/requests/${requestId}/approve/`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async rejectRequest(groupId: number, requestId: number): Promise<JoinRequest> {
|
||||
const { data } = await api.post<JoinRequest>(`/groups/${groupId}/requests/${requestId}/reject/`);
|
||||
return data;
|
||||
},
|
||||
|
||||
// ---- Join via Invite ----
|
||||
|
||||
async validateInvite(code: string): Promise<InviteValidation> {
|
||||
const { data } = await api.get<InviteValidation>(`/join/${code}/`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async joinViaInvite(code: string): Promise<GroupDetail> {
|
||||
const { data } = await api.post<GroupDetail>(`/join/${code}/`);
|
||||
return data;
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,104 @@
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { groupsApi } from "../api/groups";
|
||||
import { useToast } from "../hooks/useToast";
|
||||
|
||||
const S = {
|
||||
container: { maxWidth: 500, margin: "0 auto", padding: "24px 16px" } satisfies React.CSSProperties,
|
||||
backBtn: {
|
||||
background: "none", border: "none", color: "#3b82f6", fontSize: 14, cursor: "pointer",
|
||||
padding: 0, marginBottom: 16, minHeight: 44, minWidth: 44,
|
||||
} satisfies React.CSSProperties,
|
||||
title: { fontSize: 24, fontWeight: 700, marginBottom: 24 } satisfies React.CSSProperties,
|
||||
label: { display: "block", fontSize: 14, fontWeight: 500, marginBottom: 6 } satisfies React.CSSProperties,
|
||||
input: {
|
||||
width: "100%", padding: "10px 12px", border: "1px solid #d1d5db", borderRadius: 8,
|
||||
fontSize: 14, marginBottom: 16, boxSizing: "border-box" as const,
|
||||
} satisfies React.CSSProperties,
|
||||
textarea: {
|
||||
width: "100%", padding: "10px 12px", border: "1px solid #d1d5db", borderRadius: 8,
|
||||
fontSize: 14, marginBottom: 16, minHeight: 80, resize: "vertical" as const,
|
||||
boxSizing: "border-box" as const, fontFamily: "inherit",
|
||||
} satisfies React.CSSProperties,
|
||||
submitBtn: (disabled: boolean): React.CSSProperties => ({
|
||||
width: "100%", padding: "12px", backgroundColor: disabled ? "#93c5fd" : "#3b82f6",
|
||||
color: "#fff", border: "none", borderRadius: 8, fontSize: 15, fontWeight: 600,
|
||||
cursor: disabled ? "not-allowed" : "pointer", minHeight: 44,
|
||||
}),
|
||||
errorText: { color: "#ef4444", fontSize: 13, marginBottom: 12 },
|
||||
};
|
||||
|
||||
export function CreateGroupPage() {
|
||||
const navigate = useNavigate();
|
||||
const { showToast } = useToast();
|
||||
|
||||
const [name, setName] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!name.trim()) {
|
||||
setError("Group name is required.");
|
||||
return;
|
||||
}
|
||||
if (name.trim().length < 2) {
|
||||
setError("Group name must be at least 2 characters.");
|
||||
return;
|
||||
}
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
try {
|
||||
const group = await groupsApi.createGroup({
|
||||
name: name.trim(),
|
||||
description: description.trim() || undefined,
|
||||
});
|
||||
showToast({ message: "Group created!", variant: "success" });
|
||||
navigate(`/groups/${group.id}`);
|
||||
} catch (err: unknown) {
|
||||
const msg = err instanceof Error ? err.message : "Failed to create group";
|
||||
setError(msg);
|
||||
showToast({ message: msg, variant: "error" });
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={S.container}>
|
||||
<button style={S.backBtn} onClick={() => navigate("/groups")}>
|
||||
← Back to Groups
|
||||
</button>
|
||||
<h1 style={S.title}>Create a Group</h1>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
{error && <div style={S.errorText}>{error}</div>}
|
||||
|
||||
<label style={S.label} htmlFor="group-name">Group Name *</label>
|
||||
<input
|
||||
id="group-name"
|
||||
style={S.input}
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="e.g., Sci-Fi Book Club"
|
||||
maxLength={256}
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
<label style={S.label} htmlFor="group-desc">Description</label>
|
||||
<textarea
|
||||
id="group-desc"
|
||||
style={S.textarea}
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="What's this group about? (optional)"
|
||||
/>
|
||||
|
||||
<button type="submit" style={S.submitBtn(submitting || !name.trim())} disabled={submitting || !name.trim()}>
|
||||
{submitting ? "Creating..." : "Create Group"}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,334 @@
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { groupsApi } from "../api/groups";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import { useToast } from "../hooks/useToast";
|
||||
import type { GroupDetail, GroupInvite, GroupMember } from "../../packages/shared/src/types";
|
||||
|
||||
const S = {
|
||||
container: { maxWidth: 800, margin: "0 auto", padding: "24px 16px" } satisfies React.CSSProperties,
|
||||
backBtn: {
|
||||
background: "none", border: "none", color: "#3b82f6", fontSize: 14, cursor: "pointer",
|
||||
padding: 0, marginBottom: 16, minHeight: 44, minWidth: 44,
|
||||
} satisfies React.CSSProperties,
|
||||
title: { fontSize: 28, fontWeight: 700, margin: "0 0 4px 0" } satisfies React.CSSProperties,
|
||||
desc: { fontSize: 14, color: "#6b7280", margin: "0 0 20px 0" } satisfies React.CSSProperties,
|
||||
section: { marginTop: 28 } satisfies React.CSSProperties,
|
||||
sectionTitle: { fontSize: 18, fontWeight: 600, marginBottom: 12 } satisfies React.CSSProperties,
|
||||
memberItem: {
|
||||
display: "flex", justifyContent: "space-between", alignItems: "center",
|
||||
padding: "10px 0", borderBottom: "1px solid #f3f4f6",
|
||||
} satisfies React.CSSProperties,
|
||||
memberInfo: { display: "flex", flexDirection: "column" as const },
|
||||
memberName: { fontSize: 14, fontWeight: 500 } satisfies React.CSSProperties,
|
||||
memberEmail: { fontSize: 12, color: "#9ca3af" } satisfies React.CSSProperties,
|
||||
badge: (role: string): React.CSSProperties => ({
|
||||
display: "inline-block", padding: "2px 8px", borderRadius: 6, fontSize: 11, fontWeight: 600,
|
||||
backgroundColor: role === "admin" ? "#dbeafe" : "#f3f4f6",
|
||||
color: role === "admin" ? "#1d4ed8" : "#6b7280",
|
||||
}),
|
||||
removeBtn: {
|
||||
padding: "4px 12px", fontSize: 12, color: "#ef4444", background: "#fef2f2",
|
||||
border: "1px solid #fecaca", borderRadius: 6, cursor: "pointer", minHeight: 32,
|
||||
} satisfies React.CSSProperties,
|
||||
transferBtn: {
|
||||
padding: "4px 12px", fontSize: 12, color: "#3b82f6", background: "#eff6ff",
|
||||
border: "1px solid #bfdbfe", borderRadius: 6, cursor: "pointer", minHeight: 32,
|
||||
marginRight: 8,
|
||||
} satisfies React.CSSProperties,
|
||||
inviteCard: {
|
||||
padding: "12px 16px", border: "1px solid #e5e7eb", borderRadius: 8, marginBottom: 8,
|
||||
} satisfies React.CSSProperties,
|
||||
inviteCode: { fontSize: 13, fontFamily: "monospace", marginBottom: 4 } satisfies React.CSSProperties,
|
||||
inviteMeta: { fontSize: 12, color: "#9ca3af" } satisfies React.CSSProperties,
|
||||
actionBtn: (color: string): React.CSSProperties => ({
|
||||
padding: "8px 16px", backgroundColor: color, color: "#fff", border: "none",
|
||||
borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: "pointer",
|
||||
minHeight: 44, minWidth: 44,
|
||||
}),
|
||||
dangerBtn: {
|
||||
padding: "8px 16px", backgroundColor: "#ef4444", color: "#fff", border: "none",
|
||||
borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: "pointer",
|
||||
minHeight: 44, minWidth: 44,
|
||||
} satisfies React.CSSProperties,
|
||||
leaveBtn: {
|
||||
padding: "8px 16px", backgroundColor: "#fff", color: "#ef4444",
|
||||
border: "1px solid #ef4444", borderRadius: 8, fontSize: 13, fontWeight: 600,
|
||||
cursor: "pointer", minHeight: 44, minWidth: 44,
|
||||
} satisfies React.CSSProperties,
|
||||
inlineBtn: {
|
||||
padding: "4px 10px", fontSize: 12, color: "#ef4444", background: "#fef2f2",
|
||||
border: "1px solid #fecaca", borderRadius: 6, cursor: "pointer", minHeight: 28,
|
||||
} satisfies React.CSSProperties,
|
||||
copyRow: { display: "flex", gap: 8, alignItems: "center", marginBottom: 12 } satisfies React.CSSProperties,
|
||||
input: {
|
||||
flex: 1, padding: "10px 12px", border: "1px solid #d1d5db", borderRadius: 8, fontSize: 14,
|
||||
} satisfies React.CSSProperties,
|
||||
loading: { textAlign: "center" as const, padding: 60, color: "#9ca3af" },
|
||||
error: { textAlign: "center" as const, padding: 40, color: "#ef4444" },
|
||||
};
|
||||
|
||||
export function GroupDetailPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuth();
|
||||
const { showToast } = useToast();
|
||||
|
||||
const [group, setGroup] = useState<GroupDetail | null>(null);
|
||||
const [invites, setInvites] = useState<GroupInvite[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [editingName, setEditingName] = useState(false);
|
||||
const [editName, setEditName] = useState("");
|
||||
const [showInviteSection, setShowInviteSection] = useState(false);
|
||||
|
||||
const groupId = Number(id);
|
||||
const isAdmin = group?.user_role === "admin";
|
||||
|
||||
const loadGroup = useCallback(async () => {
|
||||
if (!groupId) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await groupsApi.getGroup(groupId);
|
||||
setGroup(data);
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : "Failed to load group");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [groupId]);
|
||||
|
||||
const loadInvites = useCallback(async () => {
|
||||
if (!groupId || !isAdmin) return;
|
||||
try {
|
||||
const data = await groupsApi.listInvites(groupId);
|
||||
setInvites(data);
|
||||
} catch {
|
||||
// Silently fail — invites are supplementary
|
||||
}
|
||||
}, [groupId, isAdmin]);
|
||||
|
||||
useEffect(() => {
|
||||
loadGroup();
|
||||
}, [loadGroup]);
|
||||
|
||||
useEffect(() => {
|
||||
if (group && isAdmin) loadInvites();
|
||||
}, [group, isAdmin, loadInvites]);
|
||||
|
||||
const handleRemoveMember = async (userId: number, memberEmail: string) => {
|
||||
if (!confirm(`Remove ${memberEmail} from the group?`)) return;
|
||||
try {
|
||||
await groupsApi.removeMember(groupId, userId);
|
||||
showToast({ message: "Member removed", variant: "success" });
|
||||
loadGroup();
|
||||
} catch (err: unknown) {
|
||||
showToast({ message: "Failed to remove member", variant: "error" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleTransferAdmin = async (userId: number, memberEmail: string) => {
|
||||
if (!confirm(`Transfer admin role to ${memberEmail}? You will become a regular member.`)) return;
|
||||
try {
|
||||
await groupsApi.updateMemberRole(groupId, userId, "admin");
|
||||
showToast({ message: "Admin role transferred", variant: "success" });
|
||||
loadGroup();
|
||||
} catch (err: unknown) {
|
||||
showToast({ message: "Failed to transfer admin", variant: "error" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleLeave = async () => {
|
||||
if (!confirm("Are you sure you want to leave this group?")) return;
|
||||
try {
|
||||
const result = await groupsApi.leaveGroup(groupId);
|
||||
showToast({ message: result.detail || "Left group", variant: "success" });
|
||||
navigate("/groups");
|
||||
} catch (err: unknown) {
|
||||
showToast({ message: "Failed to leave group", variant: "error" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateInvite = async () => {
|
||||
try {
|
||||
const invite = await groupsApi.createInvite(groupId);
|
||||
setInvites((prev) => [invite, ...prev]);
|
||||
showToast({ message: "Invite link created!", variant: "success" });
|
||||
} catch (err: unknown) {
|
||||
showToast({ message: "Failed to create invite", variant: "error" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleRevokeInvite = async (inviteId: number) => {
|
||||
try {
|
||||
await groupsApi.revokeInvite(groupId, inviteId);
|
||||
setInvites((prev) => prev.map((i) => (i.id === inviteId ? { ...i, is_active: false } : i)));
|
||||
showToast({ message: "Invite revoked", variant: "success" });
|
||||
} catch (err: unknown) {
|
||||
showToast({ message: "Failed to revoke invite", variant: "error" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveName = async () => {
|
||||
if (!editName.trim()) return;
|
||||
try {
|
||||
const updated = await groupsApi.updateGroup(groupId, { name: editName.trim() });
|
||||
setGroup(updated);
|
||||
setEditingName(false);
|
||||
showToast({ message: "Group name updated", variant: "success" });
|
||||
} catch (err: unknown) {
|
||||
showToast({ message: "Failed to update group", variant: "error" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteGroup = async () => {
|
||||
if (!confirm("Delete this group? This cannot be undone.")) return;
|
||||
try {
|
||||
await groupsApi.deleteGroup(groupId);
|
||||
showToast({ message: "Group deleted", variant: "success" });
|
||||
navigate("/groups");
|
||||
} catch (err: unknown) {
|
||||
showToast({ message: "Failed to delete group", variant: "error" });
|
||||
}
|
||||
};
|
||||
|
||||
const copyToClipboard = (text: string) => {
|
||||
navigator.clipboard.writeText(text).then(
|
||||
() => showToast({ message: "Link copied!" }),
|
||||
() => showToast({ message: "Failed to copy", variant: "error" }),
|
||||
);
|
||||
};
|
||||
|
||||
if (loading) return <div style={S.loading}>Loading group...</div>;
|
||||
if (error) return <div style={S.error}>{error} <br /><button onClick={loadGroup} style={{ marginTop: 12, padding: "8px 16px", cursor: "pointer", border: "1px solid #d1d5db", borderRadius: 6, background: "#fff" }}>Retry</button></div>;
|
||||
if (!group) return <div style={S.error}>Group not found</div>;
|
||||
|
||||
return (
|
||||
<div style={S.container}>
|
||||
<button style={S.backBtn} onClick={() => navigate("/groups")}>
|
||||
← Back to Groups
|
||||
</button>
|
||||
|
||||
{/* Group Header */}
|
||||
{editingName ? (
|
||||
<div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
|
||||
<input
|
||||
style={S.input}
|
||||
value={editName}
|
||||
onChange={(e) => setEditName(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === "Enter") handleSaveName(); if (e.key === "Escape") setEditingName(false); }}
|
||||
autoFocus
|
||||
/>
|
||||
<button style={S.actionBtn("#3b82f6")} onClick={handleSaveName}>Save</button>
|
||||
<button style={{ ...S.actionBtn("#6b7280"), padding: "8px 16px" }} onClick={() => setEditingName(false)}>Cancel</button>
|
||||
</div>
|
||||
) : (
|
||||
<h1
|
||||
style={S.title}
|
||||
onClick={() => {
|
||||
if (isAdmin) { setEditName(group.name); setEditingName(true); }
|
||||
}}
|
||||
title={isAdmin ? "Click to edit name" : undefined}
|
||||
>
|
||||
{group.name}
|
||||
</h1>
|
||||
)}
|
||||
<p style={S.desc}>{group.description || "No description"}</p>
|
||||
<p style={{ fontSize: 12, color: "#9ca3af", marginBottom: 20 }}>
|
||||
Created by {group.created_by_email} · {group.member_count} member{group.member_count !== 1 ? "s" : ""}
|
||||
</p>
|
||||
|
||||
{/* Admin Actions */}
|
||||
{isAdmin && (
|
||||
<div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 20 }}>
|
||||
<button
|
||||
style={S.actionBtn("#3b82f6")}
|
||||
onClick={() => setShowInviteSection((v) => !v)}
|
||||
>
|
||||
{showInviteSection ? "Hide Invites" : "Manage Invites"}
|
||||
</button>
|
||||
<button style={S.dangerBtn} onClick={handleDeleteGroup}>
|
||||
Delete Group
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Invites Section */}
|
||||
{isAdmin && showInviteSection && (
|
||||
<div style={S.section}>
|
||||
<h2 style={S.sectionTitle}>Invite Links</h2>
|
||||
<button style={S.actionBtn("#22c55e")} onClick={handleCreateInvite}>
|
||||
+ Generate Invite Link
|
||||
</button>
|
||||
{invites.length === 0 ? (
|
||||
<p style={{ color: "#9ca3af", fontSize: 14, marginTop: 12 }}>No invites yet.</p>
|
||||
) : (
|
||||
invites.map((inv) => (
|
||||
<div key={inv.id} style={S.inviteCard}>
|
||||
<div style={S.inviteCode}>{inv.code}</div>
|
||||
<div style={S.inviteMeta}>
|
||||
{inv.is_active ? "Active" : "Revoked"} ·{" "}
|
||||
{inv.max_uses > 0 ? `${inv.use_count}/${inv.max_uses} uses` : `${inv.use_count} uses (unlimited)`}
|
||||
</div>
|
||||
<div style={{ marginTop: 8, display: "flex", gap: 8 }}>
|
||||
<button style={S.actionBtn("#3b82f6")} onClick={() => copyToClipboard(inv.join_url)}>
|
||||
Copy Link
|
||||
</button>
|
||||
{inv.is_active && (
|
||||
<button style={S.inlineBtn} onClick={() => handleRevokeInvite(inv.id)}>
|
||||
Revoke
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Members Section */}
|
||||
<div style={S.section}>
|
||||
<h2 style={S.sectionTitle}>Members ({group.member_count})</h2>
|
||||
{group.members.map((member) => (
|
||||
<div key={member.id} style={S.memberItem}>
|
||||
<div style={S.memberInfo}>
|
||||
<span style={S.memberName}>
|
||||
{member.user_username || member.user_email}{" "}
|
||||
<span style={S.badge(member.role)}>{member.role}</span>
|
||||
</span>
|
||||
<span style={S.memberEmail}>{member.user_email}</span>
|
||||
</div>
|
||||
{isAdmin && member.user_id !== Number(user?.email ? undefined : undefined) && (
|
||||
<div style={{ display: "flex", gap: 8 }}>
|
||||
{member.role === "member" && (
|
||||
<button
|
||||
style={S.transferBtn}
|
||||
onClick={() => handleTransferAdmin(member.user_id, member.user_email)}
|
||||
>
|
||||
Make Admin
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
style={S.removeBtn}
|
||||
onClick={() => handleRemoveMember(member.user_id, member.user_email)}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Leave Group (non-admins only) */}
|
||||
{!isAdmin && (
|
||||
<div style={{ ...S.section, marginTop: 40 }}>
|
||||
<button style={S.leaveBtn} onClick={handleLeave}>
|
||||
Leave Group
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { groupsApi } from "../api/groups";
|
||||
import type { GroupListItem } from "../../packages/shared/src/types";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
maxWidth: 800,
|
||||
margin: "0 auto",
|
||||
padding: "24px 16px",
|
||||
} satisfies React.CSSProperties,
|
||||
header: {
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: 24,
|
||||
} satisfies React.CSSProperties,
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontWeight: 700,
|
||||
margin: 0,
|
||||
} satisfies React.CSSProperties,
|
||||
createBtn: {
|
||||
padding: "10px 20px",
|
||||
backgroundColor: "#3b82f6",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
borderRadius: 8,
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
cursor: "pointer",
|
||||
minHeight: 44,
|
||||
minWidth: 44,
|
||||
} satisfies React.CSSProperties,
|
||||
groupCard: {
|
||||
border: "1px solid #e5e7eb",
|
||||
borderRadius: 12,
|
||||
padding: 20,
|
||||
marginBottom: 12,
|
||||
cursor: "pointer",
|
||||
transition: "box-shadow 0.15s",
|
||||
} satisfies React.CSSProperties,
|
||||
groupName: {
|
||||
fontSize: 18,
|
||||
fontWeight: 600,
|
||||
margin: "0 0 4px 0",
|
||||
} satisfies React.CSSProperties,
|
||||
groupDesc: {
|
||||
fontSize: 14,
|
||||
color: "#6b7280",
|
||||
margin: "0 0 8px 0",
|
||||
} satisfies React.CSSProperties,
|
||||
groupMeta: {
|
||||
display: "flex",
|
||||
gap: 12,
|
||||
fontSize: 13,
|
||||
color: "#9ca3af",
|
||||
} satisfies React.CSSProperties,
|
||||
badge: {
|
||||
display: "inline-block",
|
||||
padding: "2px 8px",
|
||||
borderRadius: 6,
|
||||
fontSize: 11,
|
||||
fontWeight: 600,
|
||||
} satisfies React.CSSProperties,
|
||||
adminBadge: {
|
||||
backgroundColor: "#dbeafe",
|
||||
color: "#1d4ed8",
|
||||
} satisfies React.CSSProperties,
|
||||
memberBadge: {
|
||||
backgroundColor: "#f3f4f6",
|
||||
color: "#6b7280",
|
||||
} satisfies React.CSSProperties,
|
||||
empty: {
|
||||
textAlign: "center" as const,
|
||||
padding: 60,
|
||||
color: "#9ca3af",
|
||||
},
|
||||
loadingText: {
|
||||
textAlign: "center" as const,
|
||||
padding: 60,
|
||||
color: "#9ca3af",
|
||||
fontSize: 16,
|
||||
},
|
||||
errorText: {
|
||||
textAlign: "center" as const,
|
||||
padding: 40,
|
||||
color: "#ef4444",
|
||||
fontSize: 14,
|
||||
},
|
||||
};
|
||||
|
||||
export function GroupsListPage() {
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuth();
|
||||
const [groups, setGroups] = useState<GroupListItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const loadGroups = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await groupsApi.listGroups();
|
||||
setGroups(data);
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : "Failed to load groups");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadGroups();
|
||||
}, [loadGroups]);
|
||||
|
||||
if (loading) {
|
||||
return <div style={styles.loadingText}>Loading groups...</div>;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<div style={styles.errorText}>
|
||||
{error}
|
||||
<br />
|
||||
<button
|
||||
onClick={loadGroups}
|
||||
style={{
|
||||
marginTop: 12,
|
||||
padding: "8px 16px",
|
||||
cursor: "pointer",
|
||||
border: "1px solid #d1d5db",
|
||||
borderRadius: 6,
|
||||
background: "#fff",
|
||||
}}
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<div style={styles.header}>
|
||||
<h1 style={styles.title}>Groups</h1>
|
||||
<button
|
||||
style={styles.createBtn}
|
||||
onClick={() => navigate("/groups/create")}
|
||||
>
|
||||
+ Create Group
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{groups.length === 0 ? (
|
||||
<div style={styles.empty}>
|
||||
<p style={{ fontSize: 16, marginBottom: 8 }}>You're not in any groups yet.</p>
|
||||
<p style={{ fontSize: 14 }}>Create a group to start reading together with friends!</p>
|
||||
</div>
|
||||
) : (
|
||||
groups.map((group) => (
|
||||
<div
|
||||
key={group.id}
|
||||
style={styles.groupCard}
|
||||
onClick={() => navigate(`/groups/${group.id}`)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
navigate(`/groups/${group.id}`);
|
||||
}
|
||||
}}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
<h2 style={styles.groupName}>{group.name}</h2>
|
||||
{group.description && (
|
||||
<p style={styles.groupDesc}>{group.description}</p>
|
||||
)}
|
||||
<div style={styles.groupMeta}>
|
||||
<span>{group.member_count} member{group.member_count !== 1 ? "s" : ""}</span>
|
||||
{group.user_role === "admin" ? (
|
||||
<span style={{ ...styles.badge, ...styles.adminBadge }}>Admin</span>
|
||||
) : group.user_role === "member" ? (
|
||||
<span style={{ ...styles.badge, ...styles.memberBadge }}>Member</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { groupsApi } from "../api/groups";
|
||||
import { useToast } from "../hooks/useToast";
|
||||
import type { InviteValidation } from "../../packages/shared/src/types";
|
||||
|
||||
const S = {
|
||||
container: { maxWidth: 500, margin: "0 auto", padding: "24px 16px" } satisfies React.CSSProperties,
|
||||
backBtn: {
|
||||
background: "none", border: "none", color: "#3b82f6", fontSize: 14, cursor: "pointer",
|
||||
padding: 0, marginBottom: 16, minHeight: 44, minWidth: 44,
|
||||
} satisfies React.CSSProperties,
|
||||
card: {
|
||||
padding: 24, border: "1px solid #e5e7eb", borderRadius: 12, textAlign: "center" as const,
|
||||
} satisfies React.CSSProperties,
|
||||
groupIcon: {
|
||||
width: 64, height: 64, borderRadius: "50%", backgroundColor: "#dbeafe",
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
margin: "0 auto 16px auto", fontSize: 28, color: "#3b82f6", fontWeight: 700,
|
||||
} satisfies React.CSSProperties,
|
||||
groupName: { fontSize: 22, fontWeight: 700, marginBottom: 4 } satisfies React.CSSProperties,
|
||||
groupDesc: { fontSize: 14, color: "#6b7280", marginBottom: 8 } satisfies React.CSSProperties,
|
||||
groupMeta: { fontSize: 13, color: "#9ca3af", marginBottom: 20 } satisfies React.CSSProperties,
|
||||
joinBtn: {
|
||||
padding: "12px 32px", backgroundColor: "#3b82f6", color: "#fff",
|
||||
border: "none", borderRadius: 8, fontSize: 16, fontWeight: 600,
|
||||
cursor: "pointer", minHeight: 44,
|
||||
} satisfies React.CSSProperties,
|
||||
joinBtnDisabled: {
|
||||
padding: "12px 32px", backgroundColor: "#93c5fd", color: "#fff",
|
||||
border: "none", borderRadius: 8, fontSize: 16, fontWeight: 600,
|
||||
cursor: "not-allowed", minHeight: 44,
|
||||
} satisfies React.CSSProperties,
|
||||
loading: { textAlign: "center" as const, padding: 60, color: "#9ca3af" },
|
||||
error: { textAlign: "center" as const, padding: 40, color: "#ef4444" },
|
||||
errorCard: {
|
||||
padding: 24, border: "1px solid #fecaca", borderRadius: 12, textAlign: "center" as const,
|
||||
backgroundColor: "#fef2f2",
|
||||
} satisfies React.CSSProperties,
|
||||
errorTitle: { fontSize: 18, fontWeight: 600, color: "#dc2626", marginBottom: 8 } satisfies React.CSSProperties,
|
||||
errorMsg: { fontSize: 14, color: "#ef4444" } satisfies React.CSSProperties,
|
||||
};
|
||||
|
||||
export function JoinGroupPage() {
|
||||
const { code } = useParams<{ code: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { showToast } = useToast();
|
||||
|
||||
const [inviteInfo, setInviteInfo] = useState<InviteValidation | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [joining, setJoining] = useState(false);
|
||||
|
||||
const validateInvite = useCallback(async () => {
|
||||
if (!code) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await groupsApi.validateInvite(code);
|
||||
setInviteInfo(data);
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : "Invalid invite");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [code]);
|
||||
|
||||
useEffect(() => {
|
||||
validateInvite();
|
||||
}, [validateInvite]);
|
||||
|
||||
const handleJoin = async () => {
|
||||
if (!code) return;
|
||||
setJoining(true);
|
||||
try {
|
||||
const group = await groupsApi.joinViaInvite(code);
|
||||
showToast({ message: `You've joined ${group.name}!`, variant: "success" });
|
||||
navigate(`/groups/${group.id}`);
|
||||
} catch (err: unknown) {
|
||||
const msg = err instanceof Error ? err.message : "Failed to join group";
|
||||
showToast({ message: msg, variant: "error" });
|
||||
setError(msg);
|
||||
} finally {
|
||||
setJoining(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <div style={S.loading}>Validating invite...</div>;
|
||||
|
||||
if (error && !inviteInfo) {
|
||||
return (
|
||||
<div style={S.container}>
|
||||
<div style={S.errorCard}>
|
||||
<div style={S.errorTitle}>Invalid Invite</div>
|
||||
<div style={S.errorMsg}>{error}</div>
|
||||
<button
|
||||
style={{ ...S.backBtn, marginTop: 16, display: "inline-block" }}
|
||||
onClick={() => navigate("/groups")}
|
||||
>
|
||||
Go to Groups
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!inviteInfo) return null;
|
||||
|
||||
return (
|
||||
<div style={S.container}>
|
||||
<button style={S.backBtn} onClick={() => navigate("/groups")}>
|
||||
← Back to Groups
|
||||
</button>
|
||||
|
||||
<div style={S.card}>
|
||||
<div style={S.groupIcon}>
|
||||
{inviteInfo.group.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<h1 style={S.groupName}>{inviteInfo.group.name}</h1>
|
||||
{inviteInfo.group.description && (
|
||||
<p style={S.groupDesc}>{inviteInfo.group.description}</p>
|
||||
)}
|
||||
<p style={S.groupMeta}>
|
||||
{inviteInfo.group.member_count} member{inviteInfo.group.member_count !== 1 ? "s" : ""} ·{" "}
|
||||
Created by {inviteInfo.invite.created_by_email}
|
||||
</p>
|
||||
|
||||
<button
|
||||
style={joining ? S.joinBtnDisabled : S.joinBtn}
|
||||
onClick={handleJoin}
|
||||
disabled={joining}
|
||||
>
|
||||
{joining ? "Joining..." : "Join Group"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -241,6 +241,7 @@ export function LibraryPage() {
|
||||
{isMobile ? (
|
||||
<>
|
||||
<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("/groups")} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title="Groups">👥</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("/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>
|
||||
@@ -248,6 +249,7 @@ export function LibraryPage() {
|
||||
) : (
|
||||
<>
|
||||
<button onClick={() => navigate("/add")} className="btn">+ {t("library.addBook")}</button>
|
||||
<button onClick={() => navigate("/groups")} className="btn btn-secondary">Groups</button>
|
||||
<button onClick={() => navigate("/bookmarks-notes")} className="btn btn-secondary">{t("library.bookmarks")}</button>
|
||||
<button onClick={() => navigate("/settings")} className="btn btn-secondary">{t("library.settings")}</button>
|
||||
<button onClick={logout} className="btn btn-danger">{t("library.logout")}</button>
|
||||
|
||||
Reference in New Issue
Block a user