create standalone component

cakeinpanic · cakeinpanic · commit 289e50cf6062 · 2019-07-24T11:55:55.000+03:00
diff --git a/public/index.html b/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Simple react json viewer</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/App.css b/src/App.css
@@ -1,7 +0,0 @@
-.app {
-    text-align: center;
-}
-
-.json-container {
-    margin-left: 130px;
-}
diff --git a/src/App.js b/src/App.js
@@ -1,53 +1,16 @@
 import React from 'react';
 import './App.css';
-import {Input} from './input/Input';
-import {Json} from "./json/Json";
+import {JsonViewer} from "./json/JsonViewer";
 
 
 export class App extends React.Component {
-    constructor() {
-        super();
-        this.state = {json: {}};
-    }
-
-    dataLoaded = t => {
-        this.setState(() => ({json: t, error: false, loading: false}));
-    };
-
-    onError = () => {
-        this.setState(() => ({json: null, error: true, loading: false}));
-    };
-
-    onLoading = () => {
-        this.setState(() => ({loading: true}));
-    };
-
-    renderData() {
-        if (this.state.loading) {
-            return null;
-        }
-
-        return this.state.error
-            ? <div className="error">Error loading</div>
-            : <Json className="json-container" json={this.state.json}/>;
-    }
-
-    renderLoader() {
-        if (!this.state.loading) {
-            return null;
-        }
-        return <span>Loading....</span>;
-    }
 
     render() {
         return (
-            <div className="app">
-                <Input onDataLoaded={this.dataLoaded} onError={this.onError} onLoading={this.onLoading}/>
-                {this.renderLoader()}
-                {this.renderData()}
-            </div>
+            <JsonViewer/>
         );
     }
+
 }
 
 export default App;
diff --git a/src/input/Input.js b/src/input/Input.js
@@ -33,7 +33,6 @@ export class Input extends React.Component {
     }
 
     render() {
-        console.log(styles);
         return (
             <form className={styles.form} onSubmit={this.handleSubmit}>
                 <input className={styles.input} type="text" value={this.state.value} onChange={this.handleChange} />
diff --git a/src/json/Json.js b/src/json/Json.js
@@ -28,7 +28,7 @@ export class Json extends React.Component {
         const {folded} = this.state;
 
         const dotsClass = classnames({[styles.folded]: !folded});
-        console.log(dotsClass);
+
         if (!json) {
             return null;
         }
diff --git a/src/json/Json.module.css b/src/json/Json.module.css
@@ -38,3 +38,12 @@
 .folded {
     display: none;
 }
+
+
+.component {
+    text-align: center;
+}
+
+.container {
+    margin-left: 130px;
+}
diff --git a/src/json/JsonViewer.js b/src/json/JsonViewer.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import styles from './Json.module.css';
+import {Input} from "../input/Input";
+import {Json} from "./Json";
+
+export class JsonViewer extends React.Component {
+    constructor() {
+        super();
+        this.state = {json: {}};
+    }
+
+    dataLoaded = t => {
+        this.setState(() => ({json: t, error: false, loading: false}));
+    };
+
+    onError = () => {
+        this.setState(() => ({json: null, error: true, loading: false}));
+    };
+
+    onLoading = () => {
+        this.setState(() => ({loading: true}));
+    };
+
+    renderData() {
+        if (this.state.loading) {
+            return null;
+        }
+
+        return this.state.error
+            ? <div>Error loading</div>
+            : <Json className={styles.container} json={this.state.json}/>;
+    }
+
+    renderLoader() {
+        if (!this.state.loading) {
+            return null;
+        }
+        return <span>Loading....</span>;
+    }
+
+    render() {
+        return (
+            <div className={styles.component}>
+                <Input onDataLoaded={this.dataLoaded} onError={this.onError} onLoading={this.onLoading}/>
+                {this.renderLoader()}
+                {this.renderData()}
+            </div>
+        );
+    }
+}

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,6 @@ export class Input extends React.Component {`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`render() {`
`36`		`- console.log(styles);`
`37`	`36`	`return (`
`38`	`37`	`<form className={styles.form} onSubmit={this.handleSubmit}>`
`39`	`38`	`<input className={styles.input} type="text" value={this.state.value} onChange={this.handleChange} />`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ export class Json extends React.Component {`
`28`	`28`	`const {folded} = this.state;`
`29`	`29`
`30`	`30`	`const dotsClass = classnames({[styles.folded]: !folded});`
`31`		`- console.log(dotsClass);`
	`31`	`+`
`32`	`32`	`if (!json) {`
`33`	`33`	`return null;`
`34`	`34`	`}`