Use JSON over strings as payload format

app/src/actions/Publish.ts

@@ -2,6 +2,7 @@ import { Action, ActionTypes } from '../reducers/Publish'
 import { AppState } from '../reducers'
 import { Dispatch } from 'redux'
 import { makePublishEvent, rendererEvents } from '../../../events'
+import { Base64Message } from '../../../backend/src/Model/Base64Message';
 
 export const setTopic = (topic?: string): Action  => {
   return {
@@ -42,7 +43,7 @@ export const publish = (connectionId: string) => (dispatch: Dispatch<Action>, ge
   const publishEvent = makePublishEvent(connectionId)
   const mqttMessage = {
     topic,
-    payload: state.publish.payload,
+    payload: state.publish.payload ? Base64Message.fromString(state.publish.payload) : null,
     retain: state.publish.retain,
     qos: state.publish.qos,
   }

app/src/actions/Settings.ts

@@ -12,6 +12,7 @@ import {
   SettingsState,
   TopicOrder,
 } from '../reducers/Settings'
+import { Base64Message } from '../../../backend/src/Model/Base64Message';
 
 const settingsIdentifier: StorageIdentifier<Partial<SettingsState>> = {
   id: 'Settings',
@@ -110,7 +111,10 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, get
       return true
     }
 
-    const messageMatches = (node.message && typeof node.message.value === 'string' && node.message.value.toLowerCase().indexOf(filterStr) !== -1)
+    const messageMatches = node.message
+      && node.message.value
+      && Base64Message.toUnicodeString(node.message.value).toLowerCase().indexOf(filterStr) !== -1
+
     return Boolean(messageMatches)
   }