Assistance Request

\n \n \n

Submitted Requests

\n\n

Join the Chat Room

Daxil olmaq üçün istifadəçi adı təyin edin:

\n \n \n

\n\n

\n İstifadəçi: \n

\n \n \n

\n\n

\n\n \n\n\n `,\n { headers: { \"Content-Type\": \"text/html; charset=UTF-8\" } },\n );\n}","deleted","label",[117],"7a5c65ec-55ed-11f1-9a91-ee650bb23af1","frontend","7a5c66d2-55ed-11f1-9a91-ee650bb23af1",7,["D",1779461387359],"directory",[135],"pulls",1,"forks","envVars",{"_148":52,"_150":52},"connections",{"_148":52,"_149":52},"count","unfilledCount","emptyCount",{"_20":134,"_13":135,"_118":136,"_120":-5,"_121":21,"_122":137,"_123":124,"_22":175,"_29":52,"_127":139,"_129":-5,"_131":38,"_132":-5,"_156":176,"_92":177},{"_20":167,"_13":168,"_118":169,"_120":136,"_121":21,"_122":170,"_123":124,"_22":171,"_29":52,"_127":128,"_129":172,"_131":38,"_132":-5,"_156":173,"_92":174},{"_20":159,"_13":160,"_118":161,"_120":136,"_121":21,"_122":162,"_123":124,"_22":163,"_29":52,"_127":103,"_129":164,"_131":38,"_132":-5,"_156":165,"_92":166},{"_20":116,"_13":117,"_118":119,"_120":-5,"_121":21,"_122":30,"_123":124,"_22":155,"_29":126,"_127":128,"_129":130,"_131":38,"_132":-5,"_156":157,"_92":158},["D",1779462423742],"children",[],[117],"7d3799ee-55ed-11f1-93b5-ee650bb23af1","index.html","7d379afc-55ed-11f1-93b5-ee650bb23af1",8,["D",1779461392152],"\n\n\n \n \n Holberton Portal\n \n \n \n \n\n\n

\n \n\n\n",[],[135,160],"90907b1e-55ed-11f1-8ed2-ee650bb23af1","app.tsx","90907bfa-55ed-11f1-8ed2-ee650bb23af1",9,["D",1779461424607],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nconst React = window.React;\nconst ReactDOM = window.ReactDOM;\nconst { useState, useEffect, useRef, useCallback } = React;\n\n// ─── Requests Tab ───\nfunction RequestsTab() {\n const [requests, setRequests] = useState([]);\n const [input, setInput] = useState(\"\");\n\n const loadRequests = useCallback(async () => {\n const res = await fetch(\"/api/requests\");\n if (res.ok) setRequests(await res.json());\n }, []);\n\n useEffect(() => { loadRequests(); }, []);\n\n const submit = async () => {\n const text = input.trim();\n if (!text) return;\n await fetch(\"/api/requests\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ text }),\n });\n setInput(\"\");\n loadRequests();\n };\n\n return (\n

Assistance Request

\n setInput(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && submit()}\n />\n \n Submit\n \n

Submitted Requests

\n {requests.length === 0 ? (\n

No requests submitted yet.

\n ) : (\n requests.map((r) => (\n

\n {r.text}\n

\n ))\n )}\n

\n );\n}\n\n// ─── Chat Tab ───\nfunction ChatTab() {\n const [username, setUsername] = useState(\"\");\n const [joined, setJoined] = useState(false);\n const [messages, setMessages] = useState([]);\n const [msgInput, setMsgInput] = useState(\"\");\n const messagesEndRef = useRef(null);\n const latestIdRef = useRef(0);\n const pollRef = useRef(null);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n // Initial load\n const loadMessages = useCallback(async () => {\n const res = await fetch(\"/api/chat/messages\");\n if (res.ok) {\n const msgs = await res.json();\n setMessages(msgs);\n if (msgs.length > 0) latestIdRef.current = msgs[msgs.length - 1].id;\n }\n }, []);\n\n // Poll for new messages\n const pollMessages = useCallback(async () => {\n const res = await fetch(`/api/chat/messages?after=${latestIdRef.current}`);\n if (res.ok) {\n const newMsgs = await res.json();\n if (newMsgs.length > 0) {\n latestIdRef.current = newMsgs[newMsgs.length - 1].id;\n setMessages((prev) => [...prev, ...newMsgs]);\n }\n }\n }, []);\n\n useEffect(() => {\n if (joined) {\n loadMessages();\n pollRef.current = setInterval(pollMessages, 2000);\n return () => clearInterval(pollRef.current);\n }\n }, [joined]);\n\n useEffect(scrollToBottom, [messages]);\n\n const joinChat = () => {\n if (username.trim()) setJoined(true);\n };\n\n const sendMessage = async () => {\n const message = msgInput.trim();\n if (!message) return;\n await fetch(\"/api/chat/messages\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ username, message }),\n });\n setMsgInput(\"\");\n pollMessages(); // immediately fetch new messages\n };\n\n if (!joined) {\n return (\n

💬 Join Chat

Enter a username to start chatting

\n setUsername(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && joinChat()}\n autoFocus\n />\n \n Join\n \n

\n );\n }\n\n return (\n

💬 Chat Room

\n \n Logged in as {username}\n \n

\n {/* Messages area */}\n

\n {messages.length === 0 && (\n

No messages yet. Say hello! 👋

\n )}\n {messages.map((m) => {\n const isMe = m.username === username;\n return (\n

\n \n {!isMe && (\n

{m.username}

\n )}\n

{m.message}

\n {new Date(m.created_at + \"Z\").toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" })}\n

\n );\n })}\n

\n {/* Input area */}\n

\n setMsgInput(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && sendMessage()}\n autoFocus\n />\n \n Send\n \n

\n );\n}\n\n// ─── Main App with Tabs ───\nfunction App() {\n const [tab, setTab] = useState(\"requests\");\n\n const tabs = [\n { id: \"requests\", label: \"📋 Requests\" },\n { id: \"chat\", label: \"💬 Chat\" },\n ];\n\n return (\n

Holberton Portal

\n {/* Tab bar */}\n

\n {tabs.map((t) => (\n setTab(t.id)}\n className={`px-5 py-3 text-sm font-medium transition border-b-2 -mb-px ${\n tab === t.id\n ? \"border-blue-500 text-blue-600\"\n : \"border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300\"\n }`}\n >\n {t.label}\n \n ))}\n

\n {/* Tab content */}\n {tab === \"requests\" ? : }\n {/* Footer */}\n

\n \n View Source\n \n

\n );\n}\n\nReactDOM.createRoot(document.getElementById(\"root\")).render();\n",[],[135,168],["D",1779461387359],[152,153],[135],["D",1779460802229],["D",1789497078049],{"_11":12,"_90":86},{"_11":12,"_83":84,"_85":86,"_45":46,"_87":88,"_89":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_78":-5,"_79":-5,"_80":-5,"_81":14,"_82":12},"ctx",{"_71":-5,"_111":216,"_217":218,"_219":220,"_221":38,"_222":38,"_223":38,"_224":124,"_225":-5,"_226":-7,"_227":-7,"_228":52,"_229":38,"_230":38,"_231":-5,"_232":38,"_233":38,"_234":38,"_235":-5},"ENV",{"_187":188,"_189":190,"_191":26,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Branches1

Branches
1