Refactor the way ports are done to only send tagged messages through …

…one port

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)
         ]
     )

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

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 )

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 )
+        ]

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() {