From 578e27bf11749094eb70c2078561fa0e6fa4a465 Mon Sep 17 00:00:00 2001
From: Michael Behrisch <m.behrisch@uu.nl>
Date: Sat, 5 Feb 2022 16:48:37 +0100
Subject: [PATCH] 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 | 37 +----------------
.../app/raw-jsonvis/raw-jsonvis.module.scss | 0
.../src/app/raw-jsonvis/raw-jsonvis.spec.tsx | 10 +++++
.../src/app/raw-jsonvis/raw-jsonvis.tsx | 40 +++++++++++++++++++
4 files changed, 51 insertions(+), 36 deletions(-)
create mode 100644 apps/graphpolaris/src/app/raw-jsonvis/raw-jsonvis.module.scss
create mode 100644 apps/graphpolaris/src/app/raw-jsonvis/raw-jsonvis.spec.tsx
create mode 100644 apps/graphpolaris/src/app/raw-jsonvis/raw-jsonvis.tsx
diff --git a/apps/graphpolaris/src/app/app.tsx b/apps/graphpolaris/src/app/app.tsx
index c1255e7dd..6bb0f1c79 100644
--- a/apps/graphpolaris/src/app/app.tsx
+++ b/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();
diff --git a/apps/graphpolaris/src/app/raw-jsonvis/raw-jsonvis.module.scss b/apps/graphpolaris/src/app/raw-jsonvis/raw-jsonvis.module.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/graphpolaris/src/app/raw-jsonvis/raw-jsonvis.spec.tsx b/apps/graphpolaris/src/app/raw-jsonvis/raw-jsonvis.spec.tsx
new file mode 100644
index 000000000..ec4c0a8e8
--- /dev/null
+++ b/apps/graphpolaris/src/app/raw-jsonvis/raw-jsonvis.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import RawJSONVis from './raw-jsonvis';
+
+describe('RawJSONVis', () => {
+ it('should render successfully', () => {
+ const { baseElement } = render(<RawJSONVis />);
+ expect(baseElement).toBeTruthy();
+ });
+});
diff --git a/apps/graphpolaris/src/app/raw-jsonvis/raw-jsonvis.tsx b/apps/graphpolaris/src/app/raw-jsonvis/raw-jsonvis.tsx
new file mode 100644
index 000000000..2a87441e8
--- /dev/null
+++ b/apps/graphpolaris/src/app/raw-jsonvis/raw-jsonvis.tsx
@@ -0,0 +1,40 @@
+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>
+ );
+});
--
GitLab