From 031fdebeae4e73f0d2bded23dd7c175ea8583575 Mon Sep 17 00:00:00 2001
From: Sebastian Tilsch <sebastian.tilsch@slub-dresden.de>
Date: Fri, 27 Oct 2023 10:15:25 +0000
Subject: [PATCH] put forms debugger to extra component

---
 .../components/form/FormDebuggingTools.tsx    |  6 ++-
 .../components/form/SemanticJsonForm.tsx      | 53 +++----------------
 2 files changed, 13 insertions(+), 46 deletions(-)

diff --git a/apps/exhibition-live/components/form/FormDebuggingTools.tsx b/apps/exhibition-live/components/form/FormDebuggingTools.tsx
index 9aeca207..dbeeeb64 100644
--- a/apps/exhibition-live/components/form/FormDebuggingTools.tsx
+++ b/apps/exhibition-live/components/form/FormDebuggingTools.tsx
@@ -1,11 +1,15 @@
 import { JsonView } from "react-json-view-lite";
 import { Divider, Grid, Typography } from "@mui/material";
 import React from "react";
+import { useSettings } from "../state/useLocalSettings";
 
 type FormDebuggingToolsProps = {
   jsonData?: Record<string, any>;
 };
-const FormDebuggingTools = ({ jsonData }: FormDebuggingToolsProps) => {
+export const FormDebuggingTools = ({ jsonData }: FormDebuggingToolsProps) => {
+  const { features } = useSettings();
+  if (!features?.enableDebug) return null;
+
   return (
     <Grid container direction={"column"} spacing={2}>
       {Object.entries(jsonData).map(([key, value]) => {
diff --git a/apps/exhibition-live/components/form/SemanticJsonForm.tsx b/apps/exhibition-live/components/form/SemanticJsonForm.tsx
index fedf78b6..8386f7ec 100644
--- a/apps/exhibition-live/components/form/SemanticJsonForm.tsx
+++ b/apps/exhibition-live/components/form/SemanticJsonForm.tsx
@@ -70,6 +70,7 @@ import {
   useSPARQL_CRUD,
 } from "../state/useSPARQL_CRUD";
 import SimilarityFinder from "./SimilarityFinder";
+import { FormDebuggingTools } from "./FormDebuggingTools";
 
 export type CRUDOpsType = {
   load: () => Promise<void>;
@@ -329,38 +330,6 @@ const SemanticJsonForm: FunctionComponent<SemanticJsonFormsProps> = ({
             toolbarRef.current,
           )}
       </Hidden>
-      {features?.enableDebug && (
-        <>
-          <Switch
-            checked={jsonViewerEnabled}
-            onChange={(e) => setJsonViewerEnabled(Boolean(e.target.checked))}
-            title={"debug"}
-          />
-          {jsonViewerEnabled && (
-            <Switch
-              checked={isUpdate}
-              onChange={(e) => setIsUpdate(Boolean(e.target.checked))}
-              title={"upsert"}
-            />
-          )}
-        </>
-      )}
-      {hideToolbar && features?.enableDebug && (
-        <>
-          <Switch
-            checked={jsonViewerEnabled}
-            onChange={(e) => setJsonViewerEnabled(Boolean(e.target.checked))}
-            title={"debug"}
-          />
-          {jsonViewerEnabled && (
-            <Switch
-              checked={isUpdate}
-              onChange={(e) => setIsUpdate(Boolean(e.target.checked))}
-              title={"upsert"}
-            />
-          )}
-        </>
-      )}
       <Grid
         container
         spacing={2}
@@ -386,19 +355,13 @@ const SemanticJsonForm: FunctionComponent<SemanticJsonFormsProps> = ({
               />
             </CardContent>
           </Card>
-          {jsonViewerEnabled &&
-            [data, jsonldData, formData].map((data_, idx) => (
-              <Card key={idx}>
-                <CardContent>
-                  {entityIRI}
-                  <JsonView
-                    data={data_}
-                    shouldInitiallyExpand={(lvl) => lvl < 5}
-                  />
-                  <Divider />
-                </CardContent>
-              </Card>
-            ))}
+          <FormDebuggingTools
+            jsonData={{
+              rawData: data,
+              jsonldData: jsonldData,
+              formData: formData,
+            }}
+          />
         </Grid>
         {!hideSimilarityFinder && (
           <>