From 83974e0c95d65c72d12e7d58a287514c39f3768f Mon Sep 17 00:00:00 2001 From: Frank Date: Fri, 23 May 2025 14:17:45 -0400 Subject: Share: sync --- app/packages/web/src/app.css | 39 ++++++++ app/packages/web/src/app.tsx | 20 ++++ app/packages/web/src/entry-client.tsx | 4 + app/packages/web/src/entry-server.tsx | 21 ++++ app/packages/web/src/global.d.ts | 1 + app/packages/web/src/routes/[...404].tsx | 19 ++++ app/packages/web/src/routes/index.tsx | 14 +++ app/packages/web/src/routes/share/[id].tsx | 150 +++++++++++++++++++++++++++++ 8 files changed, 268 insertions(+) create mode 100644 app/packages/web/src/app.css create mode 100644 app/packages/web/src/app.tsx create mode 100644 app/packages/web/src/entry-client.tsx create mode 100644 app/packages/web/src/entry-server.tsx create mode 100644 app/packages/web/src/global.d.ts create mode 100644 app/packages/web/src/routes/[...404].tsx create mode 100644 app/packages/web/src/routes/index.tsx create mode 100644 app/packages/web/src/routes/share/[id].tsx (limited to 'app/packages/web/src') diff --git a/app/packages/web/src/app.css b/app/packages/web/src/app.css new file mode 100644 index 000000000..8596998a4 --- /dev/null +++ b/app/packages/web/src/app.css @@ -0,0 +1,39 @@ +body { + font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; +} + +a { + margin-right: 1rem; +} + +main { + text-align: center; + padding: 1em; + margin: 0 auto; +} + +h1 { + color: #335d92; + text-transform: uppercase; + font-size: 4rem; + font-weight: 100; + line-height: 1.1; + margin: 4rem auto; + max-width: 14rem; +} + +p { + max-width: 14rem; + margin: 2rem auto; + line-height: 1.35; +} + +@media (min-width: 480px) { + h1 { + max-width: none; + } + + p { + max-width: none; + } +} diff --git a/app/packages/web/src/app.tsx b/app/packages/web/src/app.tsx new file mode 100644 index 000000000..e6ad8f9df --- /dev/null +++ b/app/packages/web/src/app.tsx @@ -0,0 +1,20 @@ +import { MetaProvider, Title } from "@solidjs/meta" +import { Router } from "@solidjs/router" +import { FileRoutes } from "@solidjs/start/router" +import { Suspense } from "solid-js" +import "./app.css" + +export default function App() { + return ( + ( + + SolidStart - Basic + {props.children} + + )} + > + + + ) +} diff --git a/app/packages/web/src/entry-client.tsx b/app/packages/web/src/entry-client.tsx new file mode 100644 index 000000000..0ca4e3c30 --- /dev/null +++ b/app/packages/web/src/entry-client.tsx @@ -0,0 +1,4 @@ +// @refresh reload +import { mount, StartClient } from "@solidjs/start/client"; + +mount(() => , document.getElementById("app")!); diff --git a/app/packages/web/src/entry-server.tsx b/app/packages/web/src/entry-server.tsx new file mode 100644 index 000000000..401eff83f --- /dev/null +++ b/app/packages/web/src/entry-server.tsx @@ -0,0 +1,21 @@ +// @refresh reload +import { createHandler, StartServer } from "@solidjs/start/server"; + +export default createHandler(() => ( + ( + + + + + + {assets} + + +

{children}

+ {scripts} + + + )} + /> +)); diff --git a/app/packages/web/src/global.d.ts b/app/packages/web/src/global.d.ts new file mode 100644 index 000000000..dc6f10c22 --- /dev/null +++ b/app/packages/web/src/global.d.ts @@ -0,0 +1 @@ +/// diff --git a/app/packages/web/src/routes/[...404].tsx b/app/packages/web/src/routes/[...404].tsx new file mode 100644 index 000000000..4ea71ec7f --- /dev/null +++ b/app/packages/web/src/routes/[...404].tsx @@ -0,0 +1,19 @@ +import { Title } from "@solidjs/meta"; +import { HttpStatusCode } from "@solidjs/start"; + +export default function NotFound() { + return ( +

+ Not Found + +

Page Not Found

+ Visit{" "} + + start.solidjs.com + {" "} + to learn how to build SolidStart apps. +

+ ); +} diff --git a/app/packages/web/src/routes/index.tsx b/app/packages/web/src/routes/index.tsx new file mode 100644 index 000000000..415b32744 --- /dev/null +++ b/app/packages/web/src/routes/index.tsx @@ -0,0 +1,14 @@ +import { Title } from "@solidjs/meta" +import { A } from "@solidjs/router" + +export default function Home() { + return ( +

+ Share Demo +

Share Demo

+ Go to test share +

+ ) +} diff --git a/app/packages/web/src/routes/share/[id].tsx b/app/packages/web/src/routes/share/[id].tsx new file mode 100644 index 000000000..d7f80e06a --- /dev/null +++ b/app/packages/web/src/routes/share/[id].tsx @@ -0,0 +1,150 @@ +import { Title } from "@solidjs/meta" +import { createSignal, onCleanup, onMount, Show, For } from "solid-js" +import { useParams } from "@solidjs/router" + +type Message = { + filename: string + content: string +} + +export default function SharePage() { + const params = useParams<{ id: string }>() + const [messages, setMessages] = createSignal([]) + const [connectionStatus, setConnectionStatus] = createSignal("Disconnected") + + onMount(() => { + // Get the API URL from environment + const apiUrl = import.meta.env.VITE_API_URL + const shareId = params.id + + console.log("Mounting Share component with ID:", shareId) + console.log("API URL:", apiUrl) + + if (!apiUrl) { + console.error("API URL not found in environment variables") + setConnectionStatus("Error: API URL not found") + return + } + + let reconnectTimer: number | undefined + let socket: WebSocket | null = null + + // Function to create and set up WebSocket with auto-reconnect + const setupWebSocket = () => { + // Close any existing connection + if (socket) { + socket.close() + } + + setConnectionStatus("Connecting...") + + // Always use secure WebSocket protocol (wss) + const wsBaseUrl = apiUrl.replace(/^https?:\/\//, 'wss://') + const wsUrl = `${wsBaseUrl}/share_poll?share_id=${shareId}` + console.log("Connecting to WebSocket URL:", wsUrl) + + // Create WebSocket connection + socket = new WebSocket(wsUrl) + + // Handle connection opening + socket.onopen = () => { + setConnectionStatus("Connected") + console.log("WebSocket connection established") + } + + // Handle incoming messages + socket.onmessage = (event) => { + console.log("WebSocket message received") + try { + const data = JSON.parse(event.data) as Message + setMessages((prev) => [...prev, data]) + } catch (error) { + console.error("Error parsing WebSocket message:", error) + } + } + + // Handle errors + socket.onerror = (error) => { + console.error("WebSocket error:", error) + setConnectionStatus("Error: Connection failed") + } + + // Handle connection close and reconnection + socket.onclose = (event) => { + console.log(`WebSocket closed: ${event.code} ${event.reason}`) + setConnectionStatus("Disconnected, reconnecting...") + + // Try to reconnect after 2 seconds + clearTimeout(reconnectTimer) + reconnectTimer = window.setTimeout( + setupWebSocket, + 2000 + ) as unknown as number + } + } + + // Initial connection + setupWebSocket() + + // Clean up on component unmount + onCleanup(() => { + console.log("Cleaning up WebSocket connection") + if (socket) { + socket.close() + } + clearTimeout(reconnectTimer) + }) + }) + + return ( +

+ Share: {params.id} +

Share: {params.id}

+ +

WebSocket Connection

+ Status: {connectionStatus()} +

+ +

Live Updates

+ 0} + fallback={

Waiting for messages...

} + > +

+ {(msg) => ( +

+ Filename: {msg.filename} +

+ Content: {msg.content} +

+ )} +

+ +

+ ) +} -- cgit v1.2.3