Jonas Daniels jnsdls

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Lato|Montserrat:400,700" rel="stylesheet">
  <title></title>
</head>
<body>
<script>
  (function(_b,e,b,o){_b.Bebo={b:[],onReady:function(cb){this.b.push(cb)}}

## index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './js/components/App.jsx';
// wait for all JS executions until the Bebo SDK has finished loading
Bebo.onReady(() => {
  ReactDOM.render(
    <App />,
    document.getElementById('app')
  );
});

## App-imports.js
import React from 'react'; // duh
import withBebo from '../utils/withBebo'; // Bebo SDK wrapper for React
import ReactSwipe from 'react-swipe'; // will nicely handle our Snapchat-esque panes
import loadImage from 'blueimp-load-image'; // for image-processing

import Camera from './Camera'; // our Camera
import Library from './Library'; // our Library

## App-constructor.js
constructor(props, context) {
    super(props, context); // don't forget this, no constructor without calling super() first!
    this.state = {
      actingUser: null, // we'll set this to the acting user later
      photos: [], // array of existing photos we GET from the Database
      saving: [], // unique IDs of photo's that are currently being saved
      camera: 'front', // camera orientation ("front" or "rear")
      offset: 0, // the offset for our database GET calls
      canLoadMore: true, // are there more images to load from the databse?
      currentAt: 0, // current server time, we'll set this on GET and POST calls, because we can't trust the client time

## App-lifecycle.js
componentDidMount() {
    // turning on the device camera when we load the app (it'll stay on in the background)
    this.props.bebo.Camera.previewOn();
    // we'll use our wrapped Bebo SDK to get the acting user and set it to the app's state
    this.props.bebo.User.getUser('me', (err, user) => {
      if (!err) {
        this.setState({ actingUser: user });
      }
    });
    // we'll get the initial 50 photos

## App-take-photo.js
handleTakePhoto() {
    this.props.bebo.Camera.capturePhoto((image_uri) => {
     // I'm doing a bunch of image manipulation here before sending the resulting base64 to savePhoto()
    })
  }

  savePhoto(base64) {
    const { actingUser, saving } = this.state;
    if(!actingUser){ return console.error('need acting user to save image')}
    if(!base64){ return console.error('need savable base64 to save image, but got', base64)}

## App-render.js
render() {
    // destructuring state that will get passed to <Camera /> and <Library />
    // both <Camera /> and <Library /> receive props here
    // we use ReactSwipe to handle the swipeable panels, it works great out of the box
    const { saving, canLoadMore, currentAt } = this.state;
    return (<ReactSwipe
      className='app-layer'
      ref="reactSwipe"
      swipeOptions={{continuous: false, startSlide: 0}}>
        <Camera />

## Camera-take-picture.js
takePhoto() {
    this.addFlash(); // let's add a small flash effect
    this.props.takePhoto(); // call the <App /> and tell it to take the picture
  }

  addFlash(){
    // boilerplate to add a flash-effect
    setTimeout(() => {
      this.removeFlash(flash)
    }, 300)

## Camera-flip.js
switchCamera() {
  this.props.switchCamera() // yup, we literally just call it on the <App />
}

// hey, let's also let users double-tap to flip the camera around
let prevDate = Date.now(); // set this up once
evalDoubleTap() {
  const newDate = Date.now(); //
  if(newDate < prevDate + 200) { // if 2 taps happen within 200ms of each other, it's a double tap
    this.switchCamera();

## Camera-to-library.js
switchPanel() {
    this.props.switchPanel(1); // again we just tell our <App /> to handle it.
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
	<link href="https://fonts.googleapis.com/css?family=Lato\|Montserrat:400,700" rel="stylesheet">
	<title></title>
	</head>
	<body>
	<script>
	(function(_b,e,b,o){_b.Bebo={b:[],onReady:function(cb){this.b.push(cb)}}
	import React from 'react';
	import ReactDOM from 'react-dom';
	import App from './js/components/App.jsx';
	// wait for all JS executions until the Bebo SDK has finished loading
	Bebo.onReady(() => {
	ReactDOM.render(
	<App />,
	document.getElementById('app')
	);
	});
	import React from 'react'; // duh
	import withBebo from '../utils/withBebo'; // Bebo SDK wrapper for React
	import ReactSwipe from 'react-swipe'; // will nicely handle our Snapchat-esque panes
	import loadImage from 'blueimp-load-image'; // for image-processing

	import Camera from './Camera'; // our Camera
	import Library from './Library'; // our Library
	constructor(props, context) {
	super(props, context); // don't forget this, no constructor without calling super() first!
	this.state = {
	actingUser: null, // we'll set this to the acting user later
	photos: [], // array of existing photos we GET from the Database
	saving: [], // unique IDs of photo's that are currently being saved
	camera: 'front', // camera orientation ("front" or "rear")
	offset: 0, // the offset for our database GET calls
	canLoadMore: true, // are there more images to load from the databse?
	currentAt: 0, // current server time, we'll set this on GET and POST calls, because we can't trust the client time
	componentDidMount() {
	// turning on the device camera when we load the app (it'll stay on in the background)
	this.props.bebo.Camera.previewOn();
	// we'll use our wrapped Bebo SDK to get the acting user and set it to the app's state
	this.props.bebo.User.getUser('me', (err, user) => {
	if (!err) {
	this.setState({ actingUser: user });
	}
	});
	// we'll get the initial 50 photos
	handleTakePhoto() {
	this.props.bebo.Camera.capturePhoto((image_uri) => {
	// I'm doing a bunch of image manipulation here before sending the resulting base64 to savePhoto()
	})
	}

	savePhoto(base64) {
	const { actingUser, saving } = this.state;
	if(!actingUser){ return console.error('need acting user to save image')}
	if(!base64){ return console.error('need savable base64 to save image, but got', base64)}
	render() {
	// destructuring state that will get passed to <Camera /> and <Library />
	// both <Camera /> and <Library /> receive props here
	// we use ReactSwipe to handle the swipeable panels, it works great out of the box
	const { saving, canLoadMore, currentAt } = this.state;
	return (<ReactSwipe
	className='app-layer'
	ref="reactSwipe"
	swipeOptions={{continuous: false, startSlide: 0}}>
	<Camera />
	takePhoto() {
	this.addFlash(); // let's add a small flash effect
	this.props.takePhoto(); // call the <App /> and tell it to take the picture
	}

	addFlash(){
	// boilerplate to add a flash-effect
	setTimeout(() => {
	this.removeFlash(flash)
	}, 300)
	switchCamera() {
	this.props.switchCamera() // yup, we literally just call it on the <App />
	}

	// hey, let's also let users double-tap to flip the camera around
	let prevDate = Date.now(); // set this up once
	evalDoubleTap() {
	const newDate = Date.now(); //
	if(newDate < prevDate + 200) { // if 2 taps happen within 200ms of each other, it's a double tap
	this.switchCamera();
	switchPanel() {
	this.props.switchPanel(1); // again we just tell our <App /> to handle it.
	}