Skip to content

Commit

Permalink
✨ Added edit functions to the app
Browse files Browse the repository at this point in the history
  • Loading branch information
Yannick committed Jan 30, 2018
1 parent 5c3a11d commit 077fe0b
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 13 deletions.
21 changes: 19 additions & 2 deletions src/components/formItem/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,39 @@ import RemoveButton from '../../components/removeButton/';
import style from './style';

export default class FormItem extends Component {
constructor() {
super();

this.handleChange = this.handleChange.bind(this);
this.removeField = this.removeField.bind(this);
}

handleChange(e, kind) {
this.props.handleState(kind, e.target.value);
}

removeField(kind) {
this.props.handleState(kind, null);
}

render() {
return (
<div key={this.props.item} class={style.customFormfieldWrap}>
<label>Measurement type</label>
<select required class={style.select} value={this.props.item}>
<select required class={style.select} value={this.props.item} disabled>
<option value="acidity">Acidity (pH)</option>
<option value="salinity">Salinity (PSU)</option>
<option value="Temperature">Temperature</option>
</select>
<label>Value</label>
<input
onChange={e => this.handleChange(e, this.props.item)}
type="number"
step="0.00001"
value={this.props.value}
class={style.addedInputField}
/>
<RemoveButton value="remove item" removeField={this.removeField} />
<RemoveButton value="remove item" i={this.props.item} removeField={this.removeField} />
</div>
);
}
Expand All @@ -30,4 +46,5 @@ export default class FormItem extends Component {
FormItem.propTypes = {
item: PropTypes.string.isRequired,
value: PropTypes.string.isRequired,
handleState: PropTypes.func.isRequired,
};
46 changes: 40 additions & 6 deletions src/routes/edit/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ export default class Edit extends Component {

this.handleSave = this.handleSave.bind(this);
this.handleResetLoc = this.handleResetLoc.bind(this);
this.handleState = this.handleState.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleEditSave = this.handleEditSave.bind(this);

this.state = {
Expand All @@ -29,9 +31,13 @@ export default class Edit extends Component {
}

componentWillMount(nextProps) {
this.ref = base.bindToState(`/${this.props.uid}/mes/${this.props.measurementId}`, {
this.ref = base.fetch(`/${this.props.uid}/mes/${this.props.measurementId}`, {
context: this,
state: 'measurement',
then(data) {
this.setState({
measurement: data,
});
},
});
}

Expand All @@ -52,14 +58,32 @@ export default class Edit extends Component {
});
}

handleState(kind, value) {
const measurement = { ...this.state.measurement };
measurement[kind] = value;
this.setState({
measurement,
});
}

handleChange(e, kind) {
this.handleState(kind, e.target.value);
}

handleSave() {
this.setState({
open: false,
});
}

handleEditSave() {
route(`/mes/${this.props.measurementId}`);
const measurementId = this.props.measurementId;
base.update(`/${this.props.uid}/mes/${this.props.measurementId}`, {
data: this.state.measurement,
then() {
route(`/mes/${measurementId}`);
},
});
}

render() {
Expand Down Expand Up @@ -101,9 +125,19 @@ export default class Edit extends Component {
<LinkRequestButton />
</section>
<section class={style.data}>
{measurement.acidity && <FormItem item="acidity" value={measurement.acidity} />}
{measurement.salinity && <FormItem item="acidity" value={measurement.salinity} />}
{measurement.Temperature && <FormItem item="acidity" value={measurement.Temperature} />}
{measurement.acidity && (
<FormItem item="acidity" handleState={this.handleState} value={measurement.acidity} />
)}
{measurement.salinity && (
<FormItem item="salinity" handleState={this.handleState} value={measurement.salinity} />
)}
{measurement.Temperature && (
<FormItem
item="Temperature"
handleState={this.handleState}
value={measurement.Temperature}
/>
)}
<input
type="button"
onClick={this.handleEditSave}
Expand Down
39 changes: 34 additions & 5 deletions src/routes/editMedia/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ export default class EditMedia extends Component {
this.handleSave = this.handleSave.bind(this);
this.handleResetLoc = this.handleResetLoc.bind(this);
this.handleEditSave = this.handleEditSave.bind(this);
this.handleState = this.handleState.bind(this);
this.handleChange = this.handleChange.bind(this);
this.removeImage = this.removeImage.bind(this);

this.state = {
Expand All @@ -27,9 +29,13 @@ export default class EditMedia extends Component {
}

componentWillMount(nextProps) {
this.ref = base.bindToState(`/${this.props.uid}/mes/${this.props.mediaId}`, {
this.ref = base.fetch(`/${this.props.uid}/mes/${this.props.mediaId}`, {
context: this,
state: 'measurement',
then(data) {
this.setState({
measurement: data,
});
},
});
}

Expand All @@ -56,8 +62,26 @@ export default class EditMedia extends Component {
});
}

handleState(kind, value) {
const measurement = { ...this.state.measurement };
measurement[kind] = value;
this.setState({
measurement,
});
}

handleChange(e, kind) {
this.handleState(kind, e.target.value);
}

handleEditSave() {
route(`/med/${this.props.mediaId}`);
const mediaId = this.props.mediaId;
base.update(`/${this.props.uid}/mes/${this.props.mediaId}`, {
data: this.state.measurement,
then() {
route(`/med/${mediaId}`);
},
});
}

removeImage(e, i) {
Expand Down Expand Up @@ -101,7 +125,6 @@ export default class EditMedia extends Component {
type="date"
placeholder=""
/>
<i className="material-icons">date_range</i>
</div>
<section class={style.locationEdit}>
<label>Location</label>
Expand All @@ -124,7 +147,12 @@ export default class EditMedia extends Component {
/>
<div class={style.inputGroupDate}>
<label for="category">Category</label>
<select id="category" class={style.select} value={measurement.category}>
<select
id="category"
class={style.select}
value={measurement.category}
onChange={e => this.handleChange(e, 'category')}
>
<option value="State of the water">State of the water</option>
<option value="Sea Animals">Sea Animals</option>
<option value="Coral">Coral</option>
Expand All @@ -137,6 +165,7 @@ export default class EditMedia extends Component {
label="Description (optional)"
fullWidth
placeholder=""
handleState={this.handleState}
/>
<LinkRequestButton />
</section>
Expand Down

0 comments on commit 077fe0b

Please sign in to comment.