refactor(rawjsonvis): moves rawjsonvis into own component

The ReactJSONView was hardcoded into app.tsx and lives now in its own component.

apps/graphpolaris/src/app/app.tsx

@@ -2,45 +2,10 @@
 import {
   assignNewGraphQueryResult,
   useAppDispatch,
-  useGraphQueryResult,
 } from '@graphpolaris/shared/data-access/store';
-import React, { useEffect } from 'react';
-import ReactJSONView from 'react-json-view';
 import GridLayout from 'react-grid-layout';
 import Panel from '../web/components/panels/Panel';
-
-const RawJSONVis = React.memo(() => {
-  const graphQueryResult = useGraphQueryResult();
-  console.log('update rawjson');
-
-  useEffect(() => {
-    console.log('update rawjson useEffect');
-  }, [graphQueryResult]);
-
-  useEffect(() => {
-    return () => {
-      console.log('unloaded RawJSONVis');
-    };
-  }, []);
-
-  return (
-    <div style={{ overflowY: 'auto' }}>
-      <div
-        style={{
-          marginTop: '40px',
-          paddingLeft: '30px',
-        }}
-      >
-        <ReactJSONView
-          src={graphQueryResult}
-          collapsed={1}
-          quotesOnKeys={false}
-          displayDataTypes={false}
-        />
-      </div>
-    </div>
-  );
-});
+import { RawJSONVis } from './raw-jsonvis/raw-jsonvis';
 
 export function App() {
   const dispatch = useAppDispatch();

apps/graphpolaris/src/app/raw-jsonvis/raw-jsonvis.spec.tsx

+import { render } from '@testing-library/react';
+
+import RawJSONVis from './raw-jsonvis';
+
+describe('RawJSONVis', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<RawJSONVis />);
+    expect(baseElement).toBeTruthy();
+  });
+});

apps/graphpolaris/src/app/raw-jsonvis/raw-jsonvis.tsx

+import { useGraphQueryResult } from '@graphpolaris/shared/data-access/store';
+import React, { useEffect } from 'react';
+import ReactJSONView from 'react-json-view';
+import './raw-jsonvis.module.scss';
+
+/* eslint-disable-next-line */
+export interface RawJSONVisProps {}
+
+export const RawJSONVis = React.memo((props: RawJSONVisProps) => {
+  const graphQueryResult = useGraphQueryResult();
+  console.log('update rawjson');
+
+  useEffect(() => {
+    console.log('update rawjson useEffect');
+  }, [graphQueryResult]);
+
+  useEffect(() => {
+    return () => {
+      console.log('unloaded RawJSONVis');
+    };
+  }, []);
+
+  return (
+    <div style={{ overflowY: 'auto' }}>
+      <div
+        style={{
+          marginTop: '40px',
+          paddingLeft: '30px',
+        }}
+      >
+        <ReactJSONView
+          src={graphQueryResult}
+          collapsed={1}
+          quotesOnKeys={false}
+          displayDataTypes={false}
+        />
+      </div>
+    </div>
+  );
+});