seperated compopnents into files, added button

Author: decarlec

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+        "version": "0.2.0",
+        "configurations": [
+            {
+                "name": "Launch index.tsx",
+                "type": "firefox",
+                "request": "launch",
+                "reAttach": true,
+                "file": "${workspaceFolder}/index.tsx"
+            }
+        ]   
+}

src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import './App.css';
-import { MainForm } from './MainForm';
+import { MainForm } from './Components/MainForm';
 
 const App = () => (
     <MainForm message="Hello!"/>

src/MainForm.tsx src/Components/MainForm.tsx

@@ -1,56 +1,13 @@
-import React, { createRef } from 'react';
+import React from 'react';
 import Moment from 'react-moment';
-import './App.css';
+import TimeInput from './TimeInput';
+import Timer from './Timer';
 
 type MainFormState = {
     count: number,
     currentDateTime: Date
 }
 
-type TimeInputProps = {
-    defaultTimerDuration: string
-}
-
-type TimeInputState = {
-    value: string,
-}
-
-
-export class TimeInput extends React.Component<TimeInputProps, TimeInputState>{
-    private instanceRef = createRef<HTMLInputElement>();
-
-    constructor(props: TimeInputProps){
-        super(props);
-        this.state = { value: props.defaultTimerDuration }
-        this.handleChange = this.handleChange.bind(this);
-    }
-    state: TimeInputState = {
-        value: "time..."
-    }
-
-    handleChange(e: React.ChangeEvent<HTMLInputElement>){
-        this.setState({ value: e.target.value })
-    }
-
-    handleClick(e: MouseEvent){
-        this.setState({ value:""});
-    }
-
-    render(){
-        return(
-            <div>         
-                <form>
-                    <input type="text" value={this.state.value} onChange={this.handleChange} ref={this.instanceRef} />
-                </form>
-            </div>
-        )
-    }
-}
-
-export class Timer extends React.Component<{}, {}>{
-
-}
-
 export class MainForm extends React.Component<{ message: string}, MainFormState>{
     state: MainFormState = {
         count: 0,
@@ -64,6 +21,7 @@ export class MainForm extends React.Component<{ message: string}, MainFormState>
                 <div onClick={() => this.increment(1)}>
                     {this.props.message} {this.state.count}
                 </div>
+                <Timer buttonText="Button"></Timer>
                 <TimeInput defaultTimerDuration="15" ></TimeInput>
                 <Moment format="YYYY/MM/DD hh:mm:ss"></Moment>
             </div>

src/Components/TimeInput.tsx

@@ -0,0 +1,44 @@
+import React, { createRef } from "react";
+
+type TimeInputProps = {
+    defaultTimerDuration: string
+}
+
+type TimeInputState = {
+    value: string,
+}
+
+export default class TimeInput extends React.Component<TimeInputProps, TimeInputState>{
+    private instanceRef = createRef<HTMLInputElement>();
+
+    constructor(props: TimeInputProps){
+        super(props);
+        this.state = { value: props.defaultTimerDuration }
+        this.handleChange = this.handleChange.bind(this);
+        this.handleClick = this.handleClick.bind(this);
+    }
+    state: TimeInputState = {
+        value: "time..."
+    }
+
+    handleChange(e: React.ChangeEvent<HTMLInputElement>){
+        this.setState({ value: e.target.value })
+    }
+
+    handleClick(e: React.MouseEvent<HTMLInputElement>){
+        this.setState({ value: ""})
+    }
+
+    render(){
+        return(
+            <div>         
+                <form>
+                    <input type="text" value={this.state.value} 
+                    onChange={this.handleChange}
+                    onClick={this.handleClick}
+                    ref={this.instanceRef} />
+                </form>
+            </div>
+        )
+    }
+}

src/Components/Timer.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+type TimerProps = {
+    buttonText: string
+}
+
+type TimerState = {
+    value: string,
+}
+
+export default class Timer extends React.Component<TimerProps, TimerState>{
+    constructor(props: TimerProps){
+        super(props);
+        this.state = {
+            value:props.buttonText
+        }
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    handleClick(event: React.MouseEvent){
+        this.setState({ value:"Clicked"})
+    }
+
+    render(){
+        return(
+            <div>
+                <button onClick={this.handleClick}>{ this.state.value }</button>
+            </div>
+        )
+    }
+}