react-europe / react-europe-mobile Goto Github PK
View Code? Open in Web Editor NEWThis project forked from brentvatne/nodevember-2017-mobile
Mobile app for the React Europe conference
This project forked from brentvatne/nodevember-2017-mobile
Mobile app for the React Europe conference
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
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.
Get rid of classes and use hooks, replace componentDidMount with useEffect etc.
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
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.
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).
See migration guide for help https://reactnavigation.org/docs/upgrading-from-4.x
Add Ticket section in menu for admin.
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)
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.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)
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
}
}
}
}
}
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
}
}
}
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
}
}
A few things that would be nice to fix:
Port all component to the react native paper to get unified style / UX across the app.
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.
this are some features that was mentioned in the hackathon and also others I think would be nice apart from the others already mentioned:
I can add some of them, feel free to start one!
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).
Needs some improvement on the backend from @patcito. Will update this later.
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:
{
events(slug: "reacteurope-2018") {
status{
nextFiveScheduledItems {
id
}
}
}
}
If the talks have changes, execute the whole gql query here and update the whole schedule.
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:
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
}
}
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.
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.
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).
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.
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
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.
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
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/
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.