From 5011603da6d44e24181e3e41ca4320815c3c53a6 Mon Sep 17 00:00:00 2001
From: Paul Fioravanti <paul.fioravanti@gmail.com>
Date: Wed, 22 Nov 2023 21:57:26 +1100
Subject: [PATCH] Refactor the way ports are done to only send tagged messages
 through one port

---
 front_end/src/Main.elm          |  2 +-
 front_end/src/Ports.elm         | 15 ++++++++++++---
 front_end/src/Ports/Cmd.elm     | 34 +++++++++++++++++++++++++++++++++
 front_end/src/Ports/Payload.elm | 11 +++++++++++
 front_end/src/index.js          | 15 +++++++++------
 5 files changed, 67 insertions(+), 10 deletions(-)
 create mode 100644 front_end/src/Ports/Cmd.elm
 create mode 100644 front_end/src/Ports/Payload.elm

diff --git a/front_end/src/Main.elm b/front_end/src/Main.elm
index bd57605..f32be5a 100644
--- a/front_end/src/Main.elm
+++ b/front_end/src/Main.elm
@@ -28,7 +28,7 @@ init : Flags -> Url -> Key -> ( Model, Cmd Msg )
 init flags url key =
     ( Model.init flags url (Just key)
     , Cmd.batch
-        [ Ports.initBodyProperties Styles.body
+        [ Ports.initBodyClasses Styles.body
         , Navigation.pushUrl key (Url.toString url)
         ]
     )
diff --git a/front_end/src/Ports.elm b/front_end/src/Ports.elm
index 18ddda8..231bbc5 100644
--- a/front_end/src/Ports.elm
+++ b/front_end/src/Ports.elm
@@ -1,7 +1,16 @@
-port module Ports exposing (initBodyProperties, storeLanguage)
+module Ports exposing
+    ( initBodyClasses
+    , storeLanguage
+    )
 
+import Ports.Cmd as Cmd
 
-port initBodyProperties : String -> Cmd msg
 
+initBodyClasses : String -> Cmd msg
+initBodyClasses classes =
+    Cmd.initBodyClasses classes
 
-port storeLanguage : String -> Cmd msg
+
+storeLanguage : String -> Cmd msg
+storeLanguage language =
+    Cmd.storeLanguage language
diff --git a/front_end/src/Ports/Cmd.elm b/front_end/src/Ports/Cmd.elm
new file mode 100644
index 0000000..423431f
--- /dev/null
+++ b/front_end/src/Ports/Cmd.elm
@@ -0,0 +1,34 @@
+port module Ports.Cmd exposing
+    ( initBodyClasses
+    , storeLanguage
+    )
+
+import Json.Encode as Encode exposing (Value)
+import Ports.Payload as Payload
+
+
+port outbound : Value -> Cmd msg
+
+
+initBodyClasses : String -> Cmd msg
+initBodyClasses classes =
+    outbound (stringPayload "classes" "INIT_BODY_CLASSES" classes)
+
+
+storeLanguage : String -> Cmd msg
+storeLanguage language =
+    outbound (stringPayload "language" "STORE_LANGUAGE" language)
+
+
+
+-- PRIVATE
+
+
+stringPayload : String -> String -> String -> Value
+stringPayload objectKey payloadTag string =
+    let
+        data : Value
+        data =
+            Encode.object [ ( objectKey, Encode.string string ) ]
+    in
+    Payload.withTaggedData ( payloadTag, data )
diff --git a/front_end/src/Ports/Payload.elm b/front_end/src/Ports/Payload.elm
new file mode 100644
index 0000000..bbd2949
--- /dev/null
+++ b/front_end/src/Ports/Payload.elm
@@ -0,0 +1,11 @@
+module Ports.Payload exposing (withTaggedData)
+
+import Json.Encode as Encode exposing (Value)
+
+
+withTaggedData : ( String, Value ) -> Value
+withTaggedData ( tag, data ) =
+    Encode.object
+        [ ( "tag", Encode.string tag )
+        , ( "data", data )
+        ]
diff --git a/front_end/src/index.js b/front_end/src/index.js
index 0e88625..7c9a8a3 100644
--- a/front_end/src/index.js
+++ b/front_end/src/index.js
@@ -13,12 +13,15 @@ const app =
     }
   })
 
-app.ports.initBodyProperties.subscribe(classes => {
-  document.body.className = classes
-})
-
-app.ports.storeLanguage.subscribe(language => {
-  localStorage.setItem("survey-tool-language", language)
+app.ports.outbound.subscribe(({ tag, data }) => {
+  switch (tag) {
+  case "INIT_BODY_CLASSES":
+    document.body.className = data.classes
+    break
+  case "STORE_LANGUAGE":
+    localStorage.setItem("survey-tool-language", data.language)
+    break
+  }
 })
 
 function getLanguage() {