From 51d8af651c387fc6101c61910162f13f30396dfc Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 20 Oct 2020 22:06:02 +0200
Subject: [PATCH] refactor

---
 src/components/pages/Publish/Debug.tsx | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/components/pages/Publish/Debug.tsx b/src/components/pages/Publish/Debug.tsx
index b4e652ed2..61c5d7de0 100644
--- a/src/components/pages/Publish/Debug.tsx
+++ b/src/components/pages/Publish/Debug.tsx
@@ -3,6 +3,15 @@ import { MetadataPublishForm } from '../../../@types/MetaData'
 import styles from './index.module.css'
 import { transformPublishFormToMetadata } from './utils'
 
+const Output = ({ title, output }: { title: string; output: any }) => (
+  <div>
+    <h5>{title}</h5>
+    <pre>
+      <code>{JSON.stringify(output, null, 2)}</code>
+    </pre>
+  </div>
+)
+
 export default function Debug({
   values
 }: {
@@ -26,21 +35,11 @@ export default function Debug({
       }
     ]
   }
+
   return (
     <div className={styles.grid}>
-      <div>
-        <h5>Collected Form Values</h5>
-        <pre>
-          <code>{JSON.stringify(values, null, 2)}</code>
-        </pre>
-      </div>
-
-      <div>
-        <h5>Transformed DDO Values</h5>
-        <pre>
-          <code>{JSON.stringify(ddo, null, 2)}</code>
-        </pre>
-      </div>
+      <Output title="Collected Form Values" output={values} />
+      <Output title="Transformed DDO Values" output={ddo} />
     </div>
   )
 }