Save the first profile to cookie works now

wearright/src/components/Start.js

@@ -7,11 +7,19 @@ class Start extends Component {
         super(props);  
         this.state = {
           startWindow: false,
+          name: "",
+          age: 6,
+          sex: "mies",
+          city: ""
         };
         this.closeWindow = this.closeWindow.bind(this);
         this.createTable = this.createTable.bind(this);
         this.getCity = this.getCity.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
+        this.handleNameChange = this.handleNameChange.bind(this);
+        this.handleAgeChange = this.handleAgeChange.bind(this);
+        this.handleSexChange = this.handleSexChange.bind(this);
+        this.handleCityChange = this.handleCityChange.bind(this);
       }
 
      handleSubmit(e){
@@ -21,9 +29,25 @@ class Start extends Component {
         const cookies = new Cookies();
         //cookie expires in the year 2050
         const date = new Date(2070, 1, 1);
-        //Set cookie
+
+        //profile string
+        const profileString = {
+          name: this.state.name,
+          age: this.state.age,
+          sex: this.state.sex,
+          city: this.state.city
+        }
+        //console.log(profile)
+
+        //profile string to json
+        var profile = JSON.stringify(profileString);
+
+        //Set first page cookie and save profile to cookie
         cookies.set('firstPage', 'true', { path: '/', expires: date });
-        console.log(cookies.get('firstPage'))
+        cookies.set('Profile', profile, {path: '/', expires: date})
+
+        //testprint
+        //console.log("test: " + JSON.stringify(cookies.get('Profile')))
      } 
 
      closeWindow(){
@@ -46,12 +70,30 @@ class Start extends Component {
 
     getCity(){
         //TODO: Get cities from database
-        return <option>Jyväskylä</option>
+        const tempArr = []
+        tempArr.push(<option>Jyväskylä</option> )
+        tempArr.push(<option>Helsinki</option> )
+        return tempArr
+    }
+
+    // form actions to states
+    handleNameChange(e){
+      this.setState({name: e.target.value})
+    }
+    handleAgeChange(e){
+      this.setState({age: e.target.value})
+    }
+    handleSexChange(e){
+      this.setState({sex: e.target.value})
+      //console.log(e.target.value)
+    }
+    handleCityChange(e){
+      this.setState({city: e.target.value})
     }
 
   render() {
       //states
-      const {startWindow } = this.state
+      const {startWindow, name, age, sex, city } = this.state
 
       //if start window is already shown
       if(startWindow) {
@@ -63,21 +105,22 @@ class Start extends Component {
                 <div className="container">
                     <form className="form" onSubmit={this.handleSubmit}>
                         <label>Nimimerkki:</label>
-                        <input type="text" name="name"></input>
+                        <input type="text" name="name" value={name} onChange={this.handleNameChange}></input>
                         <br />
                         <label>Ikä:</label>
-                        <select className="field">
+                        <select className="field" value={age} onChange={this.handleAgeChange}>
                             {this.createTable()}
                         </select>
                         <br />
                         <label> Sukupuoli:</label>
-                        <select className="field">
+                        <select className="field" value={sex} onChange={this.handleSexChange}>
                             <option>Mies</option>
                             <option>Nainen</option>
                         </select>
                         <br/>
                         <label>Kaupunki:</label>
-                        <select className="field">
+                        <select className="field" value={city} onChange={this.handleCityChange}>
+                            <option>Valitse kaupunki</option>
                             {this.getCity()}
                         </select>
                         <br/> <br />