hooligram / hooligram-client Goto Github PK

Subtask of #57

• Fetch min version from backend
• If version on the app < min version lock the whole application to a single screen
• The screen should provide link to the Hooligram download page on play store

It is best to implement this as soon as v1 so we won't have issues forcing clients to update on major releases.

Issues:

• Chat should scroll down after a new message so that it's visible
• Add chat sound effect.
• Don't allow newline like in WhatsApp.
• Move the send button to the keyboard (bottom right).
• Fix message input expanding horizontally for long messages.

We need to figure out a better name for package.json files since @hooligram/... prefix will cause can't find module name error from tests.

I realize we maybe need to force client to fetch migration script from server, otherwise there is no way the client can get the latest migration scripts without upgrade or codepush.

I have sketched some rough strategy but I'm not sure if this is over the top nor do I know what's the best practice for mobile database migration, but here it is:

I think we should rename presenter to container since I think it's better to use a common Redux.js verbs.

Refer #80.

The file names are not consistent and it's not obvious why certain name convention is used. For example hooligramApi.js & persistence-api.js

Currently will get error if not on remote debugging

Components that know about the store should be separated into a containers directory.

1. rename INIT to APP:STARTUP so it becomes more obvious
2. differentiate between WEBSOCKET actions and API actions
3. dispatch persistence & api actions in correct order

Linked issue: hooligram/hooligram-server#53

https://www.npmjs.com/package/react-native-push-notification

use react-native-firebase push notifications module (https://rnfirebase.io/)

Compared to wscat the app websocket seems to be slow and sometimes it fails to capture success/failure event from the server.

react-native-dotenv has been very buggy in picking up changes in .env file -- it is very annoying to add, for example, a new line just to trigger it to pick up the changes and even then it may not work and even when it does work you cannot remove the added new line or else your changes to .env will be ignored again without you realizing it.

I suggest we migrate to react-native-config which I have used at work. Never had a problem with it so far.
link: https://github.com/luggit/react-native-config

I think we should put all the action types in one place. Actions are/should be the only way to change the state of the app. Putting them in one place will make it easy to understand the code base. As of now, they are scattered across the app. If we put all possible action types in one place, it will be easier to draw out the Finite State Machine (FSM) later.

run test pre-push, push should fail if not all tests pass and message should be displayed.

https://facebook.github.io/react-native/docs/signed-apk-android

This will help to debug the issue with websocket onmessage not getting events sometimes. I think it might be due to the development environment.

I think we should move hooligram-api & persistence-api directories to app\apis directory. Once in there, let's name them hooligram & persistence

The expression used against action type in persistence middleware is incorrect:

if (
  action.type.startsWith('PERSISTENCE:') && (
    !action.type.match(/API:(.*)_SUCCESS/) || 
    !action.type.match(/API:(.*)_FAILURE/)
  )
) {
  // do not save state to storage
  return
}
// save state to storage

When:
Action is dispatched that is not an api response

Expected:
State should not be persisted

Actual:
State is persisted

So far we've been using whatsapp theme color. Need to have our own.

• Fabric.io is a simple tool to distribute apks for android and ios apps
• Fastlane is a simple tool to release android & ios apps

Subtasks:

• #64 design local device database
• #73 implement user & message tables
• #78 design migration strategy (tentative only, to be discussed and decided on)
• server#33 fetch migration version from backend

Things to consider:

• Migration. Interesting pattern: andpor/react-native-sqlite-storage#157
• Version update checking & enforcement #69
• Reconnection

• Screen to submit verification code
• If code is correct, proceeds to a initialization screen
• Else stays

So far, every time the app starts up, it will go through onboarding. Once #47 is merged, we should work on enabling the app to:

1. authenticate on startup
2. decide based on authentication outcome whether to go through onboarding or navigate right away to global chat screen.

• update local storage everytime state changes
• on app startup, define initial state using persisted state from storage
• user of persistence must be agnostic of underlying persistence implementation ie api user doesn't care if using AsyncStorage vs SQLite etc.

I just found a way to connect to local server: storybook-eol/react-native-storybook#107

I will add an instruction to README.md something like the following

1. Assume local server is running on ws://localhost:8080 (see hooligram-server README on how to run server locally)
2. set API_HOST=ws://localhost:8080 in .env file
3. run emulator
4. adb tcp:8080 tcp:8080
5. yarn android
6. check out the redux logger and you should see API_INIT_SUCCESS is being logged

This is ugly and, most importantly, likely to cause issues in the future:

yarn install v1.12.3
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > [email protected]" has incorrect peer dependency "react-native-vector-icons@^4.2.0".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/plugin-proposal-class-properties > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/plugin-proposal-object-rest-spread > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/plugin-proposal-optional-chaining > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/plugin-transform-flow-strip-types > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
warning "babel-preset-react-native > @babel/plugin-transform-react-jsx > @babel/[email protected]" has incorrect peer dependency "@babel/[email protected]".
[4/4] Building fresh packages...
warning Your current version of Yarn is out of date. The latest version is "1.13.0", while you're on "1.12.3".

Reasoning:

• Same reasoning for why it's a good idea to separate navigation from the store
• I don't see any benefit of putting it there
• Form states should be local to the component
• It will simplify the shape of the store

Currently all text files are defined within components. I don't think this is proper practice for localization. What do you think? @cglotr

profile-info screen:

• set username
• click next to complete onboarding and proceed to main screen

Not do:

• photo upload
• emoticons in username

Subtask preceding #57

https://docs.google.com/document/d/1DQt11uqzAqoXIvc3vQRMOQEPUA__ZJJ3yRLpFgc0ZDg/edit?usp=sharing