add module css

Author: cakeinpanic

src/input/Input.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {JSON, request} from "./api";
-import './Input.css'
+import styles from './Input.module.css'
 
 export class Input extends React.Component {
     constructor(props) {
@@ -34,10 +34,11 @@ export class Input extends React.Component {
     }
 
     render() {
+        console.log(styles);
         return (
-            <form className="form" onSubmit={this.handleSubmit}>
-                <input className="input" type="text" value={this.state.value} onChange={this.handleChange}/>
-                <button className="btn" onClick={this.handleSubmit}>Go!</button>
+            <form className={styles.form} onSubmit={this.handleSubmit}>
+                <input className={styles.input} type="text" value={this.state.value} onChange={this.handleChange}/>
+                <button className={styles.btn} onClick={this.handleSubmit}>Go!</button>
             </form>
         )
     }

src/input/Input.css renamed to src/input/Input.module.css

@@ -1,7 +1,7 @@
 import classnames from 'classnames';
 import React from 'react';
+import styles from './Json.module.css';
 import {JsonObject} from "./JsonObject";
-import './Json.css'
 
 export class Json extends React.Component {
     constructor(props) {
@@ -26,7 +26,8 @@ export class Json extends React.Component {
         const {json} = this.props;
         const {folded} = this.state;
 
-        const dotsClass = classnames({hid: !folded});
+        const dotsClass = classnames({[styles.hid]: !folded});
+        console.log(dotsClass);
         if (!json) {
             return null;
         }
@@ -42,10 +43,10 @@ export class Json extends React.Component {
         const {folded} = this.state;
 
         const keyClass = classnames({
-            key: true,
-            'key-minus': !folded,
-            'key-foldable': isFoldable,
-            'key-empty': !keyName
+            [styles.key]: true,
+            [styles.keyMinus]: !folded,
+            [styles.keyFoldable]: isFoldable,
+            [styles.keyEmpty]: !keyName
         });
         return <span className={keyClass} onClick={this.fold.bind(this)}>{keyName ? `${keyName}:` : ''}</span>
     }
@@ -56,11 +57,11 @@ export class Json extends React.Component {
             return <span></span>
         }
         const {folded} = this.state;
-        const jsonClass = classnames({hid: folded});
+        const jsonClass = classnames({[styles.hid]: folded});
 
 
         return (
-            <div className={`json ${className || ''}`}>
+            <div className={`${styles.json} ${className || ''}`}>
                 {this.renderKey()}
                 {this.renderFoldedData()}
                 <JsonObject className={jsonClass} json={json}/>

src/tree/Json.js

@@ -22,15 +22,16 @@
     color: rgba(0, 0, 0, .5);
 }
 
-.key-empty{
+.keyEmpty {
     margin: 0;
 }
-.key-foldable:before {
+
+.keyFoldable:before {
     content: '+';
     text-align: center;
 }
 
-.key-foldable.key-minus:before {
+.keyFoldable.keyMinus:before {
     content: '-';
 }
 

src/tree/Json.css renamed to src/tree/Json.module.css

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Json} from "./Json";
-import './Json.css'
+import styles from './Json.module.css';
 
 export class JsonObject extends React.Component {
     renderArray(json) {
@@ -13,11 +13,11 @@ export class JsonObject extends React.Component {
         return (
             <span className={className}>
                 [
-                    <div className="json">
+                    <div className={styles.json}>
                     {
                         json.map((el, i) => {
                             const lastElement = i === json.length - 1;
-                            return (<span className="json" key={i}>
+                            return (<span className={styles.json} key={i}>
                                 <Json json={el} showComma={!lastElement}/>
                             </span>)
                         })
@@ -35,9 +35,9 @@ export class JsonObject extends React.Component {
         return (
             <span className={className}>
                 &#123;
-                <div className="json">
+                <div className={styles.json}>
                     {Object.keys(json).map((keyName, i) => {
-                        const lastElement = i !== keysArr.length - 1;
+                        const lastElement = i === keysArr.length - 1;
                         const el = json[keyName];
 
                         return (