added basic time input module

Author: decarlec

.env

@@ -1,3 +1,3 @@
 //.env
-BROWSER=none
+//BROWSER=none
 DEBUG=electron-builder

package.json

@@ -13,13 +13,16 @@
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
+    "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.0",
     "concurrently": "^6.0.0",
     "electron-is-dev": "^2.0.0",
+    "moment": "^2.29.1",
     "node": "^15.10.0",
     "react": "^17.0.2",
+    "react-datetime": "^3.0.4",
     "react-dom": "^17.0.2",
+    "react-moment": "^1.1.1",
     "react-scripts": "4.0.3",
     "typescript": "^4.1.2",
     "wait-on": "^5.3.0",

src/App.tsx

@@ -1,26 +1,9 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import { MainForm } from './MainForm';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
+const App = () => (
+    <MainForm message="Hello!"/>
+);
 
 export default App;

src/MainForm.tsx

@@ -0,0 +1,101 @@
+import React, { createRef } from 'react';
+import Moment from 'react-moment';
+import './App.css';
+
+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,
+        currentDateTime: new Date()
+    }
+    intervalId : any;
+
+    render(){
+        return(
+            <div>
+                <div onClick={() => this.increment(1)}>
+                    {this.props.message} {this.state.count}
+                </div>
+                <TimeInput defaultTimerDuration="15" ></TimeInput>
+                <Moment format="YYYY/MM/DD hh:mm:ss"></Moment>
+            </div>
+
+        )
+
+    }
+    increment = (amt: number) => {
+        this.setState((state) => ({
+            count: state.count + amt
+        }));
+    }
+
+    tick(){
+        this.setState(
+            {
+                currentDateTime: new Date()
+            }
+        )
+    }
+
+    componentWillMount = () =>
+    {
+        this.tick();
+    }
+    
+    componentDidMount = () => {
+        this.intervalId =  setInterval(() => this.tick(), 1000);
+    }
+
+    componentWillUnmount = () => {
+        this.intervalId = null;
+    }
+
+}