|
| 1 | +import React, { useEffect, useState } from "react"; |
| 2 | +import { useParams, useNavigate } from "react-router-dom"; |
| 3 | +import { ChevronLeft, Save, Trash2 } from "lucide-react"; |
| 4 | +import { useDocumentStore } from "../store/document.store"; |
| 5 | +import { useWorkspaces } from "../store/workspace.store"; |
| 6 | +// import { useAuthUser } from "../store/auth.store"; |
| 7 | + |
| 8 | +const DocumentEditorPage: React.FC = () => { |
| 9 | + const { workspaceId, documentId } = useParams<{ |
| 10 | + workspaceId: string; |
| 11 | + documentId: string; |
| 12 | + }>(); |
| 13 | + const navigate = useNavigate(); |
| 14 | + |
| 15 | + // const user = useAuthUser(); |
| 16 | + const workspaces = useWorkspaces(); |
| 17 | + |
| 18 | + const { |
| 19 | + current: document, |
| 20 | + isLoading, |
| 21 | + error, |
| 22 | + fetchOne, |
| 23 | + update, |
| 24 | + remove, |
| 25 | + } = useDocumentStore(); |
| 26 | + |
| 27 | + const [title, setTitle] = useState(""); |
| 28 | + const [content, setContent] = useState(""); |
| 29 | + const [isSaving, setIsSaving] = useState(false); |
| 30 | + |
| 31 | + const workspace = workspaces.find((w) => w.id === workspaceId); |
| 32 | + const canEdit = |
| 33 | + workspace?.currentUserRole === "Owner" || |
| 34 | + workspace?.currentUserRole === "Admin"; |
| 35 | + |
| 36 | + useEffect(() => { |
| 37 | + if (workspaceId && documentId) { |
| 38 | + fetchOne(workspaceId, documentId); |
| 39 | + } |
| 40 | + }, [workspaceId, documentId, fetchOne]); |
| 41 | + |
| 42 | + useEffect(() => { |
| 43 | + if (document) { |
| 44 | + setTitle(document.title); |
| 45 | + setContent(document.content); |
| 46 | + } |
| 47 | + }, [document]); |
| 48 | + |
| 49 | + const handleSave = async () => { |
| 50 | + if (!workspaceId || !documentId || !title.trim()) return; |
| 51 | + |
| 52 | + setIsSaving(true); |
| 53 | + try { |
| 54 | + await update(workspaceId, documentId, { title, content }); |
| 55 | + } finally { |
| 56 | + setIsSaving(false); |
| 57 | + } |
| 58 | + }; |
| 59 | + |
| 60 | + const handleDelete = async () => { |
| 61 | + if (!confirm("Delete this document? This cannot be undone.")) return; |
| 62 | + if (!workspaceId || !documentId) return; |
| 63 | + |
| 64 | + await remove(workspaceId, documentId); |
| 65 | + navigate(`/workspace/${workspaceId}/documents`); |
| 66 | + }; |
| 67 | + |
| 68 | + if (isLoading) { |
| 69 | + return ( |
| 70 | + <div className="flex flex-col items-center justify-center h-64 text-muted-foreground"> |
| 71 | + <div className="h-8 w-8 animate-spin rounded-full border-2 border-border border-t-primary" /> |
| 72 | + <p className="mt-3 text-sm">Loading document...</p> |
| 73 | + </div> |
| 74 | + ); |
| 75 | + } |
| 76 | + |
| 77 | + if (error) { |
| 78 | + return ( |
| 79 | + <div className="rounded-xl border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive-foreground p-8"> |
| 80 | + {error} |
| 81 | + <button |
| 82 | + onClick={() => navigate(`/workspace/${workspaceId}/documents`)} |
| 83 | + className="mt-4 px-4 py-2 bg-primary text-primary-foreground rounded-xl hover:bg-primary/90 font-medium" |
| 84 | + > |
| 85 | + Back to Documents |
| 86 | + </button> |
| 87 | + </div> |
| 88 | + ); |
| 89 | + } |
| 90 | + |
| 91 | + if (!document) { |
| 92 | + return ( |
| 93 | + <div className="flex flex-col items-center justify-center h-64 text-muted-foreground text-center"> |
| 94 | + <p className="text-lg font-semibold mb-2">Document not found</p> |
| 95 | + <button |
| 96 | + onClick={() => navigate(`/workspace/${workspaceId}/documents`)} |
| 97 | + className="px-6 py-2 bg-primary text-primary-foreground rounded-xl hover:bg-primary/90 font-medium" |
| 98 | + > |
| 99 | + Back to Documents |
| 100 | + </button> |
| 101 | + </div> |
| 102 | + ); |
| 103 | + } |
| 104 | + |
| 105 | + return ( |
| 106 | + <div className="space-y-6 h-full flex flex-col"> |
| 107 | + {/* Header */} |
| 108 | + <div className="flex items-center justify-between"> |
| 109 | + <div className="flex items-center gap-3"> |
| 110 | + <button |
| 111 | + onClick={() => navigate(`/workspace/${workspaceId}/documents`)} |
| 112 | + className="flex items-center gap-2 text-sm font-medium text-primary hover:text-primary/80 p-2 rounded-lg hover:bg-primary/5" |
| 113 | + > |
| 114 | + <ChevronLeft className="h-4 w-4" /> |
| 115 | + Documents |
| 116 | + </button> |
| 117 | + <div> |
| 118 | + <h1 className="text-2xl font-semibold">{workspace?.name}</h1> |
| 119 | + </div> |
| 120 | + </div> |
| 121 | + <div className="flex items-center gap-2"> |
| 122 | + {canEdit && ( |
| 123 | + <> |
| 124 | + <button |
| 125 | + onClick={handleSave} |
| 126 | + disabled={isSaving} |
| 127 | + className="flex items-center gap-2 px-4 py-2 rounded-xl bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm font-medium text-sm disabled:opacity-50 disabled:cursor-not-allowed transition-all" |
| 128 | + > |
| 129 | + <Save className="h-4 w-4" /> |
| 130 | + {isSaving ? "Saving..." : "Save"} |
| 131 | + </button> |
| 132 | + <button |
| 133 | + onClick={handleDelete} |
| 134 | + className="flex items-center gap-2 px-4 py-2 rounded-xl bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm font-medium text-sm transition-all" |
| 135 | + > |
| 136 | + <Trash2 className="h-4 w-4" /> |
| 137 | + Delete |
| 138 | + </button> |
| 139 | + </> |
| 140 | + )} |
| 141 | + </div> |
| 142 | + </div> |
| 143 | + |
| 144 | + {/* Editor */} |
| 145 | + <div className="flex-1 flex flex-col bg-card rounded-3xl border border-border shadow-sm overflow-hidden"> |
| 146 | + <input |
| 147 | + value={title} |
| 148 | + onChange={(e) => setTitle(e.target.value)} |
| 149 | + placeholder="Untitled document" |
| 150 | + className="w-full px-8 py-6 text-3xl font-bold bg-transparent border-b border-border focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 resize-none" |
| 151 | + disabled={!canEdit} |
| 152 | + /> |
| 153 | + <textarea |
| 154 | + value={content} |
| 155 | + onChange={(e) => setContent(e.target.value)} |
| 156 | + placeholder="Start writing your document..." |
| 157 | + className="flex-1 w-full px-8 py-6 text-foreground bg-transparent resize-none focus:outline-none document-editor-textarea" |
| 158 | + disabled={!canEdit} |
| 159 | + /> |
| 160 | + </div> |
| 161 | + </div> |
| 162 | + ); |
| 163 | +}; |
| 164 | + |
| 165 | +export default DocumentEditorPage; |
0 commit comments