redbadger / pride-london-app Goto Github PK
View Code? Open in Web Editor NEWPride in London mobile app
License: MIT License
Pride in London mobile app
License: MIT License
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:
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:
It doesn't refresh
It doesn't refresh
Featured events have been updated
It is possible to refresh, it's just a bit awkward so logging this an enhancement.
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.
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.
Will need to figure this out ASAP as it happens quite often
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.
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.
The button will display "No events"
You are taken to a page that is empty
Samsung Galaxy S8 (Android 8.0)
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 ;)
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".
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.
Orientating your device horizontally when using the categories filter results in the selected category highlights disappearing.
When orientated horizontally, the category highlights should still be visible.
Highlights are removed
Galaxy S8 (8.0) Physical
iPhone 7+ (iOS 10.3.1) Physical
iPhoneX (iOS 11.0) BrowserStack
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?
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?
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.
I would expect the content to be adjusted so that it is not obscured.
Turn the phone so it is orientated horizontally.
BrowserStack iPhone X - iOS 11.0
I currently don't have access to a physical iPhone X.
If it's a visual bug, please provide screenshots or screen captures.
Event listing page:
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)
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...
We might need to figure out a strategy for managing the content model in contentful.
This could involve a few things:
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.
When tapped, the text-to-speech tool should read out "Button - Category filter" (Android) or "Category filter - Button" (iOS).
It reads out "button"
Galaxy S8 (Android 8.0)
iPhone 7+
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.
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)
The example event is the one with the car-crash collection of emojis and symbols for a name, date is 20th April.
When navigating to an event details screen, the animation often becomes stuttered.
The event details should slide in super smoothly without any jank.
Select an event from the events listings and watch it slide in.
iOS - simulator, 6, 6S
Here's a demo:
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:
Can anyone think of more?
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:
Logging this as an issue so I can close the Trello card.
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.
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:
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.
The date filter doesn't rotate with the device when it is orientated horizontally. Only affects iOS devices.
I would expect the date filter to rotate with the device (like it does on Android).
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).
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.
When scrolling through the listing from a date to another, there's a fixed spacing between the sticky headers.
Reproduction
yarn run-android
cmd+m
in the emulatorhttp://localhost:8081/debugger-ui/
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.
In order to keep design from breaking and maintain hierarchy the following rules should be applied:
Line-heights should stay proportional. Is this currently measured in ems?
Tested with Galaxy S8 and iPhone 7+
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.
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.
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:
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.
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.
When tapping, the tapped element should be successfully highlighted and read out.
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"
It is selected and read out correctly
It works the same way when trying to interact with the Cancel/Clear All buttons.
Samsung Galaxy S8 (Android 8.0)
https://trello.com/c/g6DM173E/131-contentful-event-times
user sees event time in BST
List the exact steps you took to arrive at the issue.
List all the devices and browsers effected, with specific version numbers.
If it's a visual bug, please provide screenshots or screen captures.
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)
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.
When the device is rotated to horizontal, the date filter should be resized by height so that it fits on screen.
(Physical) Samsung Galaxy S8 (Android 8.0)
(BrowserStack) Samsung Galaxy S7 (Android 6.0)
On iOS right now master deploys to internal TestFlight.
We need to pick an equivalent for Android.
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:
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.
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):
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.
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.
Galaxy S8 (8.0) Physical
iPhone 6 (10.3.3) Physical
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 :/
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.
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.
iPhone 7+ iOS 11.0
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.
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:
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.
Documentation for:
Codebase is now public and once we start adding content it may be important which license is attributed to content.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.