refactor: remove unused websocket playground, replace with code example (#159)

Author: magnus-madsen

package-lock.json

@@ -11,8 +11,7 @@
     "react-router": "^7.13.2",
     "react-router-dom": "^7.13.2",
     "react-spinners": "^0.17.0",
-    "reactstrap": "^9.2.3",
-    "reconnecting-websocket": "^4.4.0"
+    "reactstrap": "^9.2.3"
   },
   "scripts": {
     "build-script": "node build-scripts/main.mjs",

package.json

@@ -41,18 +41,6 @@ p:last-child {
     font-size: 1.35rem;
 }
 
-.editor-output h5 {
-    font-size: 1.1rem;
-    color: gray;
-    text-align: center;
-    padding-bottom: 0.5rem;
-    border-bottom: 1px solid #b7b7b7;
-}
-
-.editor-output pre {
-    font-family: monospace;
-}
-
 .inline-editor-frame {
     margin-top: 1em;
     margin-bottom: 1.5em;

src/App.css

@@ -1,4 +1,3 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
 import './App.css';
 
 import Home from "./page/Home";
@@ -12,64 +11,10 @@ import { Container, Navbar, Nav, NavItem, NavLink, Row } from 'reactstrap';
 import { Route, Routes } from "react-router";
 import { Link } from "react-router-dom";
 
-import ReconnectingWebSocket from 'reconnecting-websocket';
 import Blog from "./page/Blog";
 import Internships from "./page/Internships";
 
-const SocketAddress = 'wss://evaluator.flix.dev/ws';
-
 function App() {
-    const [connected, setConnected] = useState(false);
-    const websocketRef = useRef(null);
-
-    useEffect(() => {
-        console.log("Connecting to: " + SocketAddress);
-
-        let options = {
-            connectionTimeout: 2500
-        };
-
-        const ws = new ReconnectingWebSocket(SocketAddress, [], options);
-
-        ws.addEventListener("open", () => {
-            console.log("Connected to: " + SocketAddress);
-            setConnected(true);
-        });
-        ws.addEventListener("close", event => {
-            console.log("Disconnected from: " + SocketAddress);
-            console.log(event);
-            setConnected(false);
-        });
-        ws.addEventListener("error", event => {
-            console.log("Disconnected from: " + SocketAddress);
-            console.log(event);
-            setConnected(false);
-        });
-
-        websocketRef.current = ws;
-
-        return () => {
-            ws.close();
-        };
-    }, []);
-
-    const runProgram = useCallback((src, callback) => {
-        if (!connected) {
-            console.log("Not connected yet");
-            return;
-        }
-
-        websocketRef.current.onmessage = event => {
-            console.log("Received reply from: " + SocketAddress);
-            const data = JSON.parse(event.data);
-
-            console.log(data);
-            callback(data);
-        };
-
-        websocketRef.current.send(JSON.stringify({ src }));
-    }, [connected]);
-
     return (
         <Container className="page">
             <Navbar dark color="info" expand="md" className="menu shadow-sm mb-4">
@@ -114,7 +59,7 @@ function App() {
             </Navbar>
 
             <Routes>
-                <Route path="/" element={<Home flix={{ connected, run: runProgram }} />} />
+                <Route path="/" element={<Home />} />
                 <Route path="/get-started/" element={<GetStarted />} />
                 <Route path="/vscode/" element={<VSCode />} />
                 <Route path="/principles/" element={<Principles />} />

src/App.jsx

@@ -10,7 +10,6 @@ import {
     Row,
     UncontrolledCarousel
 } from 'reactstrap';
-import Codebox from "../util/Codebox";
 import InlineEditor from "../util/InlineEditor";
 
 const carousel = [
@@ -36,7 +35,7 @@ const carousel = [
     }
 ];
 
-function Home({ flix }) {
+function Home() {
     useEffect(() => {
         document.title = "The Flix Programming Language";
     }, []);
@@ -88,7 +87,39 @@ function Home({ flix }) {
                         </p>
                     </Col>
                     <Col md="6">
-                    <Codebox flix={flix}/>
+                        <InlineEditor>{`/// Demonstrates composing multiple HTTP middleware
+/// via \`with\` clauses. Stacks base URL, default
+/// headers, retry, circuit breaker, and logging.
+/// Each \`with\` wraps the
+/// preceding block. The \`Http\` and \`Logger\` effects
+/// propagate to \`main\` and are handled automatically
+/// via their default handlers. Relative paths are
+/// resolved against the base URL; absolute URLs
+/// bypass it.
+def main(): Unit \\ { Clock, Http, Logger, IO } =
+    let defaultHeaders = Map#{
+        "Accept"        => List#{"application/json"},
+        "Authorization" => List#{"Bearer tok123"}
+    };
+    run {
+        let urls = List#{"/api/users", "/api/posts"};
+        foreach (url <- urls) {
+            match Http.get(url) {
+                case Ok(res) => println("\${url} -> \${status(res)}")
+                case Err(err) => println("\${url} -> \${err}")
+            }
+        };
+        match Http.get("https://notfound.flix.dev/") {
+            case Ok(res) => println("notfound -> \${status(res)}")
+            case Err(err) => println("notfound -> \${err}")
+        }
+    } with Http.withBaseUrl("https://flix.dev")
+      with Http.withDefaultHeaders(defaultHeaders)
+      with Http.withRetry(
+        Retry.linear(maxRetries = 2, delay = milliseconds(100)))
+      with Http.withCircuitBreaker(
+        failureThreshold = 3, cooldown = seconds(5))
+      with Http.withLogging`}</InlineEditor>
                     </Col>
                 </Row>