🏘️ List a New Property

\n \n

\n );\n}\n\nfunction PropertyList() {\n const [properties, setProperties] = useState([]);\n const [sortBy, setSortBy] = useState<\"price\" | \"university\">(\"price\");\n const [filterUniversity, setFilterUniversity] = useState(\"\");\n\n useEffect(() => {\n async function fetchProperties() {\n try {\n const response = await fetch(\"/get-properties\");\n const data = await response.json();\n setProperties(data);\n } catch (error) {\n console.error(\"Error fetching properties:\", error);\n }\n }\n fetchProperties();\n }, []);\n\n const universities = [...new Set(properties.map(p => p.university))];\n\n const filteredProperties = properties\n .filter(prop => !filterUniversity || prop.university === filterUniversity)\n .sort((a, b) => {\n if (sortBy === \"price\") return a.price - b.price;\n return a.university.localeCompare(b.university);\n });\n\n return (\n

🔑 Available Properties

\n setSortBy(e.target.value as \"price\" | \"university\")}\n >\n \n \n \n setFilterUniversity(e.target.value)}\n >\n \n {universities.map(uni => )}\n \n

\n {filteredProperties.map(prop => (\n

\n {prop.imageUrl ? {prop.title}

🏠

}\n

{prop.title}

\n 🏫 {prop.university}\n 📍 {prop.location}\n 💰 ₦{prop.price.toLocaleString()}\n

{prop.description}

\n ))}\n

\n );\n}\n\nfunction ChatRoom() {\n const [messages, setMessages] = useState([]);\n const [newMessage, setNewMessage] = useState(\"\");\n const [username, setUsername] = useState(\"\");\n\n useEffect(() => {\n const storedUsername = localStorage.getItem(\"username\");\n if (storedUsername) {\n setUsername(storedUsername);\n } else {\n const generatedUsername = `User${Math.floor(Math.random() * 1000)}`;\n setUsername(generatedUsername);\n localStorage.setItem(\"username\", generatedUsername);\n }\n\n async function fetchMessages() {\n try {\n const response = await fetch(\"/get-messages\");\n const data = await response.json();\n setMessages(data);\n } catch (error) {\n console.error(\"Error fetching messages:\", error);\n }\n }\n fetchMessages();\n }, []);\n\n const sendMessage = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!newMessage.trim()) return;\n\n try {\n const response = await fetch(\"/send-message\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ username, message: newMessage }),\n });\n\n if (response.ok) {\n setNewMessage(\"\");\n }\n } catch (error) {\n console.error(\"Error sending message:\", error);\n }\n };\n\n return (\n

💬 Housing Discussion Chat

\n {messages.map((msg, index) => (\n

\n {msg.username}: {msg.message}\n

\n ))}\n

\n );\n}\n\nfunction App() {\n return (\n

🏡 Nigerian University Housing Hub

\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 = \"Universitypropertyhub\";\n const SCHEMA_VERSION = 4;\n\n // Create tables for properties and messages\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_properties_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n title TEXT NOT NULL,\n university TEXT NOT NULL,\n location TEXT NOT NULL,\n price REAL NOT NULL,\n description TEXT,\n image_url TEXT\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL,\n message TEXT NOT NULL,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Handle routes\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/add-property\") {\n const formData = await request.formData();\n const title = formData.get(\"title\") as string;\n const university = formData.get(\"university\") as string;\n const location = formData.get(\"location\") as string;\n const price = Number(formData.get(\"price\"));\n const description = formData.get(\"description\") as string;\n const image = formData.get(\"image\") as File;\n\n let imageUrl = \"\";\n if (image && image.size > 0) {\n const arrayBuffer = await image.arrayBuffer();\n const base64Image = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));\n imageUrl = `data:${image.type};base64,${base64Image}`;\n }\n\n await sqlite.execute(\n `INSERT INTO ${KEY}_properties_${SCHEMA_VERSION} \n (title, university, location, price, description, image_url) \n VALUES (?, ?, ?, ?, ?, ?)`,\n [title, university, location, price, description, imageUrl],\n );\n\n return new Response(\"Property added\", { status: 200 });\n }\n\n if (request.method === \"GET\" && new URL(request.url).pathname === \"/get-properties\") {\n const result = await sqlite.execute(`SELECT * FROM ${KEY}_properties_${SCHEMA_VERSION}`);\n return new Response(JSON.stringify(result.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/send-message\") {\n const { username, message } = await request.json();\n await sqlite.execute(\n `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (username, message) VALUES (?, ?)`,\n [username, message],\n );\n return new Response(\"Message sent\", { status: 200 });\n }\n\n if (request.method === \"GET\" && new URL(request.url).pathname === \"/get-messages\") {\n const result = await sqlite.execute(\n `SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} ORDER BY timestamp DESC LIMIT 50`,\n );\n return new Response(JSON.stringify(result.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n return new Response(\n `\n \n \n Nigerian University Housing Hub\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n:root {\n --primary-color: #3498db;\n --secondary-color: #2ecc71;\n --background-color: #f4f6f7;\n --card-background: #ffffff;\n --text-color: #2c3e50;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n background-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\n.app-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 20px;\n}\n\n.app-header {\n text-align: center;\n margin-bottom: 30px;\n padding: 20px;\n background-color: var(--primary-color);\n color: white;\n border-radius: 10px;\n}\n\n.dashboard {\n display: grid;\n grid-template-columns: 1fr 2fr 1fr;\n gap: 20px;\n}\n\n.card {\n background-color: var(--card-background);\n border-radius: 12px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n padding: 20px;\n transition: transform 0.3s ease;\n}\n\n.card:hover {\n transform: translateY(-5px);\n}\n\n.card-header {\n border-bottom: 2px solid var(--primary-color);\n padding-bottom: 10px;\n margin-bottom: 15px;\n}\n\n.property-listing-card .form-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 15px;\n}\n\n.property-listing-card input,\n.property-listing-card textarea {\n width: 100%;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 6px;\n}\n\n.property-listing-card .full-width {\n grid-column: span 2;\n}\n\n.property-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 20px;\n}\n\n.property-card {\n display: flex;\n flex-direction: column;\n border-radius: 10px;\n overflow: hidden;\n}\n\n.property-image img {\n width: 100%;\n height: 250px;\n object-fit: cover;\n}\n\n.property-details {\n padding: 15px;\n background-color: white;\n}\n\n.messages {\n height: 500px;\n overflow-y: auto;\n border: 1px solid #ddd;\n padding: 10px;\n margin-bottom: 15px;\n}\n\n.message-form {\n display: flex;\n gap: 10px;\n}\n\n.message-form input {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 6px;\n}\n\n.submit-btn {\n background-color: var(--primary-color);\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 6px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.submit-btn:hover {\n background-color: var(--secondary-color);\n}\n\nfooter {\n text-align: center;\n margin-top: 20px;\n padding: 10px;\n background-color: var(--primary-color);\n color: white;\n border-radius: 10px;\n}\n\n@media (max-width: 1024px) {\n .dashboard {\n grid-template-columns: 1fr;\n }\n}\n\n@media (max-width: 768px) {\n .property-listing-card .form-grid {\n grid-template-columns: 1fr;\n }\n\n .property-listing-card .full-width {\n grid-column: span 1;\n }\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/Green_gucci/Universitypropertyhub/code/main.tsx","extension","actionData","errors"]