// pin_index.jsx
const columns = [[], [], [], []];
const pinsArray = pins.map((pin, idx) => {
	let bucket_idx = idx % 4;
	columns[bucket_idx].push(pin);
});

const columnPins = columns.map((col, idx) => {
	return (
		<div className="col" key={`col-${idx}`} >
			{col.map((pin) => {
				return (
				<div key={`pin-${pin.id}`}>
					<PinIndexItem pin={pin} boards={boards} removePin={removePin} />
				</div>
				)
			})}
		</div>
	)
});

// create_pin_form.jsx
handleFile(e) {
	const fileReader = new FileReader();
	const file = e.currentTarget.files[0];
	fileReader.onloadend = () => {
		this.setState({ photoUrl: fileReader.result, photo: file });
	}

	if (file) {
		fileReader.readAsDataURL(file);
	} else {
		this.setState({ photoUrl: "", photo: null });
	}
}
 
 // ...
 
 const preview = this.state.photoUrl ? <img className="offset-img" src={this.state.photoUrl} /> : ( 
			<div className="camera"></div>
 );

// create_pin_form.jsx

$.ajax({
	url: '/api/pins',
	method: 'POST',
	data: formData,
	contentType: false,
	processData: false
}).then((response) => (
	$.ajax({
		url: `/api/boards/${boardId}/pins/${response.id}/items`,
		method: 'POST',
		data: { item: { 
			title: this.state.title, 
			description: this.state.description
		}}
	}).then((response) => {
		this.props.history.push(`/my-boards/${boardId}`);
	})
))

// pin_show.jsx

chompLink() {		
	let newLink = this.props.pin.link;

	if (!newLink.length) {
		newLink = "no link yet"
	}
	if (newLink.startsWith("https://")) {
		newLink = newLink.slice(8);
	};
	if (newLink.startsWith("https://")) {
		newLink = newLink.slice(7);
	};
	if (newLink.endsWith(".com") && newLink.length > 24) {
		newLink = newLink.slice(0, -4);
	}
	if (newLink.length > 20) {
		newLink = newLink.slice(0, 20);
		newLink += "...";
	}
	return newLink;
}