Enhanced Code Snippet Vault

\n {message}\n

\n );\n}\n\nfunction highlightCode(code, language) {\n const escapeHtml = (unsafe) => {\n return unsafe\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n };\n\n return escapeHtml(code);\n}\n\nfunction SnippetModal({ snippet, onClose }) {\n const [comments, setComments] = useState([]);\n const [newComment, setNewComment] = useState('');\n const [copyToast, setCopyToast] = useState(false);\n\n useEffect(() => {\n fetchComments();\n }, [snippet.id]);\n\n const fetchComments = async () => {\n try {\n const response = await fetch(`/comments/${snippet.id}`);\n const data = await response.json();\n setComments(data);\n } catch (error) {\n console.error(\"Failed to fetch comments:\", error);\n }\n };\n\n const handleAddComment = async (e) => {\n e.preventDefault();\n try {\n await fetch(`/comments/${snippet.id}`, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ text: newComment })\n });\n setNewComment('');\n fetchComments();\n } catch (error) {\n console.error(\"Failed to add comment:\", error);\n }\n };\n\n const handleLike = async () => {\n try {\n await fetch(`/like/${snippet.id}`, { method: 'POST' });\n } catch (error) {\n console.error(\"Failed to like snippet:\", error);\n }\n };\n\n const handleCopyCode = () => {\n navigator.clipboard.writeText(snippet.code).then(() => {\n setCopyToast(true);\n });\n };\n\n return (\n

\n {copyToast && (\n setCopyToast(false)} \n />\n )}\n

{snippet.title}

\n \n

Description:

{snippet.description || 'No description provided'}

\n\n

Code:

\n \n

\n            \n

\n

\n\n        \n          \n          Language: {snippet.language}\n          \n            {snippet.tags.map(tag => (\n              \n                {tag}\n              \n            ))}\n          
\n        
\n\n        \n          Comments:
\n          {comments.length === 0 ? (\n            No comments yet
\n          ) : (\n            comments.map((comment, index) => (\n              \n                {comment.text}
\n                {comment.timestamp}\n              
\n            ))\n          )}\n\n          \n             setNewComment(e.target.value)}\n              placeholder=\"Add a comment...\"\n              className=\"w-full p-3 border rounded-lg dark:bg-gray-700 dark:border-gray-600 mb-2\"\n              rows=\"3\"\n              required\n            />\n            \n          \n        
\n

\n

\n  );\n}\n\nfunction App() {\n  const [snippets, setSnippets] = useState([]);\n  const [selectedSnippet, setSelectedSnippet] = useState(null);\n  const [newSnippet, setNewSnippet] = useState({\n    title: \"\",\n    code: \"\",\n    description: \"\",\n    language: \"JavaScript\",\n    tags: [],\n    isFavorite: false\n  });\n  const [searchParams, setSearchParams] = useState({\n    term: \"\",\n    language: \"\",\n    tag: \"\",\n    isFavoriteOnly: false\n  });\n  const [darkMode, setDarkMode] = useState(false);\n  const [isLoading, setIsLoading] = useState(false);\n\n  useEffect(() => {\n    fetchSnippets();\n  }, []);\n\n  const fetchSnippets = async () => {\n    setIsLoading(true);\n    try {\n      const response = await fetch(\"/snippets\");\n      const data = await response.json();\n      setSnippets(data);\n    } catch (error) {\n      console.error(\"Failed to fetch snippets:\", error);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  const handleSubmit = async (e) => {\n    e.preventDefault();\n    setIsLoading(true);\n    try {\n      const response = await fetch(\"/snippets\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify(newSnippet)\n      });\n      await fetchSnippets();\n      setNewSnippet({\n        title: \"\",\n        code: \"\",\n        description: \"\",\n        language: \"JavaScript\",\n        tags: [],\n        isFavorite: false\n      });\n    } catch (error) {\n      console.error(\"Failed to save snippet:\", error);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  const filteredSnippets = snippets.filter(snippet => {\n    const matchesTerm = !searchParams.term || \n      snippet.title.toLowerCase().includes(searchParams.term.toLowerCase()) ||\n      snippet.description.toLowerCase().includes(searchParams.term.toLowerCase()) ||\n      snippet.tags.some(tag => tag.toLowerCase().includes(searchParams.term.toLowerCase()));\n    \n    const matchesLanguage = !searchParams.language || \n      snippet.language === searchParams.language;\n    \n    const matchesTag = !searchParams.tag || \n      snippet.tags.includes(searchParams.tag);\n    \n    const matchesFavorite = !searchParams.isFavoriteOnly || \n      snippet.isFavorite;\n\n    return matchesTerm && matchesLanguage && matchesTag && matchesFavorite;\n  }).sort((a, b) => b.isFavorite - a.isFavorite);\n\n  return (\n    \n      {selectedSnippet && (\n         setSelectedSnippet(null)} \n        />\n      )}\n\n      \n        Code Snippet Vault 📝
\n        \n      
\n      \n      {/* Snippet Input Form */}\n      \n        \n           setNewSnippet({...newSnippet, title: e.target.value})}\n            className=\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:bg-gray-700 dark:text-white\"\n            required\n          />\n        
\n        \n           setNewSnippet({...newSnippet, description: e.target.value})}\n            className=\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:bg-gray-700 dark:text-white\"\n            rows=\"3\"\n          />\n        
\n        \n           setNewSnippet({...newSnippet, language: e.target.value})}\n            className=\"shadow border rounded w-1/2 py-2 px-3 text-gray-700 dark:bg-gray-700 dark:text-white\"\n          >\n            {LANGUAGES.map(lang => (\n              \n            ))}\n          \n           setNewSnippet({\n              ...newSnippet, \n              tags: Array.from(e.target.selectedOptions, option => option.value)\n            })}\n            className=\"shadow border rounded w-1/2 py-2 px-3 text-gray-700 dark:bg-gray-700 dark:text-white\"\n          >\n            {PREDEFINED_TAGS.map(tag => (\n              \n            ))}\n          \n        
\n        \n           setNewSnippet({...newSnippet, code: e.target.value})}\n            className=\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:bg-gray-700 dark:text-white h-40\"\n            required\n          />\n        
\n        \n      
\n\n      {/* Snippet List */}\n      \n        {filteredSnippets.map(snippet => (\n           setSelectedSnippet(snippet)}\n          >\n            \n              {snippet.title}
\n              \n                {snippet.language}\n                \n                  {snippet.tags.join(\", \")}\n                \n              
\n            
\n            \n               200 ? \"...\" : \"\"), \n                    snippet.language\n                  )\n                }}\n              />\n            
\n            \n              {snippet.timestamp}
\n              \n                👍 {snippet.likes || 0}\n              
\n            
\n          
\n        ))}\n      
\n    
\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const KEY = \"methodicalFuchsiaOx\";\n  const SCHEMA_VERSION = 4;\n\n  // Updated table schema to include description, likes\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_snippets_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      title TEXT NOT NULL,\n      code TEXT NOT NULL,\n      description TEXT,\n      language TEXT,\n      tags TEXT,\n      is_favorite INTEGER DEFAULT 0,\n      likes INTEGER DEFAULT 0,\n      timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Comments table\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_comments_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      snippet_id INTEGER,\n      text TEXT NOT NULL,\n      timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,\n      FOREIGN KEY(snippet_id) REFERENCES ${KEY}_snippets_${SCHEMA_VERSION}(id)\n    )\n  `);\n\n  // Handle comments retrieval\n  if (request.method === \"GET\" && /^\\/comments\\/\\d+$/.test(new URL(request.url).pathname)) {\n    const snippetId = new URL(request.url).pathname.split(\"/\").pop();\n    const comments = await sqlite.execute(`\n      SELECT text, timestamp \n      FROM ${KEY}_comments_${SCHEMA_VERSION} \n      WHERE snippet_id = ? \n      ORDER BY timestamp DESC\n    `, [snippetId]);\n\n    return new Response(JSON.stringify(comments.rows), {\n      headers: { \"Content-Type\": \"application/json\" }\n    });\n  }\n\n  // Handle adding comments\n  if (request.method === \"POST\" && /^\\/comments\\/\\d+$/.test(new URL(request.url).pathname)) {\n    const snippetId = new URL(request.url).pathname.split(\"/\").pop();\n    const { text } = await request.json();\n    \n    await sqlite.execute(`\n      INSERT INTO ${KEY}_comments_${SCHEMA_VERSION} \n      (snippet_id, text) \n      VALUES (?, ?)\n    `, [snippetId, text]);\n\n    return new Response(\"Comment added\", { status: 201 });\n  }\n\n  // Handle liking a snippet\n  if (request.method === \"POST\" && /^\\/like\\/\\d+$/.test(new URL(request.url).pathname)) {\n    const snippetId = new URL(request.url).pathname.split(\"/\").pop();\n    \n    await sqlite.execute(`\n      UPDATE ${KEY}_snippets_${SCHEMA_VERSION} \n      SET likes = likes + 1 \n      WHERE id = ?\n    `, [snippetId]);\n\n    return new Response(\"Liked\", { status: 200 });\n  }\n\n  // Snippet POST method with improved error handling and logging\n  if (request.method === \"POST\" && new URL(request.url).pathname === \"/snippets\") {\n    try {\n      const snippet = await request.json();\n      \n      // Ensure tags are converted to a comma-separated string\n      const tagsString = Array.isArray(snippet.tags) ? snippet.tags.join(',') : '';\n      \n      const result = await sqlite.execute(`\n        INSERT INTO ${KEY}_snippets_${SCHEMA_VERSION} \n        (title, code, description, language, tags, is_favorite, likes) \n        VALUES (?, ?, ?, ?, ?, ?, ?)\n      `, [\n        snippet.title, \n        snippet.code, \n        snippet.description || '', \n        snippet.language, \n        tagsString, \n        snippet.isFavorite ? 1 : 0,\n        0 // initial likes\n      ]);\n\n      return new Response(JSON.stringify({ \n        message: \"Snippet saved\", \n        id: result.lastInsertRowid \n      }), { \n        status: 201,\n        headers: { \"Content-Type\": \"application/json\" }\n      });\n    } catch (error) {\n      console.error(\"Failed to save snippet:\", error);\n      return new Response(JSON.stringify({ \n        error: \"Failed to save snippet\", \n        details: error.message \n      }), { \n        status: 500,\n        headers: { \"Content-Type\": \"application/json\" }\n      });\n    }\n  }\n\n  // Snippet retrieval method\n  if (request.method === \"GET\" && new URL(request.url).pathname === \"/snippets\") {\n    const snippets = await sqlite.execute(`\n      SELECT \n        id, \n        title, \n        code, \n        description, \n        language, \n        tags, \n        is_favorite, \n        likes,\n        timestamp \n      FROM ${KEY}_snippets_${SCHEMA_VERSION} \n      ORDER BY is_favorite DESC, timestamp DESC\n    `);\n    \n    // Transform tags from string to array\n    const processedSnippets = snippets.rows.map(snippet => ({\n      ...snippet,\n      tags: snippet.tags ? snippet.tags.split(',').filter(tag => tag.trim() !== '') : [],\n      isFavorite: !!snippet.is_favorite\n    }));\n\n    return new Response(JSON.stringify(processedSnippets), {\n      headers: { \"Content-Type\": \"application/json\" }\n    });\n  }\n\n  // Snippet DELETE method\n  if (request.method === \"DELETE\" && /^\\/snippets\\/\\d+$/.test(new URL(request.url).pathname)) {\n    const id = new URL(request.url).pathname.split(\"/\").pop();\n    await sqlite.execute(`\n      DELETE FROM ${KEY}_snippets_${SCHEMA_VERSION} \n      WHERE id = ?\n    `, [id]);\n    return new Response(\"Snippet deleted\", { status: 200 });\n  }\n\n  // Serve the main HTML\n  return new Response(`\n    \n      \n        Enhanced Code Snippet Vault\n        \n        \n        \n        \n      \n      \n        
\n        \n      \n    \n  `, {\n    headers: { \"Content-Type\": \"text/html\" }\n  });\n}","deleted","label",[99],"permalink","https://www.val.town/x/Phinehas/methodicalFuchsiaOx/code/main.tsx","extension","actionData","errors"]