luneski/mqtt-explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add syntax highlighting to raw / json values

Browse Source
This commit is contained in:
Thomas Nordquist
2019-07-17 19:49:10 +02:00
parent a7eacfac46
commit 5badd19015
2 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/src/components/Sidebar/ValueRenderer/ValueRenderer.tsx
View File

@@ -38,19 +38,19 @@ class ValueRenderer extends React.Component<Props, State> {
)
}
private convertMessage(msg?: Base64Message): string | undefined {
private convertMessage(msg?: Base64Message): [string | undefined, 'json' | undefined] {
if (!msg) {
return
return [undefined, undefined]
}
const str = Base64Message.toUnicodeString(msg)
try {
JSON.parse(str)
} catch (error) {
return str
return [str, undefined]
}
return this.messageToPrettyJson(str)
return [this.messageToPrettyJson(str), 'json']
}
private messageToPrettyJson(str: string): string | undefined {
@@ -66,14 +66,17 @@ class ValueRenderer extends React.Component<Props, State> {
if (!message.value) {
return
}
const value = this.convertMessage(message.value)
const compareStr = compare && compare.value ? this.convertMessage(compare.value) : undefined
const [value, valueLanguage] = this.convertMessage(message.value)
const [compareStr, compareStrLanguage] =
compare && compare.value ? this.convertMessage(compare.value) : [undefined, undefined]
return (
<div>
{this.renderDiff(value, value)}
{this.renderDiff(value, value, undefined, valueLanguage)}
<Fade in={Boolean(compareStr)} timeout={400}>
<div>{Boolean(compareStr) ? this.renderDiff(compareStr, compareStr, 'selected') : null}</div>
<div>
{Boolean(compareStr) ? this.renderDiff(compareStr, compareStr, 'selected', compareStrLanguage) : null}
</div>
</Fade>
</div>
)
@@ -97,10 +100,10 @@ class ValueRenderer extends React.Component<Props, State> {
}
const compareValue = compareMessage.value || message.value
const current = this.convertMessage(message.value)
const compare = this.convertMessage(compareValue)
const [current, currentLanguage] = this.convertMessage(message.value)
const [compare, compareLanguage] = this.convertMessage(compareValue)
const language = current && compare ? 'json' : undefined
const language = currentLanguage === compareLanguage && compareLanguage === 'json' ? 'json' : undefined
return this.renderDiff(current, compare, undefined, language)
}