/
EditStuff.jsx
64 lines (60 loc) · 2.44 KB
/
EditStuff.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import React from 'react';
import swal from 'sweetalert';
import { Card, Col, Container, Row } from 'react-bootstrap';
import { AutoForm, ErrorsField, HiddenField, NumField, SelectField, SubmitField, TextField } from 'uniforms-bootstrap5';
import { Meteor } from 'meteor/meteor';
import { useTracker } from 'meteor/react-meteor-data';
import SimpleSchema2Bridge from 'uniforms-bridge-simple-schema-2';
import { useParams } from 'react-router';
import { Stuffs } from '../../api/stuff/Stuff';
import LoadingSpinner from '../components/LoadingSpinner';
const bridge = new SimpleSchema2Bridge(Stuffs.schema);
/* Renders the EditStuff page for editing a single document. */
const EditStuff = () => {
// Get the documentID from the URL field. See imports/ui/layouts/App.jsx for the route containing :_id.
const { _id } = useParams();
// console.log('EditStuff', _id);
// useTracker connects Meteor data to React components. https://guide.meteor.com/react.html#using-withTracker
const { doc, ready } = useTracker(() => {
// Get access to Stuff documents.
const subscription = Meteor.subscribe(Stuffs.userPublicationName);
// Determine if the subscription is ready
const rdy = subscription.ready();
// Get the document
const document = Stuffs.collection.findOne(_id);
return {
doc: document,
ready: rdy,
};
}, [_id]);
// console.log('EditStuff', doc, ready);
// On successful submit, insert the data.
const submit = (data) => {
const { name, quantity, condition } = data;
Stuffs.collection.update(_id, { $set: { name, quantity, condition } }, (error) => (error ?
swal('Error', error.message, 'error') :
swal('Success', 'Item updated successfully', 'success')));
};
return ready ? (
<Container className="py-3">
<Row className="justify-content-center">
<Col xs={5}>
<Col className="text-center"><h2>Edit Stuff</h2></Col>
<AutoForm schema={bridge} onSubmit={data => submit(data)} model={doc}>
<Card>
<Card.Body>
<TextField name="name" />
<NumField name="quantity" decimal={null} />
<SelectField name="condition" />
<SubmitField value="Submit" />
<ErrorsField />
<HiddenField name="owner" />
</Card.Body>
</Card>
</AutoForm>
</Col>
</Row>
</Container>
) : <LoadingSpinner />;
};
export default EditStuff;