+ {this.props.intl.formatMessage(messages.boardLoading)}
+
+ )}
+
+
+ {props.intl.formatMessage(messages.addFrom)}
+
+ Google Photos + +
+ );
+});
diff --git a/src/components/Board/GooglePhotosSearch/GooglePhotosButton/Google_Photos_icon.png b/src/components/Board/GooglePhotosSearch/GooglePhotosButton/Google_Photos_icon.png
new file mode 100644
index 000000000..5ed351dd0
Binary files /dev/null and b/src/components/Board/GooglePhotosSearch/GooglePhotosButton/Google_Photos_icon.png differ
diff --git a/src/components/Board/GooglePhotosSearch/GooglePhotosButton/index.js b/src/components/Board/GooglePhotosSearch/GooglePhotosButton/index.js
new file mode 100644
index 000000000..74b090ee7
--- /dev/null
+++ b/src/components/Board/GooglePhotosSearch/GooglePhotosButton/index.js
@@ -0,0 +1 @@
+export { default } from './GooglePhotosConnect.Button';
diff --git a/src/components/Board/GooglePhotosSearch/GooglePhotosFilter/GooglePhotosFilter.component.js b/src/components/Board/GooglePhotosSearch/GooglePhotosFilter/GooglePhotosFilter.component.js
new file mode 100644
index 000000000..316117233
--- /dev/null
+++ b/src/components/Board/GooglePhotosSearch/GooglePhotosFilter/GooglePhotosFilter.component.js
@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import Chip from '@material-ui/core/Chip';
+import Paper from '@material-ui/core/Paper';
+
+import './GooglePhotosFilter.css';
+import { Button } from '@material-ui/core';
+
+import { injectIntl } from 'react-intl';
+import messages from './GooglePhotosFilter.messages';
+
+export default injectIntl(function GooglePhotosFilter(props) {
+ const { intl } = props;
+ const [chipData, setChipData] = useState([
+ { key: 'LANDSCAPES', label: 'landscapes', value: false },
+ { key: 'RECEIPTS', label: 'receipts', value: false },
+ { key: 'CITYSCAPES', label: 'cityscapes', value: false },
+ { key: 'LANDMARKS', label: 'landmarks', value: false },
+ { key: 'SELFIES', label: 'selfies', value: false },
+ { key: 'PEOPLE', label: 'people', value: false },
+ { key: 'PETS', label: 'pets', value: false },
+ { key: 'WEDDINGS', label: 'weddings', value: false },
+ { key: 'BIRTHDAYS', label: 'birthdays', value: false },
+ { key: 'DOCUMENTS', label: 'documents', value: false },
+ { key: 'TRAVEL', label: 'travel', value: false },
+ { key: 'ANIMALS', label: 'animals', value: false },
+ { key: 'FOOD', label: 'food', value: false },
+ { key: 'SPORT', label: 'sport', value: false },
+ { key: 'NIGHT', label: 'night', value: false },
+ { key: 'PERFORMANCES', label: 'performances', value: false },
+ { key: 'WHITEBOARDS', label: 'whiteboards', value: false },
+ { key: 'SCREENSHOTS', label: 'screenshots', value: false },
+ { key: 'UTILITY', label: 'utility', value: false },
+ { key: 'ARTS', label: 'arts', value: false },
+ { key: 'CRAFTS', label: 'crafts', value: false },
+ { key: 'FASHION', label: 'fashion', value: false },
+ { key: 'HOUSES', label: 'houses', value: false },
+ { key: 'GARDENS', label: 'gardens', value: false },
+ { key: 'FLOWERS', label: 'flowers', value: false },
+ { key: 'HOLIDAYS', label: 'holidays', value: false }
+ ]);
+
+ const handleclick = chipToToogle => () => {
+ setChipData(chips =>
+ chips.map(chip => {
+ if (chip.key === chipToToogle.key) {
+ chip.value = !chip.value;
+ }
+ return chip;
+ })
+ );
+ };
+
+ const handleSearchClick = () => {
+ const filters = [];
+ const activeFilters = chipData.filter(chip => chip.value);
+ activeFilters.forEach(element => {
+ filters.push(element.key);
+ });
+ props.filterSearch(filters);
+ };
+
+ return (
+ + Google Photos + +
+
+ + {intl.formatMessage(messages.instructions)} +
+
+ {chipData.map(data => {
+ return (
+
+
+ );
+ })}
+
+
+
+
+
+
+
+
+ {error && (
+ {
+ await this.handletryAgainClick(view);
+ }}
+ aria-label={intl.formatMessage(messages.tryAgain)}
+ >
+ {intl.formatMessage(messages.tryAgain)}
+
+ )
+ }
+ >
+ {intl.formatMessage(messages.error)}
+
+ )}
+ {googlePhotosAuth && (
+ <>
+
+
+
+
+ );
+ }
+}
+
+const mapStateToProps = ({ app: { userData } }) => {
+ const googlePhotosAuth = userData.googlePhotosAuth;
+ return {
+ googlePhotosAuth: googlePhotosAuth,
+ user: userData.email ? userData : null
+ };
+};
+
+const mapDispatchToProps = { logInGooglePhotosAuth, logOutGooglePhotos };
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(injectIntl(GooglePhotosSearch));
diff --git a/src/components/Board/GooglePhotosSearch/GooglePhotosSearch.css b/src/components/Board/GooglePhotosSearch/GooglePhotosSearch.css
new file mode 100644
index 000000000..10cb82b68
--- /dev/null
+++ b/src/components/Board/GooglePhotosSearch/GooglePhotosSearch.css
@@ -0,0 +1,42 @@
+:root {
+ --Bottom-navigation-height: 56px;
+}
+
+.fullHeight {
+ min-height: calc(100vh - 64px); /*remember avoid scroll*/
+}
+
+.navigation {
+ position: fixed;
+ bottom: 0px;
+ left: 0px;
+ width: 100%;
+}
+
+.loading_container {
+ display: flex !important;
+ justify-content: center;
+ margin-top: 15px;
+}
+
+.gallery_container {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: calc(var(--Bottom-navigation-height) + 14px);
+}
+
+.manage_pages {
+ display: flex;
+ margin-top: 4px;
+}
+
+.next_page_btn {
+ position: relative;
+ margin-left: auto !important;
+}
+
+.float_button {
+ position: fixed !important;
+ bottom: calc(var(--Bottom-navigation-height) + 8px);
+ left: 3%;
+}
diff --git a/src/components/Board/GooglePhotosSearch/GooglePhotosSearch.messages.js b/src/components/Board/GooglePhotosSearch/GooglePhotosSearch.messages.js
new file mode 100644
index 000000000..84fcc9e99
--- /dev/null
+++ b/src/components/Board/GooglePhotosSearch/GooglePhotosSearch.messages.js
@@ -0,0 +1,48 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+ addFrom: {
+ id: 'cboard.components.Board.TileEditor.GooglePhotosSearch.addFrom',
+ defaultMessage: 'Add from'
+ },
+ disconnect: {
+ id: 'cboard.components.Board.TileEditor.GooglePhotosSearch.disconnect',
+ defaultMessage: 'Disconect Google Photos'
+ },
+ error: {
+ id: 'cboard.components.Board.TileEditor.googlePhotosSearch.error',
+ defaultMessage: 'Sorry an error ocurred. Try it again'
+ },
+ noAlbumsError: {
+ id: 'cboard.components.Board.TileEditor.googlePhotosSearch.noAlbumsError',
+ defaultMessage: "You don't have albums in your Google Photos acount."
+ },
+ noImagesError: {
+ id: 'cboard.components.Board.TileEditor.googlePhotosSearch.noImagesError',
+ defaultMessage: 'No images availables.'
+ },
+ albums: {
+ id: 'cboard.components.Board.TileEditor.GooglePhotosSearch.albums',
+ defaultMessage: 'Albums'
+ },
+ search: {
+ id: 'cboard.components.Board.TileEditor.googlePhotosSearch.search',
+ defaultMessage: 'Search'
+ },
+ recent: {
+ id: 'cboard.components.Board.TileEditor.googlePhotosSearch.recent',
+ defaultMessage: 'Recent'
+ },
+ nextPage: {
+ id: 'cboard.components.Board.TileEditor.googlePhotosSearch.nextPage',
+ defaultMessage: 'Next page'
+ },
+ backToAlbumList: {
+ id: 'cboard.components.Board.TileEditor.googlePhotosSearch.backToAlbumList',
+ defaultMessage: 'Go back to album list view'
+ },
+ tryAgain: {
+ id: 'cboard.components.Board.TileEditor.googlePhotosSearch.tryAgain',
+ defaultMessage: 'Try again'
+ }
+});
diff --git a/src/components/Board/GooglePhotosSearch/GooglePhotosSearchGallery/GooglePhotosSearchGallery.component.js b/src/components/Board/GooglePhotosSearch/GooglePhotosSearchGallery/GooglePhotosSearchGallery.component.js
new file mode 100644
index 000000000..e0b7bbf2f
--- /dev/null
+++ b/src/components/Board/GooglePhotosSearch/GooglePhotosSearchGallery/GooglePhotosSearchGallery.component.js
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { ImageList, ImageListItem } from '@material-ui/core'; //insta MUI dependency to avoid white space
+
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+
+import './GooglePhotosSearchGallery.css';
+
+const getCols = proportionData => {
+ const proportion = proportionData.width / proportionData.height;
+ if (proportion <= 1.2) return 1;
+ return 2;
+};
+
+const GooglePhotosSearchGallery = props => {
+ const bigScreen = useMediaQuery('(min-width:600px)');
+
+ return (
+
+ {view === 'search' && (
+
+
+ )}
+ {!googlePhotosAuth && googlePhotosCode && (
+
+
+ )}
+ {!loading && (
+
+ {viewData && (
+ <>
+ {(!viewData.mediaItems ||
+ viewData.mediaItems?.length < 1) && (
+
+ {intl.formatMessage(messages.noImagesError)}
+ {/* This alert showed if next page only contains videos or there arn't images for the selected filter */}
+
+ )}
+ {viewData.mediaItems && (
+
+
+ )}
+
+ )}
+ {!viewData && view === 'albums' && (
+ <>
+
+ )}
+
+
+
+ )}
+ {view === 'albums' && (
+
+ {!albumsList?.albums && (
+
+ {intl.formatMessage(messages.noAlbumsError)}
+
+ )}
+ {albumsList !== null && albumsList.albums && (
+
+
+ )}
+ - {this.renderAlbumsList()}
+
+ )}
+
+
+
+
+
+
+ {props.imagesData.map(tile => (
+ {
+ props.onSelect(tile.baseUrl);
+ }}
+ key={tile.id}
+ cols={getCols(tile.mediaMetadata)}
+ >
+ 
+
+ ))}
+
+
+ );
+};
+
+export default GooglePhotosSearchGallery;
diff --git a/src/components/Board/GooglePhotosSearch/GooglePhotosSearchGallery/GooglePhotosSearchGallery.css b/src/components/Board/GooglePhotosSearch/GooglePhotosSearchGallery/GooglePhotosSearchGallery.css
new file mode 100644
index 000000000..412c44140
--- /dev/null
+++ b/src/components/Board/GooglePhotosSearch/GooglePhotosSearchGallery/GooglePhotosSearchGallery.css
@@ -0,0 +1,12 @@
+.root {
+ display: 'flex';
+ flex-wrap: 'wrap';
+ justify-content: 'space-around';
+ overflow: 'hidden';
+ /*background-color: theme.palette.background.paper;*/
+}
+
+.gridList {
+ width: 500;
+ height: 450;
+}
diff --git a/src/components/Board/GooglePhotosSearch/GooglePhotosSearchGallery/index.js b/src/components/Board/GooglePhotosSearch/GooglePhotosSearchGallery/index.js
new file mode 100644
index 000000000..6f207f04b
--- /dev/null
+++ b/src/components/Board/GooglePhotosSearch/GooglePhotosSearchGallery/index.js
@@ -0,0 +1 @@
+export { default } from './GooglePhotosSearchGallery.component';
diff --git a/src/components/Board/GooglePhotosSearch/index.js b/src/components/Board/GooglePhotosSearch/index.js
new file mode 100644
index 000000000..214a4c31b
--- /dev/null
+++ b/src/components/Board/GooglePhotosSearch/index.js
@@ -0,0 +1 @@
+export { default } from './GooglePhotosSearch.container';
diff --git a/src/components/Board/TileEditor/TileEditor.component.js b/src/components/Board/TileEditor/TileEditor.component.js
index 9b80cdec0..6ada21f52 100644
--- a/src/components/Board/TileEditor/TileEditor.component.js
+++ b/src/components/Board/TileEditor/TileEditor.component.js
@@ -29,7 +29,22 @@ import InputImage from '../../UI/InputImage';
import IconButton from '../../UI/IconButton';
import ColorSelect from '../../UI/ColorSelect';
import VoiceRecorder from '../../VoiceRecorder';
+
+import GooglePhotosSearch from '../GooglePhotosSearch/GooglePhotosSearch.container';
+import ConnectToGooglePhotosButton from '../GooglePhotosSearch/GooglePhotosButton';
+
+import { connect } from 'react-redux';
+import {
+ updateEditingTiles,
+ editingTilesNextStep,
+ editingTilesPrevStep
+} from '../Board.actions';
+
+import { showNotification } from '../../Notifications/Notifications.actions';
+
import './TileEditor.css';
+import { isCordova } from '../../../cordova-util';
+import { API_URL } from '../../../constants';
export class TileEditor extends Component {
static propTypes = {
@@ -48,7 +63,7 @@ export class TileEditor extends Component {
/**
* Tiles array to work on
*/
- editingTiles: PropTypes.array,
+ editingTiles: PropTypes.object,
/**
* Callback fired when submitting edited board tiles
*/
@@ -57,11 +72,26 @@ export class TileEditor extends Component {
* Callback fired when submitting a new board tile
*/
onAddSubmit: PropTypes.func.isRequired,
- boards: PropTypes.array
- };
-
- static defaultProps = {
- editingTiles: []
+ boards: PropTypes.array,
+ /**
+ * code to exchange for google photos auth
+ */
+ googlePhotosCode: PropTypes.string,
+ /**
+ * To verify if user is logged on google Photos
+ */
+ googlePhotosAuth: PropTypes.object,
+ /**
+ * callback to delete googlephotosCode after exchange it
+ */
+ onExchangeCode: PropTypes.func,
+ /**
+ * if true. user is logged
+ */
+ isLoggedUser: PropTypes.bool,
+ updateEditingTiles: PropTypes.func,
+ editingTilesNextStep: PropTypes.func,
+ editingTilesPrevStep: PropTypes.func
};
constructor(props) {
@@ -86,9 +116,8 @@ export class TileEditor extends Component {
};
this.state = {
- activeStep: 0,
- editingTiles: props.editingTiles,
isSymbolSearchOpen: false,
+ isGooglePhotosSearchOpen: false,
selectedBackgroundColor: '',
tile: this.defaultTile,
linkedBoard: ''
@@ -96,12 +125,13 @@ export class TileEditor extends Component {
}
UNSAFE_componentWillReceiveProps(props) {
- this.updateTileProperty('id', shortid.generate()); // todo not here
- this.setState({ editingTiles: props.editingTiles });
+ if (!this.editingTile()) this.updateTileProperty('id', shortid.generate()); // todo not here
}
editingTile() {
- return this.state.editingTiles[this.state.activeStep];
+ return this.props.editingTiles?.editingTiles[
+ this.props.editingTiles.activeEditStep
+ ];
}
currentTileProp(prop) {
@@ -110,12 +140,8 @@ export class TileEditor extends Component {
}
updateEditingTile(id, property, value) {
- return state => {
- const editingTiles = state.editingTiles.map(b =>
- b.id === id ? { ...b, ...{ [property]: value } } : b
- );
- return { ...state, editingTiles };
- };
+ const { updateEditingTiles } = this.props;
+ updateEditingTiles(id, property, value);
}
updateNewTile(property, value) {
@@ -127,9 +153,7 @@ export class TileEditor extends Component {
updateTileProperty(property, value) {
if (this.editingTile()) {
- this.setState(
- this.updateEditingTile(this.editingTile().id, property, value)
- );
+ this.updateEditingTile(this.editingTile().id, property, value);
} else {
this.setState(this.updateNewTile(property, value));
}
@@ -145,7 +169,7 @@ export class TileEditor extends Component {
});
if (this.editingTile()) {
- onEditSubmit(this.state.editingTiles);
+ onEditSubmit(this.props.editingTiles.editingTiles);
} else {
const tileToAdd = this.state.tile;
const selectedBackgroundColor = this.state.selectedBackgroundColor;
@@ -182,6 +206,28 @@ export class TileEditor extends Component {
this.setState({ isSymbolSearchOpen: false });
};
+ handleGooglePhotosSearchClick = event => {
+ const { isLoggedUser, intl, googlePhotosAuth } = this.props;
+ if (!isLoggedUser) {
+ this.props.showNotification(intl.formatMessage(messages.unlogedMessage));
+ return;
+ }
+ if (!googlePhotosAuth) {
+ window.location = `${API_URL}/auth/google-photos`;
+ return;
+ }
+ this.setState({ isGooglePhotosSearchOpen: true });
+ };
+
+ handleGooglePhotosSearchChange = image => {
+ this.updateTileProperty('image', image);
+ };
+
+ handleGooglePhotosSearchClose = event => {
+ this.props.onExchangeCode();
+ this.setState({ isGooglePhotosSearchOpen: false });
+ };
+
handleLabelChange = event => {
this.updateTileProperty('label', event.target.value);
this.updateTileProperty('labelKey', '');
@@ -216,12 +262,12 @@ export class TileEditor extends Component {
};
handleBack = event => {
- this.setState({ activeStep: this.state.activeStep - 1 });
+ this.props.editingTilesPrevStep();
this.setState({ selectedBackgroundColor: '', linkedBoard: '' });
};
handleNext = event => {
- this.setState({ activeStep: this.state.activeStep + 1 });
+ this.props.editingTilesNextStep();
this.setState({ selectedBackgroundColor: '', linkedBoard: '' });
};
@@ -263,7 +309,7 @@ export class TileEditor extends Component {
};
render() {
- const { open, intl, boards } = this.props;
+ const { open, intl, boards, googlePhotosCode } = this.props;
const currentLabel = this.currentTileProp('labelKey')
? intl.formatMessage({ id: this.currentTileProp('labelKey') })
@@ -351,6 +397,14 @@ export class TileEditor extends Component {
>
{intl.formatMessage(messages.symbols)}
+ {!isCordova() && (
+
+
+ )}