airyhq / mobile Goto Github PK

dependent on #22 (Display templates) which should be done first

To do

• enable selecting of templates
• enable sending of templates

Add sort by selected Item and set height of component to length of channels

If you try to Log Out, nothing happens.

Expected behaviour:

User logs out and sees Login screen

Current State

• Right now on mobile we do not have a CI/CD workflow

To do

• add a CI/CD workflow

• render image and/or video attachments for sources:

• chatplugin

• facebook

• google

Not all the sources support all attachments so we should make this component a little more smarter and have dynamic rendering of the attachments.

We pass a prop something like [.photo, .file, .template] or [.photo] and it will render dynamically depending on what's in that array.

Changing the state of a conversation from ConversationList does not work as expected.

Steps to reproduce:

1. Login
2. swipe to the left on a conversation
3. click on the button which switches the state
4. see error

Current State

• on the current version of develop, auth fails after writing the email and password in Auth0; seems to be a react-native-webview error

steps to reproduce:

• login to an organization instance on mobile with the organization name, email, and password

Error:

e {"_dispatchInstances": {"_debugHookTypes": null, "_debugID": 2243, "_debugNeedsRemount": false, "_debugOwner": {"_debugHookTypes": null, "_debugID": 2234, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0.11149900034070015, "actualStartTime": 3023365.982429, "alternate": [FiberNode], "child": [FiberNode], "childLanes": 0, "dependencies": null, "elementType": [Function WebView], "firstEffect": [Circular], "flags": 133, "index": 0, "key": null, "lanes": 0, "lastEffect": [FiberNode], "memoizedProps": [Object], "memoizedState": [Object], "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": [Object], "return": [FiberNode], "selfBaseDuration": 0.06372699979692698, "sibling": [FiberNode], "stateNode": [WebView], "tag": 1, "treeBaseDuration": 0.09818800026550889, "type": [Function WebView], "updateQueue": [Object]}, "_debugSource": {"columnNumber": 24, "fileName": "/Users/audreykadjar/mobile/node_modules/react-native-webview/lib/WebView.ios.js", "lineNumber": 264}, "actualDuration": 0.009960999712347984, "actualStartTime": 3023366.0802450003, "alternate": {"_debugHookTypes": null, "_debugID": 2243, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0.013033000286668539, "actualStartTime": 3024389.5549390004, "alternate": [Circular], "child": null, "childLanes": 0, "dependencies": null, "elementType": "RNCWebView", "firstEffect": null, "flags": 4, "index": 0, "key": "webViewKey", "lanes": 0, "lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": [Object], "return": [FiberNode], "selfBaseDuration": 0.009823000058531761, "sibling": null, "stateNode": [ReactNativeFiberHostComponent], "tag": 5, "treeBaseDuration": 0.009823000058531761, "type": "RNCWebView", "updateQueue": null}, "child": null, "childLanes": 0, "dependencies": null, "elementType": "RNCWebView", "firstEffect": null, "flags": 4, "index": 0, "key": "webViewKey", "lanes": 0, "lastEffect": null, "memoizedProps": {"cacheEnabled": true, "decelerationRate": undefined, "injectedJavaScript": undefined, "injectedJavaScriptBeforeContentLoaded": undefined, "injectedJavaScriptBeforeContentLoadedForMainFrameOnly": true, "injectedJavaScriptForMainFrameOnly": true, "javaScriptEnabled": true, "messagingEnabled": true, "onContentProcessDidTerminate": [Function anonymous], "onError": [Function onError], "onFileDownload": undefined, "onHttpError": [Function anonymous], "onLoadingError": [Function anonymous], "onLoadingFinish": [Function anonymous], "onLoadingProgress": [Function anonymous], "onLoadingStart": [Function anonymous], "onMessage": [Function anonymous], "onNavigationStateChange": [Function onNavigationStateChange], "onScroll": undefined, "onShouldStartLoadWithRequest": [Function anonymous], "scalesPageToFit": true, "sharedCookiesEnabled": true, "source": [Object], "style": [Array], "useSharedProcessPool": true}, "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": {"cacheEnabled": true, "decelerationRate": undefined, "injectedJavaScript": undefined, "injectedJavaScriptBeforeContentLoaded": undefined, "injectedJavaScriptBeforeContentLoadedForMainFrameOnly": true, "injectedJavaScriptForMainFrameOnly": true, "javaScriptEnabled": true, "messagingEnabled": true, "onContentProcessDidTerminate": [Function anonymous], "onError": [Function onError], "onFileDownload": undefined, "onHttpError": [Function anonymous], "onLoadingError": [Function anonymous], "onLoadingFinish": [Function anonymous], "onLoadingProgress": [Function anonymous], "onLoadingStart": [Function anonymous], "onMessage": [Function anonymous], "onNavigationStateChange": [Function onNavigationStateChange], "onScroll": undefined, "onShouldStartLoadWithRequest": [Function anonymous], "scalesPageToFit": true, "sharedCookiesEnabled": true, "source": [Object], "style": [Array], "useSharedProcessPool": true}, "ref": {"current": [ReactNativeFiberHostComponent]}, "return": {"_debugHookTypes": null, "_debugID": 2241, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0.020535999909043312, "actualStartTime": 3023366.0712, "alternate": [FiberNode], "child": [Circular], "childLanes": 0, "dependencies": null, "elementType": "RCTView", "firstEffect": [Circular], "flags": 4, "index": 0, "key": null, "lanes": 0, "lastEffect": [Circular], "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 0.007612999994307756, "sibling": null, "stateNode": [ReactNativeFiberHostComponent], "tag": 5, "treeBaseDuration": 0.014136000070720911, "type": "RCTView", "updateQueue": null}, "selfBaseDuration": 0.006523000076413155, "sibling": null, "stateNode": {"_children": [Array], "_internalFiberInstanceHandleDEV": [Circular], "_nativeTag": 167, "viewConfig": [Object]}, "tag": 5, "treeBaseDuration": 0.006523000076413155, "type": "RNCWebView", "updateQueue": null}, "_dispatchListeners": [Function anonymous], "_targetInst": {"_debugHookTypes": null, "_debugID": 2243, "_debugNeedsRemount": false, "_debugOwner": {"_debugHookTypes": null, "_debugID": 2234, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0.11149900034070015, "actualStartTime": 3023365.982429, "alternate": [FiberNode], "child": [FiberNode], "childLanes": 0, "dependencies": null, "elementType": [Function WebView], "firstEffect": [Circular], "flags": 133, "index": 0, "key": null, "lanes": 0, "lastEffect": [FiberNode], "memoizedProps": [Object], "memoizedState": [Object], "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": [Object], "return": [FiberNode], "selfBaseDuration": 0.06372699979692698, "sibling": [FiberNode], "stateNode": [WebView], "tag": 1, "treeBaseDuration": 0.09818800026550889, "type": [Function WebView], "updateQueue": [Object]}, "_debugSource": {"columnNumber": 24, "fileName": "/Users/audreykadjar/mobile/node_modules/react-native-webview/lib/WebView.ios.js", "lineNumber": 264}, "actualDuration": 0.009960999712347984, "actualStartTime": 3023366.0802450003, "alternate": {"_debugHookTypes": null, "_debugID": 2243, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0.013033000286668539, "actualStartTime": 3024389.5549390004, "alternate": [Circular], "child": null, "childLanes": 0, "dependencies": null, "elementType": "RNCWebView", "firstEffect": null, "flags": 4, "index": 0, "key": "webViewKey", "lanes": 0, "lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": [Object], "return": [FiberNode], "selfBaseDuration": 0.009823000058531761, "sibling": null, "stateNode": [ReactNativeFiberHostComponent], "tag": 5, "treeBaseDuration": 0.009823000058531761, "type": "RNCWebView", "updateQueue": null}, "child": null, "childLanes": 0, "dependencies": null, "elementType": "RNCWebView", "firstEffect": null, "flags": 4, "index": 0, "key": "webViewKey", "lanes": 0, "lastEffect": null, "memoizedProps": {"cacheEnabled": true, "decelerationRate": undefined, "injectedJavaScript": undefined, "injectedJavaScriptBeforeContentLoaded": undefined, "injectedJavaScriptBeforeContentLoadedForMainFrameOnly": true, "injectedJavaScriptForMainFrameOnly": true, "javaScriptEnabled": true, "messagingEnabled": true, "onContentProcessDidTerminate": [Function anonymous], "onError": [Function onError], "onFileDownload": undefined, "onHttpError": [Function anonymous], "onLoadingError": [Function anonymous], "onLoadingFinish": [Function anonymous], "onLoadingProgress": [Function anonymous], "onLoadingStart": [Function anonymous], "onMessage": [Function anonymous], "onNavigationStateChange": [Function onNavigationStateChange], "onScroll": undefined, "onShouldStartLoadWithRequest": [Function anonymous], "scalesPageToFit": true, "sharedCookiesEnabled": true, "source": [Object], "style": [Array], "useSharedProcessPool": true}, "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": {"cacheEnabled": true, "decelerationRate": undefined, "injectedJavaScript": undefined, "injectedJavaScriptBeforeContentLoaded": undefined, "injectedJavaScriptBeforeContentLoadedForMainFrameOnly": true, "injectedJavaScriptForMainFrameOnly": true, "javaScriptEnabled": true, "messagingEnabled": true, "onContentProcessDidTerminate": [Function anonymous], "onError": [Function onError], "onFileDownload": undefined, "onHttpError": [Function anonymous], "onLoadingError": [Function anonymous], "onLoadingFinish": [Function anonymous], "onLoadingProgress": [Function anonymous], "onLoadingStart": [Function anonymous], "onMessage": [Function anonymous], "onNavigationStateChange": [Function onNavigationStateChange], "onScroll": undefined, "onShouldStartLoadWithRequest": [Function anonymous], "scalesPageToFit": true, "sharedCookiesEnabled": true, "source": [Object], "style": [Array], "useSharedProcessPool": true}, "ref": {"current": [ReactNativeFiberHostComponent]}, "return": {"_debugHookTypes": null, "_debugID": 2241, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0.020535999909043312, "actualStartTime": 3023366.0712, "alternate": [FiberNode], "child": [Circular], "childLanes": 0, "dependencies": null, "elementType": "RCTView", "firstEffect": [Circular], "flags": 4, "index": 0, "key": null, "lanes": 0, "lastEffect": [Circular], "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 0.007612999994307756, "sibling": null, "stateNode": [ReactNativeFiberHostComponent], "tag": 5, "treeBaseDuration": 0.014136000070720911, "type": "RCTView", "updateQueue": null}, "selfBaseDuration": 0.006523000076413155, "sibling": null, "stateNode": {"_children": [Array], "_internalFiberInstanceHandleDEV": [Circular], "_nativeTag": 167, "viewConfig": [Object]}, "tag": 5, "treeBaseDuration": 0.006523000076413155, "type": "RNCWebView", "updateQueue": null}, "bubbles": undefined, "cancelable": undefined, "currentTarget": {"_children": [], "_internalFiberInstanceHandleDEV": {"_debugHookTypes": null, "_debugID": 2243, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0.009960999712347984, "actualStartTime": 3023366.0802450003, "alternate": [FiberNode], "child": null, "childLanes": 0, "dependencies": null, "elementType": "RNCWebView", "firstEffect": null, "flags": 4, "index": 0, "key": "webViewKey", "lanes": 0, "lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": [Object], "return": [FiberNode], "selfBaseDuration": 0.006523000076413155, "sibling": null, "stateNode": [Circular], "tag": 5, "treeBaseDuration": 0.006523000076413155, "type": "RNCWebView", "updateQueue": null}, "_nativeTag": 167, "viewConfig": {"Commands": [Object], "Constants": [Object], "Manager": "RNCWebViewManager", "NativeProps": [Object], "baseModuleName": "RCTView", "bubblingEventTypes": [Object], "directEventTypes": [Object], "uiViewClassName": "RNCWebView", "validAttributes": [Object]}}, "defaultPrevented": undefined, "dispatchConfig": {"registrationName": "onLoadingError"}, "eventPhase": undefined, "isDefaultPrevented": [Function functionThatReturnsFalse], "isPersistent": [Function functionThatReturnsTrue], "isPropagationStopped": [Function functionThatReturnsFalse], "isTrusted": undefined, "nativeEvent": {"canGoBack": false, "canGoForward": false, "code": -1022, "description": "The resource could not be loaded because the App Transport Security policy requires the use of a secure connection.", "didFailProvisionalNavigation": true, "domain": "NSURLErrorDomain", "loading": false, "target": 167, "title": "Log in to Airy Core Auth0 integration", "url": "https://airyhq.us.auth0.com/u/login?state=hqFo2SBaMFl5Y3lsRmNvVnZpRXF4SjBTZ0g0QXpnTHA3ampTYaFur3VuaXZlcnNhbC1sb2dpbqN0aWTZIFFWZExhV2EzR0RldFoxOFpXWGRJVjlZY2tOenA3R25Jo2NpZNkgVGtIbVp6U3lrNnhvcWc1UWNoNWpORU1NTVFWa0lnVHmlb3JnaWS0b3JnX0xRNXZxbEV2cGdSbjIwRHWnb3JnbmFtZa5qdXN0LXRoZS10b25pYw"}, "target": {"_children": [], "_internalFiberInstanceHandleDEV": {"_debugHookTypes": null, "_debugID": 2243, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0.009960999712347984, "actualStartTime": 3023366.0802450003, "alternate": [FiberNode], "child": null, "childLanes": 0, "dependencies": null, "elementType": "RNCWebView", "firstEffect": null, "flags": 4, "index": 0, "key": "webViewKey", "lanes": 0, "lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": [Object], "return": [FiberNode], "selfBaseDuration": 0.006523000076413155, "sibling": null, "stateNode": [Circular], "tag": 5, "treeBaseDuration": 0.006523000076413155, "type": "RNCWebView", "updateQueue": null}, "_nativeTag": 167, "viewConfig": {"Commands": [Object], "Constants": [Object], "Manager": "RNCWebViewManager", "NativeProps": [Object], "baseModuleName": "RCTView", "bubblingEventTypes": [Object], "directEventTypes": [Object], "uiViewClassName": "RNCWebView", "validAttributes": [Object]}}, "timeStamp": 1633533965081, "type": undefined}

As a user can have >100K conversations in one account. It is important to have the possibility to filter for specific things.

As the iOS version of filtering still match a good design, we can even focus specific invision screens.

InVision:
https://projects.invisionapp.com/d/main?origin=v7#/console/20535259/431383440/inspect?scrollOffset=216

Screenshot:

As the bubble of a user or contact takes 100% width its hard to see who sent the message

If you scroll to the bottom of the conversationList, next 50 conversations should get fetched, but this doesn't work properly

Steps to reproduce:

1. Login to mobile app
2. Go the filters (top right corner)
3. set any filter
4. close filters
5. re-open filters
6. notice "Reset" button top right corner
7. click on the button to reset all filters
8. button should disappear as no filters set

Current State

• we currently get a warning about ConversationList's + MessageList's rendering:

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {“contentLength”: 5000, “dt”: 607, “prevDt”: 1151}

When entering a conversation, the last messages sent should be displayed (bottom of messageList)

Once a system user selects a certain conversation within the conversation list on the app, they should be directed to that conversation view.

The conversation view can look something like this:

Each conversation, when selected, should show:

• Name
• Avatar (if applicable; if not - we will assign a generic one)
• Conversation State (open or closed)
• Connected source that the contact is communicating through
• Date and Time of each message
• All tags assigned to that specific conversation

Instead of photos, attachments and templates available next to the input bar -- we should include emojis, attachments, and templates.

Templates will not be able to be created via the app, system users will only be able to send available/previously created templates.

Template Preview

Currently in the web version on the Inbox, we show a large preview of the templates.

However: In the react native app, we should include the title and a brief preview of the templates, scalable to the screen size. We should include a vertical scroll bar for system users to scroll through their available templates and choose the correct one.

We do not need a minimized preview of the selected template in the input bar, but rather we will send the template automatically once it is selected from the available templates.

To do
--> add the rendering of Facebook-specific templates

• buttonTemplate
• generic templates
• media templates

Note: Facebook supports images and videos attached to templates

While switching between Inbox and Settings Tab, I noticed that the height of the navigationBar are not equal which looks odd.

To do
We first need to add components that are used for the rendering of templates.

For example, some sources (eg. Facebook) support images and videos attached to templates so we have to add those components before adding the rendering of source-specific templates.

• add the components library: we need some of these components for the templates (eg. Carousel)
• add the necessary components inrender/components (eg. Video, Image...)

To do

• The Inbox should display source-specific templates that were created via POST /templates.create

As a system user with an Airy Cloud instance, I want to be able to log into my instance on the react native app.

The log in process will also be via Auth0 and will look like the webapp version:

This will be the first page that users will see when they open the app.

If the user enters the wrong email and password, the page will also reflect the webapp response:

Many UI problems and dealignments need to be fixed to look like the iOS version.

Currently, you can only switch conversations from open <> closed when you're within a specific conversation. You can't switch the state from the conversation list.

Ideally, users should be able to easily switch from open <> closed regardless of whether they are in conversation view or on the conversation list.

To do
--> add the rendering of Chat Plugin-specific templates

• RichCard
• Carousel
• add template icon for the last message preview

Some Avatars are not displayed correctly!
If the avatarUrl is wrong, a fallback avatar should be displayed instead

If the user is using "Predictive" on the keyboard, the nothing found message is hidden behind it.

Steps to reproduce

1. enable "Predictive" in settings/general/keyboard/predictive
2. search for a name which is not in your conversationList (e.g. 'sjqidosjdi')
3. see error

We are consuming a lot of minutes of building and each branch takes a long time to be checked because the steps we have are really heavy. Let's change it to just check when we open a branch against main, which is when we are gonna release to AppStore and PlayStore.

ScrollView Horizontal from Generic Template FB does not scroll until the end

fix warnings

WARN  Require cycle: src/storage/realm.ts -> src/model/Conversation.ts -> src/storage/realm.ts

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
 WARN  Require cycle: src/components/CurrentState.tsx -> src/views/inbox/MessageList/MessageListHeader.tsx -> src/components/CurrentState.tsx

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.

Did not receive response to shouldStartLoad in time, defaulting to YES

[bug observed on testFlight v4, Tedi and Just the tonic]

• Changing State Conversation doesn't work when the conversations first load.
• Changing state works when the conversations are filtered and after we reset.

To reproduce:

• log in to an instance (eg. Just the Tonic / Tedi) on testFlight v4
• change the state with swipe on one conversation, after all the conversations have loaded (doesn't work)
• filter conversations and change the state (it works)
• reset the filter and change the state (it works)

e.g. open and close a conversation, reset filters, maybe loading further messages/conversations

• improve fetching conversations with react.memo
• improve typing

Once the system user successfully logs into their Airy react native app, they will directed to the Inbox, which will consist of the conversation list.

The conversation list will look something like this:

We need to include a vertical scroll bar for users to be able to scroll through their conversations.

Each individual conversation listed should show:

• Name
• Avatar (if applicable; if not - we will assign a generic one)
• One line preview of most recent message
• Conversation State (open or closed)
• Connected source that the contact is communicating through
• Date and Time of most recent message

The buttons at the bottom should include:

• Inbox
• Settings

Within settings, we should include:

• Option to log out (will direct user back to auth0 login page)
• Contact Us (prompts the creation of a new email to [email protected])
• FAQ
• T&Cs
• Privacy Policy (https://airy.co/privacy-policy)

Currently, the last message sent does not always appear as the preview of the conversation in the conversation list.

We need to find a way that the last message - whether sent or received - is the preview of the conversation.

To do
--> add the rendering of Google-specific templates

• richCard
• Carousel

Current State

• we have a lot of TypeScript any in our code

To do

• fix Typescript types

• our current CI/CD is too heavy, find a way to make it lighter/run only on request or pull requests.

After resetting the filters, all filters get removed but the UI does not update.

To reproduce:

1. Login
2. Open filters
3. select any filter you like
4. click 'Reset' in appearing top right corner
5. see bug

Version:
0.1.7 (7) TestFlight

• - add getItemLayout on ConversationList
• - fixed setTimeout conversation load bug
• - investigate conversations bug with filtering
• - fix padding of carousel template