Show large version of trash photos when a thumbnail is clicked/tapped.

CONTRIBUTING.md

@@ -1,5 +1,14 @@
 # Contributing to World Cleanup Day App and Platform
 
+Not sure how to start? Read on for the general process or [jump right in](GETTING_STARTED.md).
+
+- [Code of Conduct](#code-of-conduct)
+- [How can you contribute?](#how-you-can-contribute)
+- [Issue Contributions](#issue-contributions)
+- [Code Contributions](#code-contributions)
+- [Additional Notes](#additional-notes)
+- [Developer's Certificate of Origin 1.1](#developers-certificate-of-origin-11)
+
 ## Code of Conduct
 
 * We are committed to providing a friendly, safe and welcoming environment for all, regardless of level of experience, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, nationality, or other similar characteristic.
@@ -13,7 +22,7 @@
 * Likewise any spamming, trolling, flaming, baiting or other attention-stealing behavior is not welcome.
 * Avoid the use of personal pronouns in code comments or documentation. There is no need to address persons when explaining code (e.g. "When the developer").
 
-## How you can contribute? 
+## How you can contribute?
 Do you like to design?
 
 * Create art for social media banners to promote the project

GETTING_STARTED.md

@@ -0,0 +1,38 @@
+# Getting started
+
+This document will help you set up the project for development.
+
+## Basic dependencies
+Install git, docker, docker-compose, node and yarn.
+
+
+## Backend services
+Consult the dedicated [readme](devops/dev/README.md) to set them up, run
+them and verify they work.
+
+### Adding dummy data
+This repository comes without trashpoint data. You will need some to work
+on the related APIS or marker related functionality.
+
+**TODO:** expand with wcd_dummy instructions
+
+
+## Web-app (admin backend)
+Consult the dedicated [readme](web-app/README.md), but in essence:
+
+```bash
+npm install # the first time
+npm start
+```
+
+## Mobile-apps
+Consult the dedicated [readme](mobile-app/README.md).
+
+
+## Extra reading
+
+* [Contributing](./CONTRIBUTING.md) to World Cleanup Day App and Platform
+* [Code of Conduct](./CODE_OF_CONDUCT.md)
+* [Governance](./GOVERNANCE.md)
+* [Roadmap](./ROADMAP.md)
+* Issues marked [good first issue](https://github.com/letsdoitworld/World-Cleanup-Day/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22)

README.md

@@ -3,7 +3,7 @@
 
 [![Join the chat at https://gitter.im/letsdoitworld/World-Cleanup-Day](https://badges.gitter.im/letsdoitworld/World-Cleanup-Day.svg)](https://gitter.im/letsdoitworld/World-Cleanup-Day?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
-Over 17 million trash heroes have already cleaned up more than 500 000 tonnes of trash in over 100 countries! The movement against pollution is growing fast and we're now building the World Cleanup App and Platform for the hundreds of millions of people people joining the World Cleanup Day on **15th of September 2018**. 
+Over 20 million trash heroes have already cleaned up more than 500 000 tonnes of trash in over 100 countries! The movement against pollution is growing fast and we're now building the World Cleanup App and Platform for the hundreds of millions of people people joining the World Cleanup Day on **15th of September 2018**. 
 
 Together we will get rid of trash once and for all, save lives, improve health & reduce costs. Read below on how you can participate! Let's do it! 😃 
 
@@ -43,6 +43,12 @@ Join the movement and let's clean up the World together!
 ## API
 See the [API docs](http://ldiw-api.s3-website.eu-central-1.amazonaws.com/)
 
+## Translations
+See [translate.worldcleanupday.org](https://translate.worldcleanupday.org/ )
+
+## Chat
+Join our [Slack chatroom](https://join.slack.com/t/worldcleanupday/shared_invite/enQtMzM0NDQ0MTE5NDI3LThmYTUxNGRiYmQ2ZGVkODJmMDAwN2U3YWVhMTI2ZmU4ZjBlMzk0YjM2YjU0MjNhNmE4ZWEwNDJkN2U0ZjMyZWY)
+
 ## Roadmap
 See [Roadmap.md](https://github.com/letsdoitworld/World-Cleanup-Day/blob/master/ROADMAP.md)
 

mobile-app/src/components/AlertModal/styles.js

@@ -4,10 +4,10 @@ import { getHeightPercentage, getWidthPercentage } from '../../shared/helpers';
 export default EStyleSheet.create({
   container: {
     backgroundColor: '$white',
-    marginVertical: getHeightPercentage(178),
+    marginVertical: getHeightPercentage(168),
     marginHorizontal: getWidthPercentage(20),
     borderRadius: 8,
-    height: getHeightPercentage(212),
+    height: getHeightPercentage(232),
     width: getWidthPercentage(280),
     alignItems: 'center',
   },

mobile-app/src/components/PhotoModal/PhotoModal.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Image,
+  Modal,
+  TouchableOpacity,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+
+import styles from './styles';
+
+const PhotoModal = ({ visible, onRequestClose, photoUrl }) => {
+  return (
+    <Modal
+      visible={visible}
+      onRequestClose={onRequestClose}
+      style={styles.modal}
+    >
+      <Image
+        style={{
+          flex: 1,
+        }}
+        resizeMode="contain"
+        source={{ uri: photoUrl }}
+      >
+        <TouchableOpacity
+          onPress={onRequestClose}
+          style={styles.buttonBody}
+        >
+          <Ionicons
+            size={styles.$iconSize}
+            name="md-close"
+            style={styles.buttonIcon}
+          />
+        </TouchableOpacity>
+      </Image>
+    </Modal>
+  );
+};
+
+PhotoModal.propTypes = {
+  visible: PropTypes.bool.isRequired,
+  onRequestClose: PropTypes.func.isRequired,
+  photoUrl: PropTypes.string.isRequired,
+};
+
+export default PhotoModal;

mobile-app/src/components/PhotoModal/index.js

@@ -0,0 +1 @@
+export { default as PhotoModal } from './PhotoModal.js';

mobile-app/src/components/PhotoModal/styles.js

@@ -0,0 +1,25 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+import { getHeightPercentage, getWidthPercentage } from '../../shared/helpers';
+
+const styles = EStyleSheet.create({
+  $iconSize: getWidthPercentage(20),
+  buttonIcon: {
+    textAlign: 'center',
+    color: 'white',
+  },
+  buttonBody: {
+    width: getWidthPercentage(30),
+    height: getHeightPercentage(30),
+    marginLeft: getWidthPercentage(265),
+    marginTop: getHeightPercentage(20),
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#fe6669',
+    borderRadius: 4,
+  },
+  modal: {
+    backgroundColor: '#d8d8d8',
+  },
+});
+
+export default styles;

mobile-app/src/components/PhotoPicker/PhotoPicker.js

@@ -1,11 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Image, View, Text, TouchableOpacity, ScrollView } from 'react-native';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import _ from 'lodash';
 import { translate } from 'react-i18next';
 
 import { AlertModal } from '../AlertModal';
+import { PhotoModal } from '../PhotoModal';
 import { LazyImage } from './components/LazyImage';
 
 import styles from './styles';
@@ -35,6 +40,7 @@ class Photo extends React.Component {
     super(props);
     this.state = {
       showingConfirm: false,
+      showZoomedPhoto: false,
     };
 
     this.buttons = [
@@ -49,57 +55,92 @@ class Photo extends React.Component {
       },
     ];
   }
+
   setConfirmState = (showingConfirm) => {
     this.setState({
       showingConfirm,
     });
-  };
+  }
+
   handlePhotoDeletePress = () => {
     this.setConfirmState(true);
-  };
+  }
+
   handleModalClosed = () => {
     this.setConfirmState(false);
-  };
+  }
+
   handleModalConfirmed = () => {
     this.setConfirmState(false);
-    this.props.onPress();
-  };
+    this.props.onDeletePress();
+  }
+
+  openZoomedPhoto = () => {
+    const { photo } = this.props;
+    this.setState({
+      zoomedPhotoUrl: photo.mediumPhotoUrl,
+      showZoomedPhoto: true,
+    });
+  }
+
+  closeZoomedPhoto = () => {
+    this.setState({
+      showZoomedPhoto: false,
+    });
+  }
+
   render() {
-    const { photo, onPress } = this.props;
+    const { photo, onDeletePress } = this.props;
     const { showingConfirm } = this.state;
     return (
-      <LazyImage key={photo} style={[styles.photo]} source={{ uri: photo }}>
-        <View>
-          {onPress &&
-            <TouchableOpacity
-              onPress={this.handlePhotoDeletePress}
-              style={styles.photoButtonContainer}
-            >
-              <Ionicons
-                size={styles.$photoSize}
-                name="md-close"
-                style={styles.photoButton}
-              />
-            </TouchableOpacity>}
-
-          <AlertModal
-            visible={showingConfirm}
-            buttons={this.buttons}
-            onOverlayPress={this.handleModalClosed}
-            title={this.props.t('label_delete_photo_title')}
-            subtitle={this.props.t('label_delete_photo_subtitle')}
+      <TouchableOpacity onPress={this.openZoomedPhoto}>
+        <LazyImage
+          key={photo}
+          style={[styles.photo]}
+          source={{ uri: photo.thumbnailUrl }}
+        >
+          <PhotoModal
+            visible={this.state.showZoomedPhoto}
+            onRequestClose={this.closeZoomedPhoto}
+            photoUrl={this.state.zoomedPhotoUrl}
           />
-        </View>
-      </LazyImage>
+          <View>
+            {onDeletePress &&
+              <TouchableOpacity
+                onPress={this.handlePhotoDeletePress}
+                style={styles.photoButtonContainer}
+              >
+                <Ionicons
+                  size={styles.$photoSize}
+                  name="md-close"
+                  style={styles.photoButton}
+                />
+              </TouchableOpacity>}
+
+            <AlertModal
+              visible={showingConfirm}
+              buttons={this.buttons}
+              onOverlayPress={this.handleModalClosed}
+              title={this.props.t('label_delete_photo_title')}
+              subtitle={this.props.t('label_delete_photo_subtitle')}
+            />
+          </View>
+        </LazyImage>
+      </TouchableOpacity>
     );
   }
 }
+
 Photo.defaultProps = {
-  onPress: undefined,
+  onDeletePress: undefined,
 };
+
 Photo.propTypes = {
-  photo: PropTypes.string.isRequired,
-  onPress: PropTypes.func,
+  photo: PropTypes.shape({
+    thumbnailUrl: PropTypes.string.isRequired,
+    mediumPhotoUrl: PropTypes.string.isRequired,
+  }).isRequired,
+  onDeletePress: PropTypes.func,
 };
 
 const PhotoComponent = translate()(Photo);
@@ -131,15 +172,15 @@ const PhotoPicker = ({
         style={styles.photoContainer}
       >
         {hasPhotos &&
-          photos.map((uri, index) => {
+          photos.map((photo, index) => {
             const onDeletePhotoPress = hasDelete
               ? () => onDeletePress(index)
               : undefined;
             return (
               <PhotoComponent
-                key={uri}
-                photo={uri}
-                onPress={onDeletePhotoPress}
+                key={photo.thumbnailUrl}
+                photo={photo}
+                onDeletePress={onDeletePhotoPress}
               />
             );
           })}
@@ -152,15 +193,21 @@ const PhotoPicker = ({
     </View>
   );
 };
+
 PhotoPicker.defaultProps = {
   maxPhotos: undefined,
   onDeletePress: undefined,
   onAddPress: undefined,
 };
+
 PhotoPicker.propTypes = {
-  photos: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
+  photos: PropTypes.arrayOf(PropTypes.shape({
+    thumbnailUrl: PropTypes.string.isRequired,
+    mediumPhotoUrl: PropTypes.string.isRequired,
+  }).isRequired).isRequired,
   onDeletePress: PropTypes.func,
   onAddPress: PropTypes.func,
   maxPhotos: PropTypes.number,
 };
+
 export default translate()(PhotoPicker);