download photos from facebook

trukhilio · Jul 3, 2017 · d3ed060 · d3ed060
1 parent 0690a05
commit d3ed060
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 38 deletions.
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
                 appId      : '1964785470475309',
                 cookie     : true,
                 xfbml      : true,
-                version    : 'v2.8'
+                version    : 'v2.9'
             });
             FB.AppEvents.logPageView();
         };

diff --git a/src/actions/pageAction.js b/src/actions/pageAction.js
@@ -1,21 +1,47 @@
 import {
     GET_PHOTOS_REQUEST,
-    GET_PHOTOS_SUCCESS
+    GET_PHOTOS_SUCCESS,
+    GET_PHOTOS_FAIL
 } from '../constants/page'
 
-export function getPhotos(year){
-    return (dispatch) => {
+let photosArr =[];
+
+export function getPhotos(dispatch) {
+    return function (dispatch){
         dispatch({
-            type: GET_PHOTOS_REQUEST,
-            payload: year
+            type: GET_PHOTOS_REQUEST
+        });
+        FB.getLoginStatus(function(response) {
+            if (response.status === 'connected'){
+                FB.api(
+                    'me?fields=albums{photos{source,width,height}}',
+                    function (response) {
+                        if (response && !response.error) {
+                            let albums = response.albums.data.map((item) =>
+                                item.photos.data);
+                            let albumUnidade = albums.map((item) => item.map((item) => photosArr.push(item)));
+                            dispatch({
+                                type: GET_PHOTOS_SUCCESS,
+                                payload: photosArr
+                            })
+                        } else {
+                            dispatch({
+                                type: GET_PHOTOS_FAIL,
+                                error: true,
+                                payload: new Error ('Cannot get photos')
+                            })
+                        }
+                    }
+                );
+            } else {
+                dispatch({
+                    type: GET_PHOTOS_FAIL,
+                    error: true,
+                    payload: new Error ('Cannot get photos')
+                })
+            }
         });
-
-        setTimeout(() => {
-            dispatch({
-                type: GET_PHOTOS_SUCCESS,
-                payload: [1,2,3,4,5]
-            })
-        }, 1000)
-
     }
 }
+
+
diff --git a/src/actions/userAction.js b/src/actions/userAction.js
@@ -41,10 +41,10 @@ export function handleLogout (){
         dispatch({
             type: LOGOUT_REQUEST
         });
-        FB.logout(function(response) {
-        });
         FB.getLoginStatus(function(response) {
-            if (response.status ='unknown'){
+            if (response.status === 'connected'){
+                FB.logout(function(response) {
+                });
                 username ='';
                 dispatch({
                     type: LOGOUT_SUCCESS,
@@ -54,7 +54,7 @@ export function handleLogout (){
                 dispatch({
                     type: LOGOUT_FAIL,
                     error: true,
-                    payload: new Error('Something os wrong, cannot out from app')
+                    payload: new Error('Something is wrong, maybe you are out from app earlier')
                 })
             }
         });

diff --git a/src/components/page.js b/src/components/page.js
@@ -1,29 +1,31 @@
 import React, { PropTypes, Component } from 'react';
 
 export default class Page extends Component {
-    onYearBtnClick(e) {
+    onBtnClick(e) {
         this.props.getPhotos(+e.target.innerText)
     }
     render(){
-        const { year, photos, fetching } = this.props;
+        const {  photos, fetching, error } = this.props;
         return (
             <div>
-                <button onClick={::this.onYearBtnClick}>2017</button>{' '}
-                <button onClick={::this.onYearBtnClick}>2016</button>{' '}
-                <button onClick={::this.onYearBtnClick}>2015</button>{' '}
-                <button onClick={::this.onYearBtnClick}>2014</button>
+                <p>
+                     <button onClick={::this.onBtnClick}>Get photo</button>
+                </p>
                 <h3>
-                    {year} year
+                    You have [{photos.length}] photos
                 </h3>
+                { error ? <p> Oops, download is failed... </p> : '' }
                 {
                     fetching ?
                         <p>
                             Downloading...
                         </p>
                         :
-                        <p>
-                            You have {photos.length} photos
-                        </p>
+                        photos.map((entry, index) =>
+                            <div key={index}>
+                                <img src={entry.source} width={entry.width} height={entry.height}/>
+                            </div>
+                        )
                 }
 
             </div>
@@ -33,7 +35,7 @@ export default class Page extends Component {
 
 
 Page.propTypes = {
-    year: PropTypes.number.isRequired,
     photos: PropTypes.array.isRequired,
-    getPhotos: PropTypes.func.isRequired
+    getPhotos: PropTypes.func.isRequired,
+    error: PropTypes.string.isRequired
 };
diff --git a/src/constants/page.js b/src/constants/page.js
@@ -1,3 +1,4 @@
 export const GET_PHOTOS_REQUEST = 'GET_PHOTOS_REQUEST';
 export const GET_PHOTOS_SUCCESS = 'GET_PHOTOS_SUCCESS';
+export const GET_PHOTOS_FAIL = 'GET_PHOTOS_FAIL';
 
diff --git a/src/containers/app.js b/src/containers/app.js
@@ -11,12 +11,11 @@ class App extends Component {
     render(){
         const { user, page } = this.props;
         const { getPhotos } = this.props.pageActions;
-        const { handleLogin } = this.props.userActions;
-        const { handleLogout } = this.props.userActions;
+        const { handleLogin, handleLogout  } = this.props.userActions;
         return(
             <div>
                 <User name={user.name} handleLogin={handleLogin} handleLogout={handleLogout} error={user.error}/>
-                <Page photos={page.photos} year={page.year} getPhotos={getPhotos} fetching={page.fetching}/>
+                <Page photos={page.photos} getPhotos={getPhotos} fetching={page.fetching} error={page.error}/>
             </div>
         )
     }

diff --git a/src/reducers/page.js b/src/reducers/page.js
@@ -1,21 +1,25 @@
 import {
     GET_PHOTOS_REQUEST,
-    GET_PHOTOS_SUCCESS
+    GET_PHOTOS_SUCCESS,
+    GET_PHOTOS_FAIL
 } from '../constants/page'
 
 const initialState = {
-    year: 2017,
     photos: [],
-    fetching: false
+    fetching: false,
+    error: ''
 };
 
 export default function page(state=initialState, action){
     switch (action.type) {
         case GET_PHOTOS_REQUEST:
-            return { ...state, year: action.payload, fetching: true };
+            return { ...state, fetching: true, error:'' };
 
         case GET_PHOTOS_SUCCESS:
-            return { ...state, photos: action.payload, fetching: false };
+            return { ...state, photos: action.payload, fetching: false, error:'' };
+
+        case GET_PHOTOS_FAIL:
+            return { ...state, error: action.payload.message, fetching: false };
 
         default:
             return state;