From d51b4263aba59f60277766fc024f2931fc8874ec Mon Sep 17 00:00:00 2001 From: Frank Date: Fri, 23 May 2025 15:57:33 -0400 Subject: Share: sync --- app/packages/web/src/App.module.css | 33 ++++++ app/packages/web/src/app.css | 39 ------- app/packages/web/src/app.tsx | 164 ++++++++++++++++++++++++++--- app/packages/web/src/assets/favicon.ico | Bin 0 -> 15086 bytes 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/index.css | 13 +++ app/packages/web/src/index.tsx | 24 +++++ app/packages/web/src/logo.svg | 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 -------------------------- app/packages/web/src/sst-env.d.ts | 10 ++ 14 files changed, 230 insertions(+), 263 deletions(-) create mode 100644 app/packages/web/src/App.module.css delete mode 100644 app/packages/web/src/app.css create mode 100644 app/packages/web/src/assets/favicon.ico delete mode 100644 app/packages/web/src/entry-client.tsx delete mode 100644 app/packages/web/src/entry-server.tsx delete mode 100644 app/packages/web/src/global.d.ts create mode 100644 app/packages/web/src/index.css create mode 100644 app/packages/web/src/index.tsx create mode 100644 app/packages/web/src/logo.svg delete mode 100644 app/packages/web/src/routes/[...404].tsx delete mode 100644 app/packages/web/src/routes/index.tsx delete mode 100644 app/packages/web/src/routes/share/[id].tsx create mode 100644 app/packages/web/src/sst-env.d.ts (limited to 'app/packages/web/src') diff --git a/app/packages/web/src/App.module.css b/app/packages/web/src/App.module.css new file mode 100644 index 000000000..48308b24a --- /dev/null +++ b/app/packages/web/src/App.module.css @@ -0,0 +1,33 @@ +.App { + text-align: center; +} + +.logo { + animation: logo-spin infinite 20s linear; + height: 40vmin; + pointer-events: none; +} + +.header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.link { + color: #b318f0; +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/app/packages/web/src/app.css b/app/packages/web/src/app.css deleted file mode 100644 index 8596998a4..000000000 --- a/app/packages/web/src/app.css +++ /dev/null @@ -1,39 +0,0 @@ -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 index e6ad8f9df..ee09bc954 100644 --- a/app/packages/web/src/app.tsx +++ b/app/packages/web/src/app.tsx @@ -1,20 +1,154 @@ -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" +import { createSignal, onCleanup, onMount, Show, For } from "solid-js" +import { useParams } from "@solidjs/router" + +type Message = { + key: string + content: string +} export default function App() { + 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 (!shareId) { + console.error("Share ID not found in environment variables") + setConnectionStatus("Error: Share ID not found") + return + } + + 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 ( - ( - - SolidStart - Basic - {props.children} - - )} - > - - +
+

Share: {params.id}

+ +
+

WebSocket Connection

+

+ Status: {connectionStatus()} +

+ +

Live Updates

+
+ 0} + fallback={

Waiting for messages...

} + > +
    + + {(msg) => ( +
  • +
    + Key: {msg.key} +
    +
    + Content: {msg.content} +
    +
    • + )} +     +
+ +
+
+
) } diff --git a/app/packages/web/src/assets/favicon.ico b/app/packages/web/src/assets/favicon.ico new file mode 100644 index 000000000..b836b2bcc Binary files /dev/null and b/app/packages/web/src/assets/favicon.ico differ diff --git a/app/packages/web/src/entry-client.tsx b/app/packages/web/src/entry-client.tsx deleted file mode 100644 index 0ca4e3c30..000000000 --- a/app/packages/web/src/entry-client.tsx +++ /dev/null @@ -1,4 +0,0 @@ -// @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 deleted file mode 100644 index 401eff83f..000000000 --- a/app/packages/web/src/entry-server.tsx +++ /dev/null @@ -1,21 +0,0 @@ -// @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 deleted file mode 100644 index dc6f10c22..000000000 --- a/app/packages/web/src/global.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/app/packages/web/src/index.css b/app/packages/web/src/index.css new file mode 100644 index 000000000..85e778f43 --- /dev/null +++ b/app/packages/web/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', + 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', + 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/app/packages/web/src/index.tsx b/app/packages/web/src/index.tsx new file mode 100644 index 000000000..823bf0fb8 --- /dev/null +++ b/app/packages/web/src/index.tsx @@ -0,0 +1,24 @@ +/* @refresh reload */ +import { render } from "solid-js/web" +import { Router, Route } from "@solidjs/router" + +import "./index.css" +import App from "./App" + +const root = document.getElementById("root") + +if (import.meta.env.DEV && !(root instanceof HTMLElement)) { + throw new Error( + "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?", + ) +} + +render( + () => ( + + + + + ), + root!, +) diff --git a/app/packages/web/src/logo.svg b/app/packages/web/src/logo.svg new file mode 100644 index 000000000..025aa303c --- /dev/null +++ b/app/packages/web/src/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/packages/web/src/routes/[...404].tsx b/app/packages/web/src/routes/[...404].tsx deleted file mode 100644 index 4ea71ec7f..000000000 --- a/app/packages/web/src/routes/[...404].tsx +++ /dev/null @@ -1,19 +0,0 @@ -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 deleted file mode 100644 index 415b32744..000000000 --- a/app/packages/web/src/routes/index.tsx +++ /dev/null @@ -1,14 +0,0 @@ -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 deleted file mode 100644 index 851197de7..000000000 --- a/app/packages/web/src/routes/share/[id].tsx +++ /dev/null @@ -1,150 +0,0 @@ -import { Title } from "@solidjs/meta" -import { createSignal, onCleanup, onMount, Show, For } from "solid-js" -import { useParams } from "@solidjs/router" - -type Message = { - key: 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) => ( -
  • -
    - Key: {msg.key} -
    -
    - Content: {msg.content} -
    -
    • - )} -     -
- -
-
-
- ) -} diff --git a/app/packages/web/src/sst-env.d.ts b/app/packages/web/src/sst-env.d.ts new file mode 100644 index 000000000..4addc8ef9 --- /dev/null +++ b/app/packages/web/src/sst-env.d.ts @@ -0,0 +1,10 @@ +/* This file is auto-generated by SST. Do not edit. */ +/* tslint:disable */ +/* eslint-disable */ +/// +interface ImportMetaEnv { + readonly VITE_API_URL: string +} +interface ImportMeta { + readonly env: ImportMetaEnv +} \ No newline at end of file -- cgit v1.2.3