Make rooms

Signed-off-by: Naomi Roberts <[e-mail]>

gleam.toml

···
 logging = ">= 1.3.0 and < 2.0.0"
 gleam_http = ">= 4.3.0 and < 5.0.0"
 gleam_json = ">= 3.0.2 and < 4.0.0"
+formal = ">= 3.0.0 and < 4.0.0"
 
 [dev-dependencies]
 gleeunit = ">= 1.0.0 and < 2.0.0"

manifest.toml

···
   { name = "compresso", version = "0.1.0", build_tools = ["gleam"], requirements = ["exception", "gleam_erlang", "gleam_stdlib", "gleam_yielder", "logging"], otp_app = "compresso", source = "hex", outer_checksum = "8BE29A1EDA42F70826ED148EAE40C46BB3FC18E78FE472663DB01DD4A38172D4" },
   { name = "ewe", version = "2.0.2", build_tools = ["gleam"], requirements = ["compresso", "gleam_crypto", "gleam_erlang", "gleam_http", "gleam_otp", "gleam_stdlib", "glisten", "logging"], otp_app = "ewe", source = "hex", outer_checksum = "55FABC310F9C0EC67021F6CA973ED59A37481E39E6A850813D5B6F4CEA241A68" },
   { name = "exception", version = "2.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "exception", source = "hex", outer_checksum = "329D269D5C2A314F7364BD2711372B6F2C58FA6F39981572E5CA68624D291F8C" },
+  { name = "formal", version = "3.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "gleam_time"], otp_app = "formal", source = "hex", outer_checksum = "686D0C4C9CB36397DBAC2EC8C6ED9BD0F81B2DF2E88F75A7DB75F56768DDD8FC" },
   { name = "gleam_crypto", version = "1.5.1", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_crypto", source = "hex", outer_checksum = "50774BAFFF1144E7872814C566C5D653D83A3EBF23ACC3156B757A1B6819086E" },
   { name = "gleam_erlang", version = "1.3.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "1124AD3AA21143E5AF0FC5CF3D9529F6DB8CA03E43A55711B60B6B7B3874375C" },
   { name = "gleam_http", version = "4.3.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_http", source = "hex", outer_checksum = "82EA6A717C842456188C190AFB372665EA56CE13D8559BF3B1DD9E40F619EE0C" },
   { name = "gleam_json", version = "3.0.2", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_json", source = "hex", outer_checksum = "874FA3C3BB6E22DD2BB111966BD40B3759E9094E05257899A7C08F5DE77EC049" },
   { name = "gleam_otp", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_stdlib"], otp_app = "gleam_otp", source = "hex", outer_checksum = "BA6A294E295E428EC1562DC1C11EA7530DCB981E8359134BEABC8493B7B2258E" },
   { name = "gleam_stdlib", version = "0.65.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "7C69C71D8C493AE11A5184828A77110EB05A7786EBF8B25B36A72F879C3EE107" },
+  { name = "gleam_time", version = "1.4.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_time", source = "hex", outer_checksum = "DCDDC040CE97DA3D2A925CDBBA08D8A78681139745754A83998641C8A3F6587E" },
   { name = "gleam_yielder", version = "1.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_yielder", source = "hex", outer_checksum = "8E4E4ECFA7982859F430C57F549200C7749823C106759F4A19A78AEA6687717A" },
   { name = "gleeunit", version = "1.6.1", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "FDC68A8C492B1E9B429249062CD9BAC9B5538C6FBF584817205D0998C42E1DAC" },
   { name = "glisten", version = "8.0.1", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib", "logging", "telemetry"], otp_app = "glisten", source = "hex", outer_checksum = "534BB27C71FB9E506345A767C0D76B17A9E9199934340C975DC003C710E3692D" },
···
 
 [requirements]
 ewe = { version = ">= 2.0.1 and < 3.0.0" }
+formal = { version = ">= 3.0.0 and < 4.0.0" }
 gleam_erlang = { version = ">= 1.3.0 and < 2.0.0" }
 gleam_http = { version = ">= 4.3.0 and < 5.0.0" }
 gleam_json = { version = ">= 3.0.2 and < 4.0.0" }

src/clover.gleam

···
 import clover/counter
 import clover/data
+import clover/pages/index
+import clover/pages/room
 import ewe
-import gleam/bytes_tree
+import formal/form
 import gleam/erlang/application
 import gleam/erlang/process
 import gleam/http/request
 import gleam/http/response
 import gleam/int
-import gleam/json
+import gleam/list
 import gleam/option
+import gleam/string
+import gleam/uri
 import logging
 import lustre
-import lustre/attribute as attr
-import lustre/element
-import lustre/element/html
-import lustre/server_component
 
 pub fn main() {
   logging.configure()
···
   use req <- log_req(req)
 
   case request.path_segments(req) {
-    [] -> serve_html()
+    [] -> data.page(index.view())
+    ["new"] -> {
+      case list.key_find(req.headers, "content-type") {
+        Ok("application/x-www-form-urlencoded")
+        | Ok("application/x-www-form-urlencoded; " <> _) -> {
+          use body <- data.require_string_body(req)
+          case uri.parse_query(body) {
+            Error(_) -> data.bad_request("Invalid form encoding")
+            Ok(pairs) -> {
+              let pairs = sort_keys(pairs)
+              let form = index.room_form() |> form.add_values(pairs)
+              case form.run(form) {
+                Ok(data) -> data.redirect("/room/" <> data.id)
+                Error(_) -> data.redirect("/")
+              }
+            }
+          }
+        }
+        _ -> data.redirect("/")
+      }
+    }
+    ["room", id] -> data.page(room.view(id))
+    ["room", id, "html"] -> data.page(room.view_html(id))
     ["lustre", "runtime.mjs"] -> serve_runtime()
     ["ws"] -> serve_counter(req, counter)
     _ -> data.not_found()
   }
 }
 
-fn serve_html() -> response.Response(ewe.ResponseBody) {
-  let html =
-    html.html([attr.lang("en")], [
-      html.head([], [
-        html.meta([attr.charset("utf-8")]),
-        html.meta([
-          attr.name("viewport"),
-          attr.content("width=device-width, initial-scale=1"),
-        ]),
-        html.title([], "Clover"),
-        html.script([attr.type_("module"), attr.src("/lustre/runtime.mjs")], ""),
-      ]),
-      html.body(
-        [attr.styles([#("max-width", "32rem"), #("margin", "3rem auto")])],
-        [server_component.element([server_component.route("/ws")], [])],
-      ),
-    ])
-    |> element.to_document_string_tree()
-    |> bytes_tree.from_string_tree()
-
-  response.new(200)
-  |> data.html_response(html)
+fn sort_keys(pairs: List(#(String, t))) -> List(#(String, t)) {
+  list.sort(pairs, fn(a, b) { string.compare(a.0, b.0) })
 }
 
 fn serve_runtime() -> response.Response(ewe.ResponseBody) {
···
   req: request.Request(ewe.Connection),
   counter: lustre.Runtime(counter.Msg),
 ) -> response.Response(ewe.ResponseBody) {
-  let on_init = fn(a, b) { init_counter_socket(a, b, counter) }
+  let on_init = fn(a, b) { counter.init_socket(a, b, counter) }
 
   req
   |> ewe.upgrade_websocket(
     on_init:,
-    handler: loop_counter_socket,
-    on_close: close_counter_socket,
+    handler: counter.loop_socket,
+    on_close: counter.close_socket,
   )
 }
-
-type CounterSocket {
-  CounterSocket(
-    component: lustre.Runtime(counter.Msg),
-    self: process.Subject(server_component.ClientMessage(counter.Msg)),
-  )
-}
-
-fn init_counter_socket(
-  _: ewe.WebsocketConnection,
-  _: process.Selector(_),
-  counter counter: lustre.Runtime(counter.Msg),
-) -> #(CounterSocket, process.Selector(_)) {
-  let self = process.new_subject()
-  let selector =
-    process.new_selector()
-    |> process.select(self)
-
-  server_component.register_subject(self)
-  |> lustre.send(to: counter)
-
-  #(CounterSocket(component: counter, self:), selector)
-}
-
-fn loop_counter_socket(
-  conn: ewe.WebsocketConnection,
-  value: CounterSocket,
-  msg: ewe.WebsocketMessage(server_component.ClientMessage(counter.Msg)),
-) -> ewe.WebsocketNext(
-  CounterSocket,
-  server_component.ClientMessage(counter.Msg),
-) {
-  case msg {
-    ewe.Text(json) -> {
-      case json.parse(json, server_component.runtime_message_decoder()) {
-        Ok(runtime_msg) -> lustre.send(value.component, runtime_msg)
-        Error(_) -> Nil
-      }
-      ewe.websocket_continue(value)
-    }
-    ewe.Binary(_) -> ewe.websocket_continue(value)
-    ewe.User(client_msg) -> {
-      let json = server_component.client_message_to_json(client_msg)
-      let assert Ok(_) = ewe.send_text_frame(conn, json.to_string(json))
-      ewe.websocket_continue(value)
-    }
-  }
-}
-
-fn close_counter_socket(_: ewe.WebsocketConnection, value: CounterSocket) -> Nil {
-  server_component.deregister_subject(value.self)
-  |> lustre.send(to: value.component)
-}

src/clover/counter.gleam

···
+import ewe
+import gleam/erlang/process
 import gleam/int
+import gleam/json
 import lustre
 import lustre/attribute as attr
 import lustre/element
 import lustre/element/html
 import lustre/event
+import lustre/server_component
 
 pub fn component() -> lustre.App(_, Model, Msg) {
   lustre.simple(init, update, view)
···
 fn view_button(string: String, msg: Msg) -> element.Element(Msg) {
   html.button([event.on_click(msg)], [html.text(string)])
 }
+
+// Server Component stuff
+
+pub type Socket {
+  Socket(
+    component: lustre.Runtime(Msg),
+    self: process.Subject(server_component.ClientMessage(Msg)),
+  )
+}
+
+pub fn init_socket(
+  _: ewe.WebsocketConnection,
+  _: process.Selector(_),
+  counter counter: lustre.Runtime(Msg),
+) -> #(Socket, process.Selector(_)) {
+  let self = process.new_subject()
+  let selector =
+    process.new_selector()
+    |> process.select(self)
+
+  server_component.register_subject(self)
+  |> lustre.send(to: counter)
+
+  #(Socket(component: counter, self:), selector)
+}
+
+pub fn loop_socket(
+  conn: ewe.WebsocketConnection,
+  value: Socket,
+  msg: ewe.WebsocketMessage(server_component.ClientMessage(Msg)),
+) -> ewe.WebsocketNext(Socket, server_component.ClientMessage(Msg)) {
+  case msg {
+    ewe.Text(json) -> {
+      case json.parse(json, server_component.runtime_message_decoder()) {
+        Ok(runtime_msg) -> lustre.send(value.component, runtime_msg)
+        Error(_) -> Nil
+      }
+      ewe.websocket_continue(value)
+    }
+    ewe.Binary(_) -> ewe.websocket_continue(value)
+    ewe.User(client_msg) -> {
+      let json = server_component.client_message_to_json(client_msg)
+      let assert Ok(_) = ewe.send_text_frame(conn, json.to_string(json))
+      ewe.websocket_continue(value)
+    }
+  }
+}
+
+pub fn close_socket(_: ewe.WebsocketConnection, value: Socket) -> Nil {
+  server_component.deregister_subject(value.self)
+  |> lustre.send(to: value.component)
+}

src/clover/data.gleam

···
 import ewe
+import gleam/bit_array
 import gleam/bytes_tree
+import gleam/http/request
 import gleam/http/response
+import lustre/attribute as attr
+import lustre/element
+import lustre/element/html
 
-pub fn text_response(
+pub fn text(
   resp: response.Response(_),
   string: String,
 ) -> response.Response(ewe.ResponseBody) {
···
   |> response.set_body(ewe.TextData(string))
 }
 
-pub fn html_response(
+pub fn html(
   resp: response.Response(_),
   bytes: bytes_tree.BytesTree,
 ) -> response.Response(ewe.ResponseBody) {
···
   response.new(404)
   |> response.set_body(ewe.Empty)
 }
+
+pub fn redirect(to url: String) -> response.Response(ewe.ResponseBody) {
+  response.new(303)
+  |> response.set_header("location", url)
+  |> response.set_header("content-type", "text/plain; charset=utf-8")
+  |> response.set_body(ewe.TextData("You are being redirected: " <> url))
+}
+
+pub fn page(body: element.Element(a)) -> response.Response(ewe.ResponseBody) {
+  let r =
+    html.html([attr.lang("en")], [
+      html.head([], [
+        html.meta([attr.charset("utf-8")]),
+        html.meta([
+          attr.name("viewport"),
+          attr.content("width=device-width, initial-scale=1"),
+        ]),
+        html.title([], "Clover"),
+        html.script([attr.type_("module"), attr.src("/lustre/runtime.mjs")], ""),
+      ]),
+      body,
+    ])
+    |> element.to_document_string_tree()
+    |> bytes_tree.from_string_tree()
+
+  response.new(200)
+  |> html(r)
+}
+
+pub fn bad_request(detail: String) -> response.Response(ewe.ResponseBody) {
+  let body = case detail {
+    "" -> "Bad request"
+    _ -> "Bad request: " <> detail
+  }
+  response.new(400)
+  |> response.set_header("content-type", "text/plain")
+  |> response.set_body(ewe.TextData(body))
+}
+
+pub fn require_string_body(
+  req: request.Request(ewe.Connection),
+  next: fn(String) -> response.Response(ewe.ResponseBody),
+) -> response.Response(ewe.ResponseBody) {
+  case bit_array.to_string(req.body.buffer.data) {
+    Ok(body) -> next(body)
+    Error(_) -> bad_request("Invalid UTF-8")
+  }
+}

src/clover/pages/index.gleam

···
+import formal/form
+import gleam/list
+import lustre/attribute as attr
+import lustre/element/html
+
+pub type RoomInput {
+  RoomInput(id: String)
+}
+
+pub fn room_form() -> form.Form(RoomInput) {
+  form.new({
+    use id <- form.field("id", form.parse_string)
+    form.success(RoomInput(id:))
+  })
+}
+
+pub fn view() {
+  let form = room_form()
+  html.body([attr.styles([#("max-width", "32rem"), #("margin", "3rem auto")])], [
+    html.h1([], [html.text("Clover")]),
+    html.form([attr.method("POST"), attr.action("/new")], [
+      field_input(form:, label: "Room ID", type_: "text", name: "id"),
+      html.div([], [html.input([attr.type_("submit")])]),
+    ]),
+  ])
+}
+
+fn field_input(
+  form form: form.Form(RoomInput),
+  label label: String,
+  type_ type_: String,
+  name name: String,
+) {
+  let errors = form.field_error_messages(form, name)
+  html.label([], [
+    html.text(label),
+    html.input([
+      attr.type_(type_),
+      attr.name(name),
+      attr.value(form.field_value(form, name)),
+      case errors {
+        [] -> attr.none()
+        _ -> attr.aria_invalid("true")
+      },
+    ]),
+    ..list.map(errors, fn(msg) { html.small([], [html.text(msg)]) })
+  ])
+}

src/clover/pages/room.gleam

···
+import lustre/attribute as attr
+import lustre/element/html
+import lustre/server_component
+
+pub fn view(id: String) {
+  html.body([attr.styles([#("max-width", "32rem"), #("margin", "3rem auto")])], [
+    html.a([attr.href("/")], [html.text("< Home")]),
+    html.h1([], [html.text("Room ID: "), html.text(id)]),
+    server_component.element([server_component.route("/ws")], []),
+  ])
+}
+
+pub fn view_html(_id: String) {
+  html.body([attr.styles([#("max-width", "32rem"), #("margin", "3rem auto")])], [
+    server_component.element([server_component.route("/ws")], []),
+  ])
+}