code cleanup and comments

public/src/components/AlbumPhotoDisplay.jsx

@@ -1,5 +1,12 @@
 import React from 'react';
 
+/* ------------------------------
+Render a slideshow carousel to the page for a single album:
+ -carousel shows single photo with controls for previous and next
+ -carousel indicators renders thumbnails of the entire album of photos and can control the main carousel
+ -triggers a lightbox on click of the photo in the main carousel
+-------------------------------*/
+
 const AlbumPhotoDisplay = ({photos, albums, selectAlbum, currentPhoto}) => {
   const slides = photos.map((photo, i) => {
     if (i === currentPhoto) {
@@ -24,9 +31,7 @@ const AlbumPhotoDisplay = ({photos, albums, selectAlbum, currentPhoto}) => {
     }
   })
   const indicators = photos.map((photo, i) => {
-    // if (i !== 0) {
       return (<li className="" data-slide-to={i} data-target="#myCarousel"><img alt="" src={photo.url}/></li>)
-    // }
   })
   return (
     <div>
@@ -54,26 +59,3 @@ const AlbumPhotoDisplay = ({photos, albums, selectAlbum, currentPhoto}) => {
 }
 
 export default AlbumPhotoDisplay;
-
-/*<div class="row hidden-phone" id="slider-thumbs">
-              <div class="span12">
-                <ol className="carousel-indicators">
-                    <li data-target="#myCarousel" data-slide-to="0" className="active"><a className="thumbnail" id="carousel-selector-0"><img alt="" src={photos[0].url}/></a></li>
-                    {indicators}
-                </ol>
-              </div>
-            </div>
-
-<div className="carousel-caption"><h3 >{photos[4].description}</h3></div>
-
-
-<div className="item active" data-slide-number="0" onClick={()=>{console.log(0)}}>
-            <img src={photos[0].url} alt="First Slide" /><div className="carousel-caption"><h3 >{photos[0].description}</h3></div>
-        </div>
-
-        onClick={()=>{console.log(i)}}
-
-        <li className="" data-slide-to="0" data-target="#myCarousel">
-          <img alt="" src={photos[0].url} />
-        </li>
-            */

public/src/components/album.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import Photo from './photo.jsx';
 
-const Album = ({album, selectAlbum}) => { // edited this (wip)
-  /*const photos = album.photos.map(photo, i) => {
-    return (<div className="col-md-3"><Photo photo={photo} key={album.name + i}/></div>)
-  }*/
+/* ------------------------------
+Render an individual album row with the first 4 photos to the App for each album:
+ -uses selectAlbum method from app.jsx
+-------------------------------*/
+
+const Album = ({album, selectAlbum}) => {
   const photos = album.photos.map((photo, i) => {
     if(i < 4) {
       return (<div className="col-md-3" onClick={() => { selectAlbum(album, i); }}><Photo photo={photo}/></div>);
@@ -15,7 +17,7 @@ const Album = ({album, selectAlbum}) => { // edited this (wip)
     <div>
       <div className="row">
         <div className="col-md-12">
-          <h3 className="album-title" onClick={() => { selectAlbum(album); }}>{album.name}</h3> {/* << make dynamic*/}
+          <h3 className="album-title" onClick={() => { selectAlbum(album); }}>{album.name}</h3>
         </div>
       </div>
 

public/src/components/albumPhotos.jsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import Photo from './photo.jsx';
 
+/* ------------------------------
+defunct not currently in use
+-------------------------------*/
+
 const AlbumPhotos = ({}) => {
   return (
     <div>

public/src/components/albumdisplay.jsx

@@ -1,12 +1,15 @@
 import React from 'react';
-import AlbumPhotos from './albumPhotos.jsx';
 import AlbumPhotoDisplay from './AlbumPhotoDisplay.jsx';
 
+/* ------------------------------
+Render a single album to the page
+ -calls albumPhotoDisplay
+-------------------------------*/
+
 const AlbumDisplay = ({currentAlbum, albums, selectAlbum, currentPhoto}) => {
   return (
     <div>
       <AlbumPhotoDisplay photos={currentAlbum.photos} albums={albums} selectAlbum={selectAlbum} currentPhoto={currentPhoto}/>
-      {/*<AlbumPhotos album={currentAlbum}/>*/}
     </div>
   );
 };

public/src/components/albumlist.jsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import Album from './album.jsx';
 
+/* ------------------------------
+Render the list of albums from the album state in App.jsx
+  -calls Album.jsx for each album
+-------------------------------*/
+
 const AlbumList = ({albums, selectAlbum}) => {
   const albumNode = albums.map((album, i) => {
     return (<Album album={album} selectAlbum={selectAlbum} key={i} />);

public/src/components/app.jsx

@@ -4,6 +4,12 @@ import AlbumDisplay from './albumdisplay.jsx';
 import AlbumList from './albumlist.jsx';
 import Album from './album.jsx';
 
+/* ------------------------------
+Main react App:
+  -holds the states
+  -holds the methods
+-------------------------------*/
+
 export default class App extends React.Component {
   constructor(props) {
     super(props);
@@ -16,12 +22,12 @@ export default class App extends React.Component {
       currentAlbumIndex: 5,
       currentUser: {
         albums: []
-      }, // change
-      displayUser: {} // change
+      },
+      displayUser: {}
     };
   }
 
-  addPhoto(photo, albumName, description, newAlbumName) { // pass in album name/id pulled from drop-down selector?
+  addPhoto(photo, albumName, description, newAlbumName) {
 
     var data = new FormData();
     data.append('photo', photo, photo.name);
@@ -47,7 +53,6 @@ export default class App extends React.Component {
       processData: false,
       contentType: false,
       success: function(response) {
-        console.log('success', response);
         this.setState({albums: response.albums, photos: response.photos});
       }.bind(this),
       error: function(error) {
@@ -58,8 +63,6 @@ export default class App extends React.Component {
 
   selectAlbum(album, photo) {
     let photoNum = photo || 0;
-    console.log(album);
-    console.log(photoNum)
     this.setState({currentAlbum: album, currentPhoto: photoNum});
   }
 
@@ -68,30 +71,22 @@ export default class App extends React.Component {
       type: 'GET',
       url: '/user/' + this.state.currentUser,
       success: function(data) {
-        console.log(data);
         this.setState({albums: data.albums, currentUser: data, displayUser: data});
-        console.log(this.state.albums);
       }.bind(this),
       error: function(err) {
         console.error('error', err);
       }.bind(this)
     });
   }
 
-  changeAlbum(dir) {
-    //dir -1 or 1
-    // set.state of current album to next or previous album
-  }
-
-  renderPage({currentAlbum, albums, selectAlbum, currentPhoto}) {
+  renderPage({currentAlbum, albums, selectAlbum, currentPhoto}) { //logic for whether a single album should display or album list
     if (currentAlbum === null) {
       return (
         <AlbumList
           albums={albums}
           selectAlbum={selectAlbum}
         />
       );
-      //return (<Album />);
     } else {
       return (
         <AlbumDisplay
@@ -121,9 +116,3 @@ export default class App extends React.Component {
   }
 }
 
-
-/*
-<AlbumDisplay currentAlbum={this.state.currentAlbum}/>
-<AlbumList albums={this.state.albums} selectAlbum={this.selectAlbum.bind(this)}/>
-<Album />
-*/

public/src/components/navbar.jsx

@@ -1,7 +1,12 @@
 import React from 'react';
-// import Bootstrap from 'bootstrap';
 import PhotoForm from './photoform.jsx';
 
+/* ------------------------------
+Render Navbar to top of page:
+  -uses bootstrap navbar
+  -calls on PhotoForm
+-------------------------------*/
+
 const Navbar = ({addPhoto, currentUser}) => {
   return (
 

public/src/components/photo.jsx

@@ -1,5 +1,9 @@
 import React from 'react';
 
+/* ------------------------------
+renders a single photo currently in use from album.jsx
+-------------------------------*/
+
 const Photo = ({photo}) => {
   return (
     <img className="img-responsive" src={photo.url} title={photo.description}/>

public/src/components/photoform.jsx

@@ -1,5 +1,10 @@
 import React from 'react';
 
+/* ------------------------------
+Render Photo upload form to dropdown in navbar:
+  -call upon addPhoto method from App.jsx
+-------------------------------*/
+
 const PhotoForm = ({addPhoto, currentUser}) => {
   let photo;
   let name;
@@ -27,11 +32,10 @@ const PhotoForm = ({addPhoto, currentUser}) => {
   });
 
   return (
-    <form method="post" encType="multpart/form-data" onSubmit={(e) => { // add a drop-down selector for album?
+    <form method="post" encType="multpart/form-data" onSubmit={(e) => {
       e.preventDefault();
       addPhoto(photo.files[0], name, desc.value, newName.value);
       photo.value = '';
-      // name.value = '';
       desc.value = '';
       newName.value = '';
     }}>
@@ -67,10 +71,3 @@ const PhotoForm = ({addPhoto, currentUser}) => {
 
 export default PhotoForm;
 
-/*
-<div className="form-group">
-        <input id="name" className="form-control" type="text" name="name" placeholder="Album name" autoComplete="off" ref={node2 => {
-          name = node2;
-        }}/>
-      </div>
-      */

public/src/index.js

@@ -1,13 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './components/app.jsx'; // eslint-disable-line
-// import Bootstrap from 'bootstrap/dist/css/bootstrap.css';
-// var React = require('react');
-// var ReactDOM = require('react-dom');
-// var App = require('./components/app.jsx');
 
-// var test = () => console.log('test');
-
-// test();
+/* ------------------------------
+Render react app to html dom
+-------------------------------*/
 
 ReactDOM.render(<App />, document.getElementById('app')); // eslint-disable-line

public/styles/style.css

@@ -3,19 +3,20 @@
   padding-bottom: 10px;
   width: 300px;
 }
-/*.dropdown-menu .form-group {
-  margin-bottom: 7px;
-}*/
+
 .navbar-brand {
   padding: 1px 6px;
 }
+
 .navbar-brand>img {
   max-width: 150px;
 }
+
 body {
   padding-top: 50px;
   padding-bottom: 50px;
 }
+
 .new-name-hidden {
   display: none;
 }
@@ -27,9 +28,11 @@ body {
     height: 500px;
     max-height: 500px;
 }
+
 .carousel .item{
     min-height: 280px; /* Prevent carousel from being distorted if for some reason image doesn't load */
 }
+
 .carousel .item img{
     margin: 0 auto; /* Align slide image horizontally center */
     width: auto;
@@ -84,18 +87,14 @@ body {
     color: #93c7ff;
 }
 
-.carousel-caption h3 {
-  /* color: black !important; */
-
-}
-
 .img-responsive {
     height: 250px;
 }
 
 .album-title {
     color: #29a7b4;
 }
+
 .album-row {
     background: #5486a5;
     padding-top: 10px;