cleaning regarding linting rules

Author: piotrwitek

src/app.tsx

@@ -4,9 +4,9 @@ export function __reload(prevModule) {
     appComponent.setState(prevModule.appComponent.state);
 }
 
-// create app container
-var appContainer = document.getElementById('app-container');
-if (appContainer == undefined) {
+// auto create app container if missing
+let appContainer = document.getElementById('app-container');
+if (appContainer == null) {
   appContainer = document.createElement('div');
   appContainer.id = 'app-container';
   document.body.appendChild(appContainer);
@@ -16,7 +16,7 @@ if (appContainer == undefined) {
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 // components imports
-import {App} from './components/app';
+import {Main} from './components/main';
 
 // todo: refactor name to appComponent
-export var appComponent = ReactDOM.render(<App />, appContainer);
+export var appComponent: any = ReactDOM.render(<Main welcomeMessage="Welcome to React"/>, appContainer);

src/components/app.css

@@ -0,0 +1,3 @@
+.main-component {
+  background-color: #24b544;
+}

src/components/main.css

@@ -1,24 +1,26 @@
 // style imports
-import './app.css!';
+import './main.css!';
 // lib imports
 import * as React from 'react';
 // components imports
 import {AppStore, UserData} from '../stores/app-store';
 import {UserProfile} from './user-profile';
 
-interface LocalProps extends React.Props<App> {
+interface LocalProps extends React.Props<Main> {
+  welcomeMessage: string;
 }
 
 // App pure component
-export class App extends React.Component<LocalProps, AppStore> {
+export class Main extends React.Component<LocalProps, AppStore> {
   constructor() {
     super();
     this.state = new AppStore();
   }
 
   render() {
     const {userData} = this.state;
-    return (<div>
+    return (<div className="main-component">
+      <h2>{this.props.welcomeMessage}</h2>
       <UserProfile name={userData.name} age={userData.age} complete={userData.complete} />
     </div>
     );

src/components/app.tsx renamed to src/components/main.tsx

@@ -1,3 +1,3 @@
-.myComponent {
-  background-color: #379922;
+.user-profile-component {
+  background-color: #58da3c;
 }

src/components/user-profile.css

@@ -1,7 +1,7 @@
 // style imports
 import './user-profile.css!';
 // lib imports
-import * as React from "react";
+import * as React from 'react';
 
 enum Texts {
   Complete,
@@ -11,9 +11,9 @@ enum Texts {
 function getTranslation(text: Texts) {
   switch (text) {
     case Texts.Complete:
-      return "complete";
+      return 'complete';
     case Texts.Incomplete:
-      return "incomplete";
+      return 'incomplete';
   }
 }
 
@@ -32,7 +32,7 @@ export class UserProfile extends React.Component<LocalProps, LocalState> {
     super();
     this.state = {
       complete: props.complete
-    }
+    };
   }
 
   getStatusText = () => {
@@ -46,7 +46,7 @@ export class UserProfile extends React.Component<LocalProps, LocalState> {
   render(): JSX.Element {
     const {name, age} = this.props;
     return (
-      <div className='myComponent'>
+      <div className="user-profile-component">
         <div>{name} is {age} years old.</div>
         <div>Profile status: {this.getStatusText() }</div>
         <button onClick={this.handleToggleCompletion}>Toggle completion</button>

src/components/user-profile.tsx

@@ -14,7 +14,7 @@ export class AppStore {
   userData: UserData;
 
   constructor() {
-    this.userData = new UserData("Piotr", 33);
+    this.userData = new UserData('Piotr', 33);
   }
 
 }

src/stores/app-store.tsx

@@ -22,7 +22,7 @@
   "files": [
     "app-typings.d.ts",
     "app.tsx",
-    "components/app.tsx",
+    "components/main.tsx",
     "components/user-profile.tsx",
     "stores/app-store.tsx"
   ],