From b273adfa9b59e8f63e3dad20fd2a484feaed5ceb Mon Sep 17 00:00:00 2001
From: reham fageer <r.allfageer@techwady.com>
Date: Sat, 15 Aug 2020 21:05:18 +0300
Subject: [PATCH] first-commit

---
 .idea/misc.xml                |  6 ++++
 .idea/modules.xml             |  8 +++++
 .idea/simple-form-app.iml     |  8 +++++
 src/components/InputField.jsx | 40 ++++++++++++++++++++++++
 src/index.js                  | 58 +++++++++++++++++++++++++++--------
 5 files changed, 108 insertions(+), 12 deletions(-)
 create mode 100644 .idea/misc.xml
 create mode 100644 .idea/modules.xml
 create mode 100644 .idea/simple-form-app.iml
 create mode 100644 src/components/InputField.jsx

diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 0000000..24eb271
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="JSX" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..12c1700
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/simple-form-app.iml" filepath="$PROJECT_DIR$/.idea/simple-form-app.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/simple-form-app.iml b/.idea/simple-form-app.iml
new file mode 100644
index 0000000..c956989
--- /dev/null
+++ b/.idea/simple-form-app.iml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/src/components/InputField.jsx b/src/components/InputField.jsx
new file mode 100644
index 0000000..c0c2177
--- /dev/null
+++ b/src/components/InputField.jsx
@@ -0,0 +1,40 @@
+import React,{ Component } from 'react';
+
+class InputField extends Component{
+    constructor(props) {
+        super(props);
+        this.state = {
+            text: null,
+            blured:false,
+        };
+    }
+
+    updateTextInput(event){
+        const newText = event.target.value;
+        this.setState({text:newText});
+        if (newText != "" || !this.props.isRequired)
+            this.setState({isSet:true});
+        this.props.callbackFunction(this.props.id , newText ,  this.props.isRequired);
+
+    }
+    componentWillMount(){
+        this.props.callbackFunction(this.props.id , '',this.props.isRequired);
+    }
+    render(){
+        const style = {backgroundColor:'white'};
+        if(this.state.blured && this.state.text != null) {
+            style.backgroundColor = 'green'
+        }
+        return (
+            <>
+                <fieldset>
+                    <legend>Enter your {this.props.name}:</legend>
+                    <input placeholder="" type="text" onChange={this.updateTextInput.bind(this)} onBlur={()=>{this.setState({blured:true})}} style={style}/>
+                    {this.props.isRequired == true ? <span> * Required</span> : null}
+                </fieldset>
+            </>
+        )
+    }
+}
+
+export default InputField;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index f5185c1..f0ddbb2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,17 +1,51 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import InputField from './components/InputField';
 
+class App extends React.Component{
+    constructor(props) {
+        super(props);
+        this.state= {
+            displayInputs:false,
+            name:'',
+            email:'',
+            phone:'',
+        };
+    }
+    handleFieldChange = (id , value,isRequired) => {
+        if(isRequired && value == '' )
+            this.setState({[id]:false});
+        else
+            this.setState({[id]:value});
+    }
+    handleClick = ()=>{
+        if(this.state.name !== false && this.state.email !== false && this.state.phone !== false )
+            this.setState({displayInputs:true});
+        else
+            alert('There is missing required input !');
+    }
+
+    render() {
+        return(
+            <div>
+                <h1> Welcome </h1>
+                { !this.state.displayInputs ?
+                    <div className="row">
+                        <InputField id="name" name={"Name"}  callbackFunction={this.handleFieldChange}  value={this.state['name']} isRequired={true} />
+                        <InputField id="email" name={"Email"} callbackFunction={this.handleFieldChange}  value={this.state['email']} isRequired={false} />
+                        <InputField id="phone" name={"Phone"}  callbackFunction={this.handleFieldChange}  value={this.state['phone']} isRequired={false} />
+                        <div><Button onClick={this.handleClick} >submit</Button></div>
+                    </div>:<div><h2>{this.state['name'] + " "+ this.state['email']  +" "+ this.state['phone'] }</h2></div>}
+            </div>
+        );
+    }
+}
+const Button = ({ onClick }) => (
+    <button onClick={onClick} type="button">
+        Show Inputs
+    </button>
+);
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+    <App />,
+    document.getElementById('root')
 );
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();