redbadger/pride-london-app

Pride in London mobile app

Pride in London App

iOS: https://itunes.apple.com/gb/app/pride-in-london/id1250496471

Android: https://play.google.com/store/apps/details?id=org.prideinlondon.festival

• Running
  • Prerequisites
  • Environment Variables
  • Running
    • iOS
    • Android
  • Debugging
• Generating test data
• Contributing
  • Architecture Decision Records
• Links

Installation and setup

Prerequisites

• Node.js
• Watchman
• Install Yarn
• $ yarn global add react-native-cli

More information on getting started can be found here: https://facebook.github.io/react-native/docs/getting-started.html under the Building projects with React Native tab.

General

Clone the repository

$ git clone [email protected]:redbadger/pride-london-app.git

And install dependencies

$ yarn

iOS

• Install Xcode from the App Store and accept the license agreement.
• Run Xcode once so that it can install additional components it will need.

To develop on a real device locally you will need to install the development provisioning profile from fastlane.

Install fastlane using

[sudo] gem install fastlane -NV

or alternatively using brew cask install fastlane

You can then run the following command from the ios folder:

fastlane match development --readonly

You will need access to the private match-ios-certificates repo and will be prompted for the passphrase. Ask on the channel to get this sent to you in a secure way ;) On success you should be presented with the installed certificates and provisioning profile for org.prideinlondon.festival.

Next, open Xcode and the PrideLondonApp.xcodeproj. Plug in your device via USB, and select it in the device dropdown in the top left of Xcode. Then hit the build (Play) button.

Android

• Install Android Studio.
• Install the Android SDK and necessary components.
  • Open Android Studio. If this is the first time you open it, it will prompt you to install the Android SDK. You can proceed with the default settings.
  • Select "Open an existing Android Studio project" and select the ./android folder in this repository. This will help you to get the necessary dependencies installed.
  • Android Studio will automatically try to build the project. You will see the Gradle process running.
  • When dependencies are missing (e.g. SDK Platform or build tools), it will error and show a link to install them (e.g. "Install Build Tool xx.x.x and sync project"). Click on the link (in the Gradle Sync tab) to resolve. Repeat this until you get a BUILD SUCCESSFUL message.
  • It will also automatically create the file ./android/local.properties with a entry sdk.dir=<path to your android sdk>, which is required for the build to work. You will need this in the next step
• Create and start an emulator (aka AVD (Android Virtual Device)).
  • Open Android Studio and click on the AVD Manager icon (4th from the far right) in the toolbar (this will appear when the project compiled correctly).
  • Choose any device you want.
  • Select a system image. Choose a recommended one (e.g. API 27). Click on the download link next to the image name. It will automatically start downloading.
  • Click next through to finish.
  • Start your AVD by clicking the green play button under actions.
• Add <path to your android sdk>/platform-tools (find it in ./android/local.properties) to your PATH. This is required because React Native will run adb to install the app on your emulator/device. e.g. add

  export PATH="<path-to-sdk>/platform-tools:$PATH"
  

  to your .bashrc/.zshrc
• Make sure you have Java 8 installed (Java 9 won't work). If you wany, you can point JAVA_HOME to the embedded JDK from Android Studio to make sure you have a JDK version, which works with Android.

Environment Variables

In order to run the application locally you will need to find and add some environment variables to the project. These can be found in .env.example. Copy this file into another file called .env:

cp .env.example .env

And fill in the required variables from the appropriate developer portals (e.g. app.contentful.com/spaces/<space-id>/api/keys) - use the Delivery API key.

Running

iOS

• yarn run-ios [--simulator="iPhone X"]

Android

• yarn run-android

Debugging

The recommended tool for debugging is React Native Debugger which has built in support for Redux Devtools.

To install React Native Debugger:

brew update && brew cask install react-native-debugger

Then to debug:

1. Close any other debugger windows you have open
2. Open the App from your Applications folder
3. Start debugging in the app using one of the following methods:

Platform	Command
iOS	Press Cmd+R to reload, Cmd+D or shake for dev.
Android	Double tap R on your keyboard to reload, shake or press menu button for dev menu.

Generating test data

Note: You do not need to do this if you are just getting your environment set up. This is for filling the remote CMS with mock data for testing purposes.

In order to fill the test CMS space with test data you can use our generate-content script. It goes without saying make sure you are doing this on a test CMS rather than production.

To generate test data:

node ./scripts/generate-content.js generate -s <space_id> -a <access_token>

To specify a specific number of items to generate just pass a number as the first argument:

node ./scripts/generate-content.js generate -s <space_id> -a <access_token> 5

To delete the generated data again:

node ./scripts/generate-content.js delete -s <space_id> -a <access_token>

For both commands you can skup the -s and -a flags by setting the environment variables CONTENTFUL_SPACE_ID and CONTENTFUL_MANAGEMENT_KEY respectively. E.g.

export CONTENTFUL_SPACE_ID=<space_id>
export CONTENTFUL_MANAGEMENT_KEY=<access_token>
node ./scripts/generate-content.js generate 5

Tests

E2E

End to end tests use Detox with Jest as the test runner. Some setup is required for running the tests locally.

Contributing

Pieces of work currently up for grabs will be listed on the issues page and tracked on the projects page. If you are able to work on the piece of work, comment on the issue. You can also discuss the feature in the isssue page. Be honest about if you have the time to work on it, there's no shame in parking a piece of work and letting someone else pick it up if you're too busy.

Follow the contribution guidelines to have a smooth experience getting your changes in.

Architecture Decision Records

We will keep a collection of records for "architecturally significant" decisions: those that affect the structure, non-functional characteristics, dependencies, interfaces, or construction techniques.

When making such changes please include a new ADR in your PR.

• Install adr-tools: https://github.com/npryce/adr-tools
• To create a new record: adr new Implement as Unix shell scripts

To find out more about ADRs have a read of this article: http://thinkrelevance.com/blog/2011/11/15/documenting-architecture-decisions

Links

• CI Pipeline: View and debug builds

• We would like to thank BrowserStack for allowing us to use their resources to test the Pride in London App for free!

• We would like to thank Bugsnag for allowing us to use their tool to monitor the Pride in London App for free

pride-london-app's Issues

When Android device is landscape the date filter isn't resized to fit on screen

Description of issue

The top and bottom of the date filter get cropped when orientating the device horizontally - it appears to size it by width rather than height.
It means the "Show x events" and the "Clear" button can't be tapped.

Expected behaviour

When the device is rotated to horizontal, the date filter should be resized by height so that it fits on screen.

Steps to reproduce

• Open the date filter on the events page
• Rotate device 90° to horizontal layout

OS / Browser / Device model

(Physical) Samsung Galaxy S8 (Android 8.0)
(BrowserStack) Samsung Galaxy S7 (Android 6.0)

Screenshots

Images aren't appearing when linked in Event description

Tested with:
Physical Samsung Galaxy S8
Simulator iPhone X

When an image is hosted on Contentful and added to the Event description, it is not being loaded when the Event page is opened.
Images hosted externally are appearing as expected on Android, but not on a Simulated iPhone (still haven't succeeded at getting a build for iOS):

Android:

(In this example the image at the top is from Google, the purple box with ? is where the Contentful image should appear)

iOS Simulator:

The example event is the one with the car-crash collection of emojis and symbols for a name, date is 20th April.

Free/Price values not validated in app

Tested with Galaxy S8 and iPhone 7+

Description of issues

Scenario 1
If you reverse the price values for an event on Contentful e.g. 20 in Event Price Low and 10 in Event Price High, the app doesn't recognise this and reports "From: £20" on the event thumbnail and just "£20" on the details page.

See "Mr. Poopybutthole" for an example event.

Scenario 2
If an event is marked as free, but prices values are set in the Low/High fields, then the event displays "From: £20" on the event thumbnail, but "Free" on the event details page.

I can potential for this happening by accident when a content editor is creating an event in Contentful due to the fact that the price fields have a scrolling function which they may inadvertently modify without realising.

See "The Imp" for an example event.

Scenario 3
If an event is marked as not free but 0 is put for both prices it will display £0.

See "Sasha Velour" for an example event.

Expected Behaviour

Scenario 1 - If "Price Low" is greater than "Price High" then the price values are swapped.

Scenario 2 - If the event is marked as "Free", but a price value is added in one/both of the price fields, it is marked as free. This may require some discussion though. Perhaps some validation could be added, so that if "Free" is set to yes, the price low/high fields have to be 0 to publish changes.

Scenario 3 - If there is not a value greater than 0 in the price fields, the event is marked as free.

Steps to reproduce

• Open one of the example events (Mr. Poopybutthole / The Imp / Sasha Velour)

Screenshots

Scenario 1

Scenario 2

Scenario 3

Events with a single ticket price and Free events show "From: £x"

Tested on Samsung S8 (Android 8.0) + iPhone 7+ (iOS 10.3.1)

On a single ticket price event's page, the price shows "From: £x" - It should probably just say something like "Price: £x" for these events.

On free event pages, the price shows "From: £0" - It should probably just say something like "Free event".

This would make the behaviour more consistent with the price overlays on the event listing page.

An example event with a single ticket price is "Noob Noob" or "Tiny Rick".

Prices that include decimal places are obscured when increasing font size to max on Android

Tested on:
Samsung Galaxy S8 (Android 8.0)

If you increase the font setting to maximum in the accessibility settings, prices with decimal points (e.g. £12.34) displayed in the event listing page get obscured:

Back button is practically invisible when the Event Listing Image's upper-left corner is very dark

It might be worth either replacing the "Back" text with an icon, or give it a shadow or backdrop of some kind so that it is always visible regardless of the background image. Currently it blends into the image if the upper-left corner is very dark:

iOS doesn't allow swiping between tabs, Android does

Tested on Samsung Galaxy S8 and iPhone 7+

Android allows you to navigate between tabs by swiping while iOS doesn't.

Do we actually want swiping? It seems like it's not always enabled on Android apps. Or do we want to make iOS swipable like Android?

Raising this as a consistency issue, probably one for the UXD lot to make a decision on ;)

Developer onboarding

Documentation for:

• Getting the project setup
• Running on emulators
• Requesting iOS device be added to list for running on a device (needs implementing)
• Running on Android device

Colour of Android status bar to adapt to header colours

Description of issue

Currently, the status bar adopts a grey background colour. Ideally, we will like it to adopt the colour of the header.

Pick analytics and crash logging system

The previous app used firebase for app analytics. There are many options out there so we need to do a bit of research into what is best.

As @markholland points out, we need to focus on systems that have native integration, as we want the full information of device or native stack traces in our analytics and crash reports. Just getting info on the JS layer would not be enough.

Firebase is a great choice for realtime databases and social login integration. However social login has been pushed out of MVP for this project so it might not make sense to hold on to Firebase integration just for analytics.

Pick branch testing and automation strategy

Investigate manual or automation testing for branch builds.

Browserstack app automate might be a good option. This would allow automation to run on branch builds using something like WebdriverIO.

Rules for Text Resizing

In order to keep design from breaking and maintain hierarchy the following rules should be applied:

• H2: max-size = 22px (up from 18px)
• H3: max-size = 20px (up from 16px)
• H4: max-size = 18px (up from 16px)
• Para: stays at 16px (no resizing)
• Small text: max-size = 16px (up from 14px)

Line-heights should stay proportional. Is this currently measured in ems?

UI performance testing

For a native app it's really important for user experience to make sure all animations and user interaction stays over a 60fps framerate.

It would be useful to see if there's a way for us to automatically profile the UI performance and alert us if we get it wrong.

Errors when selecting a date while filtering events by day

Tested on master branch with a Galaxy S8 (Android 7.0)

Opening the day filter on the Events Listing page and tapping on a day (any day) results in an error, complaining that the start of the range is after the end.

• Go to the Events Listing page
• Tap on the 'Any day' filter
• Select any day on the calendar

Error screen shown - "Error: The start of the range cannot be after the end of the range"

Screenshot attached of the displayed error message (wasn't letting me copy it):

Pick a License

Codebase is now public and once we start adding content it may be important which license is attributed to content.

Events that have the same start times aren't listed alphabetically

In the Design ACs for https://trello.com/c/IGh75gdr/123-ui-events-listing-view-all-events it states:

If two or more events start at the same time, then those events are ordered alphabetically

This isn’t the case in the app, the order is determined in a way that appears a bit random (in that it is different on different devices). For example see the events for 15th June. On the following devices they are listed as follows:

• Samsung S8: (Alpha) The Imp, Arya Stark, Varys, Littlefinger (Note, this is the order the events were added)
• Samsung S8: (Beta) Littlefinger, The Imp, Vary, Arya Stark
• iPhone 7+: The Imp, Varys, Arya Stark, Littlefinger
• iPhone 6: The Imp, Littlefinger, Varys, Arya Stark

Logging this as an issue so I can close the Trello card.

When interacting with elements in the category filter, Android Voice Assistant (text-to-speech) focus is stolen by "multi-page view"

Description of issue

When you have the Voice Assistant enabled on Android, interacting with the Category filter is a clunky experience. The focus of the tap is constantly stolen by "multi-page view", requiring multiple taps before you can finally read out the selection you wish to hear.

Expected behaviour

When tapping, the tapped element should be successfully highlighted and read out.

Steps to reproduce

• Enable the Voice Assistant (Settings > Accessibility > Voice > Voice Assistant)
• Open the Events page in the Pride App
• Attempt to tap/double-tap on a category

It initially selects (and highlights) the category before being interrupted - the whole page is highlighted and it reads out "multi-page view, Show me, 0 selected"

• Tap on the same category

It is selected and read out correctly

It works the same way when trying to interact with the Cancel/Clear All buttons.

OS / Browser / Device model

Samsung Galaxy S8 (Android 8.0)

Tapping on contact details should open phone/email app

To improve ease of contacting event organisers, I think when you visit an Event page and tap on the phone/email in the contact information section it should automatically open the appropriate app with the contact detail selected prepopulated ready for the user to quickly get in touch.

Currently they are raw text that you can't even highlight to copy/paste. (Even this ability would be a big improvement)

An example event with contact details is "Evil Morty" (4th July)

Env variables not loading properly

This PR #15 worked on branch but failed after merging to master.

The Android build failed due to a missing file:

> Could not read script '/home/circleci/project/node_modules/react-native-config/android/dotenv.gradle' as it does not exist.

The iOS build passed but the environment variable was not bundled into the app package.

Will investigate the fixes for these but it also raises the need for us to have better testing on branch. Steps to help fix this could be:

• Compile the app on branch builds to make sure there are no compilation failures
• Manually test the app package by downloading it from circle.
• We could later look into having automation tests running on WebdriverIO via Browserstack app automate or a similar service.

Prepare for first public release

We should start thinking about the things we still need (that aren't currently represented in the backlog) before we can do our first release.

Some things I can think of are:

• Decide on and set up CI prod release mechanism
• Enable app signing in play store
• Figure out a mechanism for transferring our test content model to the production space
• Allow differing environment variables for each CI build stage. We will need to pass the app the API key for the production contentful space. Maybe the contentful test space for alpha builds and prod space for beta/prod builds?
• Create a production API key for Google maps with appropriate permissions.
• Add Microsoft Codepush library and workflow for over the air builds?
• Submit a stable build for iOS app store review without publishing it, to test how long it takes and see if there are any issues we need to sort out.
• Decide on app icons and splash screen
• Limit distribution to sensible devices (no tablets)
• Automate capturing required screenshots using Fastlane (part of prod release mecahnism)

Can anyone think of more?

ReasonML?

Whilst away with Stu we talked about potentially having pride be a good place to introduce ReasonML to the RB arsenal proper. I would be interested to get other peoples opinions on this?

https://github.com/reasonml-community/bs-react-native

Things to bear in mind:

• ReasonML itself is quite new but gaining support and traction quickly.
• Use with React Native is newer still.
• Do the software design advantages out-way the potential teething problems?
• A bit of a learning curve for us?
• More of a learning curve for anyone who might be contributing via open-source?

Add architectural decision records

Add a folder in the repo for Architectural Decision Records (ADRs) to record any decisions we make for future developers.

There are command line tools out there that will generate ADRs in the correct format.

Event price - requires price even when event is free

see screenshot attached - please close is this is not a bug and simply something which needs to be covered in the content editor guide

Date filter isn't rotated when iOS device is landscape

Description of issue

The date filter doesn't rotate with the device when it is orientated horizontally. Only affects iOS devices.

Expected behaviour

I would expect the date filter to rotate with the device (like it does on Android).

Steps to reproduce

• Open the date filter on the Events page
• Rotate the device 90° to horizontal

OS / Browser / Device model

BrowserStack iPhone X iOS 11.0
BrowserStack iPhone 8 11.0
BrowserStack iPhone 7 10.0

Need to double check with a physical iOS device (don't currently have access to one).

Screenshots

Category filter highlights disappear when device is landscape

Description of issue

Orientating your device horizontally when using the categories filter results in the selected category highlights disappearing.

Expected behaviour

When orientated horizontally, the category highlights should still be visible.

Steps to reproduce

• Open the Categories filter from the events page
• Select a bunch of categories
• Rotate the device so it is orientated horizontally
• Tap on one of the cateogries

Highlights are removed

OS / Browser / Device model

Galaxy S8 (8.0) Physical
iPhone 7+ (iOS 10.3.1) Physical
iPhoneX (iOS 11.0) BrowserStack

Screenshots

When prices end with a 0 as the last decimal value, the 0 is stripped from the price (12.30 becomes 12.3)

If the final decimal value of a price is 0, then it is stripped when displayed in the app (either in the events page or the event listing itself)

This might be passable when the price is 12.50, but tbh it looks weird when you have a value like 12.30.

The design mock-up on the Trello story also shows the price with the final decimal 0 included:
https://trello-attachments.s3.amazonaws.com/5a27fcd8ab2be2f15fbca722/5a8c5b82e75075ae877ce9e1/ed5099d7aaae21b59d0f1760fdfe5ac5/Display_Price.png

Tested on Samsung Galaxy S8 (Android 8.0.0)

Janky animation when navigating to the event details screen on iOS

Description of issue

When navigating to an event details screen, the animation often becomes stuttered.

Expected behaviour

The event details should slide in super smoothly without any jank.

Steps to reproduce

Select an event from the events listings and watch it slide in.

OS / Browser / Device model

iOS - simulator, 6, 6S

Screenshots

Here's a demo:

Events can be added multiple times to the "Featured Events" list

Tested on Galaxy S8, iPhone 7+

It is possible to add an event multiple times to the Featured Events list on Contentful. This event is then displayed multiple times in the app (when the View all button is tapped):

It might not be immediately obvious to the content editor, as they won't be added to the home page unless the list is reordered so that the duplicated events are added to the first 6 items. But this is possible to do:

Intermittent build failure Android

Will need to figure this out ASAP as it happens quite often

https://circleci.com/gh/redbadger/pride-london-app/304?utm_campaign=vcs-integration-link&utm_medium=referral&utm_source=github-build-link

Remove timezone from Contentful

Description of issue

https://trello.com/c/g6DM173E/131-contentful-event-times

Expected behaviour

user sees event time in BST

Steps to reproduce

List the exact steps you took to arrive at the issue.

OS / Browser / Device model

List all the devices and browsers effected, with specific version numbers.

Screenshots

If it's a visual bug, please provide screenshots or screen captures.

Opening an event that has a Contentful hosted image in the description causes the app to crash on Android

Tested on Samsung Galaxy S8 (also happens on Jan's Pixel 2)

The app crashes immediately if you open the event with the horrible name:

Link to contentful event: https://app.contentful.com/spaces/n2o4hgsv6wcx/entries/1Yo3rc8E6ooSOCoS846qmc

The crash only seems to occur in the hockeyapp alpha and beta builds. If you build the app locally it opens the event and loads the contents in the event description without crashing.

I tested the earliest available hockeyapp alpha build (1775) and it happens there as well.

Can't build locally for android simulator

Since this commit 0d61bf9 yarn run-android stopped working. It throws the error pride-london-app/android/.gradle/gradle.properties (No such file or directory).

I'm assuming the line props.load(new FileInputStream(file("../.gradle/gradle.properties"))) is the culprit here. But I don't know enough about the android build system to know what it should be, or how to skip this step during local development.

@markholland any ideas?

Debugger enabled crashes android app because of outdated dependency

Reproduction

1. yarn run-android
2. cmd+m in the emulator
3. Enable remote js debugging
4. Visit http://localhost:8081/debugger-ui/
5. Confirm that the app connects to the debugger then immediately crashes.

Logs

04-04 10:16:51.374 10541 10580 E AndroidRuntime: FATAL EXCEPTION: mqt_js
04-04 10:16:51.374 10541 10580 E AndroidRuntime: Process: com.pridelondonapp.dev, PID: 10541
04-04 10:16:51.374 10541 10580 E AndroidRuntime: java.lang.NoSuchMethodError: No virtual method getOpenSourceSoftwareLicenseInfo(Landroid/content/Context;)Ljava/lang/String; in class Lcom/google/android/gms/common/GoogleApiAvailability; or its super classes (declaration of 'com.google.android.gms.common.GoogleApiAvailability' appears in /data/app/com.pridelondonapp.dev-1/base.apk)
04-04 10:16:51.374 10541 10580 E AndroidRuntime: 	at com.airbnb.android.react.maps.AirMapModule.getConstants(AirMapModule.java:50)
04-04 10:16:51.374 10541 10580 E AndroidRuntime: 	at com.facebook.react.bridge.JavaModuleWrapper.getConstants(JavaModuleWrapper.java:140)
04-04 10:16:51.374 10541 10580 E AndroidRuntime: 	at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
04-04 10:16:51.374 10541 10580 E AndroidRuntime: 	at android.os.Handler.handleCallback(Handler.java:739)
04-04 10:16:51.374 10541 10580 E AndroidRuntime: 	at android.os.Handler.dispatchMessage(Handler.java:95)
04-04 10:16:51.374 10541 10580 E AndroidRuntime: 	at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
04-04 10:16:51.374 10541 10580 E AndroidRuntime: 	at android.os.Looper.loop(Looper.java:148)
04-04 10:16:51.374 10541 10580 E AndroidRuntime: 	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:194)
04-04 10:16:51.374 10541 10580 E AndroidRuntime: 	at java.lang.Thread.run(Thread.java:818)
04-04 10:16:51.375 12813 13249 W ActivityManager:   Force finishing activity com.pridelondonapp.dev/com.pridelondonapp.MainActivity

This issue seems to be the cause. Updating react-native-maps to the latest solves the problem. PR is coming soon.

Home page "Featured events" list can't be directly refreshed

Tested on Galaxy S8 (8.0) and iPhone 7+ (10.3.1)

It's not possible to refresh the Featured events list on the home page by dragging from top to bottom. even opening "View All" and attempting to refresh doesn't work.

To trigger a refresh, you need to go to the Events tab and refresh there.

To reproduce:

• Open the app and take note of the featured events on the home page
• Make a change to the Feature events list on Contentful (add/remove events, make sure the changes appear in the top 6 items in the list)
• Drag down from the top of the page

It doesn't refresh

• Open View All and drag down from the top of the page

It doesn't refresh

• Hit Back, switch to the Events tab and refresh page
• Switch back to Home tab

Featured events have been updated

It is possible to refresh, it's just a bit awkward so logging this an enhancement.

Category filter button doesn't have a label so it is read out as "button" by text-to-speech

Description of issue

When tapping the Category filter button with a text-to-speech tool it reads out "button" without a label to describe what the button does.

Expected behaviour

When tapped, the text-to-speech tool should read out "Button - Category filter" (Android) or "Category filter - Button" (iOS).

Steps to reproduce

• Enable your device's text-to-speech function
• Go to the events page in the Pride App
• Tap on the Category filter button

It reads out "button"

OS / Browser / Device model

Galaxy S8 (Android 8.0)
iPhone 7+

Event description not being loaded for specific event on iOS

Tested on iPhone 7+ (iOS 10.3.1) and iPhone 6 (10.3.3)

This is a weird one - originally the event was appearing correctly when loaded, but in the past couple of days something appears to have happened which is causing this regression in behaviour.

https://app.contentful.com/spaces/n2o4hgsv6wcx/entries/1Yo3rc8E6ooSOCoS846qmc

The event description for the above event is blank, except for the url linked image at the top of the event:
![Pride in London](https://www.cityam.com/assets/uploads/main-image/cam_standard_article_main_image/london-supports-gay-pride-2017-809667286-5960b48f8609e.jpg)

If I remove the image, it will actually load the content up to the point where the next image is linked:

👨‍❤️‍👨👩‍❤️‍👩👬👭🌈❤️💛💚💙💜🏳️‍🌈✝️☦️☪️🕉☸️✡️🔯🕎⚛️💒🎎🎶📣☺︎♨︎⚧♁♂⚣⚦⚭☭🃕🁒🂉❖❀⌘⌧⌕⎙⏂␆⏚⏞✉︎☠♿︎♼AÀÁÂÄÆÃÅĀBCÇĆČDEÈÉÊËĒĖĘFGHIÎÏÍĪĮÌJKLŁMNÑŃOÔÖÒÓŒØŌÕPQRSŚŠTUÛÜÙÚŪVWXYŸZŽŹŻ!@£$%^&*()+=-0987654321∑´®†œ¥¨^ø¨dƒa߃ƒ©˙∆˚µ∫√ç≈Ω><.,:":":;'][{}`§±FFuuuuuuuuuuuuu
❤️💛💚💙💜
❤️💛💚💙💜
❤️💛💚💙💜
❤️💛💚💙💜
❤️💛💚💙💜
❤️💛💚💙💜
❤️💛💚💙💜

It seems like something funky is going on with the markdown and the way Contentful/the app interprets it? It suspect this might be the cause of the crash on Android as well: #103

It is most likely linked to #96 also.

Pick a pre-release distribution method for Android

On iOS right now master deploys to internal TestFlight.

We need to pick an equivalent for Android.

• Play Store has Alpha/Beta lanes
• TestFairy is mentioned frequently
• HockeyApp

Date fields from Contentful is not validated in app

Contentful allows you to enter an endDate, which is before the startDate. This currently crashes the app.

How do we want to deal with this? Validate the dates in the app and swap them?

There isn't much vertical space for viewing categories in filter when device is landscape

Description of issue

When viewing the categories filter with the device orientated horizontally, the amount of vertical space for displaying the categories is rather limited, so that you can only see a few listed at a time. The Cancel/Clear all buttons, Show me label and selected filters widget take up almost 50% of the available vertical screen space.

Expected behaviour

This is probably one for UXD to look at.

Might be an idea to combine the Show me label and selected filters widget into a single line when orientated horizontally (at the very least - might be able to squeeze the Cancel/Clear all buttons on to the line as well?). Perhaps reduce the height that the Cancel/Clear all buttons are given.
Maybe the CTA (Show x events) button height could be reduced in horizontal orientation.

Steps to reproduce

• Open the Categories filter from the events page
• Orientate the device horizontally

OS / Browser / Device model

Galaxy S8 (8.0) Physical
iPhone 6 (10.3.3) Physical

Screenshots

Galaxy S8

iPhone 6

Integrate Microsoft CodePush

Microsoft CodePush (now part of AppCenter.me) is the go-to tool for pushing JS bundle updates to users without going through app store review.

We need to get the app set up with the CodePush SDK.

On top of this we need to figure out a versioning strategy so we don't end up pushing new JS bundles to user's on old versions of the app binary that can't handle them.

Expo.io (which also supports remote JS bundle loading) solves this problem with a feature called release channels, which allows you to scope JS bundles to particular versions of app binaries. Not sure if CodePush has a similar feature.

Lock down / specify versions

There are a few pre-requisites which currently don't specify version numbers. Let's at least specify them or modify the instructions to lock down versions. We could also include a .node-version file etc...

Inconsistent shadows on event listing cards + sticky date headers

Shadows

On iOS, the shadows from the sticky date headers and cards are similar (similar visual weight - so there's no differentiation in terms of elevation).

On Android, there is no differentiation again, with harsher shadows compared to the iOS.

Can pair with dev to refine shadows.

Margins between sticky headers

When scrolling through the listing from a date to another, there's a fixed spacing between the sticky headers.

• There should be zero bottom margins on these sticky headers.

Map preview for event location is blank

Tested with Samsung Galaxy S8

The map preview for the event location is blank when viewed on an Android device - tested with Xcode simulator for iOS and the map preview shows up correctly, not sure if this is the case for a physical iOS device (haven't been able to get the app working on a physical iOS device yet).
Tested with Android Studio on a "Galaxy S7" and the preview was blank there also.

Entire name of events with very long titles are displayed on the home page, which distorts the layout of the events

Tested on multiple devices:
Galaxy S8, Galaxy Note Edge, iPhone 7+, iPhone 6, iPhone X (BrowserStack)

The entire name of events with very long titles get displayed on the home page when the event is added to the Featured events list. This disrupts the layout of the featured events and they become misaligned, leaving large sections of whitespace:

Content model management

We might need to figure out a strategy for managing the content model in contentful.

This could involve a few things:

• Limiting access so only a few accounts on Contentful can modify the content model
• Documentation on how to change the content model, dos and donts.
• Controlling the content model shape through code, and updating it as part of the build pipeline (started by @davidbasalla #9).
• Finding a way to try out new content models in the "Pride Test" contentful space and then promote them to the production space.
• Creating migration scripts that use the content management API to perform more powerful data modifications (investigated by @davidbasalla #10).
• Create a script to generate lots of mock data in the Pride Test space (I'll probably need this while working on sync functionality #16).

Location information pushed off the event widget in the listings page when font size is increased

Tested on:
Samsung Galaxy S8 (Android 8.0)
iPhone 7+ (iOS 10.3.1)

Increased font size
Android (set to maximum size in Accessibility settings):

RESOLVED
Long titles
Events with (albeit ridiculously) long titles will push the location information off the event tile so it is no longer immediately visible:
Android:

iOS:

When landscape, iPhone X speaker/camera obscures content on the page

Description of issue

When the iPhone X is orientated horizontally, the speaker/camera section obscures content on the page. I've attached screenshots below to demonstrate the issue. BrowserStack only allows the phone to be orientated horizontally with the speaker/camera on the left, so I don't know how it behaves the other way.

Also, the home page content is shifted (to accommodate it?) but there is a gap between the speaker/camera and the page content. Again I have attached screenshots below.

Expected behaviour

I would expect the content to be adjusted so that it is not obscured.

Steps to reproduce

Turn the phone so it is orientated horizontally.

OS / Browser / Device model

BrowserStack iPhone X - iOS 11.0
I currently don't have access to a physical iPhone X.

Screenshots

If it's a visual bug, please provide screenshots or screen captures.
Event listing page:

Individual Event page:

Home page:

App text doesn't scale gracefully when increasing font size on iOS

Tested on:
iPhone 7+ (iOS 10.3.1)

When the font size is increased to the maximum in the accessibility settings, the text becomes largely unreadable - Dates aren't fully visible, event names and locations aren't visible at all and times are obscured. The prices on events listing page are also illegible.
Page headers and CTA sticky buttons can obscure a large amount of the screen space.

Events Listing Page:

Support Page

Sponsor Page

Date Filter

iOS VoiceOver (text-to-voice) doesn't work correctly with the date filter

Description of issue

When VoiceOver is enabled on iOS, attempting to interact with the date filter calendar doesn't go well. Tapping anywhere in the filter UI results in it reading off the entire contents - the Title label (either 'select dates' or ' - '), "Clear", " ", "Sun Mon Tue, Wed, Thu, Fri, Sat", followed by every number in the calendar, then "No events".

You end up being trapped in the filter as you can't tap the CTA button as this just re-triggers the read out of the filter :/

Expected behaviour

It should be possible to tap the "Clear" and CTA (show x events) buttons, the change month arrows, and individual days and have them read out individually. It should then be possible to interact with them by double-tapping on them.
Additionally it should be possible to tap on the selected date range and have that read out.

Steps to reproduce

• Enable VoiceOver (Settings > General > Accessibility > VoiceOver)
• Go to the events page in the Pride App
• Open the date filter
• Try to interact with it

You will find yourself in voiceover hell

The only way to get out of the filter at this point (that I found) was to disable VoiceOver.

OS / Browser / Device model

iPhone 7+ iOS 11.0

The date and time filters allow you to end up with an empty events page

Description of issue

If you change the date filter to a range of dates where there are no listed events, you are able to click "Show 0 events" and end up on an empty events page.
The above also happens if you set the time filter so that there are no listed events.

Expected behaviour

I would expect the date and time filters to behave the same way as the Category filter and disable the "Show x events" button until a valid range/time is selected. At the very least it should show a message on the page along the lines of "There are no events that match your filter" instead of a blank page.

Steps to reproduce

• Open the app and go to the events listing page
  (at this stage it would be helpful to identify a range of dates that don't contain any events i.e. 1-5 May)
• Open the date filter and set the range to a range of dates without events

The button will display "No events"

• Tap the button

You are taken to a page that is empty

OS / Browser / Device model

Samsung Galaxy S8 (Android 8.0)

Screenshots