import React, { useState, useEffect } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
interface TextEntry {
id: number;
title: string;
content: string;
tags: string[];
category: string;
timestamp: string;
}
interface Template {
id: number;
title: string;
content: string;
category: string;
}
interface HistoryEntry {
id: number;
action: string;
textId: number;
title: string;
timestamp: string;
}
function App() {
const [texts, setTexts] = useState<TextEntry[]>([]);
const [modalOpen, setModalOpen] = useState(false);
const [editingText, setEditingText] = useState<TextEntry | null>(null);
const [editingTemplate, setEditingTemplate] = useState<Template | null>(null);
const [searchTerm, setSearchTerm] = useState("");
const [categoryFilter, setCategoryFilter] = useState("");
const [tagFilter, setTagFilter] = useState("");
const [activeTab, setActiveTab] = useState("texts");
const [templates, setTemplates] = useState<Template[]>([]);
const [activeTemplateCategory, setActiveTemplateCategory] = useState("All");
const [categories, setCategories] = useState<string[]>([]);
const [history, setHistory] = useState<HistoryEntry[]>([]);
useEffect(() => {
fetchTexts();
fetchTemplates();
fetchCategories();
fetchHistory();
}, []);
const fetchTexts = async () => {
const response = await fetch('/texts');
const data = await response.json();
setTexts(data);
};
const fetchTemplates = async () => {
const response = await fetch('/templates');
const data = await response.json();
setTemplates(data);
};
const fetchCategories = async () => {
const response = await fetch('/categories');
const data = await response.json();
setCategories(data);
};
const fetchHistory = async () => {
const response = await fetch('/history');
const data = await response.json();
setHistory(data);
};
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const form = event.currentTarget;
const formData = new FormData(form);
const text = {
title: formData.get('title') as string,
content: formData.get('content') as string,
tags: (formData.get('tags') as string).split(',').map(tag => tag.trim()),
category: formData.get('category') as string,
};
const url = editingText && editingText.id !== 0 ? `/texts/${editingText.id}` : '/texts';
const method = editingText && editingText.id !== 0 ? 'PUT' : 'POST';
const response = await fetch(url, {
method,
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(text),
});