Skip to content
Snippets Groups Projects

A bit of everything

Merged A bit of everything
ABitOfEverything into develop
Merged L5047 requested to merge ABitOfEverything into develop
Compare
and
Show latest version
2 files
+ 262
− 186
Compare changes
  • Side-by-side
  • Inline
Files
2
wearright/src/components/bootstrap/EditProfile.js
+ 258
− 182
import React, { Component } from 'react';
import React, { Component } from "react";
import { Typeahead } from "react-bootstrap-typeahead";
// Bootstrap
import { Form, Button, Alert, Dropdown } from 'react-bootstrap';
import Cookies from 'universal-cookie';
import { Form, Button, Alert, Dropdown, OverlayTrigger } from "react-bootstrap";
import Cookies from "universal-cookie";
class EditProfile extends Component {
constructor(props) {
super(props);
this.state = {
cities: [],
alert: false,
selectedProfile: 0,
name: this.props.profiles[0].name,
age: this.props.profiles[0].age,
sex: this.props.profiles[0].sex,
city: this.props.profiles[0].city,
profiles: this.props.profiles
}
this.getCities = this.getCities.bind(this);
this.generateAgeRange = this.generateAgeRange.bind(this);
this.dropDownOnSelect = this.dropDownOnSelect.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this)
}
componentDidMount(){
this.getCities();
}
getCities() {
const tempArr = [];
// Don't allow for multiple gets
if (this.state.cities.length === 0) {
const proxyUrl = "https://cors-anywhere.herokuapp.com/";
fetch(proxyUrl + "http://207.154.210.234/get/cities")
.then(res => res.json())
.then(result => {
for (let i = 0; i < result.length; i++) {
tempArr.push(result[i]);
}
console.log(tempArr);
this.setState({ cities: tempArr });
});
}
}
generateAgeRange() {
const tempArr = [];
for (let i = 6; i < 101; i++) {
tempArr.push(<option key={i}>{i}</option>);
}
return tempArr;
}
dropDownOnSelect(eventKey, e) {
//console.log(eventKey);
this.setState({
selectedProfile : eventKey,
name: this.state.profiles[eventKey].name,
age : this.state.profiles[eventKey].age,
sex: this.state.profiles[eventKey].sex,
city: this.state.profiles[eventKey].city
})
}
handleChange(selection, value){
console.log(selection, value);
if(selection === "name"){
this.setState({name: value})
}
else if(selection === "age"){
this.setState({age: value})
}
else if(selection === "sex"){
this.setState({sex: value})
}
}
handleSubmit(){
if(this.state.name === "" || this.state.city === "")
{
this.setState({alert: true})
return;
}
const c = new Cookies();
const profiles = this.state.profiles;
const profile = profiles[this.state.selectedProfile];
profile.name = this.state.name;
profile.age = this.state.age;
profile.sex = this.state.sex;
profile.city =this.state.city;
profiles[this.state.selectedProfile] = profile;
// Set expiration to 50 years ahead
const d = new Date();
d.setFullYear(d.getFullYear() + 50);
c.set('profile', profiles, {path: '/', expires: d})
this.setState({ profiles })
window.location.reload();
}
render() {
const { cities, alert, selectedProfile } = this.state;
const { profiles} = this.props;
return (
<div>
<Form>
<Dropdown onSelect={this.dropDownOnSelect}>
<Dropdown.Toggle variant="primary">
Valitse profiili
</Dropdown.Toggle>
<Dropdown.Menu>
{profiles.map((profile, i) =>
<Dropdown.Item eventKey={i}> {profile.name} </Dropdown.Item>
)}
</Dropdown.Menu>
</Dropdown>
<Form.Group controlId="editForm.userName">
<Form.Label>Nimimerkki</Form.Label>
<Form.Control onChange={(e) => this.handleChange("name", e.target.value)} defaultValue={profiles[selectedProfile].name} required name="username" type="text"></Form.Control>
<Form.Control.Feedback type="invalid">
Käyttäjänimi on vaadittu
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="editFormForm.age">
<Form.Label>Ikä</Form.Label>
<Form.Control onChange={(e) => this.handleChange("age", e.target.value)} defaultValue={profiles[selectedProfile].age} required name="age" as="select">
{ this.generateAgeRange() }
</Form.Control>
</Form.Group>
<Form.Group controlId="editForm.sex">
<Form.Label>Sukupuoli</Form.Label>
<Form.Control onChange={(e) => this.handleChange("sex", e.target.value)} defaultValue={profiles[selectedProfile].sex} required name="sex" as="select">
<option>Mies</option>
<option>Nainen</option>
</Form.Control>
</Form.Group>
<Typeahead
name="city"
id="requiredId"
className="inputField"
options={cities}
labelKey="name"
placeholder={profiles[selectedProfile].city}
onInputChange={ text =>
this.setState({
city: text,
alert: false
})
}
onChange={sel =>
//set selection index to state. sel needs to be formatted first to string, then number
this.setState({
city: String(sel),
alert: false
})
}
/>
<Button onClick={ () => this.handleSubmit() }>
Tallenna muutokset
</Button>
{}
<Alert
className="alert"
key={"alert"}
variant={"danger"}
show={alert}>
Tarkista kentät!
</Alert>
</Form>
</div>
)
}
constructor(props) {
super(props);
this.state = {
cities: [],
alert: false,
selectedProfile: 0,
name: this.props.profiles[0].name,
age: this.props.profiles[0].age,
sex: this.props.profiles[0].sex,
city: this.props.profiles[0].city,
profiles: this.props.profiles,
deleteConfirm: false,
deleteProfile: false
};
this.getCities = this.getCities.bind(this);
this.generateAgeRange = this.generateAgeRange.bind(this);
this.dropDownOnSelect = this.dropDownOnSelect.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.deleteProfile = this.deleteProfile.bind(this);
this.deleteProfileConfirmation = this.deleteProfileConfirmation.bind(this);
}
componentDidMount() {
this.getCities();
}
getCities() {
const tempArr = [];
// Don't allow for multiple gets
if (this.state.cities.length === 0) {
const proxyUrl = "https://cors-anywhere.herokuapp.com/";
fetch(proxyUrl + "http://207.154.210.234/get/cities")
.then(res => res.json())
.then(result => {
for (let i = 0; i < result.length; i++) {
tempArr.push(result[i]);
}
console.log(tempArr);
this.setState({ cities: tempArr });
});
}
}
generateAgeRange() {
const tempArr = [];
for (let i = 6; i < 101; i++) {
tempArr.push(<option key={i}>{i}</option>);
}
return tempArr;
}
handleChange(selection, value) {
console.log(selection, value);
if (selection === "name") {
this.setState({ name: value });
} else if (selection === "age") {
this.setState({ age: value });
} else if (selection === "sex") {
this.setState({ sex: value });
}
}
handleSubmit() {
if (this.state.name === "" || this.state.city === "") {
this.setState({ alert: true });
return;
}
const c = new Cookies();
const profiles = this.state.profiles;
const profile = profiles[this.state.selectedProfile];
profile.name = this.state.name;
profile.age = this.state.age;
profile.sex = this.state.sex;
profile.city = this.state.city;
profiles[this.state.selectedProfile] = profile;
// Set expiration to 50 years ahead
const d = new Date();
d.setFullYear(d.getFullYear() + 50);
c.set("profile", profiles, { path: "/", expires: d });
this.setState({ profiles });
window.location.reload();
}
dropDownOnSelect(eventKey, e) {
//console.log(eventKey);
this.setState({
selectedProfile: eventKey,
name: this.state.profiles[eventKey].name,
age: this.state.profiles[eventKey].age,
sex: this.state.profiles[eventKey].sex,
city: this.state.profiles[eventKey].city
});
console.log(this.state.profiles[eventKey].age);
}
deleteProfileConfirmation() {
this.setState({ deleteConfirm: true });
}
deleteProfile(selection) {
this.setState({ deleteConfirm: false });
if (selection === "yes") {
const c = new Cookies();
let profiles = this.state.profiles;
profiles.splice(this.state.selectedProfile, 1);
const d = new Date();
d.setFullYear(d.getFullYear() + 50);
c.set("profile", profiles, { path: "/", expires: d });
this.setState({ profiles });
window.location.reload();
}
console.log(selection);
}
render() {
const {
cities,
alert,
selectedProfile,
age,
sex,
deleteConfirm
} = this.state;
const { profiles } = this.props;
return (
<div>
{/* Show alert when deleting profile */}
<Alert show={deleteConfirm} variant="danger">
<Alert.Heading>Varoitus!</Alert.Heading>
<p>Poistetaanko profiili pysyvästi?</p>
<div className="d-flex justify-content-end">
<Button
onClick={() => this.deleteProfile("yes")}
variant="outline-danger">
Kyllä
</Button>
<Button
onClick={() => this.deleteProfile("no")}
variant="outline-success">
Ei
</Button>
</div>
</Alert>
<Form>
<Dropdown onSelect={this.dropDownOnSelect}>
<Dropdown.Toggle variant="primary">
Valitse profiili
</Dropdown.Toggle>
<Dropdown.Menu>
{profiles.map((profile, i) => (
<Dropdown.Item eventKey={i}> {profile.name} </Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
<Form.Group controlId="editForm.userName">
<Form.Label>Nimimerkki</Form.Label>
<Form.Control
onChange={e => this.handleChange("name", e.target.value)}
placeholder={profiles[selectedProfile].name}
required
name="username"
type="text"
/>
<Form.Control.Feedback type="invalid">
Käyttäjänimi on vaadittu
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="editFormForm.age">
<Form.Label>Ikä</Form.Label>
<Form.Control
onChange={e => this.handleChange("age", e.target.value)}
value={age}
required
name="age"
as="select">
{this.generateAgeRange()}
</Form.Control>
</Form.Group>
<Form.Group controlId="editForm.sex">
<Form.Label>Sukupuoli</Form.Label>
<Form.Control
onChange={e => this.handleChange("sex", e.target.value)}
value={sex}
required
name="sex"
as="select">
<option>Mies</option>
<option>Nainen</option>
</Form.Control>
</Form.Group>
<Form.Label>Kaupunki</Form.Label>
<Typeahead
name="city"
id="requiredId"
className="inputField"
options={cities}
labelKey="name"
placeholder={profiles[selectedProfile].city}
onInputChange={text =>
this.setState({
city: text,
alert: false
})
}
onChange={sel =>
//set selection index to state. sel needs to be formatted first to string, then number
this.setState({
city: String(sel),
alert: false
})
}
/>
<Button onClick={() => this.handleSubmit()}>
Tallenna muutokset
</Button>
{/* Button disabled when one profile left */}
<Button
variant="danger"
disabled={profiles.length === 1}
onClick={() => this.deleteProfileConfirmation()}>
Poista Profiili
</Button>
{/* Following text appears if only one profile left*/}
{profiles.length === 1 ? (
<p>
<small>
<i>Et voi poistaa viimeistä profiiliasi</i>
</small>
</p>
) : (
<p />
)}
<Alert
className="alert"
key={"alert"}
variant={"danger"}
show={alert}>
Tarkista kentät!
</Alert>
</Form>
</div>
);
}
}
export default EditProfile;
\ No newline at end of file
export default EditProfile;