QuickLoad and Save examples

CustomComponent.js

/**
  * Try adding this component in a page with the url
  * /random/:profile
  * and going to the url:
  * /random/2bc127d0-a2b5-11e9-b219-497155168b2c?event=3b46d0c8-df0e-44a4-8bb6-5eeff03aff46
  */
(RaiselyComponents, React) => {
	const { quickLoad, save } = RaiselyComponents.api;
	const { Button } = RaiselyComponents.Atoms;
	const { Spinner } = RaiselyComponents;

	const userUuid = '971e0150-22d3-11e8-a398-7df9eb465a00';

	class Rsvp extends React.Component {
		letsRsvp() {
			const { rsvpClick } = this.props;
			return (
				<div>
					<p>Lets RSVP</p>
					<Button onClick={rsvpClick}>RSVP!</Button>
				</div>
			);
		}

		render() {
			const { rsvp, attendClick, saveClick } = this.props;
			if (!rsvp) return this.letsRsvp();

			return (
				<div>
					<p>{"I'm"} coming with {rsvp.guests - 1} guest</p>
					{rsvp.attended ? (
						<p>I attended!</p>
					) : (
						<Button onClick={attendClick}>Confirm Attendance</Button>
					)}
					<Button onClick={saveClick}>Save Rsvp</Button>
				</div>
			);
		}
	}

	return class LoadAllTheThingsComponent extends React.Component {
		state = {};

		componentDidMount() {
			this.loadTheThings();
		}

		async loadTheThings() {
			// Lets pretend this was passed in via props
			const props = {
				postUuid: 'b8ea0550-9bf8-11e9-b800-c954df621000',
				...this.props,
			};

			try {
				const records = await quickLoad({
					models: ['event', { name: 'profile', required: true }, 'post'],
					props,
				});
				this.setState({ records });
			} catch (e) {
				console.error(e);
				this.setState({ error: `Error Loading: ${e.message}` });
			}
		}

		clickRsvp = () => {
			const { event } = this.state.records;
			const rsvp = {
				guests: 2,
				userUuid,
				eventUuid: event.uuid,
			};
			this.setState({ rsvp });
		}
		clickAttend = () => {
			const { rsvp } = this.state;
			rsvp.uuid = 'bogus-uuid-to-make-it-save';
			rsvp.attended = true;
		}

		save = async () => {
			try {
				const { rsvp } = this.state;
				const updated = await save('eventRsvp', rsvp);
				this.setState({ rsvp: updated });
			} catch (e) {
				this.setState({ error: `Error Loading: ${e.message}` });
				console.error(e);
			}
		}

		render() {
			const { error, records, rsvp } = this.state;

			if (error) return <p>{error}</p>;
			if (!records) return <Spinner />;

			const { event, profile, post } = records;

			return (
				<div>
					<p>Profile: {profile.name}</p>
					{event ? (<p>Event: {event.name}</p>) : ''}
					{post ? (<p>Post: {post.title}</p>) : ''}
					<Rsvp
						rsvp={rsvp}
						saveClick={this.save}
						rsvpClick={this.clickRsvp}
						attendClick={this.clickAttend}
					/>
				</div>
			);
		}
	};
};