shootismoke / webapp Goto Github PK

It has been released!

https://blog.tailwindcss.com/tailwindcss-v2

As visible in src/frontend/localization/languages/en.json

The outdated link exists in the share text on iOS.

Thanks for the excellent app!

Design is here: https://www.figma.com/file/mNYulowqIWQmBw2dtZ3CpK/%5BSource-of-Truth%5D---Mobile-%26-Desktop-App?node-id=16%3A1530

React-select docs: https://react-select.com/components

To show in the "Latest Stories" section

Do we keep amplitude?

oh, I forgot to mention another difference between desktop vs. mobile: the logo is slightly bigger (160px width) on desktop then mobile (128px). I think the equivalent is 10rem… do you think you could change this later?

e.g. a mask shouldn't be shown here:

https://docs.expo.io/versions/v35.0.0/guides/running-in-the-browser/

Could we use some of the components from React Native directly in browser? I'm thinking about the Cigarettes component

cc @florenciasilva

The dockerfile could be:

• based off node (probably the alpine one)
• add mongodb inside, run it
• set the correct ENV vars
• run yarn install, next build, and next start
• expose the next prot

Based on same format as the mobile app.

We use cypress to do e2e testing. We should add more tests.

Some ideas I have:

Components:

• Search Bar
  • #43 Type inside search bar shows results from Algolia
  • #43 Click on a result takes to /city?lat=...&lng=...
• Ranking
  • #38 Click on city card goes to /city/{slug}
• AdSection
  • Can scroll right
• BlogSection
  • Can scroll
• Footer
  • #38 Correct link to FAQ

Home page:

• Test "Use my location" button (might be hard)

City page:

• Shows cigarettes after some time
• Click on weekly shows cigs * 7
• Click on monthly shows cigs * 30

Feel free to pick some tests, or add new ones you can think of!

Steps to reproduce:

1. Open https://shootismoke.app/city
2. Open any place and see stats there
3. Select another city

Finally everything stucks and page stopped to respond on any actions

Chrome Version 101.0.4951.64 (Official Build) (x86_64)

I checked Safari and everything works
I wanted to find root cause of this problem, but unfortunately the project doesn't starts in web env locally

Summary

The current algorithm for find the N closest cities to the current location is very naive. We could optimize it.

Problem Definition

If you go to the page of a city (example here), there's a ranking section, which shows the 6 closest cities to the current location, and their cigarettes information.

The current algorithm to calculate these closest cities is the following:

• We have a hardcoded list of 1000 cities, and their GPS, name and air quality information. This list can be found here: https://raw.githubusercontent.com/shootismoke/cities/master/all.json
• Gatsby loads these 1000 cities at build time:

  webapp/gatsby-node.js

  Lines 9 to 12 in dee5ac1

  	// Download cities data from our remote API.
  	const populatedCities = await fetch(
  	'https://raw.githubusercontent.com/shootismoke/cities/master/all.json'
  	).then((r) => r.json());

• The RankingSection loads all cities using useStaticQuery:

  webapp/src/components/RankingSection/RankingSection.tsx

  Line 54 in dee5ac1

  const worldCities = useStaticQuery(graphql`

• It then calculates the haversine distances between the current location and all the 1000 cities:

  webapp/src/components/RankingSection/RankingSection.tsx

  Lines 86 to 93 in dee5ac1

  	// We naively calculate the distance from our current city to all the
  	// other cities in the database.
  	const distances = worldCities
  	.map((city) => ({
  	city,
  	distance: haversine(currentCity.gps, city.gps),
  	}))
  	.filter(({ distance }) => distance !== 0) // Remove current city.

• We then sort these distances, and take the first N cities:
  

  webapp/src/components/RankingSection/RankingSection.tsx

  Lines 98 to 104 in dee5ac1

  	// We then sort the distances.
  	distances.sort((a, b) => a.distance - b.distance);
  	// We take the CITIES_TO_SHOW first cities.
  	const citiesToShow = distances
  	.slice(0, CITIES_TO_SHOW)
  	.map(({ city }) => city);

This algorithm is not optimal (O(n^2)). It's okay for 1000 cities, but there are surely better way to find the closest N cities around the current location.

Potential Solutions

• data structures such as r-tree, quad-tree or k-d tree

@mdshamoon laid out the tooling around unit tests in #69 💪 We need to add more unit tests though.

If you are an external contributor, please free to post a message here and choose a couple of components to add unit tests too.