/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function App() { const [reminders, setReminders] = useState([]); const [newReminder, setNewReminder] = useState({ title: '', description: '', date: '', category: 'Personal', recurrence: 'none', completed: false }); const CATEGORIES = ['Personal', 'Work', 'Shopping', 'Health', 'Other']; const RECURRENCE_OPTIONS = ['none', 'daily', 'weekly', 'monthly']; useEffect(() => { fetchReminders(); }, []); const fetchReminders = async () => { try { const response = await fetch('/reminders'); const data = await response.json(); setReminders(data); } catch (error) { console.error('Failed to fetch reminders', error); } }; const handleSubmit = async (e) => { e.preventDefault(); try { const response = await fetch('/reminders', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(newReminder) }); if (response.ok) { fetchReminders(); setNewReminder({ title: '', description: '', date: '', category: 'Personal', recurrence: 'none', completed: false }); } } catch (error) { console.error('Failed to add reminder', error); } }; const toggleCompletion = async (id, currentStatus) => { try { const response = await fetch(`/reminders/${id}/toggle`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ completed: !currentStatus }) }); if (response.ok) { fetchReminders(); } } catch (error) { console.error('Failed to toggle reminder status', error); } }; const deleteReminder = async (id) => { try { const response = await fetch(`/reminders/${id}`, { method: 'DELETE' }); if (response.ok) { fetchReminders(); } } catch (error) { console.error('Failed to delete reminder', error); } }; return (

🕰️ Reminder App

setNewReminder({...newReminder, title: e.target.value})} required />

setNewReminder({...newReminder, description: e.target.value})}
        />
        <input 
          type="datetime-local" 
          value={newReminder.date}
          onChange={(e) => setNewReminder({...newReminder, date: e.target.value})}
          required 
        />
        <select
          value={newReminder.category}
          onChange={(e) => setNewReminder({...newReminder, category: e.target.value})}
        >
          {CATEGORIES.map(category => (
            <option key={category} value={category}>{category}</option>
          ))}
        </select>
        <select
          value={newReminder.recurrence}
          onChange={(e) => setNewReminder({...newReminder, recurrence: e.target.value})}
        >
          {RECURRENCE_OPTIONS.map(option => (
            <option key={option} value={option}>
              {option === 'none' ? 'No Repeat' : `Repeat ${option}`}
            </option>
          ))}
        </select>
        <button type="submit">Add Reminder</button>
      </form>
      
      <div className="reminder-sections">
        <div className="active-reminders">
          <h2>Active Reminders</h2>
          {reminders.filter(r => !r.completed).map((reminder) => (
            <div key={reminder.id} className="reminder-item">
              <div className="reminder-header">
                <h3>{reminder.title}</h3>
                <span className="category-badge">{reminder.category}</span>
              </div>
              <p>{reminder.description}</p>
              <small>{new Date(reminder.date).toLocaleString()}</small>
              {reminder.recurrence !== 'none' && (
                <small>🔁 {reminder.recurrence} recurrence</small>
              )}
              <div className="reminder-actions">
                <button onClick={() => toggleCompletion(reminder.id, reminder.completed)}>
                  ✅ Mark Complete
                </button>
                <button onClick={() => deleteReminder(reminder.id)}>❌ Delete</button>
              </div>
            </div>
          ))}
        </div>
        
        <div className="completed-reminders">
          <h2>Completed Reminders</h2>
          {reminders.filter(r => r.completed).map((reminder) => (
            <div key={reminder.id} className="reminder-item completed">
              <div className="reminder-header">
                <h3>{reminder.title}</h3>
                <span className="category-badge">{reminder.category}</span>
              </div>
              <p>{reminder.description}</p>
              <small>{new Date(reminder.date).toLocaleString()}</small>
              <button onClick={() => toggleCompletion(reminder.id, reminder.completed)}>
                ↩️ Reactivate
              </button>
            </div>
          ))}
        </div>
      </div>
      
      <a 
        href={import.meta.url.replace("esm.town", "val.town")} 
        target="_top" 
        style={{color: '#888', textDecoration: 'none', fontSize: '0.8em'}}
      >
        View Source
      </a>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
  const KEY = new URL(import.meta.url).pathname.split("/").at(-1);
  const SCHEMA_VERSION = 2; // Increment schema version due to new fields

// Updated reminders table with new fields
  await sqlite.execute(`
    CREATE TABLE IF NOT EXISTS ${KEY}_reminders_${SCHEMA_VERSION} (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      title TEXT NOT NULL,
      description TEXT,
      date DATETIME NOT NULL,
      category TEXT DEFAULT 'Personal',
      recurrence TEXT DEFAULT 'none',
      completed BOOLEAN DEFAULT 0
    )
  `);

// Handle different routes
  if (request.method === 'GET' && new URL(request.url).pathname === '/reminders') {
    const reminders = await sqlite.execute(`
      SELECT * FROM ${KEY}_reminders_${SCHEMA_VERSION} 
      ORDER BY completed, date
    `);
    return new Response(JSON.stringify(reminders.rows), {
      headers: { 'Content-Type': 'application/json' }
    });
  }

if (request.method === 'POST' && new URL(request.url).pathname === '/reminders') {
    const { title, description, date, category, recurrence, completed } = await request.json();
    await sqlite.execute(
      `INSERT INTO ${KEY}_reminders_${SCHEMA_VERSION} 
      (title, description, date, category, recurrence, completed) 
      VALUES (?, ?, ?, ?, ?, ?)`,
      [title, description, date, category, recurrence, completed ? 1 : 0]
    );
    return new Response(JSON.stringify({ success: true }), {
      headers: { 'Content-Type': 'application/json' }
    });
  }

if (request.method === 'PATCH' && /^\/reminders\/\d+\/toggle$/.test(new URL(request.url).pathname)) {
    const id = new URL(request.url).pathname.split('/')[2];
    const { completed } = await request.json();
    await sqlite.execute(
      `UPDATE ${KEY}_reminders_${SCHEMA_VERSION} SET completed = ? WHERE id = ?`,
      [completed ? 1 : 0, id]
    );
    return new Response(JSON.stringify({ success: true }), {
      headers: { 'Content-Type': 'application/json' }
    });
  }

if (request.method === 'DELETE' && /^\/reminders\/\d+$/.test(new URL(request.url).pathname)) {
    const id = new URL(request.url).pathname.split('/').pop();
    await sqlite.execute(
      `DELETE FROM ${KEY}_reminders_${SCHEMA_VERSION} WHERE id = ?`,
      [id]
    );
    return new Response(JSON.stringify({ success: true }), {
      headers: { 'Content-Type': 'application/json' }
    });
  }

return new Response(`
    <html>
      <head>
        <title>Reminder App</title>
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `, {
    headers: { 'Content-Type': 'text/html' }
  });
}

const css = `
body {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f4f4f4;
}

.reminder-app {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

input, textarea, select {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

.reminder-sections {
  display: flex;
  gap: 20px;
}

.active-reminders, .completed-reminders {
  flex: 1;
}

.reminder-item {
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}

.reminder-item.completed {
  opacity: 0.6;
}

.reminder-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-badge {
  background-color: #e0e0e0;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8em;
}

.reminder-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.reminder-item button {
  align-self: flex-start;
  font-size: 0.9em;
}

.reminder-item button:last-child {
  background-color: #f44336;
}
`;</article></body></html>

ReminderApp

Versions

v0