plant-for-the-planet-org/treecounter-app

Plant-for-the-Planet App allows you to plant trees with over 100 reforestation projects around the world.

Plant-for-the-Planet App

Welcome to this repository which contains the code of the web clients and the native iOS and Android apps of the Trillion Tree Campaign at https://www.trilliontreecampaign.org/ written with React-Native. For contributions please read our contribution guide as well as our code of conduct and the following information:

Directory Structure

ios houses the iOS project files, web houses the web configuration, assets and index.html, and android contains Android project files.The app contains the react code base for all platform i.e components, reducers, containers etc.

index.web.js is the entry point of web platform build, index.js is the entry point of both iOS and android platform build process.

Configuration

Copy .env.develop.sample to .env.develop and add the necessary API keys for your development environment. Install nvm following instructions from https://github.com/nvm-sh/nvm#install--update-script Run nvm install && nvm use to install and use required version of node.

Web Setup

!!! Web setup is deprecated. Please visit https://github.com/plant-for-the-Planet-org/planet-webapp

Run following commands

bash
npm install
npm start

To run the app as prod, useful for testing features like (hashed js/css):

npm run start-prod-server

iOS Setup

• Install latest Xcode.
• Run following commands

bash
brew install node
brew install watchman
npm install -g react-native-cli
npm install
cd ios && pod install

Running into iOS simulator

Build and run the app in development mode deployed from Metro Bundler in an iOS simulator (starts Metro Bundler automatically if not already running, also starts iOS simulator):

bash
npm run ios

If you have problems with a cached version of the bundle, you can stop the Metro Bundler and manually start it with the reset cache option:

react-native start --reset-cache

Android Setup

Steps for setting up Dev Env for android on MAC is as follows:

• Install Latest Android Studio.
• From Android studio’s SDK Manager add SDK 23, 27 and Build tool Version 23.0.1
• Install JDK 8 if not already there and set JAVA_HOME specific to your JDK Version.
• Create .bash_profile if not already there and add following variables in it:

bash
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home

• Run following commands

bash
brew install node
brew install watchman
npm install -g react-native-cli
npm install

Running into Android emulator

Build and run the app in development mode deployed from Metro Bundler (starts Metro Bundler automatically if not already running) on an emulator or device. You need to start an Android emulator or attach a device manually before:

bash
npm run android

If you have problems with a cached version of the bundle, you can stop the Metro Bundler and manually start it with the reset cache option:

react-native start --reset-cache

Development process

This project uses GitFlow (https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow) with Master-Branch master and Development-Branch develop. The Master-Branch will be automatically released by CircleCI to the production system. There are currently some more protected branches also build by CircleCI automatically and mapped to test backends using the branch name as subdomain.

Versioning

App Versioning Guide

eg: Version M.F.B V 1.1.10

M = Major Changes F = Feature Addition B = Critical Bug Fixes and Additions

Release candidate can have the target version number V 1.1.11 RC 1

Beta and Alpha builds can also have target version number V 1.1.11 B 12 V 1.1.11 A 12 [increment per release]

Supporters

The deployment and production of this app is also possible due to support from open-source software contributors.                             Fixer.io

License

Plant-for-the-Planet App is free software, and is released under the terms of the GPL version 3 or (at your option) any later version. See license.txt.

treecounter-app's Issues

Login error message.

Login error message is not valid in Firefox gives me error.response but correct in chrome but in that to their is written "cannot read property 'status' of undefined".

in Firefox

in chrome

Priorities Responsiveness – July 9

The list is based on priority [ 1 being the highest, and 10 the lowest]

1. Top Bar (incl. search and autohide menu)
2. Remove white bars on the right side
3. Pledge Tool
4. Trillion Tree Campaign & Personal Tree Counter (Mainly target and planted in circle)
5. Donate Trees
6. Set Target
7. Register Planted Trees
8. Tree Gift
9. My Trees
10. Explore

More detailed information is available in issue: #116

Header should be fixed

when we click on notifications and then scroll our window then notifications are fixed and header moves up.

When we click on notifications

after Scroll

FAQ

The top sentence. We need to remove it or get it correct if it is coming from the server. ALso the gap below the green separator bar needs to be reduced.

Sign Up page layout is not dispalyed correctly on android Phone.

on android phones Signup page layout is not responsive.

In side menu active page should be of red color

Active page should be of red color as per the zeplin designs

Developed Design

Zeplin design

Gift trees - nothing happens on NEXT click

When I click the Next button on Gift trees page, nothing happens. If I click the progress dots navigation works though

[email protected] - Landing page

On first time login of the user, the tree counter does not get rendered. But I click the home counter button (top left corner) the graphic (svg) gets rendered. Refresh also does not render the graphic.

One the graphic gets rendered, remove "test" work on click of green arrow on the top section of graphic

Pages are not all responsive on small screens.

Update: The site is already partially responsive, but some page still have problems, e.g.

1 . The project liste if you want to donate and scroll down below the featured projects:

2. The "modal" display of a chosen project from the above list before you select it to display its details:

Maybe there are also other pages with problems on small screens.

Security Issue

In order to allow for more verbose error messages, development usually uses the server API in debug mode by inserting /app_dev.php into the URL right after the domain name.
This is done automatically by setting the context property base: '/app_dev.php' in app/config/index.js. Accessing the server in this way requires the request to come from an authenticated source in order to prevent misuse or intrusion.
API access to the server will shortly be prohibited without proper authentication which must therefore be implemented by sending an additional request header: X-REACT-AUTH-ID
The value of this header must be the MD5 hash of the concatenation of the user's IP and the following string: 'XXX (ask us!)'.

The IP can either be determined on the fly using some library (e.g. internal-ip) or be placed directly into the context (app/config/index.js). As app/config/index.js is no longer under version control, the latter might be the most efficient solution.
Note: If debug mode is deactivated (base: '') no such header has to be sent which means that the function that generates the header must take the base property of the context under consideration.

Example solution:

• determine your IP address and add to app/config/index.js as context.ip
• install some md5 library and import into app/utils/api.js

modify the getHeaders function in app/utils/api.js:

async function getHeaders(authenticated = false) {
  const headers = { 'X-SESSION-ID': await getSessionId() };

>  if(context.base === '/app_dev.php' && 'ip' in context and context.ip !== '') {
>    headers['X-REACT-AUTH-ID'] = md5(context.ip + '5Pk0v7NTOkmlXNcRTC4uQC7Q1HZu0dm2');
>  }

  if (authenticated) {
    return {
      headers: { ...headers, Authorization: `Bearer ${await getAccessToken()}` }
    };
  } else {
    return { headers };
  }
}

Donate Trees work properly after refreshing the page.

When first time after login we click on Donate Trees it will not work properly but after refreshing it will work properly.

After refreshing

Signup - dropdown issues

For the company and school, The subtype dropdown shows mysterious numbers. Same is the case with country drop down.

Secondly, is the schema same for Company and School?

Update API Version on Register Trees

Use the version 1.0.1 or higher, to implement the following feature.

This allows TPOs to select a Plant Project to add Planted Trees to.

Cleanup

Remove old code. There is a lot of lying old code in repo removing that would be great as it will help keep structure sane.

Blank screen on logout when on Donate Trees screen

When we logout being present on the Donate Trees screen, it becomes blank

Priority 1 - Responsive Settings

Recommendations for Responsive Design

Tested on iPhone 5/ SE

The app looks almost fine on higher res mobile displays eg: Pixel, iPhone 8 and so.

1. TopBar

– Make the full TopBar visible
– Search bar should hide when search icon is not clicked.
– Make SearchBar corners round, similar to (Login Button)

---

2. Reduce Gap between the tree counter component

Bring the Tree-counter up; by 20-30px or more
The Balloon can go behind the Company.

---

3. AutoHide Menu

When menu Item is clicked; the menu should disappear.

---

4. Notifications

Notifications on responsive should stay like this:
(image from Nexus 5 – Screen)

Currently, In smaller screen, right side of notifications gets cut off. That should not happen.

---

5. Landing Page

User Profiles appear like shown on side.
More at: #115

6. Page Set Target

For Responsive,
– Keep Target Count and Target Year on different rows.

– Reduce the padding within the whitespace so form can look bigger.

7. General Pages (background) and white space.

Currently it appears as below:

It should have a full background color, and responsive.

---

Trillion - graphic placement

Even on a high resolution like 1980x1080, the tree counter graphic comes so much at the bottom.The text inside is not aligned

The text that open on the small arrow is way outside the graphic

iOS App Crashes on click See More

On Page,
Select Plant Project by Price

When Clicking + See More the app crashes and takes user to home screen.

Also, following fixes for the page:
as per design:
https://app.zeplin.io/project/5af2f1ea8e1481d9539e13fa/screen/5b753e87ee6c7964b69679f9
– Select Project button, curved edges
– remove + in See more Button
– circular logo of TPO and not Plant project.
– apply line-height as per design (current text looks too congested)
– align items on the right side, to right.

App:

Design:

Search bar input extends to seacrh icon

Planted Arrow Expand - bug

Don't Show the arrow, if Planted, or Dedicated Tree count is Zero.
For both Apps and Web.

Handle Validation Errors

Trying to register one tree,

Did not choose an address;
Got a server error, but nothing on form.

Request URL: https://www.trilliontreecampaign.org/api/v1.0/en/treecounters/119592/plantContributions/single-tree
Request Method: POST

{code: 400, message: "Validation Failed", errors: {,…}}
code: 400
errors: {,…}
children: {treeCount: {}, treeSpecies: {}, plantDate: {}, geoLocation: {errors: ["Invalid data: geoLongitude"]},…}
contributionImages: {}
contributionMeasurements: {}
geoLocation: {errors: ["Invalid data: geoLongitude"]}
errors: ["Invalid data: geoLongitude"]
plantDate: {}
treeClassification: {}
treeCount: {}
treeScientificName: {}
treeSpecies: {}
message: "Validation Failed"

The page should implement validation errors.

No next button in donate Trees without login

Their should be a next button in donate trees when we are not logged in. When you click on donate Trees it will show you only form no next option.

Paging for Multiple Tabs in Apps

For cases like this:
eg: Individual Tree, Many Tree

Please implement the switch tab like below for Map and List.

with Uppercase (Tab name)

Create page shown on account activated link click via email

User's public counter page

Need to put actual text. Be it from the front-end or api call.

Urgent: Donations do not work

Cant get pass the Donor Screen/ No visible action/error in when clicking Next

Testing as a guest(not logged in)
No error in Network tab;
Screens below:

Trillion Tree campaign is loading without login

Before login if we click on TTC from side menu it will be loading..

.
It should show

In Home Page User type overlaps with circle in mobiles

Notification dialog box sticks on screen.

notification dialog box sticks on screen if we click on notifications again to close the notifications dialog box it doesn't works.

And if their is no notifications it show white blank dialog box.

Count of notification is not properly aligned

Overlapping of text of field name and widget date in Register Trees

In the schema of registration Trees their is written in 22-23, 87-88,122-123 lines title as well as widget in which title gives the field name where as 'widget : date' gives the date format, due to which their is an overlapping occurs.
This code works well in chrome but not in Firefox.
Register planted trees in Chrome

Register planted trees in Firefox

High Priority: Landing Pages

@niteshgrg this has the elements we discussed earlier in skype, on how to display names.
For all profile types.
https://app.zeplin.io/project/5af2f1ea8e1481d9539e13fa/screen/5b1f91d46d73b05e65010eb3

For responsive, You can adapt from:
https://app.zeplin.io/project/5af2f1ea8e1481d9539e13fa/screen/5b20e47884f4fcca55c24237
(ignore the app-like menu at the header and at bottom of this design) that is for apps only [unless it is easy to build].
You can adapt the names to fit; based on how it looks on first image.

If you have questions, you can call me on skype.

Explore - Sorting and filtering by drop down does not work

Explore page - Sorting or filtering by both the drop downs don't work. Nothing gets logged in the Nwtwork tab of the browser.

Display featured Image from Plant Project

Currently the Plant Project feature box does not display the featured image;
– instead it shows the first image from the gallery.

It should show the image passed in the API for featured image.

Improper UI for no contributions in my trees

Donate Tree page is not responsive

Project not getting selected in Donate Trees

On donate trees page, I selected a different project

After clicking Select a Project, the Donate Trees page still shows the old project :(

Work with jorgo to create and test deploy a production deploy

Instead of Add images it should be add Project in edit profile

in edit profile it should be + add Projects instead of +add images because when we click on it will require new project details.

In edit Profiles

after clicking on add images it gives add project

User's public tree couter

1. The support button text and spacing doesnt look good.
2. Secondly on opening of the green arrow, the text of "Planted by the personal" seems gramatically incorrect. It could be "Planted by you" or "person"
3. The text of "Planted by personal" and "Planted by community" should be in same column, left aligned.

Donate Trees Carousel window should have 2 arrows

Donate Trees Carousel window should have both left and right arrows.

Developed design

Zeplin design

Forgot your password

1. The title should be Forgot your password. Only first word should be Proper case. Others lower case.
2. The reset password button width is too wide.
3. Try to login again shouldn't have a fullstop at the end.

Make every other project background gray (iOS) (Select Project – List)

As per design:
–Make 2nd, 4th, 6th .. project blocks gray as per design
https://app.zeplin.io/project/5af2f1ea8e1481d9539e13fa/screen/5b67f8839485378e7cc31aee

– Fix See More Crash Bug Refer to #349

Current App:

Profile popup - User's name doesnt appear

It shows Hi undefined! (top right corner)

Select Project Pop-Up, text cut by border radius

.project-modal-card-layout
in main.css
border-radius: 15px;
is obfuscating some text in the header.

Screenshots below:

Fix Currency Dropdown ios/Donation Details

Currently currency scrolls, without showing a list and is not very intuitive.

Make a Dropdown, that can be scrolled so a user can see multiple options to choose from.

– Add a dropdown icon on the right side as per design.
– Add more space to show the currency amount
– Use same font weight as per design.
– Same font size for Next button.
– make radio buttons less thick and resemble design (both left of trees and on below Donation Details)
– font color, as per design color: #686060; (not black)

Design: https://app.zeplin.io/project/5af2f1ea8e1481d9539e13fa/screen/5b4310324db03a8165115533

tested on: iPhone 6 / latest iOS

App:

Design:

Include ttf file to download automatically open sans font

Donate Tree Carousel box should have 4 different windows

As per our design Donate Tree Carousel box should have 4 different windows i.e of Projects, Donor Details, Donation Details and payment but their are only three windows i.e Projects, Donor Details and Donation Details . Payment window is not their.

Our developed design

Zeplin design

improper UI on clicking map in donate trees

--

--