mzogheib / quoll Goto Github PK

This confirms that it has not been changed for malicious purposes.

BE unit tests first, since that's where a lot of the important data transformations happen

• e.g. packages/ui-components
• storybook
• styled-components ... might be tricky to integrate with client?
• example usage import { Button } from '@quoll/ui-components

References:

• https://github.com/cwlsn/rinse-react
• https://storybook.js.org/docs/guides/guide-react/

Current Behaviour

1. Update a filter
2. Existing map data will blink off then on again
3. After the new data has been received it replaces the existing data

Expected Behaviour

1. Update a filter
2. Existing map data stays as is, no flickering
3. After the new data has been received it replaces the existing data

https://facebook.github.io/create-react-app/docs/setting-up-your-editor#formatting-code-automatically

Currently it just sends back activities that are intended to be displayed as a polyline.

Implement to satisfy figma designs, i.e. an entry can be a single place (coordinate) and any activities that happen at this place are wrapped up into that feed entry.

This should then mean that all feed entries have a corresponding map element.

https://www.styled-components.com/

Mobile only?

Every time you change route away from Home onMapMounted is called with mapRef = null, which blows up the google maps instance. This never used to happen.

1. What changed to cause this? This was the last change 8a1bf08
2. Perhaps the referenced implementation was in fact not quite right?
3. Perhaps a cleanup is required on component unmount, which should destroy the map?

• For the map view, need a loader/spinner that implies both the feed and the map are loading

https://www.figma.com/file/c1lLaQ6EiLco1ZhaH3QufaXb/Quoll

Something like:

<Icon.Help size={32} color={green} />

<IconButton.Cross size={32} color={red} onClick={handleClose} />

Currently network requests are done inside the components and don't know much about the redux store.

1. Attempt login
2. If it fails on server then respond appropriately
3. Delete localstorage on FE and BE
4. FE then signs up

Currently plain text dates are sent in the format YYYY-MM-DD, which is what the toshl API expects.

Send something more generic that can then be converted to the expected formats for the toshl, strava and any other APIs. This will likely involve creating a proper date picker on the client side.

Be careful of timezones.

Responsive web support at first. Then investigate react native.

Perhaps something like this. With a dropdown or hamburger menu for nav.
How to display the timeline items? Pull down drawer? Tab between List & Map?

References:

• https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/

• Remove react-scripts and, as much as possible, re-implement everything it did.
• Things to consider,
  • ESLint
  • Prettier
  • Tests
  • Minifying, dev vs prod etc
  • HMR

e.g. add escape to close.

Basically an opportunity to integrate a real modal solution into the FE.

Currently you have to re-connect to the data source(s) every time the server restarts. Implement a basic login and user profile that saves your settings, e.g. access tokens, so that you can login again in future and not have to reconnect.

• Login/signup page or dialog
• Should be able to cancel but nothing will be saved (possible to auth more than one data source at a time? local storage with an expiry?)
• Save to profile when a data source is authorized/deauthorized
• Delete your profile

• They should be considered as 3rd party dependencies
• How to do? Separate repos on github and some how pull them in?

Currently:

• Just CSS using BEM

Consider:

• CSS Modules (supported by CRA)
• Styled components
• SCSS (supported by CRA). Would this be compatible with both above options?

Now with HMR + RHL (#43) the following happens:

1. yarn start
2. Save some code that has a syntax error
3. See in the console output that the code could not be compiled
4. Resolve the syntax error so that the code can be compiled ok
5. See that the entire page refreshes

Ideally, it would just hot swap the fixed module ... but not sure if this is possible.

Issue #418 in the webpack repo might be related.

This seems to be a helpful solution
https://www.freecodecamp.org/news/learn-webpack-for-react-a36d4cac5060/

https://github.com/mzogheib/quoll/wiki/Release-Automation

• If not connected then show connect button
• If connected then show that day's summary, e.g. $45, 12kms, or "none"
• Has an expand icon which grows the item to show the list of activities and a disconnect button

Toshl auth will need to be mocked

auth url: https://toshl.com/oauth2/authorize

docs: https://developer.toshl.com/docs/oauth/

Getting errors like Can't render headers after they are sent to the client. when attempting to refresh auth and the request fails.

Pretty sure error handling is not implemented properly, e.g. may need to pass errors through to next() in the route handlers.

https://expressjs.com/en/guide/error-handling.html

Toshl

• Time
• Amount
• Location name
• Category
• Tag
• Description

Strava

• Time start and end
• Duration (moving and elapsed)
• Total distance
• Average speed
• Description

API docs say it will be returned as is. I guess it should be the client's responsibility to uriEncode it on the way to the Toshl auth page so why would Toshl uriEncode it again?

Refer to this comment in issue #12.

Toshl is not returning state param during oauth flow so it's being faked.
Remove this hack when the parameter starts getting returned.

• Fetch the feed for a date range:
  GET /feed?from=2018-06-01&to=2018-06-01
• Fetch the oauth url for a feed
  GET /feed-auth?source=strava
• Authenticate a feed with an Oauth code
  POST /feed-auth?source=strava&code=1234&userId=1234
• Delete authentication for a feed
  DELETE /feed-auth?source=strava&userId=1234

https://developer.uber.com/docs

• Display data from the history endpoint
• There are no polylines or data to create paths
• Can just use the start and end point and draw a line between the two

OAuth for each 3rd party api is handled via a number of very similar node wrapper packages. See https://github.com/mzogheib/quoll/blob/master/packages/api/package.json.

This isn't very scalable. A more generic/abstract solution would be better.

Ideas:

• Find another 3rd party package that can take a bunch of parameters like urls etc to manage the flow
• Come up with a custom package. This would be another good exercise in adding more packages to the monorepo.

As per figma.
Button that links to settings
Can be opened via the help icon in the sidebar.

Max for per_page is 500, which leads to a reduced subset of locations.
Need to keep fetching more than 500 if necessary.

The solution for #48 only supported local development, i.e. through yarn workspaces.

In order to deploy the app to heroku with these new packages, they'll need to be published to npm so that heroku can run npm install etc.

Lerna will likely be a useful tool here.

This will be a good time to implement an automated changelog solution like conventional commits.

References:

• https://medium.com/hy-vee-engineering/creating-a-monorepo-with-lerna-yarn-workspaces-cf163908965d
• https://docs.npmjs.com/orgs/managing-org-packages

1. Click on an item

2. Highlight it

3. Display infoWindow

4. Click on a map element

5. Display infoWindow

6. Expand summary list

7. Highlight the item

Looks like the queryParams parser is not carrying out uri decoding properly but this only happens sometimes, e.g. = at the end of the base64 encoded string is returned as %25D or whatever.

Can recreate with the following state object
{id: "toshl", token: "z38ph0sozo"}

Should be closely tied to or done together with ISSUE #27

Consider:

• Bundle splitting (vendor vs. main)
• Code splitting
• Minifying, gzip etc
• Hashing bundles
• Assets and public folder. Should index.html, favicon.ico (and anything else?) be in a /public folder? Why?

Useful links:

• https://hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758
• https://www.freecodecamp.org/news/learn-webpack-for-react-a36d4cac5060/

This seems to only happen in this project. Have recreated a simpler version of this project with the exact same structure and it's not an issue there. No idea why.

Observations:

• It was happening on every second reload, i.e. save a file -> ok, save again -> error
• const server = app.listen(app.get('port'), () => {}) in server.js appears to be the culprit. Commenting this out stops the issue altogether. Perhaps it's unable to properly close the server?
• For a while adding nodemon --delay 1 server.js was helping but not anymore
• Handling termination and interrupt signals through graceful shutdown seems to help. But it comes up every now and then.
• This looks related remy/nodemon#1247

[0]       throw er; // Unhandled 'error' event
[0]       ^
[0]
[0] Error: listen EADDRINUSE :::3001
[0]     at Object._errnoException (util.js:1024:11)
[0]     at _exceptionWithHostPort (util.js:1046:20)
[0]     at Server.setupListenHandle [as _listen2] (net.js:1351:14)
[0]     at listenInCluster (net.js:1392:12)
[0]     at Server.listen (net.js:1476:7)
[0]     at Function.listen (/Users/marwan/Documents/dev/#projects/quoll/node_modules/express/lib/application.js:618:24)
[0]     at Object.<anonymous> (/Users/marwan/Documents/dev/#projects/quoll/packages/server/server.js:16:20)
[0]     at Module._compile (module.js:635:30)
[0]     at Object.Module._extensions..js (module.js:646:10)
[0]     at Module.load (module.js:554:32)```

Thoughts

• feature based
• less coupled to the tool, e.g. redux. So a consuming component should just need to import ../date-picker rather than know that it's a container

Currently it all stays on the same tab/window so you leave then come back and lose your state.

Launch in a different tab/window and handle all the logic on the settings page.

Currently it's just JSON files stored on disk (server). Client side also just uses local storage to manage user access with UUIDs.

Can be a simple MongoDB, Firebase etc. Cookies?

References:

• https://medium.com/@dinyangetoh/how-to-build-simple-restful-api-with-nodejs-expressjs-and-mongodb-99348012925d

https://dev.moves-app.com/

Ideas:

• Don't overlap with other path based activity integrations, e.g. Strava
• Could be manual, e.g. choose which integration takes priority for a particular activity type. So, only show cycling on strava and not moves.
• Could be smart. If activity from one integration is fully between another and it has more resolution then display that instead. This could be tricky.
• Display place markers. Ok to overlap with other markers, e.g. Toshl

Needs to fit all markers and polylines every they change