react-europe/react-europe-mobile

Mobile app for the React Europe conference

React Europe

• Download on Apple App Store
• Download on Google Play
• or... open it with the Expo client: https://expo.io/@patcito/reacteurope

Get it running on your machine

• Clone this repo, cd into it, run yarn install

Run the mobile application

• yarn global add expo-cli
• cd packages/event-app
• mv .env.example .env
• yarn install
• expo start
• Scan the QR code from your phone. Alternatively, in another terminal window run expo ios and/or expo android to open in simulator.

Run the website

• yarn global add gatsby-cli
• cd packages/website
• yarn install
• gatsby develop

react-europe-mobile's Issues

QR code scanning improvements #reacteurope

Current scenario: When a user scans someone's QR code, the QR's code owner is added to the list of contact

Desired scenario: When a user scans someone's QR code, the contact is added to both party (scanned user is added to scanner, and scanner is added to scanned users list of contacts)

You should use push notification to add the scanner contact to the scanned list of contact. You can send notifications using this tool https://expo.io/dashboard/notifications

Check the file https://github.com/react-europe/react-europe-2018-mobile/blob/react-europe/src/screens/QRScreens/Identify.js#L96 to see where the token is stored.

admin ui for checkinlists

Add Checkin lists section in menu for admin.

When user clicks on Checkin lists, it should show the list of checkinlists and when the user clicks on a checkinlist it should show an edit form.
gql for list of tickets is query { adminEvents { checkinLists}}

Form should show:

name
sponsor(checkbox) label: Sponsor
includeInMobile (checkbox) label: Include in mobile
includeInQrScan (checkbox) label: Allow tickets QR to be scanned
mainEvent (checkbox) label: Main Checkin List
ticketIds (selectbox) show a select with the list of tickets using a list of tickets https://github.com/renrizzolo/react-native-sectioned-multi-select, use id and allow selecting multiple tickets.

show a + button in menu Checkin list section before the > arrow, when user clicks on it, show a create form to create checkin lists on top of checkin list list, put a search as you type box similar to speakers

allow user to scan their ticket QR code

Needs some improvement on the backend from @patcito. Will update this later.

enable attendees to share information and be searchable

Right now, when an attendee scan their ticket for the first time, they are not searchable by default.

When user scan their ticket for the first time, show a dialog that ask them if they want to be searchable by name or email. If the users answers yes, execute this graphql query:

mutation{
  updateAttendee(uuid: "xyz", shareInfo: true){
    id
    shareInfo
  }
}

In profile tab, show a button that allows disabling sharing info by executing the same graphql query with shareInfo set to false.

Inside the search UI, when results list is empty, display a button that says:

"Make yourself searchable by name and email".

If user clicks on button, execute the graphql query.

more interesting features

this are some features that was mentioned in the hackathon and also others I think would be nice apart from the others already mentioned:

• add possibility to add contact to address book when scanning someone (new expo api allows it)
• allow people to checkin when they go to bars (use google place api), add a maps screen where user can see where everyone is (and a list of checkins below the map with name of place.
• add Medium’s clap feature for every talk
• add video of the talk
• tweet about the talk from the app
• add “kudos” for other attendees that you met or people that helped you in a workshop (not only coaches)

I can add some of them, feel free to start one!

suggest new edition on home screen and load the new edition on demand

On home screen check if there's a new edition AND if current edition end_date has past. If this is the case, show the following message:

"Next edition is coming on May 21st, 2021, check the new schedule!".

To get information on the next edition add otherEditions field to the graphql query in src/constants/index.ts like this:

query{
  events(slug: "reacteurope-2019"){
    otherEditions {
      id
      name
      slug
      startDate
      endDate
    }
    }
  }
}

Selected edition should be saved to localStorage to be used next time the app is restarted.

In the menu tab, add a element to the list below Attendees with title "Previous editions", when user click on it, show a list of editions by name such as "ReactEurope 2015", "ReactEurope 2016" etc and when click on an edition, switch to this edition.

open twitter account inc Crew section when click on a crew member

Go to Crew screen, allow people to click on a crew member which should start the twitter android app on android and the webview on ios, same code as on Speakers details screen.

TypeError: undefined is not an object (evaluating 'nextTalks[0].startDate)

add ui to edit speakers

In speakers list section, if user is connected, add an edit button at the end of each section (like the star icon below):

Instead of star icon, use this edit button https://icons.expo.fyi/FontAwesome/edit

When user clicks on edit button, show a form with the following inputs and an Update button:

Name
Twitter
Github
email
Short Bio (multiline text input)
Bio (multiline text input)
Status (select box with [{value: 0, label: "Unconfirmed"}, {value: 1, label: "Confirmed"}, {value: 2, label: "Rejected"}]

To fetch speakers details for the admin, use this query:

query{
  adminEvents(id: 171, 
      token: token, id: 1062 ){
adminSpeakers{
    id
    name
    twitter
    github
    email
    shortBio
    bio
    status
}
    }
    }
  }

The gql to execute is when user cliks on Update button is:

mutation{
  updateSpeaker(id: 1062 
      email: "[email protected]",
      github: "gsans",
      name: "Gerard Sans",
      shortBio: "",
      status: 1,
      twitter: "gerardsans"    
      token: token)
  {
        name
    twitter
    github
    email
    shortBio
    bio
    status
  }
}

expo web failing at start

The error:

web  Starting Webpack on port 19006 in development mode.
(node:7716) UnhandledPromiseRejectionWarning: ValidationError: webpack Dev Server Invalid Options

options should NOT have additional properties

    at validateOptions (/home/plpp-2019/.config/yarn/global/node_modules/schema-utils/src/validateOptions.js:32:11)
    at new Server (/home/plpp-2019/.config/yarn/global/node_modules/webpack-dev-server/lib/Server.js:87:5)
    at server (/@expo/[email protected]/src/Webpack.ts:160:20)
    at new Promise (<anonymous>)
    at startAsync (/@expo/[email protected]/src/Webpack.ts:149:18)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at Object.openAsync (/@expo/[email protected]/src/Webpack.ts:203:5)
    at ReadStream.handleKeypress (/[email protected]/src/commands/start/TerminalUI.js:237:9)
(node:7716) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 16)
(node:7716) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Address book integration

The idea is to let users add Contacts to the system from the scanned contacts list.

Looking at the expo documentation, some of the features are only available on iOS, but the important one (addContactAsync) is temporary unavailable on Android.

For iOS is cool because we can actually create a group directly for all the contacts, but I have some doubts this is really useful and add value to the users.

Also, it would be nice to store the contactID in the API.

What do you think? cc @patcito @brentvatne

link from canny: https://expo.canny.io/feature-requests/p/save-new-contact

add progress bar on ticket listing view

On ticket listing, show a progress bar below each ticket name, progress should be calculated with (ticket.quantity_sold*100)/ticket.quantity using https://callstack.github.io/react-native-paper/progress-bar.html

use recoil to keep track of global state

Right now we use localStorage everywhere to read contacts, tickets etc.

We should only use localStorage to read initial state and then use recoiljs to read (we should still write to localStorage for new data).

add search as you type input to schedule list

This is not an admin feature. On schedule tab, add a button on top right with the 🔎 icon. When user clicks on it, open a full screen dialog with an input search on top. User should be able to search through the schedule by typing the following queries:

speakers:"Brent Vatne"
twitter:notbrent
github:brentvatne
tags:react
tags:"react native"
title:"graphql"
description:"testing"
some random text (in this case search through all the fields)

It should be possible to combine these by typing a query like this:
tags:"react native" tags:expo
title:graphql description:testing tags:"react native"

if user wants to search various fields with full text search too, then use the key fts:
fts:"some text" tags:"recoil"

Results should show grouped by day inside a List.AccordionGroup with each accordion parent title being the name of the day of the grouped talks. If no talks are found for a given day, don't show the day.

You can use https://fusejs.io/getting-started/installation.html for search and https://github.com/nepsilon/search-query-parser for parsing.

When list of talks is empty, show this text to help user:
examples:
speakers:"Brent Vatne"
twitter:notbrent
github:brentvatne
tags:react, "react native"
title:"graphql"
description:"testing"
some random text (in this case search through all the fields)

navigation improvements #reacteurope

• move most of the icons in the side bar to tabs at the bottom like in the facebook app:
  
  There should be an icon for Home, Profile, Speakers, Contacts and the last icon should the hamburger menu like on the facebook app, this will open the sidebar with the rest of the options.
• on the schedule screen, move the tab button of each day to the top:
  
• on android, make the back button work on all modal dialogs for qr code scanning modals and other modals

make the web version fully functional (expo web)

• hide all bottom tabs on desktop
• add a drawer section that is open by default on desktop with button on top left to show/hide it
• drawer section should include (in this order) links to:
  • Home
  • Profile
  • Schedule
  • Contacts
  • Speakers
  • Sponsors
  • Attendees

Implement add to contact button in Attendees

When tapping on an attendee, the add to contact button appears but lacks implementation because expo didn't support it but now we can use https://docs.expo.io/versions/latest/sdk/contacts/#contactsaddcontactasynccontact-containerid

Also, in Contacts tab, add a "add to contacts" button next to email for each email.

search attendees interface #reacteurope

• Add a new screen to search for attendees with a text box on top and a list that autocompletes.
• Clicking on a result should take the user to a new screen with user details.
• if user has twitter or email make it possible to open the twitter app on click

use https://github.com/apollographql/react-apollo
Our graphql endpoint is: https://www.react-europe.org/gql

test with this app https://github.com/skevy/graphiql-app

query:

{
  events(slug: "reacteurope-2018") {
       attendees(q:"a", uuid:"f35ad898-fe07-49cc-bd55-c4fbb59ac1b7") {
         id
      lastName
      email
      firstName
      answers {
        id
        value
        question {
          id
          title
        }
      }
      
       }
  }
}

implement scroll animation on speaker screen

• Implement scroll animation similar to the one on the twitter app (see gif below) on speaker and talk details screens. Make use of Animated/Reanimated and gestures.
• make the talk detail screen header similar to the one on speaker screen by using bigger picture on talk details screen (make sure to test workshops where there is more than 1 speaker).

add search as you type input to speakers list

Add an input box on top of speakers list section that allows searching speakers by name. You can use https://callstack.github.io/react-native-paper/searchbar.html for the input and https://fusejs.io/getting-started/installation.html for search.

If user is connected with admin account, add a select box next to the input to select the speakers status (default should be status = 1).

When admin selects another status, reload the speakers list using this query, for example if admin selects status = 0 (unconfirmed):

query{
  adminEvents(id: 171
  token: token){
    id
    adminSpeakers(status: 0){
      id
      name
      twitter etc
    }
  }
}

UI admin signin

In Menu, add a Sign in link. When you user click on it show a signin form with email and password input. Use ReactHookForm for the form https://react-hook-form.com/

The query that needs to be executed is the following graphql query:

mutation{
  signin(email: email, password: password)
}

This will return a token that needs to be stored recoil and localstorage for future use. Redirect user to home screen if login is successful, otherwise show an error message "wrong email or password". If user goes back to signin section, it should say "Sign Out" now instead of sign in and if user clicks on it, delete the token from recoil and localstorage.

In next issue, to check if user is connected as admin, simply check if token exists in recoil (or localstorage when app starts).

open speaker screen when click on a speaker in talk details page

When you click on one of the user below, take the user to the speaker detail screen (which is the same screen but with an emphasis on the speaker), check the Speakers list screen, it's the same link.

improvements

• fix layout when more than one speaker #2
• open speaker screen when click on a speaker in talk details page #3
• open twitter account inc Crew section when click on a crew member #4
• use urql to use the endpoint in async mode (this one's probably for @brentvatne) #5
• allow user to scan their ticket QR code #6

convert all components to hooks with functional components

Get rid of classes and use hooks, replace componentDidMount with useEffect etc.

port to typescript

Get graphql api typing for free:

yarn global add graphqurl

Then run:

gq https://www.react-europe.org/gql --introspect > schema.gql

Paste the result on the left column here https://graphql-code-generator.com/#live-demo
Click on the generate button, get ts typescript (latest version here).

drag and drop speakers to update display order in admin mode

When in admin view of speakers list, allow admin to drag and drop speakers in the list to modify the order in which speakers are displayed. Everytime a speaker is dragged to a new place, execute gql to update the displayOrder of each speakers in the list.

Useful lib: https://github.com/computerjazz/react-native-draggable-flatlist

outstanding issues for release

A few things that would be nice to fix:

• when offline the hamburger icon is missing and speakers and sponsors logos are missing (these are fetched from gql)
• momentjs warnings

upgrade to react navigation v5

See migration guide for help https://reactnavigation.org/docs/upgrading-from-4.x

fix layout when more than one speaker in talk details screen

use react-apollo to use the endpoint in async mode #reacteurope

https://github.com/apollographql/react-apollo
Our graphql endpoint is: https://www.react-europe.org/gql

test with this app https://github.com/skevy/graphiql-app

The query is here https://github.com/react-europe/react-europe-2018-mobile/blob/react-europe/src/data/schedulequery.js

Also, make sure I'm importing the hard coded json file only once with imports/exports in many files.

Important:

• the app should work offline on first launch by loading the schedule from here, it already does work this way
• if there is network, execute the following gql query first on start in order not to waste the user bandwidth everytime the app is started to check if the next five talks have change:

{
  events(slug: "reacteurope-2018") {
       status{
        nextFiveScheduledItems { 
          id
    }
  }
}
}

If the talks have changes, execute the whole gql query here and update the whole schedule.

• get rid of urql code

add edit event form for admin

When user click on Menu, add a "Edit Event" section below Editions if admin is connected. When user clicks on it, it should show a page with top tabs (similar to schedule top tabs). The tabs should be:

• Main
• Details
• Call for paper
• Social
• Invoice
• Social

It should show a for on each tab to edit some of the even properties. Here is the breakdown of the query to execute:

mutation {
  updateEvent(id: `171` token: token

   ## Main tab form
    name: "" # input text
    tagLine: "" # multiline input text
    organizers: "" # multiline input text
    description: "" # multiline input text
    startDate: "" # date + time select
    endDate: "" # date + time select
    cocUrl: "" # input text
    organizerEmail: "" # input text email
    
    ## Details tab
    customDomain: "" # input text
    sponsorPdfUrl: "" # input text
    speakersLegend: "" # multiline input text
    scheduleLegend: "" # multiline input text
    ticketsLegend: "" # multiline input text
    gettingThereLegend: "" # multiline input text
    copyrightsLegend: "" # multiline input text
    hotelsList: "" # multiline input text
    
    # Call for paper tab
    cfpRules: "" # multiline input text
    cfpForceGithub: "" # boolean checkbox
    cfpLengthLegend: "" # numeral input text
    cfpStartDate: "" # date + time select
    cfpEndDate: "" # date + time select
    
    # Social tab
    twitterHandle: "" # input text
    facebookUrl: "" # input text
    websiteUrl: "" # input text
    
    # invoice tab
    invoiceAddress: "" # multiline input text
    invoiceVatNumber: "" # multiline input text
    invoiceCompanyName: "" # multiline input text
        
  ){
    name
    tagLine
    description
  }
}

Add ticket section for admin

Add Ticket section in menu for admin.

• When user clicks on Tickets, it should show the list of tickets and when the user clicks on a ticket it show an edit form.

gql for list of tickets is query { adminEvents { tickets}}

Form should show:

Name
Description (multi line)
Quantity
Max per order
Price (display amount divided by 10000 but make sure to send the actual value multiplied by 10000)
Start date
End date
thankYouText (multiline)
mobileMessage (multiline)

includeVat (checkbox)
showVat (checkbox) label: Show VAT to customers on tickets listing.
showDaysLeft (checkbox) label: Show how many days are left until tickets go off sale.
showTicketsLeft (checkbox) label: Show how many tickets are left to customers.
showTicketsBeforeStart (checkbox) label: Show tickets to customers before they go on sale.
showTicketsPriceBeforeStart (checkbox) label: Show ticket price. (only show this checkbox if showTicketsBeforeStart is true)

• show a + button in menu Speakers section before the > arrow, when user clicks on it, show a create form to create tickets
• on top of tickets list, put a search as you type box similar to speakers

use env to check conference edition

For now, the conference slug is hard coded in the src/constants/index.ts with value reacteurope-2019 (you can test reacteurope-2020 and reacteurope-2018).

Use a .dotenv file to set its value, see https://docs.expo.io/guides/environment-variables/

port the UI to react native paper

Port all component to the react native paper to get unified style / UX across the app.

https://callstack.github.io/react-native-paper/

add create speaker form for admin

In Menu, where it says Speakers, add a + icon just before the > arrow.
When admin clicks on +, take user to a form (same as fields as edit form) to create a new speaker using the createSpeaker gql endpoint.

edition switching improvements

• when switching to another edition, show a spinner in a transparent overlay (or a full size dialog with blue background if simpler) while the app reloads and then redirect to Home tab.
• use current edition slug as AsyncStorage key, that is to say, instead of doing AsyncStorage.setItem('@MySuperStore2019', foo), do AsyncStorage.setItem(@${currentEdition.slug}Store, foo). This way, when loading another edition, users tickets from another edition do not appear in profile tab like it does right now which is a bit confusing.