jnsdls

Keybase proof

I hereby claim:

• I am jnsdls on github.
• I am jnsdls (https://keybase.io/jnsdls) on keybase.
• I have a public key ASBTypkozJUiVVu0W7-B3nqfAkytucmZW5eTKAQKY8wjZAo

To claim this, I am signing this object:

jnsdls

render() {
  const { photo, style, nextPhoto } = this.props;
  return (<div className="photo" style={style || {}}>
    <div
      className="photo-img"
      onClick={nextPhoto}
      style={{ backgroundImage: `url(${photo.image_url})` }}
    />
  </div>);
}

jnsdls

renderCurrentPhoto(){
  const { photos, currentAt } = this.props;
  const { photoIndex } = this.state;
  if(photos.length) {
    // if we have photos loaded, render the current one
    return <Photo currentAt={currentAt} photo={photos[photoIndex]} nextPhoto={this.handleNextPhoto} />
  } else {
    return null; // we could add a loader here
  }
}

jnsdls

handleNextPhoto() {
  const { photoIndex } = this.state; // the only state the Library manages is the current index
  const { photos, canLoadMore } = this.props; // we get the array of photos from the <App />
  if(photoIndex  + 5 > photos.length && canLoadMore) {
    // if we're 5 off of the last photo we tell the <App /> to load 50 more if there are any more to load
    this.props.loadMore();
  }
  if(photos[photoIndex+1]) {
    // if there is a photo Object at the next index, go there
    this.setState({ photoIndex: photoIndex+1 });

jnsdls

render() {
  // flashes is an array of unique flash-IDs so we can render our flash-effect DOM elements
  // we do some small little CSS effects to make it feel more alive
  const { flashes, cameraSwitch } = this.state;
  const { isSaving } = this.props;
  return (<div className="camera" onTouchStart={this.evalDoubleTap}>
    <div className="flash-container">
      {flashes.map((flash) => <div className="imageWrap shutterClick" key={flash} />)}
    </div>
    <div className="camera-controls">

jnsdls

switchPanel() {
    this.props.switchPanel(1); // again we just tell our <App /> to handle it.
}

jnsdls

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();

jnsdls

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)

jnsdls

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 />

jnsdls

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)}