Skip to content

Instantly share code, notes, and snippets.

@kavunshiva

kavunshiva/nationbuilderCrud.js

Last active June 7, 2019 20:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kavunshiva/09a9aec424875d06aca76ac26ecc960e to your computer and use it in GitHub Desktop.
Save kavunshiva/09a9aec424875d06aca76ac26ecc960e to your computer and use it in GitHub Desktop.
Download ZIP
nationbuilder sample basic CRUD
Raw
nationbuilderCrud.js
// EVENTS
let event;
// create event
const createEvent = (newEvent, nationSlug, siteSlug, accessToken) => {
return fetch(`https://${nationSlug}.nationbuilder.com/api/v1/sites/${siteSlug}/pages/events?access_token=${accessToken}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
body: JSON.stringify(newEvent),
})
.then(response => response.json())
.then(response => event = response)
.catch(err => console.log(err));;
};
// React component to update event
import React, { Component } from 'react';
export class EventUpdater extends Component {
constructor() {
this.state = {
id: null,
nationSlug: '',
siteSlug: '',
accessToken: '',
event: {},
};
this.handleChange = this.handleChange.bind(this);
this.handleEventChange = this.handleEventChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) {
return this.setState({ [e.target.name]: e.target.value });
}
handleEventChange(e) {
return this.setState(prevState => ({ event: { ...prevState.event, [e.target.name]: e.target.value } }));
}
handleSubmit() {
const { id, nationSlug, siteSlug, accessToken, event } = this.state;
return fetch(`https://${nationSlug}.nationbuilder.com/api/v1/sites/${siteSlug}/pages/events/${id}?access_token=${accessToken}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
body: JSON.stringify(event),
})
.then(response => response.json())
.then(response => this.setState({ event: response })
.catch(err => console.log(err));;
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input key="id" label="Event ID" placeholder="e.g. 123" name="id" onChange={this.handleChange} />
<input key="nationSlug" label="Nation Slug" placeholder="e.g. americaland" name="nationSlug" onChange={this.handleChange} />
<input key="siteSlug" label="Site Slug" placeholder="e.g. connecticut-campaign" name="siteSlug" onChange={this.handleChange} />
<input key="accessToken" label="Access Token" placeholder="e.g. 2667df3" name="accessToken" onChange={this.handleChange} />
<input key="name" label="Event Name" placeholder="e.g. Forum for Change" name="name" onChange={this.handleEventChange} />
<input key="accessToken" label="Event Headline" placeholder="e.g. Changing the world." name="headline" onChange={this.handleEventChange} />
<input key="accessToken" label="Event Title" placeholder="e.g. World's Dopest Event" name="title" onChange={this.handleEventChange} />
<input key="accessToken" label="Event Capacity" placeholder="e.g. 100" name="capacity" onChange={this.handleEventChange} />
<button type="submit">Submit</button>
</form>
);
}
};
// HTML and vanilla JavaScript to update the event
<html>
<head>
<title>Update an Event!</title>
<script type="text/javascript">
function updateEvent() {
const formData = [
'nationSlug',
'siteSlug',
'accessToken',
'eventId',
'eventName',
'eventStartTime',
'eventEndTime',
'eventStatus',
'eventHeadline',
'eventTitle',
'eventCapacity',
].reduce((obj, k) => {
obj[k] = eval(`document.eventForm.${k}.value`);
return obj;
}, {});
const { eventId, nationSlug, siteSlug, accessToken } = formData;
const event = {
event: Object.keys(formData).reduce((obj, k) => {
const rawEventKey = k.match(/(?<=event).*/) && k.match(/(?<=event).*/)[0];
if (rawEventKey && !rawEventKey.match(/id/i)) {
const eventKey = rawEventKey[0].toLowerCase() + rawEventKey.slice(1).replace(/([A-Z])/g, cap => `_${cap.toLowerCase()}`);
obj[eventKey] = formData[k];
}
return obj;
}, {}),
};
return fetch(`https://${nationSlug}.nationbuilder.com/api/v1/sites/${siteSlug}/pages/events/${eventId}?access_token=${accessToken}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
body: JSON.stringify(event),
}).then(response => response.json())
.then(response => document.getElementById('event-updated').innerHTML = `Updated the event to the following:<br />${JSON.stringify(response)}`)
.catch(err => console.log(err));
}
</script>
</head>
<body>
<p>
<h3>
<div id="event-updated">Update an event in the form below.</div>
</h3>
</p>
<form name="eventForm" onSubmit="return updateEvent(nationSlug.value)">
<p>
<label>Nation Slug</label>
<input id="nationSlug" placeholder="e.g. americaland" name="nationSlug" />
</p>
<p>
<label>Site Slug</label>
<input id="siteSlug" placeholder="e.g. connecticut-campaign" name="siteSlug" />
</p>
<p>
<label>Access Token</label>
<input id="accessToken" placeholder="e.g. 2667df3" name="accessToken" />
</p>
<p>
<label>Event ID</label>
<input id="eventId" placeholder="e.g. 123" name="eventId" />
</p>
<p>
<label>Event Name</label>
<input id="eventName" placeholder="e.g. Forum for Change" name="eventName" />
</p>
<p>
<label>Event Start Time</label>
<input id="eventStartTime" placeholder="e.g. 2019-06-01T00:00:00Z" name="eventStartTime" />
</p>
<p>
<label>Event End Time</label>
<input id="eventEndTime" placeholder="e.g. 2019-06-01T01:00:00Z" name="eventEndTime" />
</p>
<p>
<label>Event Status</label>
<input id="eventStatus" placeholder="e.g. unlisted" name="eventStatus" />
</p>
<p>
<label>Event Headline</label>
<input id="eventHeadline" placeholder="e.g. Changing the world." name="eventHeadline" />
</p>
<p>
<label>Event Title</label>
<input id="eventTitle" placeholder="e.g. World's Dopest Event" name="eventTitle" />
</p>
<p>
<label>Event Capacity</label>
<input id="eventCapacity" placeholder="e.g. 100" name="eventCapacity" />
</p>
<button type="submit">Submit</button>
</form>
</body>
</html>
////////////////////
// PEOPLE
let person;
// Create a person
const createPerson = (person, nationSlug, accessToken) => {
return fetch(`https://${nationSlug}.nationbuilder.com/api/v1/people?access_token=${accessToken}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
body: JSON.stringify(person),
})
.then(response => response.json())
.then(response => person = response)
.catch(err => console.log(err));
};
// Update the person
const updatePerson = (person, id, nationSlug, accessToken) => {
return fetch(`https://${nationSlug}.nationbuilder.com/api/v1/people/${id}?access_token=${accessToken}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
body: JSON.stringify(person),
})
.then(response => response.json())
.then(response => person = response)
.catch(err => console.log(err));
};
// Delete the person
const deletePerson = (id, nationSlug, accessToken) => {
return fetch(`https://${nationSlug}.nationbuilder.com/api/v1/people/${id}?access_token=${accessToken}`, {
method: 'DELETE',
headers: {
'Accept': 'application/json',
},
})
.then(response => response.json())
.then(response => person = response)
.catch(err => console.log(err));
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment