mongog setup

src/pages/HomePage.tsx

@@ -1,12 +1,15 @@
 import { useAuth } from '../contexts/AuthContext'
 import { Link } from 'react-router-dom'
 import { useState } from 'react'
+import { createEntry } from '../lib/api'
 import BottomNav from '../components/BottomNav'
 
 export default function HomePage() {
-  const { user, loading, signOut } = useAuth()
+  const { user, userId, loading, signOut } = useAuth()
   const [entry, setEntry] = useState('')
   const [title, setTitle] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
 
   if (loading) {
     return (
@@ -32,10 +35,39 @@ export default function HomePage() {
     .toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' })
     .toUpperCase()
 
-  const handleWrite = () => {
-    // TODO: Save to Firebase
-    setTitle('')
-    setEntry('')
+  const handleWrite = async () => {
+    if (!userId || !title.trim() || !entry.trim()) {
+      setMessage({ type: 'error', text: 'Please add a title and entry content' })
+      return
+    }
+
+    setSaving(true)
+    setMessage(null)
+
+    try {
+      const token = await user.getIdToken()
+      await createEntry(
+        userId,
+        {
+          title: title.trim(),
+          content: entry.trim(),
+          isPublic: false,
+        },
+        token
+      )
+
+      setMessage({ type: 'success', text: 'Entry saved successfully!' })
+      setTitle('')
+      setEntry('')
+
+      // Clear success message after 3 seconds
+      setTimeout(() => setMessage(null), 3000)
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to save entry'
+      setMessage({ type: 'error', text: errorMessage })
+    } finally {
+      setSaving(false)
+    }
   }
 
   return (
@@ -53,14 +85,40 @@ export default function HomePage() {
               placeholder="Title your thoughts..."
               value={title}
               onChange={(e) => setTitle(e.target.value)}
+              disabled={saving}
             />
             <textarea
               className="journal-entry-textarea"
               placeholder=""
               value={entry}
               onChange={(e) => setEntry(e.target.value)}
+              disabled={saving}
             />
           </div>
+
+          {message && (
+            <div style={{
+              padding: '0.75rem',
+              marginTop: '1rem',
+              borderRadius: '8px',
+              fontSize: '0.875rem',
+              backgroundColor: message.type === 'success' ? '#f0fdf4' : '#fef2f2',
+              color: message.type === 'success' ? '#15803d' : '#b91c1c',
+              textAlign: 'center',
+            }}>
+              {message.text}
+            </div>
+          )}
+
+          <div style={{ marginTop: '1.5rem', display: 'flex', gap: '0.75rem' }}>
+            <button
+              className="journal-write-btn"
+              onClick={handleWrite}
+              disabled={saving || !title.trim() || !entry.trim()}
+            >
+              {saving ? 'Saving...' : 'Save Entry'}
+            </button>
+          </div>
         </div>
       </main>